63d8b7a65d
- 首页：移除渐变头部改为平铺背景，铃铛图标替代消息按钮 - 首页：体征数值与单位内联显示（同一行 baseline 对齐） - 健康页：标题改为"健康数据"，整体样式贴近原型紧凑风格 - 我的页：移除渐变头部改为平铺卡片，积分/打卡分两个独立卡片 - 我的页：菜单使用 emoji 图标替代文字图标，间距更紧凑
113 lines
4.0 KiB
TypeScript
113 lines
4.0 KiB
TypeScript
import React from 'react';
|
||
import { View, Text } from '@tarojs/components';
|
||
import Taro, { useDidShow } from '@tarojs/taro';
|
||
import { useAuthStore } from '../../stores/auth';
|
||
import { usePointsStore } from '../../stores/points';
|
||
import './index.scss';
|
||
|
||
const MENU_ITEMS = [
|
||
{ label: '积分商城', icon: '🎁', bg: '#FDEAEA' },
|
||
{ label: '我的订单', icon: '📦', bg: '#E8F0F8' },
|
||
{ label: '就诊人管理', icon: '👨👩👧', bg: '#F0DDD4' },
|
||
{ label: '我的报告', icon: '📄', bg: '#E8F0E8' },
|
||
{ label: '健康记录', icon: '📝', bg: '#E8F0F8' },
|
||
{ label: '诊断记录', icon: '📋', bg: '#E8F0E8' },
|
||
{ label: '我的随访', icon: '🏥', bg: '#F3E8F8' },
|
||
{ label: '用药提醒', icon: '💊', bg: '#FFF3E0' },
|
||
{ label: '透析记录', icon: '💉', bg: '#E8F0F8' },
|
||
{ label: '透析处方', icon: '💊', bg: '#E8F0E8' },
|
||
{ label: '知情同意', icon: '📋', bg: '#F3E8F8' },
|
||
{ label: '积分明细', icon: '📊', bg: '#F0DDD4' },
|
||
{ label: '设置', icon: '⚙️', bg: '#f0f0f0' },
|
||
];
|
||
|
||
const MENU_PATHS: Record<string, string> = {
|
||
'积分商城': '/pages/mall/index',
|
||
'我的订单': '/pages/pkg-mall/orders/index',
|
||
'积分明细': '/pages/pkg-mall/detail/index',
|
||
'就诊人管理': '/pages/pkg-profile/family/index',
|
||
'我的报告': '/pages/pkg-profile/reports/index',
|
||
'健康记录': '/pages/pkg-profile/health-records/index',
|
||
'诊断记录': '/pages/pkg-profile/diagnoses/index',
|
||
'我的随访': '/pages/pkg-profile/followups/index',
|
||
'用药提醒': '/pages/pkg-profile/medication/index',
|
||
'透析记录': '/pages/pkg-profile/dialysis-records/index',
|
||
'透析处方': '/pages/pkg-profile/dialysis-prescriptions/index',
|
||
'知情同意': '/pages/pkg-profile/consents/index',
|
||
'设置': '/pages/pkg-profile/settings/index',
|
||
};
|
||
|
||
export default function Profile() {
|
||
const { user, logout } = useAuthStore();
|
||
const { account: pointsAccount, checkinStatus: checkinInfo, refresh: refreshPoints } = usePointsStore();
|
||
|
||
useDidShow(() => {
|
||
refreshPoints();
|
||
});
|
||
|
||
const handleMenuClick = (label: string) => {
|
||
const path = MENU_PATHS[label];
|
||
if (path) Taro.navigateTo({ url: path });
|
||
};
|
||
|
||
const handleLogout = () => {
|
||
Taro.showModal({
|
||
title: '退出登录',
|
||
content: '确定要退出登录吗？',
|
||
}).then((res) => {
|
||
if (res.confirm) {
|
||
logout();
|
||
}
|
||
});
|
||
};
|
||
|
||
return (
|
||
<View className='profile-page'>
|
||
{/* 用户信息卡片 */}
|
||
<View className='profile-user-card'>
|
||
<View className='profile-avatar'>
|
||
<Text className='profile-avatar-icon'>👤</Text>
|
||
</View>
|
||
<View className='profile-user-info'>
|
||
<Text className='profile-name'>{user?.display_name || '未登录'}</Text>
|
||
<Text className='profile-phone'>{user?.phone || ''}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 积分 + 打卡 — 两个独立卡片并排 */}
|
||
<View className='profile-stats-row'>
|
||
<View className='stat-card'>
|
||
<Text className='stat-value stat-pri'>{(pointsAccount?.balance ?? 0).toLocaleString()}</Text>
|
||
<Text className='stat-label'>健康积分</Text>
|
||
</View>
|
||
<View className='stat-card'>
|
||
<Text className='stat-value stat-acc'>{checkinInfo?.consecutive_days ?? 0}天</Text>
|
||
<Text className='stat-label'>连续打卡</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 菜单 */}
|
||
<View className='profile-menu'>
|
||
{MENU_ITEMS.map((item) => (
|
||
<View
|
||
className='menu-item'
|
||
key={item.label}
|
||
onClick={() => handleMenuClick(item.label)}
|
||
>
|
||
<View className='menu-icon' style={`background:${item.bg};`}>
|
||
<Text className='menu-icon-text'>{item.icon}</Text>
|
||
</View>
|
||
<Text className='menu-label'>{item.label}</Text>
|
||
<Text className='menu-arrow'>›</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
|
||
{/* 退出登录 */}
|
||
<View className='profile-logout' onClick={handleLogout}>
|
||
<Text className='logout-text'>退出登录</Text>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|