From 40b88c566d69b6e52c0c105da3f22454ff626e25 Mon Sep 17 00:00:00 2001 From: iven Date: Sat, 16 May 2026 00:56:38 +0800 Subject: [PATCH] =?UTF-8?q?refactor(mp):=20=E8=BF=81=E7=A7=BB=E5=8C=BB?= =?UTF-8?q?=E6=8A=A4=E5=92=A8=E8=AF=A2=E5=88=97=E8=A1=A8=E9=A1=B5=20?= =?UTF-8?q?=E2=80=94=20=E4=BD=BF=E7=94=A8=E7=BB=9F=E4=B8=80=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=BA=93=20PageShell/ContentCard/StatusTag/LoadingCar?= =?UTF-8?q?d/SearchSection/PaginationBar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pkg-doctor-core/consultation/index.scss | 173 +++++++----------- .../pkg-doctor-core/consultation/index.tsx | 116 ++++++------ 2 files changed, 124 insertions(+), 165 deletions(-) diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.scss b/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.scss index f459ae9..b6dc175 100644 --- a/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.scss +++ b/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.scss @@ -1,121 +1,76 @@ @import '../../../styles/variables.scss'; @import '../../../styles/mixins.scss'; -.consultation-page { - min-height: 100vh; - background: $bg; -} +// PageShell 已接管：min-height, background, padding +// SearchSection 已接管：标签筛选栏 +// ContentCard 已接管：session-card 背景/圆角/阴影/触摸反馈 +// StatusTag 已接管：会话状态标签 +// PaginationBar 已接管：分页控件 .session-list { - padding: 20px 24px; display: flex; flex-direction: column; - gap: 16px; + gap: var(--tk-gap-md); } -.session-card { - background: $card; - border-radius: $r-lg; - padding: 28px; - box-shadow: $shadow-sm; - position: relative; - - &:active { - background: $bd-l; - } - - &__top { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; - } - - &__subject { - font-size: var(--tk-font-body-lg); - font-weight: 600; - color: $tx; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-right: 16px; - } - - &__status { - @include tag(transparent, $tx2); - flex-shrink: 0; - } - - &__status-text { - font-size: var(--tk-font-body); - font-weight: 500; - } - - &__info { - display: flex; - align-items: center; - gap: 16px; - margin-bottom: 8px; - } - - &__type { - @include tag($pri-l, $pri); - } - - &__time { - font-size: var(--tk-font-h2); - color: $tx3; - } - - &__preview { - font-size: var(--tk-font-h1); - color: $tx2; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: block; - } - - &__badge { - position: absolute; - top: 20px; - right: 20px; - min-width: 36px; - height: 36px; - background: $dan; - border-radius: $r-pill; - @include flex-center; - padding: 0 8px; - } - - &__badge-text { - @include serif-number; - font-size: var(--tk-font-body); - color: $card; - font-weight: 600; - } -} - -.pagination { +.session-card__top { display: flex; - justify-content: center; + justify-content: space-between; align-items: center; - gap: 24px; - padding: 24px; - - &__btn { - font-size: var(--tk-font-h1); - color: $pri; - padding: 12px 24px; - - &.disabled { - color: $tx3; - } - } - - &__info { - font-size: var(--tk-font-h2); - color: $tx2; - } + margin-bottom: 12px; +} + +.session-card__subject { + font-size: var(--tk-font-body-lg); + font-weight: 600; + color: $tx; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-right: 16px; +} + +.session-card__info { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 8px; +} + +.session-card__type { + @include tag($pri-l, $pri); +} + +.session-card__time { + font-size: var(--tk-font-h2); + color: $tx3; +} + +.session-card__preview { + font-size: var(--tk-font-h1); + color: $tx2; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.session-card__badge { + position: absolute; + top: 20px; + right: 20px; + min-width: 36px; + height: 36px; + background: $dan; + border-radius: $r-pill; + @include flex-center; + padding: 0 8px; +} + +.session-card__badge-text { + @include serif-number; + font-size: var(--tk-font-body); + color: $card; + font-weight: 600; } diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.tsx b/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.tsx index acada97..1d6eecf 100644 --- a/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.tsx +++ b/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.tsx @@ -1,16 +1,19 @@ -import { useState, useEffect, useMemo, useCallback, useRef } from 'react'; -import { View, Text, ScrollView } from '@tarojs/components'; +import { useState, useEffect, useCallback, useRef } from 'react'; +import { View, Text } from '@tarojs/components'; import Taro from '@tarojs/taro'; import { usePageData } from '@/hooks/usePageData'; import { listSessions, type ConsultationSession } from '@/services/doctor/consultation'; -import Loading from '@/components/Loading'; +import PageShell from '@/components/ui/PageShell'; +import ContentCard from '@/components/ui/ContentCard'; +import StatusTag from '@/components/ui/StatusTag'; +import LoadingCard from '@/components/ui/LoadingCard'; +import PaginationBar from '@/components/patterns/PaginationBar'; +import SearchSection from '@/components/patterns/SearchSection'; import ErrorState from '@/components/ErrorState'; import EmptyState from '@/components/EmptyState'; import { useElderClass } from '../../../hooks/useElderClass'; -import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag'; import { formatDateTime } from '@/utils/date'; import { safeNavigateTo } from '@/utils/navigate'; -import SegmentTabs from '@/components/SegmentTabs'; import './index.scss'; const TABS = [ @@ -20,6 +23,12 @@ const TABS = [ { key: 'closed', label: '已关闭' }, ]; +const STATUS_COLOR_MAP: Record = { + active: 'success', + waiting: 'warning', + closed: 'default', +}; + export default function ConsultationList() { const modeClass = useElderClass(); const [sessions, setSessions] = useState([]); @@ -30,8 +39,6 @@ export default function ConsultationList() { const [page, setPage] = useState(1); const mountedRef = useRef(false); - const totalPages = useMemo(() => Math.ceil(total / 20), [total]); - const loadSessions = useCallback(async () => { setLoading(true); setError(false); @@ -53,7 +60,6 @@ export default function ConsultationList() { const { trigger } = usePageData(loadSessions); - // tab/page 变化时重新加载（跳过首次 mount，由 usePageData 的 useDidShow 处理） useEffect(() => { if (mountedRef.current) { trigger(); @@ -71,63 +77,61 @@ export default function ConsultationList() { return formatDateTime(dateStr); }; - if (loading && sessions.length === 0) return ; + if (loading && sessions.length === 0) return ; if (error) return ; return ( - - + + {}} + filters={TABS} + activeFilter={activeTab} + onFilterChange={handleTabChange} + /> {sessions.length === 0 ? ( - + ) : ( - - {sessions.map((s) => { - return ( - safeNavigateTo(`/pages/pkg-doctor-core/consultation/detail/index?id=${s.id}`)} - > - - {s.subject || '在线咨询'} - - {getStatusLabel(s.status)} - - - - - {s.consultation_type === 'text' ? '图文' : s.consultation_type === 'video' ? '视频' : '咨询'} - - {formatTime(s.last_message_at)} - - {s.last_message && ( - {s.last_message} - )} - {(s.unread_count_doctor ?? 0) > 0 && ( - - {s.unread_count_doctor} - - )} + + {sessions.map((s) => ( + safeNavigateTo(`/pages/pkg-doctor-core/consultation/detail/index?id=${s.id}`)} + > + + {s.subject || '在线咨询'} + - ); - })} + + + {s.consultation_type === 'text' ? '图文' : s.consultation_type === 'video' ? '视频' : '咨询'} + + {formatTime(s.last_message_at)} + + {s.last_message && ( + {s.last_message} + )} + {(s.unread_count_doctor ?? 0) > 0 && ( + + {s.unread_count_doctor} + + )} + + ))} )} - {total > 20 && ( - - page > 1 && setPage(page - 1)} - >上一页 - {page} / {totalPages} - = totalPages ? 'disabled' : ''}`} - onClick={() => page < totalPages && setPage(page + 1)} - >下一页 - - )} - + + ); }