refactor(mp): 分包策略优化 — 合并单页分包 + doctor 拆包 + consultation 移出主包
- 合并 4 个单页分包：report→pkg-profile/reports, followup→pkg-profile/followups, events→pkg-profile/events, device-sync→pkg-health - consultation/detail 移出主包到 pkg-consultation 分包（减少主包体积） - doctor 18 页拆分为 pkg-doctor-core(8页) + pkg-doctor-clinical(10页) - 全部导航路径和 import 路径同步更新 - 分包 10→8 个，主包页面 13→12
This commit is contained in:
iven
140
apps/miniprogram/src/pages/pkg-profile/events/index.scss
Normal file
140
apps/miniprogram/src/pages/pkg-profile/events/index.scss
Normal file
@@ -0,0 +1,140 @@
|
||||
@import '../../../styles/variables.scss';
|
||||
@import '../../../styles/mixins.scss';
|
||||
|
||||
.events-page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.events-header {
|
||||
background: $pri;
|
||||
padding: 48px 32px 32px;
|
||||
color: $card;
|
||||
|
||||
&__title {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: var(--tk-font-h1);
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: var(--tk-font-h1);
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.event-list {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 28px;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&__status {
|
||||
@include tag($bd-l, $tx2);
|
||||
font-size: var(--tk-font-body);
|
||||
}
|
||||
|
||||
&__status--published {
|
||||
@include tag($pri-l, $pri);
|
||||
}
|
||||
|
||||
&__status--ongoing {
|
||||
@include tag($acc-l, $acc);
|
||||
}
|
||||
|
||||
&__status--completed {
|
||||
@include tag($bd-l, $tx3);
|
||||
}
|
||||
|
||||
&__status--cancelled {
|
||||
@include tag($dan-l, $dan);
|
||||
}
|
||||
|
||||
&__points {
|
||||
font-size: var(--tk-font-body-lg);
|
||||
font-weight: bold;
|
||||
color: $wrn;
|
||||
@include serif-number;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: var(--tk-font-h1);
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $tx2;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: var(--tk-font-h2);
|
||||
color: $tx2;
|
||||
}
|
||||
|
||||
&__location {
|
||||
font-size: var(--tk-font-h2);
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid $bd-l;
|
||||
}
|
||||
|
||||
&__participants {
|
||||
font-size: var(--tk-font-h2);
|
||||
color: var(--tk-text-secondary);
|
||||
@include serif-number;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
background: $pri;
|
||||
border-radius: $r-sm;
|
||||
padding: 16px 32px;
|
||||
|
||||
&--disabled {
|
||||
background: $bd;
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $card;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
116
apps/miniprogram/src/pages/pkg-profile/events/index.tsx
Normal file
116
apps/miniprogram/src/pages/pkg-profile/events/index.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { View, Text, ScrollView } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import * as pointsApi from '@/services/points';
|
||||
import Loading from '@/components/Loading';
|
||||
import EmptyState from '@/components/EmptyState';
|
||||
import { useElderClass } from '@/hooks/useElderClass';
|
||||
import { usePageData } from '@/hooks/usePageData';
|
||||
import './index.scss';
|
||||
|
||||
const STATUS_MAP: Record<string, { label: string; className: string }> = {
|
||||
published: { label: '报名中', className: 'event-card__status--published' },
|
||||
ongoing: { label: '进行中', className: 'event-card__status--ongoing' },
|
||||
completed: { label: '已结束', className: 'event-card__status--completed' },
|
||||
cancelled: { label: '已取消', className: 'event-card__status--cancelled' },
|
||||
};
|
||||
|
||||
export default function EventsPage() {
|
||||
const modeClass = useElderClass();
|
||||
const [events, setEvents] = useState<pointsApi.OfflineEvent[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [registering, setRegistering] = useState<string | null>(null);
|
||||
|
||||
const loadEvents = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await pointsApi.listOfflineEvents({ page: 1, page_size: 50, status: 'published' });
|
||||
setEvents(res.data || []);
|
||||
} catch {
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
usePageData(loadEvents, { throttleMs: 10000, enablePullDown: true });
|
||||
|
||||
const handleRegister = async (event: pointsApi.OfflineEvent) => {
|
||||
setRegistering(event.id);
|
||||
try {
|
||||
await pointsApi.registerEvent(event.id);
|
||||
Taro.showToast({ title: '报名成功', icon: 'success' });
|
||||
loadEvents();
|
||||
} catch (err: any) {
|
||||
const msg = err?.message || '报名失败';
|
||||
Taro.showToast({ title: msg.substring(0, 20), icon: 'none' });
|
||||
} finally {
|
||||
setRegistering(null);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (d: string) => {
|
||||
return new Date(d).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
if (loading) return <Loading />;
|
||||
|
||||
return (
|
||||
<ScrollView scrollY className={`events-page ${modeClass}`}>
|
||||
<View className='events-header'>
|
||||
<Text className='events-header__title'>线下活动</Text>
|
||||
<Text className='events-header__subtitle'>参加活动赢取积分</Text>
|
||||
</View>
|
||||
|
||||
{events.length === 0 ? (
|
||||
<EmptyState text='暂无可报名的活动' />
|
||||
) : (
|
||||
<View className='event-list'>
|
||||
{events.map((event) => {
|
||||
const st = STATUS_MAP[event.status] || { label: event.status, className: '' };
|
||||
const isFull = event.max_participants != null && event.current_participants >= event.max_participants;
|
||||
const isRegistering = registering === event.id;
|
||||
|
||||
return (
|
||||
<View key={event.id} className='event-card'>
|
||||
<View className='event-card__header'>
|
||||
<View className={`event-card__status ${st.className}`}>
|
||||
<Text>{st.label}</Text>
|
||||
</View>
|
||||
<Text className='event-card__points'>+{event.points_reward} 积分</Text>
|
||||
</View>
|
||||
<Text className='event-card__title'>{event.title}</Text>
|
||||
{event.description && (
|
||||
<Text className='event-card__desc'>{event.description}</Text>
|
||||
)}
|
||||
<View className='event-card__info'>
|
||||
<Text className='event-card__date'>{formatDate(event.event_date)}</Text>
|
||||
{event.location && (
|
||||
<Text className='event-card__location'>{event.location}</Text>
|
||||
)}
|
||||
</View>
|
||||
<View className='event-card__footer'>
|
||||
<Text className='event-card__participants'>
|
||||
{event.current_participants}{event.max_participants ? `/${event.max_participants}` : ''} 人已报名
|
||||
</Text>
|
||||
<View
|
||||
className={`event-card__btn ${isFull ? 'event-card__btn--disabled' : ''}`}
|
||||
onClick={() => !isFull && !isRegistering && handleRegister(event)}
|
||||
>
|
||||
<Text className='event-card__btn-text'>
|
||||
{isRegistering ? '报名中...' : isFull ? '已满' : '立即报名'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
@import '../../../../styles/variables.scss';
|
||||
@import '../../../../styles/mixins.scss';
|
||||
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding: 24px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 28px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
@include section-title;
|
||||
font-size: var(--tk-font-num-lg);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid $bd-l;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $tx2;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $tx;
|
||||
|
||||
&.status-completed { color: $acc; }
|
||||
&.status-overdue { color: $dan; }
|
||||
&.status-pending { color: $wrn; }
|
||||
}
|
||||
|
||||
.countdown {
|
||||
margin-top: 12px;
|
||||
padding: 12px 16px;
|
||||
background: $wrn-l;
|
||||
border-radius: $r-sm;
|
||||
}
|
||||
|
||||
.countdown-urgent {
|
||||
background: $dan-l;
|
||||
}
|
||||
|
||||
.countdown-text {
|
||||
font-size: var(--tk-font-h2);
|
||||
color: $wrn;
|
||||
font-weight: bold;
|
||||
|
||||
.countdown-urgent & { color: $dan; }
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
margin-top: 16px;
|
||||
padding: 20px;
|
||||
background: $bd-l;
|
||||
border-radius: $r-sm;
|
||||
}
|
||||
|
||||
.detail-desc-text {
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $tx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.submit-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 28px;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@include section-title;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.submit-textarea {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
font-size: var(--tk-font-body-lg);
|
||||
color: $tx;
|
||||
background: $bg;
|
||||
border-radius: $r-sm;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background: $pri;
|
||||
border-radius: $r;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn-text {
|
||||
font-size: var(--tk-font-num);
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
@include flex-center;
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.empty-text {
|
||||
font-size: var(--tk-font-body-lg);
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { View, Text, Textarea } from '@tarojs/components';
|
||||
import Taro, { useRouter } from '@tarojs/taro';
|
||||
import { usePageData } from '@/hooks/usePageData';
|
||||
import { getTaskDetail, submitRecord } from '@/services/followup';
|
||||
import type { FollowUpTask } from '@/services/followup';
|
||||
import { TEMPLATE_IDS } from '@/services/wechat-templates';
|
||||
import { trackEvent } from '@/services/analytics';
|
||||
import Loading from '@/components/Loading';
|
||||
import ErrorState from '@/components/ErrorState';
|
||||
import { useElderClass } from '@/hooks/useElderClass';
|
||||
import './index.scss';
|
||||
|
||||
export default function FollowUpDetail() {
|
||||
const modeClass = useElderClass();
|
||||
const router = useRouter();
|
||||
const id = router.params.id || '';
|
||||
|
||||
const [task, setTask] = useState<FollowUpTask | null>(null);
|
||||
const [content, setContent] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
const fetchTask = useCallback(async () => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getTaskDetail(id);
|
||||
setTask(data);
|
||||
} catch (err) {
|
||||
console.error('[FollowUpDetail]', err);
|
||||
setError(true);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
usePageData(fetchTask, { throttleMs: 60000 });
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!content.trim()) {
|
||||
Taro.showToast({ title: '请输入内容', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await submitRecord(id, {
|
||||
result: content.trim(),
|
||||
patient_condition: content.trim(),
|
||||
});
|
||||
Taro.showToast({ title: '提交成功', icon: 'success' });
|
||||
trackEvent('followup_submit', { task_id: id });
|
||||
const tmplId = TEMPLATE_IDS.FOLLOWUP_REMINDER;
|
||||
if (tmplId) {
|
||||
try { await (Taro.requestSubscribeMessage as any)({ tmplIds: [tmplId] }); } catch { /* 用户拒绝 */ }
|
||||
}
|
||||
setContent('');
|
||||
} catch {
|
||||
Taro.showToast({ title: '提交失败', icon: 'none' });
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
if (status === 'completed') return '已完成';
|
||||
if (status === 'overdue') return '已过期';
|
||||
return '待完成';
|
||||
};
|
||||
|
||||
const getStatusClass = (status: string) => {
|
||||
if (status === 'completed') return 'status-completed';
|
||||
if (status === 'overdue') return 'status-overdue';
|
||||
return 'status-pending';
|
||||
};
|
||||
|
||||
const getCountdown = (dueDate: string, status: string) => {
|
||||
if (status === 'completed') return null;
|
||||
const now = new Date();
|
||||
const due = new Date(dueDate);
|
||||
const diffMs = due.getTime() - now.getTime();
|
||||
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
|
||||
if (diffDays < 0) return { text: `已过期 ${Math.abs(diffDays)} 天`, urgent: true };
|
||||
if (diffDays === 0) return { text: '今天截止', urgent: true };
|
||||
if (diffDays <= 3) return { text: `还剩 ${diffDays} 天`, urgent: true };
|
||||
return { text: `还剩 ${diffDays} 天`, urgent: false };
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className={`detail-page ${modeClass}`}>
|
||||
<Loading />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !task) {
|
||||
return (
|
||||
<View className={`detail-page ${modeClass}`}>
|
||||
<ErrorState text='任务不存在' />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const isCompleted = task.status === 'completed';
|
||||
|
||||
return (
|
||||
<View className={`detail-page ${modeClass}`}>
|
||||
<View className='detail-card'>
|
||||
<Text className='detail-title'>{task.follow_up_type}</Text>
|
||||
<View className='detail-row'>
|
||||
<Text className='detail-label'>状态</Text>
|
||||
<Text className={`detail-value ${getStatusClass(task.status)}`}>
|
||||
{getStatusLabel(task.status)}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='detail-row'>
|
||||
<Text className='detail-label'>截止日期</Text>
|
||||
<Text className='detail-value'>{task.planned_date}</Text>
|
||||
</View>
|
||||
{(() => {
|
||||
const cd = getCountdown(task.planned_date, task.status);
|
||||
return cd ? (
|
||||
<View className={`countdown ${cd.urgent ? 'countdown-urgent' : ''}`}>
|
||||
<Text className='countdown-text'>{cd.text}</Text>
|
||||
</View>
|
||||
) : null;
|
||||
})()}
|
||||
{task.content_template && (
|
||||
<View className='detail-desc'>
|
||||
<Text className='detail-desc-text'>{task.content_template}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{!isCompleted && (
|
||||
<View className='submit-card'>
|
||||
<Text className='section-title'>填写随访记录</Text>
|
||||
<Textarea
|
||||
className='submit-textarea'
|
||||
placeholder='请输入随访内容...'
|
||||
value={content}
|
||||
onInput={(e) => setContent(e.detail.value)}
|
||||
maxlength={500}
|
||||
/>
|
||||
<View
|
||||
className={`submit-btn ${submitting ? 'disabled' : ''}`}
|
||||
onClick={submitting ? undefined : handleSubmit}
|
||||
>
|
||||
<Text className='submit-btn-text'>
|
||||
{submitting ? '提交中...' : '提交'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -40,7 +40,7 @@ export default function MyFollowUps() {
|
||||
};
|
||||
|
||||
const goToDetail = (id: string) => {
|
||||
Taro.navigateTo({ url: `/pages/followup/detail/index?id=${id}` });
|
||||
Taro.navigateTo({ url: `/pages/pkg-profile/followups/detail/index?id=${id}` });
|
||||
};
|
||||
|
||||
const getStatusClass = (status: string) => {
|
||||
|
||||
147
apps/miniprogram/src/pages/pkg-profile/reports/detail/index.scss
Normal file
147
apps/miniprogram/src/pages/pkg-profile/reports/detail/index.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
@import '../../../../styles/variables.scss';
|
||||
@import '../../../../styles/mixins.scss';
|
||||
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding: 24px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 28px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: var(--tk-font-num-lg);
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid $bd-l;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $tx2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $tx;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.indicators-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 28px;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: var(--tk-font-num);
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.indicator-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid $bd-l;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.indicator-name {
|
||||
font-size: var(--tk-font-h1);
|
||||
color: $tx2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.indicator-value {
|
||||
font-size: var(--tk-font-num);
|
||||
font-weight: bold;
|
||||
color: $tx;
|
||||
@include serif-number;
|
||||
}
|
||||
|
||||
.indicator-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.indicator-ref {
|
||||
font-size: var(--tk-font-body);
|
||||
color: var(--tk-text-secondary);
|
||||
margin-bottom: 4px;
|
||||
@include serif-number;
|
||||
}
|
||||
|
||||
.indicator-status {
|
||||
font-size: var(--tk-font-h2);
|
||||
font-weight: bold;
|
||||
padding: 4px 12px;
|
||||
border-radius: $r;
|
||||
|
||||
&.normal {
|
||||
color: $tx3;
|
||||
background: $bd-l;
|
||||
}
|
||||
|
||||
&.high {
|
||||
color: $dan;
|
||||
background: $dan-l;
|
||||
}
|
||||
|
||||
&.low {
|
||||
color: $dan;
|
||||
background: $dan-l;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.empty-text {
|
||||
font-size: var(--tk-font-body-lg);
|
||||
color: var(--tk-text-secondary);
|
||||
}
|
||||
128
apps/miniprogram/src/pages/pkg-profile/reports/detail/index.tsx
Normal file
128
apps/miniprogram/src/pages/pkg-profile/reports/detail/index.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro, { useRouter } from '@tarojs/taro';
|
||||
import { usePageData } from '@/hooks/usePageData';
|
||||
import { getReportDetail, LabReport } from '@/services/report';
|
||||
import Loading from '@/components/Loading';
|
||||
import { useElderClass } from '@/hooks/useElderClass';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import './index.scss';
|
||||
|
||||
interface IndicatorItem {
|
||||
name: string;
|
||||
value: number;
|
||||
unit?: string;
|
||||
reference_min?: number;
|
||||
reference_max?: number;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export default function ReportDetail() {
|
||||
const modeClass = useElderClass();
|
||||
const router = useRouter();
|
||||
const id = router.params.id || '';
|
||||
const currentPatient = useAuthStore((s) => s.currentPatient);
|
||||
const patientId = currentPatient?.id || '';
|
||||
|
||||
const [report, setReport] = useState<LabReport | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchReport = useCallback(async () => {
|
||||
if (!id || !patientId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getReportDetail(patientId, id);
|
||||
setReport(data);
|
||||
} catch {
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id, patientId]);
|
||||
|
||||
usePageData(fetchReport, { throttleMs: 60000 });
|
||||
|
||||
const indicators: IndicatorItem[] = React.useMemo(() => {
|
||||
if (!report?.indicators || typeof report.indicators !== 'object') return [];
|
||||
return Object.entries(report.indicators).map(([name, val]) => ({
|
||||
name,
|
||||
value: val.value,
|
||||
unit: val.unit,
|
||||
reference_min: val.reference_min,
|
||||
reference_max: val.reference_max,
|
||||
status: val.status,
|
||||
}));
|
||||
}, [report]);
|
||||
|
||||
const getStatusInfo = (status?: string) => {
|
||||
if (status === 'high') return { text: '偏高', icon: '', className: 'high' };
|
||||
if (status === 'low') return { text: '偏低', icon: '', className: 'low' };
|
||||
return { text: '正常', icon: '', className: 'normal' };
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className={`detail-page ${modeClass}`}>
|
||||
<Loading />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!report) {
|
||||
return (
|
||||
<View className={`detail-page ${modeClass}`}>
|
||||
<View className='empty-state'>
|
||||
<Text className='empty-text'>报告不存在</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={`detail-page ${modeClass}`}>
|
||||
{/* 基本信息 */}
|
||||
<View className='detail-card'>
|
||||
<Text className='detail-title'>{report.report_type}</Text>
|
||||
<View className='detail-row'>
|
||||
<Text className='detail-label'>报告日期</Text>
|
||||
<Text className='detail-value'>{report.report_date}</Text>
|
||||
</View>
|
||||
{report.doctor_interpretation && (
|
||||
<View className='detail-row'>
|
||||
<Text className='detail-label'>医生解读</Text>
|
||||
<Text className='detail-value'>{report.doctor_interpretation}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 指标列表 */}
|
||||
<View className='indicators-card'>
|
||||
<Text className='section-title'>检查指标</Text>
|
||||
{indicators.map((item) => {
|
||||
const statusInfo = getStatusInfo(item.status);
|
||||
return (
|
||||
<View className='indicator-item' key={item.name}>
|
||||
<View className='indicator-left'>
|
||||
<Text className='indicator-name'>{item.name}</Text>
|
||||
<Text className='indicator-value'>
|
||||
{item.value}
|
||||
{item.unit ? ` ${item.unit}` : ''}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='indicator-right'>
|
||||
{item.reference_min != null && item.reference_max != null && (
|
||||
<Text className='indicator-ref'>
|
||||
{item.reference_min}~{item.reference_max}
|
||||
</Text>
|
||||
)}
|
||||
<Text className={`indicator-status ${statusInfo.className}`}>
|
||||
{statusInfo.icon} {statusInfo.text}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -47,7 +47,7 @@ export default function MyReports() {
|
||||
});
|
||||
|
||||
const goToDetail = (id: string) => {
|
||||
Taro.navigateTo({ url: `/pages/report/detail/index?id=${id}` });
|
||||
Taro.navigateTo({ url: `/pages/pkg-profile/reports/detail/index?id=${id}` });
|
||||
};
|
||||
|
||||
const formatStatus = (report: LabReport) => {
|
||||
|
||||
Reference in New Issue
Block a user