diff --git a/src/other_pages/enable_notification/index.scss b/src/other_pages/enable_notification/index.scss index 90a9966..af0ab9f 100644 --- a/src/other_pages/enable_notification/index.scss +++ b/src/other_pages/enable_notification/index.scss @@ -36,30 +36,34 @@ box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08); box-sizing: border-box; position: absolute; - - // 第一个卡片(最下面) - &--1 { - width: 303.45px; - left: 9px; - top: 114px; - transform: rotate(-2deg); - } - - // 第二个卡片(中间) - &--2 { - width: 301.91px; - left: 22px; - top: 58px; - transform: rotate(1.5deg); - } - + // 第三个卡片(最上面) &--3 { width: 311.91px; left: 0; top: 0; - transform: rotate(-1deg); + transform: rotate(2deg); + } + + // 第二个卡片(中间) + &--2 { + width: 301.91px; + left: 22px; + top: 58px; + transform: rotate(-2deg); + } + + + // 第一个卡片(最下面) + &--1 { + width: 303.45px; + left: 9px; + top: 114px; + transform: rotate(4deg); + } + + } &__avatar { @@ -91,6 +95,9 @@ font-size: 12px; line-height: 1.67; color: rgba(0, 0, 0, 0.8); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } // 标题区域 @@ -159,6 +166,22 @@ height: 100%; } + &__qr_placeholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: #f5f5f5; + } + + &__qr_loading { + font-family: 'PingFang SC'; + font-weight: 400; + font-size: 14px; + color: rgba(0, 0, 0, 0.4); + } + &__qr_text { font-family: 'PingFang SC'; font-weight: 400; @@ -168,5 +191,4 @@ text-align: center; } -} - +} \ No newline at end of file diff --git a/src/other_pages/enable_notification/index.tsx b/src/other_pages/enable_notification/index.tsx index 1cb6a95..1b0d856 100644 --- a/src/other_pages/enable_notification/index.tsx +++ b/src/other_pages/enable_notification/index.tsx @@ -1,30 +1,49 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { View, Text, Image } from '@tarojs/components'; import { GeneralNavbar } from '@/components'; import { useGlobalState } from '@/store/global'; +import httpService from '@/services/httpService'; import './index.scss'; const EnableNotificationPage: React.FC = () => { const { statusNavbarHeightInfo } = useGlobalState() || {}; const { totalHeight = 98 } = statusNavbarHeightInfo || {}; + const [qrCodeUrl, setQrCodeUrl] = useState(''); + + // 获取二维码 + useEffect(() => { + const fetchQRCode = async () => { + try { + const res = await httpService.post('/parameter/many_key', { + keys: 'ServiceAccountQRCode', + }); + if (res.code === 0 && res.data?.ServiceAccountQRCode) { + setQrCodeUrl(res.data.ServiceAccountQRCode); + } + } catch (error) { + console.error('获取二维码失败:', error); + } + }; + fetchQRCode(); + }, []); // 示例消息数据 const exampleMessages = [ { id: '1', - avatar: require('@/static/userInfo/default_avatar.svg'), + avatar: require('@/static/other_pages/albert-avatar.png'), name: 'Albert', content: '发现一家宝藏新球场,周末一起去试试吗?', }, { id: '2', - avatar: require('@/static/userInfo/default_avatar.svg'), + avatar: require('@/static/other_pages/evelyn-avatar.png'), name: 'Evelyn', content: '周五晚混双比赛,寻找NTRP 3.5队友!', }, { id: '3', - avatar: require('@/static/userInfo/default_avatar.svg'), + avatar: require('@/static/other_pages/cici-avatar.png'), name: 'CiCi', content: '我也在黄浦,明早8点晨练打球吗?', }, @@ -64,11 +83,17 @@ const EnableNotificationPage: React.FC = () => { {/* 二维码区域 */} - + {qrCodeUrl ? ( + + ) : ( + + 加载中... + + )} 长按关注👆开启提醒 diff --git a/src/static/other_pages/albert-avatar.png b/src/static/other_pages/albert-avatar.png new file mode 100644 index 0000000..f3c8367 Binary files /dev/null and b/src/static/other_pages/albert-avatar.png differ diff --git a/src/static/other_pages/cici-avatar.png b/src/static/other_pages/cici-avatar.png new file mode 100644 index 0000000..ef31532 Binary files /dev/null and b/src/static/other_pages/cici-avatar.png differ diff --git a/src/static/other_pages/evelyn-avatar.png b/src/static/other_pages/evelyn-avatar.png new file mode 100644 index 0000000..03afdfa Binary files /dev/null and b/src/static/other_pages/evelyn-avatar.png differ