feat(miniprogram): 老年友好版本全面重设计 — 5→4 Tab + 首页/健康/消息/我的重写
- TabBar 从 5 Tab 调整为 4 Tab（首页/健康/消息/我的） - 首页重写为 5 区域布局：问候+进度环+体征2x2+待办+快捷操作 - 健康页重写：体征录入大输入框+趋势柱状图+BLE设备卡片 - 新建消息页：咨询对话+系统通知双 Tab - 我的页调整：菜单高度64px+新增积分商城入口 - 设计系统更新：色彩对比度提升(WCAG AA)+触控参数+老年友好 mixin - 新增 ProgressRing 组件（CSS conic-gradient 实现） - 修复 diagnoses 页面 $suc-l 未定义变量
This commit is contained in:
iven
@@ -7,101 +7,160 @@
|
||||
padding-bottom: calc(120px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* ─── 问候区 ─── */
|
||||
/* ─── 区域 1：问候 + 日期 + 消息 ─── */
|
||||
.greeting-section {
|
||||
background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
|
||||
padding: 48px 32px 72px;
|
||||
padding: 48px 32px 60px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.greeting-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.greeting-time {
|
||||
font-size: 26px;
|
||||
opacity: 0.85;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.greeting-name {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 44px;
|
||||
.greeting-text {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.greeting-date {
|
||||
font-size: 24px;
|
||||
opacity: 0.7;
|
||||
margin-top: 8px;
|
||||
font-size: 22px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* ─── 今日健康 ─── */
|
||||
.health-section {
|
||||
.greeting-msg {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
@include flex-center;
|
||||
|
||||
&:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.greeting-msg-icon {
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ─── 区域 2：今日体征完成度 ─── */
|
||||
.checkin-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
box-shadow: $shadow-md;
|
||||
margin: -36px 24px 24px;
|
||||
padding: 28px;
|
||||
margin: -28px 24px 24px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@include section-title;
|
||||
.checkin-left {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.health-grid {
|
||||
.checkin-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.checkin-title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.checkin-capsules {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.capsule {
|
||||
font-size: 22px;
|
||||
padding: 4px 12px;
|
||||
border-radius: $r-pill;
|
||||
font-weight: 500;
|
||||
|
||||
&.capsule-done {
|
||||
background: $acc-l;
|
||||
color: $acc;
|
||||
}
|
||||
|
||||
&.capsule-pending {
|
||||
background: $surface-alt;
|
||||
color: $tx2;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 区域 3：今日体征 2x2 ─── */
|
||||
.vitals-section {
|
||||
margin: 0 24px 24px;
|
||||
}
|
||||
|
||||
.vitals-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.health-cell {
|
||||
background: $bg;
|
||||
border-radius: $r-sm;
|
||||
padding: 20px 16px;
|
||||
.vital-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 20px;
|
||||
box-shadow: $shadow-sm;
|
||||
text-align: center;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.health-cell-label {
|
||||
font-size: 22px;
|
||||
.vital-label {
|
||||
font-size: 24px;
|
||||
color: $tx2;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.health-cell-value {
|
||||
.vital-value {
|
||||
@include serif-number;
|
||||
font-size: 44px;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.health-cell-bottom {
|
||||
.vital-bottom {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.health-cell-unit {
|
||||
font-size: 20px;
|
||||
color: $tx3;
|
||||
.vital-unit {
|
||||
font-size: 22px;
|
||||
color: $tx2;
|
||||
}
|
||||
|
||||
.health-cell-tag {
|
||||
font-size: 18px;
|
||||
.vital-tag {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
padding: 2px 10px;
|
||||
border-radius: $r-sm;
|
||||
@@ -116,89 +175,42 @@
|
||||
background: $wrn-l;
|
||||
color: $wrn;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 快捷服务 ─── */
|
||||
.services-section {
|
||||
margin: 0 24px 24px;
|
||||
}
|
||||
|
||||
.services-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.service-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
&.tag-empty {
|
||||
background: $surface-alt;
|
||||
color: $tx2;
|
||||
}
|
||||
}
|
||||
|
||||
.service-icon-wrap {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: $r;
|
||||
background: $pri-l;
|
||||
@include flex-center;
|
||||
/* ─── 区域 4：今日待办 ─── */
|
||||
.todo-section {
|
||||
margin: 0 24px 24px;
|
||||
}
|
||||
|
||||
.service-icon-text {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: $pri;
|
||||
}
|
||||
|
||||
.service-label {
|
||||
font-size: 22px;
|
||||
color: $tx2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ─── 待办事项 ─── */
|
||||
.upcoming-section {
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.upcoming-empty {
|
||||
.todo-empty {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 48px 24px;
|
||||
padding: 36px 24px;
|
||||
text-align: center;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
.upcoming-empty-text {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
color: $tx2;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upcoming-empty-hint {
|
||||
display: block;
|
||||
.todo-empty-text {
|
||||
font-size: 24px;
|
||||
color: $tx3;
|
||||
color: $tx2;
|
||||
}
|
||||
|
||||
.upcoming-list {
|
||||
.todo-list {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
overflow: hidden;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
.upcoming-item {
|
||||
.todo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px 24px;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid $bd-l;
|
||||
|
||||
&:last-child {
|
||||
@@ -210,20 +222,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
.upcoming-item-main {
|
||||
.todo-icon-wrap {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: $r-sm;
|
||||
background: $pri-l;
|
||||
@include flex-center;
|
||||
margin-right: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.todo-icon-char {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: $pri;
|
||||
}
|
||||
|
||||
.todo-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.upcoming-item-title {
|
||||
.todo-title {
|
||||
font-size: 28px;
|
||||
color: $tx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upcoming-item-sub {
|
||||
.todo-sub {
|
||||
font-size: 22px;
|
||||
color: $tx2;
|
||||
display: block;
|
||||
@@ -232,158 +260,44 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.upcoming-item-tag {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
padding: 4px 14px;
|
||||
border-radius: $r-sm;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
|
||||
&.tag-ok {
|
||||
background: $acc-l;
|
||||
color: $acc;
|
||||
}
|
||||
|
||||
&.tag-warn {
|
||||
background: $wrn-l;
|
||||
color: $wrn;
|
||||
}
|
||||
|
||||
&.tag-default {
|
||||
background: $bd-l;
|
||||
color: $tx2;
|
||||
}
|
||||
}
|
||||
|
||||
.upcoming-item-arrow {
|
||||
.todo-arrow {
|
||||
font-size: 32px;
|
||||
color: $tx3;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── 健康空状态 ─── */
|
||||
.health-empty {
|
||||
background: $bg;
|
||||
border-radius: $r-sm;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.health-empty-text {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
color: $tx2;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.health-empty-action {
|
||||
/* ─── 区域 5：快捷操作 ─── */
|
||||
.action-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px 0 0;
|
||||
}
|
||||
|
||||
.health-empty-btn {
|
||||
background: $pri;
|
||||
border-radius: $r;
|
||||
padding: 16px 40px;
|
||||
}
|
||||
|
||||
.health-empty-btn-text {
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ─── 健康资讯 ─── */
|
||||
.articles-section {
|
||||
gap: 16px;
|
||||
margin: 0 24px 24px;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.article-card-title {
|
||||
font-size: 28px;
|
||||
color: $tx;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.article-card-meta {
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
/* ─── 设备快捷入口 ─── */
|
||||
.device-section {
|
||||
margin: 0 24px 24px;
|
||||
}
|
||||
|
||||
.device-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.device-entry-icon-wrap {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: $r;
|
||||
background: $pri-l;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.device-entry-icon-text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.device-entry-info {
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.device-entry-name {
|
||||
@include touch-target;
|
||||
height: $btn-primary-h;
|
||||
border-radius: $r;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.device-entry-desc {
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
display: block;
|
||||
.action-primary {
|
||||
background: $pri;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.device-entry-arrow {
|
||||
font-size: 32px;
|
||||
color: $tx3;
|
||||
flex-shrink: 0;
|
||||
.action-outline {
|
||||
background: transparent;
|
||||
color: $pri;
|
||||
border: 2px solid $pri;
|
||||
}
|
||||
|
||||
.action-btn-text {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -3,29 +3,19 @@ import { useState } from 'react';
|
||||
import Taro, { useDidShow } from '@tarojs/taro';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { useHealthStore } from '../../stores/health';
|
||||
import ProgressRing from '../../components/ProgressRing';
|
||||
import Loading from '../../components/Loading';
|
||||
import { trackPageView } from '@/services/analytics';
|
||||
import * as appointmentApi from '@/services/appointment';
|
||||
import * as followupApi from '@/services/followup';
|
||||
import * as articleApi from '../../services/article';
|
||||
import './index.scss';
|
||||
|
||||
const QUICK_SERVICES = [
|
||||
{ label: '预约挂号', char: '约', path: '/pages/appointment/create/index' },
|
||||
{ label: '健康录入', char: '录', path: '/pages/pkg-health/input/index' },
|
||||
{ label: '健康趋势', char: '势', path: '/pages/pkg-health/trend/index' },
|
||||
{ label: '健康告警', char: '警', path: '/pages/pkg-health/alerts/index' },
|
||||
{ label: '资讯文章', char: '文', path: '/pages/article/index' },
|
||||
{ label: 'AI 报告', char: 'AI', path: '/pages/ai-report/list/index' },
|
||||
];
|
||||
|
||||
interface UpcomingItem {
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
type: 'appointment' | 'followup';
|
||||
statusLabel: string;
|
||||
statusType: 'ok' | 'warn' | 'default';
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
@@ -33,24 +23,13 @@ export default function Index() {
|
||||
const { todaySummary, loading, refreshToday } = useHealthStore();
|
||||
const [upcomingItems, setUpcomingItems] = useState<UpcomingItem[]>([]);
|
||||
const [upcomingLoading, setUpcomingLoading] = useState(false);
|
||||
const [articles, setArticles] = useState<articleApi.Article[]>([]);
|
||||
|
||||
useDidShow(() => {
|
||||
refreshToday();
|
||||
loadUpcoming();
|
||||
loadArticles();
|
||||
trackPageView('home');
|
||||
});
|
||||
|
||||
const loadArticles = async () => {
|
||||
try {
|
||||
const res = await articleApi.listArticles({ page: 1, page_size: 2 });
|
||||
setArticles(res.data || []);
|
||||
} catch {
|
||||
// 文章接口可能不可用
|
||||
}
|
||||
};
|
||||
|
||||
const loadUpcoming = async () => {
|
||||
const patientId = useAuthStore.getState().currentPatient?.id;
|
||||
if (!patientId) return;
|
||||
@@ -62,32 +41,30 @@ export default function Index() {
|
||||
followupApi.listTasks(patientId, 'pending'),
|
||||
]);
|
||||
if (apptRes.status === 'fulfilled') {
|
||||
for (const a of apptRes.value.data.slice(0, 3)) {
|
||||
for (const a of apptRes.value.data.slice(0, 2)) {
|
||||
if (a.status === 'pending' || a.status === 'confirmed') {
|
||||
items.push({
|
||||
id: a.id,
|
||||
title: `${a.appointment_date} ${a.start_time}`,
|
||||
subtitle: `${a.doctor_name || '医护'} · ${a.department || ''}`,
|
||||
subtitle: `${a.doctor_name || '医护'} · ${a.department || '门诊'}`,
|
||||
type: 'appointment',
|
||||
statusLabel: a.status === 'pending' ? '待确认' : '已确认',
|
||||
statusType: a.status === 'pending' ? 'warn' : 'ok',
|
||||
icon: '约',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (taskRes.status === 'fulfilled') {
|
||||
for (const t of taskRes.value.data.slice(0, 2)) {
|
||||
for (const t of taskRes.value.data.slice(0, 1)) {
|
||||
items.push({
|
||||
id: t.id,
|
||||
title: t.follow_up_type,
|
||||
subtitle: `${t.content_template?.slice(0, 30) || ''} · 截止 ${t.planned_date}`,
|
||||
subtitle: `${t.content_template?.slice(0, 20) || '随访任务'} · 截止 ${t.planned_date}`,
|
||||
type: 'followup',
|
||||
statusLabel: '进行中',
|
||||
statusType: 'default',
|
||||
icon: '随',
|
||||
});
|
||||
}
|
||||
}
|
||||
setUpcomingItems(items);
|
||||
setUpcomingItems(items.slice(0, 3));
|
||||
} catch {
|
||||
setUpcomingItems([]);
|
||||
} finally {
|
||||
@@ -99,11 +76,29 @@ export default function Index() {
|
||||
const greeting = hour < 12 ? '上午好' : hour < 18 ? '下午好' : '晚上好';
|
||||
const displayName = user?.display_name || currentPatient?.name || '访客';
|
||||
|
||||
// 计算今日体征完成度（4 个指标：血压/心率/血糖/体重）
|
||||
const summary = todaySummary || {};
|
||||
const indicators = [
|
||||
!!summary.blood_pressure,
|
||||
!!summary.heart_rate,
|
||||
!!summary.blood_sugar,
|
||||
!!summary.weight,
|
||||
];
|
||||
const completedCount = indicators.filter(Boolean).length;
|
||||
const progressPercent = Math.round((completedCount / 4) * 100);
|
||||
|
||||
const indicatorCapsules = [
|
||||
{ label: '血压', done: !!summary.blood_pressure },
|
||||
{ label: '心率', done: !!summary.heart_rate },
|
||||
{ label: '血糖', done: !!summary.blood_sugar },
|
||||
{ label: '体重', done: !!summary.weight },
|
||||
];
|
||||
|
||||
const healthItems = [
|
||||
{ label: '血压', value: todaySummary?.blood_pressure ? `${todaySummary.blood_pressure.systolic}/${todaySummary.blood_pressure.diastolic}` : '--/--', unit: 'mmHg', status: todaySummary?.blood_pressure?.status },
|
||||
{ label: '心率', value: todaySummary?.heart_rate ? `${todaySummary.heart_rate.value}` : '--', unit: 'bpm', status: todaySummary?.heart_rate?.status },
|
||||
{ label: '血糖', value: todaySummary?.blood_sugar ? `${todaySummary.blood_sugar.value}` : '--', unit: 'mmol/L', status: todaySummary?.blood_sugar?.status },
|
||||
{ label: '体重', value: todaySummary?.weight ? `${todaySummary.weight.value}` : '--', unit: 'kg', status: todaySummary?.weight?.status },
|
||||
{ label: '血压', value: summary.blood_pressure ? `${summary.blood_pressure.systolic}/${summary.blood_pressure.diastolic}` : '—', unit: 'mmHg', status: summary.blood_pressure?.status, indicator: 'blood_pressure_systolic' },
|
||||
{ label: '心率', value: summary.heart_rate ? `${summary.heart_rate.value}` : '—', unit: 'bpm', status: summary.heart_rate?.status, indicator: 'heart_rate' },
|
||||
{ label: '血糖', value: summary.blood_sugar ? `${summary.blood_sugar.value}` : '—', unit: 'mmol/L', status: summary.blood_sugar?.status, indicator: 'blood_sugar_fasting' },
|
||||
{ label: '体重', value: summary.weight ? `${summary.weight.value}` : '—', unit: 'kg', status: summary.weight?.status, indicator: 'weight' },
|
||||
];
|
||||
|
||||
const getStatusTag = (status?: string) => {
|
||||
@@ -114,64 +109,67 @@ export default function Index() {
|
||||
|
||||
return (
|
||||
<View className='home-page'>
|
||||
{/* 问候区 */}
|
||||
{/* 区域 1：问候 + 日期 + 消息入口 */}
|
||||
<View className='greeting-section'>
|
||||
<View className='greeting-left'>
|
||||
<Text className='greeting-time'>{greeting}</Text>
|
||||
<Text className='greeting-name'>{displayName}</Text>
|
||||
<Text className='greeting-text'>{greeting}，{displayName}</Text>
|
||||
<Text className='greeting-date'>
|
||||
{new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'numeric', weekday: 'short' })}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className='greeting-date'>{new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'numeric', weekday: 'short' })}</Text>
|
||||
</View>
|
||||
|
||||
{/* 设备快捷入口 — 点击直接跳转设备同步页面 */}
|
||||
<View className='device-section'>
|
||||
<View className='device-entry' onClick={() => Taro.navigateTo({ url: '/pages/device-sync/index' })}>
|
||||
<View className='device-entry-icon-wrap'>
|
||||
<Text className='device-entry-icon-text'>{'\u{1FA7A}'}</Text>
|
||||
</View>
|
||||
<View className='device-entry-info'>
|
||||
<Text className='device-entry-name'>血压计</Text>
|
||||
<Text className='device-entry-desc'>蓝牙同步 · 自动采集</Text>
|
||||
</View>
|
||||
<Text className='device-entry-arrow'>{'›'}</Text>
|
||||
</View>
|
||||
<View className='device-entry' onClick={() => Taro.navigateTo({ url: '/pages/device-sync/index' })}>
|
||||
<View className='device-entry-icon-wrap'>
|
||||
<Text className='device-entry-icon-text'>{'\u{1FA78}'}</Text>
|
||||
</View>
|
||||
<View className='device-entry-info'>
|
||||
<Text className='device-entry-name'>血糖仪</Text>
|
||||
<Text className='device-entry-desc'>蓝牙同步 · 自动采集</Text>
|
||||
</View>
|
||||
<Text className='device-entry-arrow'>{'›'}</Text>
|
||||
<View
|
||||
className='greeting-msg'
|
||||
onClick={() => Taro.switchTab({ url: '/pages/messages/index' })}
|
||||
>
|
||||
<Text className='greeting-msg-icon'>消</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 今日健康 */}
|
||||
<View className='health-section'>
|
||||
<Text className='section-title'>今日健康</Text>
|
||||
{/* 区域 2：今日体征完成度 */}
|
||||
<View
|
||||
className='checkin-card'
|
||||
onClick={() => Taro.switchTab({ url: '/pages/health/index' })}
|
||||
>
|
||||
<View className='checkin-left'>
|
||||
<ProgressRing percent={progressPercent} />
|
||||
</View>
|
||||
<View className='checkin-right'>
|
||||
<Text className='checkin-title'>
|
||||
{completedCount === 4 ? '今日体征已全部记录' : completedCount === 0 ? '今日尚未记录体征' : `今日已记录 ${completedCount}/4 项`}
|
||||
</Text>
|
||||
<View className='checkin-capsules'>
|
||||
{indicatorCapsules.map((cap) => (
|
||||
<Text
|
||||
key={cap.label}
|
||||
className={`capsule ${cap.done ? 'capsule-done' : 'capsule-pending'}`}
|
||||
>
|
||||
{cap.done ? '✓' : ''}{cap.label}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 区域 3：今日体征 2x2 网格 */}
|
||||
<View className='vitals-section'>
|
||||
{loading && !todaySummary ? (
|
||||
<Loading />
|
||||
) : !todaySummary || (!todaySummary.blood_pressure && !todaySummary.heart_rate && !todaySummary.blood_sugar && !todaySummary.weight) ? (
|
||||
<View className='health-empty'>
|
||||
<Text className='health-empty-text'>今天还没录入数据</Text>
|
||||
<View className='health-empty-action'>
|
||||
<View className='health-empty-btn' onClick={() => Taro.navigateTo({ url: '/pages/pkg-health/input/index' })}>
|
||||
<Text className='health-empty-btn-text'>点击开始记录</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View className='health-grid'>
|
||||
<View className='vitals-grid'>
|
||||
{healthItems.map((item) => {
|
||||
const tag = getStatusTag(item.status);
|
||||
return (
|
||||
<View className='health-cell' key={item.label} onClick={() => Taro.navigateTo({ url: `/pages/pkg-health/trend/index?indicator=${item.label === '血压' ? 'blood_pressure_systolic' : item.label === '心率' ? 'heart_rate' : item.label === '血糖' ? 'blood_sugar_fasting' : 'weight'}` })}>
|
||||
<Text className='health-cell-label'>{item.label}</Text>
|
||||
<Text className='health-cell-value'>{item.value}</Text>
|
||||
<View className='health-cell-bottom'>
|
||||
<Text className='health-cell-unit'>{item.unit}</Text>
|
||||
{tag && <Text className={`health-cell-tag ${tag.cls}`}>{tag.label}</Text>}
|
||||
<View
|
||||
className='vital-card'
|
||||
key={item.label}
|
||||
onClick={() => Taro.navigateTo({ url: `/pages/pkg-health/trend/index?indicator=${item.indicator}` })}
|
||||
>
|
||||
<Text className='vital-label'>{item.label}</Text>
|
||||
<Text className='vital-value'>{item.value}</Text>
|
||||
<View className='vital-bottom'>
|
||||
<Text className='vital-unit'>{item.unit}</Text>
|
||||
{tag && <Text className={`vital-tag ${tag.cls}`}>{tag.label}</Text>}
|
||||
{!item.status && <Text className='vital-tag tag-empty'>未记录</Text>}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -180,37 +178,21 @@ export default function Index() {
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 快捷服务 */}
|
||||
<View className='services-section'>
|
||||
<Text className='section-title'>快捷服务</Text>
|
||||
<View className='services-row'>
|
||||
{QUICK_SERVICES.map((svc) => (
|
||||
<View className='service-btn' key={svc.label} onClick={() => Taro.navigateTo({ url: svc.path })}>
|
||||
<View className='service-icon-wrap'>
|
||||
<Text className='service-icon-text'>{svc.char}</Text>
|
||||
</View>
|
||||
<Text className='service-label'>{svc.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 待办事项 */}
|
||||
<View className='upcoming-section'>
|
||||
<Text className='section-title'>待办事项</Text>
|
||||
{/* 区域 4：今日待办（≤3 条） */}
|
||||
<View className='todo-section'>
|
||||
<Text className='section-title'>今日待办</Text>
|
||||
{upcomingLoading ? (
|
||||
<Loading />
|
||||
) : upcomingItems.length === 0 ? (
|
||||
<View className='upcoming-empty'>
|
||||
<Text className='upcoming-empty-text'>暂无待办事项</Text>
|
||||
<Text className='upcoming-empty-hint'>预约挂号后将在此显示</Text>
|
||||
<View className='todo-empty'>
|
||||
<Text className='todo-empty-text'>今天没有待办事项</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className='upcoming-list'>
|
||||
<View className='todo-list'>
|
||||
{upcomingItems.map((item) => (
|
||||
<View
|
||||
key={item.id}
|
||||
className='upcoming-item'
|
||||
className='todo-item'
|
||||
onClick={() => {
|
||||
if (item.type === 'appointment') {
|
||||
Taro.navigateTo({ url: '/pages/appointment/index' });
|
||||
@@ -219,36 +201,35 @@ export default function Index() {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View className='upcoming-item-main'>
|
||||
<Text className='upcoming-item-title'>{item.title}</Text>
|
||||
<Text className='upcoming-item-sub'>{item.subtitle}</Text>
|
||||
<View className='todo-icon-wrap'>
|
||||
<Text className='todo-icon-char'>{item.icon}</Text>
|
||||
</View>
|
||||
<Text className={`upcoming-item-tag tag-${item.statusType}`}>{item.statusLabel}</Text>
|
||||
<Text className='upcoming-item-arrow'>›</Text>
|
||||
<View className='todo-info'>
|
||||
<Text className='todo-title'>{item.title}</Text>
|
||||
<Text className='todo-sub'>{item.subtitle}</Text>
|
||||
</View>
|
||||
<Text className='todo-arrow'>›</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 健康资讯 */}
|
||||
{articles.length > 0 && (
|
||||
<View className='articles-section'>
|
||||
<Text className='section-title'>健康资讯</Text>
|
||||
{articles.map((article) => (
|
||||
<View
|
||||
className='article-card'
|
||||
key={article.id}
|
||||
onClick={() => Taro.navigateTo({ url: `/pages/article/detail/index?id=${article.id}` })}
|
||||
>
|
||||
<Text className='article-card-title'>{article.title}</Text>
|
||||
<Text className='article-card-meta'>
|
||||
{article.category_name || '健康'}{article.published_at ? ` · ${article.published_at.slice(0, 10)}` : ''}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
{/* 区域 5：快捷操作 */}
|
||||
<View className='action-section'>
|
||||
<View
|
||||
className='action-btn action-primary'
|
||||
onClick={() => Taro.switchTab({ url: '/pages/health/index' })}
|
||||
>
|
||||
<Text className='action-btn-text'>记录体征</Text>
|
||||
</View>
|
||||
)}
|
||||
<View
|
||||
className='action-btn action-outline'
|
||||
onClick={() => Taro.navigateTo({ url: '/pages/appointment/create/index' })}
|
||||
>
|
||||
<Text className='action-btn-text'>预约挂号</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user