1

src/other_pages/enable_notification/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View, Text, Image, ScrollView } from '@tarojs/components';
+import { GeneralNavbar } from '@/components';
+import { useGlobalState } from '@/store/global';
+import './index.scss';
+
+const EnableNotificationPage: React.FC = () => {
+  const { statusNavbarHeightInfo } = useGlobalState() || {};
+  const { totalHeight = 98 } = statusNavbarHeightInfo || {};
+
+  // 示例消息数据
+  const exampleMessages = [
+    {
+      id: '1',
+      avatar: require('@/static/userInfo/default_avatar.svg'),
+      name: 'Albert',
+      content: '发现一家宝藏新球场，周末一起去试试吗？',
+    },
+    {
+      id: '2',
+      avatar: require('@/static/userInfo/default_avatar.svg'),
+      name: 'Evelyn',
+      content: '周五晚混双比赛，寻找NTRP 3.5队友！',
+    },
+    {
+      id: '3',
+      avatar: require('@/static/userInfo/default_avatar.svg'),
+      name: 'CiCi',
+      content: '我也在黄浦，明早8点晨练打球吗？',
+    },
+  ];
+
+  return (
+    <View className="enable_notification_page" style={{ paddingTop: `${totalHeight}px` }}>
+      <GeneralNavbar title="" showBack={true} />
+
+      <ScrollView scrollY className="enable_notification_page__scroll" enhanced showScrollbar={false}>
+        <View className="enable_notification_page__content">
+          {/* 示例消息卡片 */}
+          <View className="enable_notification_page__messages">
+            {exampleMessages.map((message) => (
+              <View key={message.id} className="enable_notification_page__message_card">
+                <Image
+                  className="enable_notification_page__avatar"
+                  src={message.avatar}
+                  mode="aspectFill"
+                />
+                <View className="enable_notification_page__message_content">
+                  <Text className="enable_notification_page__name">{message.name}</Text>
+                  <Text className="enable_notification_page__text">{message.content}</Text>
+                </View>
+              </View>
+            ))}
+          </View>
+
+          {/* 标题区域 */}
+          <View className="enable_notification_page__title_section">
+            <Text className="enable_notification_page__title">开启消息通知</Text>
+            <Text className="enable_notification_page__subtitle">请放心，我们只会在必要时提醒你</Text>
+          </View>
+
+          {/* 二维码区域 */}
+          <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"
+              />
+            </View>
+            <Text className="enable_notification_page__qr_text">长按关注👆开启提醒</Text>
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default EnableNotificationPage;
+