1

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;
   }
 
-}
-
+}

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<string>('');
+
+  // 获取二维码
+  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 = () => {
         {/* 二维码区域 */}
         <View className="enable_notification_page__qr_section">
           <View className="enable_notification_page__qr_wrapper">
-            <Image
-              className="enable_notification_page__qr_image"
-              src={require('@/static/other_pages/qr_code.svg')}
-              mode="aspectFit"
-            />
+            {qrCodeUrl ? (
+              <Image
+                className="enable_notification_page__qr_image"
+                src={qrCodeUrl}
+                mode="aspectFit"
+              />
+            ) : (
+              <View className="enable_notification_page__qr_placeholder">
+                <Text className="enable_notification_page__qr_loading">加载中...</Text>
+              </View>
+            )}
           </View>
           <Text className="enable_notification_page__qr_text">长按关注👆开启提醒</Text>
         </View>