108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
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.warn('获取二维码失败:', error);
|
||
}
|
||
};
|
||
fetchQRCode();
|
||
}, []);
|
||
|
||
// 示例消息数据
|
||
const exampleMessages = [
|
||
{
|
||
id: '1',
|
||
avatar: require('@/static/other_pages/albert-avatar.png'),
|
||
name: 'Albert',
|
||
content: '发现一家宝藏新球场，周末一起去试试吗？',
|
||
},
|
||
{
|
||
id: '2',
|
||
avatar: require('@/static/other_pages/evelyn-avatar.png'),
|
||
name: 'Evelyn',
|
||
content: '周五晚混双比赛，寻找NTRP 3.5队友！',
|
||
},
|
||
{
|
||
id: '3',
|
||
avatar: require('@/static/other_pages/cici-avatar.png'),
|
||
name: 'CiCi',
|
||
content: '我也在黄浦，明早8点晨练打球吗？',
|
||
},
|
||
];
|
||
|
||
return (
|
||
<View className="enable_notification_page" style={{ paddingTop: `${totalHeight}px` }}>
|
||
<GeneralNavbar title="" showBack={true} />
|
||
|
||
<View className="enable_notification_page__content">
|
||
{/* 示例消息卡片 */}
|
||
<View className="enable_notification_page__messages">
|
||
{exampleMessages.map((message, index) => (
|
||
<View
|
||
key={message.id}
|
||
className={`enable_notification_page__message_card enable_notification_page__message_card--${index + 1}`}
|
||
>
|
||
<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">
|
||
{qrCodeUrl ? (
|
||
<Image
|
||
className="enable_notification_page__qr_image"
|
||
src={qrCodeUrl}
|
||
mode="aspectFit"
|
||
showMenuByLongpress
|
||
/>
|
||
) : (
|
||
<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>
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default EnableNotificationPage;
|
||
|