1

src/app.config.ts

@@ -55,6 +55,7 @@ export default defineAppConfig({
         "new_follow/index", // 新增关注
         "favorites/index", // 收藏页
         "ntrp-evaluate/index", // NTRP评估页
+        "enable_notification/index", // 开启消息通知
       ],
     },
   ],

src/components/SubscribeNotificationTip/index.scss

@@ -0,0 +1,51 @@
+.subscribe_notification_tip {
+  margin: 0 12px;
+  padding: 12px 16px;
+  background: rgba(14, 238, 193, 0.04);
+  border: 0.5px solid rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+  opacity: 0.8;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:active {
+    transform: scale(0.98);
+    opacity: 0.95;
+  }
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 20px;
+  }
+
+  &__title {
+    font-family: 'PingFang SC';
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 1.33;
+    color: #000000;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__action_text {
+    font-family: 'PingFang SC';
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 1.4;
+    color: rgba(0, 0, 0, 0.25);
+  }
+
+  &__arrow {
+    width: 16px;
+    height: 16px;
+  }
+}
+

src/components/SubscribeNotificationTip/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, Text, Image } from '@tarojs/components';
+import { navigateTo } from '@/utils/navigation';
+import './index.scss';
+
+interface SubscribeNotificationTipProps {
+  // 自定义样式类名
+  className?: string;
+}
+
+const SubscribeNotificationTip: React.FC<SubscribeNotificationTipProps> = ({
+  className = '',
+}) => {
+  // 处理点击跳转
+  const handle_click = () => {
+    navigateTo({
+      url: '/other_pages/enable_notification/index',
+    }).catch((err) => {
+      console.error('跳转失败:', err);
+    });
+  };
+
+  return (
+    <View className={`subscribe_notification_tip ${className}`} onClick={handle_click}>
+      <View className="subscribe_notification_tip__content">
+        <Text className="subscribe_notification_tip__title">不想错过约球邀请？</Text>
+        <View className="subscribe_notification_tip__action">
+          <Text className="subscribe_notification_tip__action_text">开启消息通知</Text>
+          <Image
+            className="subscribe_notification_tip__arrow"
+            src={require('@/static/message/ar-right.svg')}
+            mode="aspectFit"
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default SubscribeNotificationTip;
+

src/main_pages/components/MessagePageContent.module.scss

@@ -92,6 +92,12 @@
     }
   }
 
+  // 通知提示框容器
+  .notificationTipWrapper {
+    padding: 0 12px;
+    margin-bottom: 8px;
+  }
+
   // 消息列表
   // .messageList {
   //   flex: 1;

src/main_pages/components/MessagePageContent.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { View, Text, Image, ScrollView } from "@tarojs/components";
 import { EmptyState } from "@/components";
+import SubscribeNotificationTip from "@/components/SubscribeNotificationTip";
 import noticeService from "@/services/noticeService";
 import { formatRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
@@ -167,6 +168,11 @@ const MessagePageContent = () => {
         </View>
       </View>
 
+      {/* 通知提示框 */}
+      <View className={styles.notificationTipWrapper}>
+        <SubscribeNotificationTip />
+      </View>
+
       <ScrollView
         scrollY
         refresherBackground="#FAFAFA"

src/other_pages/enable_notification/index.config.ts

@@ -0,0 +1,6 @@
+export default definePageConfig({
+  navigationBarTitleText: '开启消息通知',
+  navigationStyle: 'custom',
+  enablePullDownRefresh: false,
+});
+

src/other_pages/enable_notification/index.scss

@@ -0,0 +1,166 @@
+.enable_notification_page {
+  width: 100%;
+  min-height: 100vh;
+  background: radial-gradient(circle at 50% 0%, rgba(191, 255, 239, 1) 0%, rgba(255, 255, 255, 1) 37%);
+  display: flex;
+  flex-direction: column;
+
+  &__scroll {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__content {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 1340rpx;
+    position: relative;
+  }
+
+  // 示例消息卡片区域
+  &__messages {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    padding: 0;
+    margin-top: 896rpx;
+    margin-bottom: 0;
+    width: 648rpx;
+  }
+
+  &__message_card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16rpx;
+    padding: 20rpx 32rpx;
+    background: #ffffff;
+    border: 0.5px solid rgba(0, 0, 0, 0.08);
+    border-radius: 40rpx;
+    box-shadow: 0px 8rpx 40rpx 0px rgba(0, 0, 0, 0.08);
+    width: 100%;
+    box-sizing: border-box;
+    
+    // 第二个卡片向右偏移
+    &:nth-child(2) {
+      margin-left: 44rpx;
+      width: calc(100% - 44rpx);
+    }
+    
+    // 第三个卡片
+    &:nth-child(3) {
+      margin-left: 0;
+      width: 100%;
+    }
+  }
+
+  &__avatar {
+    width: 85rpx;
+    height: 85rpx;
+    border-radius: 80rpx;
+    border: 3rpx solid #ffffff;
+    flex-shrink: 0;
+  }
+
+  &__message_content {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+    flex: 1;
+  }
+
+  &__name {
+    font-family: 'PingFang SC';
+    font-weight: 600;
+    font-size: 28rpx;
+    line-height: 1.43;
+    color: #000000;
+  }
+
+  &__text {
+    font-family: 'PingFang SC';
+    font-weight: 400;
+    font-size: 24rpx;
+    line-height: 1.67;
+    color: rgba(0, 0, 0, 0.8);
+  }
+
+  // 标题区域
+  &__title_section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32rpx;
+    margin-top: 160rpx;
+    margin-bottom: 0;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+  }
+
+  &__title {
+    font-family: 'PingFang SC';
+    font-weight: 600;
+    font-size: 48rpx;
+    line-height: 1.17;
+    color: #000000;
+    text-align: center;
+  }
+
+  &__subtitle {
+    font-family: 'PingFang SC';
+    font-weight: 500;
+    font-size: 28rpx;
+    line-height: 1.4;
+    color: rgba(0, 0, 0, 0.4);
+    text-align: center;
+  }
+
+  // 二维码区域
+  &__qr_section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32rpx;
+    margin-top: 328rpx;
+    margin-bottom: 0;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+  }
+
+  &__qr_wrapper {
+    width: 400rpx;
+    height: 400rpx;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(0, 0, 0, 0.06);
+    box-shadow: 0px 8rpx 72rpx 0px rgba(0, 0, 0, 0.16);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ffffff;
+  }
+
+  &__qr_image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__qr_text {
+    font-family: 'PingFang SC';
+    font-weight: 400;
+    font-size: 28rpx;
+    line-height: 1.4;
+    color: rgba(0, 0, 0, 0.4);
+    text-align: center;
+  }
+
+}
+

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

src/static/other_pages/qr_code.svg

@@ -0,0 +1,6 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 二维码占位图 - 请替换为实际二维码 -->
+  <rect width="200" height="200" fill="#FFFFFF"/>
+  <text x="100" y="100" text-anchor="middle" font-family="Arial" font-size="14" fill="#999999">二维码占位图</text>
+</svg>
+

src/test_pages/index.scss

@@ -19,5 +19,10 @@
     border-radius: 44rpx;
     font-size: 32rpx;
   }
+
+  &__tip_wrapper {
+    width: 100%;
+    margin-top: 40rpx;
+  }
 }