1
This commit is contained in:
张成
@@ -55,6 +55,7 @@ export default defineAppConfig({
|
||||
"new_follow/index", // 新增关注
|
||||
"favorites/index", // 收藏页
|
||||
"ntrp-evaluate/index", // NTRP评估页
|
||||
"enable_notification/index", // 开启消息通知
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
51
src/components/SubscribeNotificationTip/index.scss
Normal file
51
src/components/SubscribeNotificationTip/index.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
41
src/components/SubscribeNotificationTip/index.tsx
Normal file
41
src/components/SubscribeNotificationTip/index.tsx
Normal file
@@ -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;
|
||||
|
||||
@@ -92,6 +92,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 通知提示框容器
|
||||
.notificationTipWrapper {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
// 消息列表
|
||||
// .messageList {
|
||||
// flex: 1;
|
||||
|
||||
@@ -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"
|
||||
|
||||
6
src/other_pages/enable_notification/index.config.ts
Normal file
6
src/other_pages/enable_notification/index.config.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '开启消息通知',
|
||||
navigationStyle: 'custom',
|
||||
enablePullDownRefresh: false,
|
||||
});
|
||||
|
||||
166
src/other_pages/enable_notification/index.scss
Normal file
166
src/other_pages/enable_notification/index.scss
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
80
src/other_pages/enable_notification/index.tsx
Normal file
80
src/other_pages/enable_notification/index.tsx
Normal file
@@ -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;
|
||||
|
||||
6
src/static/other_pages/qr_code.svg
Normal file
6
src/static/other_pages/qr_code.svg
Normal file
@@ -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>
|
||||
|
||||
|
After Width: | Height: | Size: 339 B |
@@ -19,5 +19,10 @@
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&__tip_wrapper {
|
||||
width: 100%;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user