xJourney/wxapp_escort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tmp

Browse Source
This commit is contained in:
lik
2026-10-04 22:13:54 +08:00
parent f542b1dced
commit 530135fce3
9 changed files with 908 additions and 866 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/DESIGN.md
+2 -2
View File
@@ -120,13 +120,13 @@
| `mine/addressedit.wxml`（`switch` 属性） | 旧金色 | `#B8520A`（属性值需硬编码） |
| `health/profilelist.js`（`confirmColor`） | 旧金色 | `#B8520A` |
| `health/profilelist.wxss`、`profileedit.wxss` | `#D4A853` 系 | 暖橙令牌 |
| `escort/recordlist.wxss` | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
| `escort/recorddetail.wxss`（12 处） | `#D4A853` 系 | 暖橙令牌 + 状态四档 |
| `escort/agreement.wxss` | 底 `#FAF6F1`、`#D4A853` 系 | `--paper` / `--brand-soft` / 暖橙令牌 |
| `hospital/contact.wxss`、`hospital/ranking.wxss` | 底 `#F5F7F6`、字 `#1F2937`、绿灰系 | 整体并入暖橙体系 |
已完成（2026-10-04）：`mine/mine.wxss`、`pages/ai/aichat.wxss` 已按本节并入暖橙体系。
已完成（2026-10-04）：`escort/recordlist`、`escort/recorddetail` 已按本节并入暖橙体系——两页删去旧金色副本与全部渐变，状态一律走 §三 四档；`recorddetail` 另在 `page{ }` 登记 `--shadow-bar`（底栏上向阴影，不在全局色板内）。两页 `json` 原本 `usingComponents` 为空却已用 `t-icon`/`t-loading`，一并补注册。
### 5.2 系统级（不在页面里，最易漏）
| 位置 | 现状 | 应改为 |
pages/escort/recorddetail.js
+26 -15
View File
@@ -1,18 +1,22 @@
const API = require('../../utils/api.js')
// 状态配色遵循 doc/DESIGN.md §三：四档状态色 + 状态说明文字，
// 颜色只做强化，文字才是信息。待确认与已确认同属「等待」阶段，共用待服务档
const STATUS_MAP = {
pending: { text: '待确认', color: '#F59E0B', bg: '#FEF3C7', gradient: 'linear-gradient(135deg, #F59E0B 0%, #D97706 100%)', icon: 'time', desc: '您的订单已提交，等待确认中' },
confirmed: { text: '已确认', color: '#3B82F6', bg: '#DBEAFE', gradient: 'linear-gradient(135deg, #3B82F6 0%, #2563EB 100%)', icon: 'check-circle', desc: '订单已确认，陪诊员将准时为您服务' },
in_progress: { text: '进行中', color: '#8B5CF6', bg: '#EDE9FE', gradient: 'linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%)', icon: 'play-circle', desc: '陪诊服务正在进行中' },
completed: { text: '已完成', color: '#10B981', bg: '#D1FAE5', gradient: 'linear-gradient(135deg, #10B981 0%, #059669 100%)', icon: 'check-circle-filled', desc: '陪诊服务已完成，感谢您的使用' },
cancelled: { text: '已取消', color: '#6B7280', bg: '#F3F4F6', gradient: 'linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%)', icon: 'close-circle', desc: '该订单已取消' }
pending: { text: '待确认', color: '#0F766E', bg: '#ECF7F4', border: '#C7E5DF', desc: '您的订单已提交，等待陪诊员确认' },
confirmed: { text: '已确认', color: '#0F766E', bg: '#ECF7F4', border: '#C7E5DF', desc: '订单已确认，陪诊员将准时为您服务' },
in_progress: { text: '进行中', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2', desc: '陪诊服务正在进行中' },
completed: { text: '已完成', color: '#1F7A4D', bg: '#EAF6EE', border: '#CDE9D7', desc: '陪诊服务已完成，感谢您的使用' },
cancelled: { text: '已取消', color: '#B4231A', bg: '#FCF0EE', border: '#F2D6D1', desc: '该订单已取消' }
}
// 支付状态：已支付走「已完成」档；未支付 / 部分支付复用主色浅档提示待处理；
// 已退款走中性档（--muted 字 + --sep 描边 + 透明底）
const PAYMENT_STATUS_MAP = {
unpaid: { text: '未支付', color: '#F59E0B', bg: '#FEF3C7' },
partial: { text: '部分支付', color: '#F59E0B', bg: '#FEF3C7' },
paid: { text: '已支付', color: '#10B981', bg: '#D1FAE5' },
refunded: { text: '已退款', color: '#6B7280', bg: '#F3F4F6' }
unpaid: { text: '未支付', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
partial: { text: '部分支付', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
paid: { text: '已支付', color: '#1F7A4D', bg: '#EAF6EE', border: '#CDE9D7' },
refunded: { text: '已退款', color: '#6F655C', bg: 'transparent', border: '#E5DACC' }
}
const SEX_MAP = {
@@ -20,7 +24,7 @@ const SEX_MAP = {
female: '女'
}
const ATTENDANT_SEX_MAP = {
const SEX_REQUIREMENT_MAP = {
none: '不限',
male: '男',
female: '女'
@@ -116,13 +120,15 @@ Page({
scheduleDuration: item.schedule?.duration || 0,
escortServiceName: item.escort?.serviceName || '',
attendantName: item.attendant?.name || '',
attendantSexText: ATTENDANT_SEX_MAP[item.escort?.sexRequirement] || '',
attendantMobile: item.attendant?.mobile || '',
sexRequirementText: SEX_REQUIREMENT_MAP[item.escort?.sexRequirement] || '',
totalFee: (item.payment?.totalFee || 0).toFixed(2),
paidFee: (item.payment?.paidFee || 0).toFixed(2),
paymentStatus: item.payment?.status || 'unpaid',
paymentStatusText: paymentInfo.text,
paymentStatusColor: paymentInfo.color,
paymentStatusBg: paymentInfo.bg,
paymentStatusBorder: paymentInfo.border,
patientNote: item.notes?.patientNote || '',
escortNote: item.notes?.escortNote || '',
medicalSummary: item.notes?.medicalSummary || '',
@@ -130,8 +136,7 @@ Page({
statusText: statusInfo.text,
statusColor: statusInfo.color,
statusBg: statusInfo.bg,
statusGradient: statusInfo.gradient,
statusIcon: statusInfo.icon,
statusBorder: statusInfo.border,
statusDesc: statusInfo.desc,
createTime: item.meta?.createtime ? this.formatDateTime(item.meta.createtime) : '',
updateTime: item.meta?.updatetime ? this.formatDateTime(item.meta.updatetime) : ''
@@ -178,6 +183,12 @@ Page({
wx.makePhoneCall({ phoneNumber: '18618162956' })
},
onCallAttendant() {
const mobile = this.data.record.attendantMobile
if (!mobile || mobile === '--') return
wx.makePhoneCall({ phoneNumber: mobile })
},
onEditPatientNote() {
this.setData({
editing: true,
@@ -346,7 +357,7 @@ Page({
wx.showModal({
title: '确认完成',
content: '确认陪诊服务已完成？',
confirmColor: '#6B8E7B',
confirmColor: '#B8520A',
success: (res) => {
if (res.confirm) {
wx.showLoading({ title: '处理中...' })
@@ -375,7 +386,7 @@ Page({
wx.showModal({
title: '删除订单',
content: '确定要删除该订单吗？删除后不可恢复。',
confirmColor: '#EF4444',
confirmColor: '#B4231A',
success: (res) => {
if (res.confirm) {
wx.showLoading({ title: '删除中...' })
pages/escort/recorddetail.json
+3 -1
View File
@@ -1,6 +1,8 @@
{
"navigationBarTitleText": "预约记录详情",
"usingComponents": {},
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon"
},
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
}
pages/escort/recorddetail.wxml
+103 -97
View File
@@ -1,26 +1,31 @@
<view class="page-bg">
<view class="container">
<!-- 状态头部 -->
<view class="status-header" style="background: {{record.statusGradient}};">
<view class="status-main">
<text class="status-text">{{record.statusText}}</text>
<text class="status-desc">{{record.statusDesc}}</text>
</view>
<view class="status-icon-wrap">
<t-icon name="{{record.statusIcon}}" size="80rpx" color="rgba(255,255,255,0.6)" />
<!-- 状态头：短横色标 + 状态胶囊 + 状态说明。
状态色只包住胶囊文字本身（DESIGN.md §三），去掉旧版渐变横幅与大色块 -->
<view class="page-header">
<view class="header-accent"></view>
<view class="status-row">
<view
class="status-chip status-chip-lg"
style="background: {{record.statusBg}}; color: {{record.statusColor}}; border-color: {{record.statusBorder}};"
>{{record.statusText}}</view>
</view>
<text class="header-subtitle">{{record.statusDesc}}</text>
</view>
<!-- 就诊人信息 -->
<view class="detail-card">
<view class="card-title">
<t-icon name="user" class="card-icon" size="36rpx" />
<text>就诊人信息</text>
<view class="card-edit-btn" bindtap="onEditPatientInfo" wx:if="{{!editingPatient}}">
<t-icon name="edit" size="28rpx" color="#D4A853" />
<text class="edit-text">修改</text>
<view class="section">
<view class="section-head">
<view class="section-bar"></view>
<text class="section-title">就诊人信息</text>
<view class="section-link" wx:if="{{!editingPatient}}" bindtap="onEditPatientInfo">
<text class="section-link-text">修改</text>
<t-icon name="edit" size="26rpx" color="#9B4508" />
</view>
</view>
<view wx:if="{{!editingPatient}}">
<block wx:if="{{!editingPatient}}">
<view class="info-row">
<text class="info-label">姓名</text>
<text class="info-value">{{record.patientName || '--'}}</text>
@@ -43,59 +48,60 @@
</view>
<view class="info-row">
<text class="info-label">联系电话</text>
<text class="info-value phone" bindtap="onCallPatient">{{record.patientMobile || '--'}}</text>
<text class="info-value info-link" bindtap="onCallPatient">{{record.patientMobile || '--'}}</text>
</view>
<view class="info-row" wx:if="{{record.patientIdnumber}}">
<text class="info-label">身份证号</text>
<text class="info-value">{{record.patientIdnumber}}</text>
</view>
</view>
<view wx:if="{{editingPatient}}">
</block>
<block wx:else>
<view class="edit-row">
<text class="edit-label">姓名</text>
<input class="edit-input" value="{{editPatient.name}}" placeholder="请输入姓名" data-field="name" bindinput="onPatientInfoInput" />
<input class="edit-input" value="{{editPatient.name}}" placeholder="请输入姓名" placeholder-class="input-placeholder" data-field="name" bindinput="onPatientInfoInput" />
</view>
<view class="edit-row">
<text class="edit-label">性别</text>
<view class="edit-radio-group">
<view class="edit-radio {{editPatient.sex === 'male' ? 'active' : ''}}" data-field="sex" data-value="male" bindtap="onPatientSexChange">男</view>
<view class="edit-radio {{editPatient.sex === 'female' ? 'active' : ''}}" data-field="sex" data-value="female" bindtap="onPatientSexChange">女</view>
<view class="edit-radio {{editPatient.sex === 'male' ? 'active' : ''}}" data-value="male" bindtap="onPatientSexChange">男</view>
<view class="edit-radio {{editPatient.sex === 'female' ? 'active' : ''}}" data-value="female" bindtap="onPatientSexChange">女</view>
</view>
</view>
<view class="edit-row">
<text class="edit-label">出生年月</text>
<picker mode="date" value="{{editPatient.birth}}" end="{{today}}" bindchange="onPatientBirthChange">
<view class="edit-input {{editPatient.birth ? '' : 'placeholder'}}">{{editPatient.birth || '请选择出生日期'}}</view>
<picker class="edit-picker" mode="date" value="{{editPatient.birth}}" end="{{today}}" bindchange="onPatientBirthChange">
<view class="edit-input {{editPatient.birth ? '' : 'placeholder'}}">{{editPatient.birth || '请选择'}}</view>
</picker>
</view>
<view class="edit-row">
<text class="edit-label">体重(kg)</text>
<input class="edit-input" type="digit" value="{{editPatient.weight}}" placeholder="请输入体重" data-field="weight" bindinput="onPatientInfoInput" />
<input class="edit-input" type="digit" value="{{editPatient.weight}}" placeholder="请输入" placeholder-class="input-placeholder" data-field="weight" bindinput="onPatientInfoInput" />
</view>
<view class="edit-row">
<text class="edit-label">身高(cm)</text>
<input class="edit-input" type="digit" value="{{editPatient.height}}" placeholder="请输入身高" data-field="height" bindinput="onPatientInfoInput" />
<input class="edit-input" type="digit" value="{{editPatient.height}}" placeholder="请输入" placeholder-class="input-placeholder" data-field="height" bindinput="onPatientInfoInput" />
</view>
<view class="edit-row">
<text class="edit-label">联系电话</text>
<input class="edit-input" type="number" value="{{editPatient.mobile}}" placeholder="请输入联系电话" data-field="mobile" bindinput="onPatientInfoInput" />
<input class="edit-input" type="number" value="{{editPatient.mobile}}" placeholder="请输入" placeholder-class="input-placeholder" data-field="mobile" bindinput="onPatientInfoInput" />
</view>
<view class="edit-row">
<text class="edit-label">身份证号</text>
<input class="edit-input" value="{{editPatient.idnumber}}" placeholder="请输入身份证号" data-field="idnumber" bindinput="onPatientInfoInput" />
<input class="edit-input" value="{{editPatient.idnumber}}" placeholder="请输入" placeholder-class="input-placeholder" data-field="idnumber" bindinput="onPatientInfoInput" />
</view>
<view class="edit-actions">
<button class="edit-btn cancel" bindtap="onCancelEditPatientInfo">取消</button>
<button class="edit-btn confirm" bindtap="onSavePatientInfo">保存</button>
</view>
<view class="btn btn-ghost" bindtap="onCancelEditPatientInfo">取消</view>
<view class="btn btn-primary" bindtap="onSavePatientInfo">保存</view>
</view>
</block>
</view>
<!-- 医院预约信息 -->
<view class="detail-card">
<view class="card-title">
<t-icon name="hospital" class="card-icon" size="36rpx" />
<text>医院预约信息</text>
<view class="section">
<view class="section-head">
<view class="section-bar"></view>
<text class="section-title">医院预约信息</text>
</view>
<view class="info-row">
<text class="info-label">就诊省份</text>
@@ -139,47 +145,43 @@
</view>
</view>
<!-- 陪诊服务信息 -->
<view class="detail-card">
<view class="card-title">
<t-icon name="service" class="card-icon" size="36rpx" />
<text>陪诊服务</text>
<!-- 陪诊服务 -->
<view class="section">
<view class="section-head">
<view class="section-bar"></view>
<text class="section-title">陪诊服务</text>
</view>
<view class="info-row">
<text class="info-label">服务类型</text>
<text class="info-value">{{record.escortServiceName || '陪诊服务'}}</text>
</view>
<view class="info-row">
<view class="info-row" wx:if="{{record.sexRequirementText}}">
<text class="info-label">性别要求</text>
<text class="info-value">{{record.escortSexRequirementText}}</text>
<text class="info-value">{{record.sexRequirementText}}</text>
</view>
<view class="info-row">
<text class="info-label">陪诊员</text>
<text class="info-value">{{record.attendantName}}</text>
<text class="info-value">{{record.attendantName || '待分配'}}</text>
</view>
<view class="info-row">
<text class="info-label">陪诊员性别</text>
<text class="info-value">{{record.attendantSexText}}</text>
</view>
<view class="info-row">
<view class="info-row" wx:if="{{record.attendantMobile}}">
<text class="info-label">陪诊员电话</text>
<text class="info-value phone" bindtap="onCallAttendant">{{record.attendantMobile}}</text>
<text class="info-value info-link" bindtap="onCallAttendant">{{record.attendantMobile}}</text>
</view>
</view>
<!-- 陪诊需求 / 症状描述 -->
<view class="detail-card">
<view class="card-title">
<t-icon name="edit-1" class="card-icon" size="36rpx" />
<text>陪诊需求与症状</text>
<view class="card-edit-btn" bindtap="onEditPatientNote" wx:if="{{!editing}}">
<t-icon name="edit" size="28rpx" color="#D4A853" />
<text class="edit-text">修改</text>
<!-- 陪诊需求与症状 -->
<view class="section">
<view class="section-head">
<view class="section-bar"></view>
<text class="section-title">陪诊需求与症状</text>
<view class="section-link" wx:if="{{!editing}}" bindtap="onEditPatientNote">
<text class="section-link-text">修改</text>
<t-icon name="edit" size="26rpx" color="#9B4508" />
</view>
</view>
<view class="note-section" wx:if="{{record.patientNote || editing}}">
<block wx:if="{{editing}}">
<textarea
wx:if="{{editing}}"
class="note-textarea"
value="{{editPatientNote}}"
placeholder="请输入陪诊需求或症状描述"
@@ -188,37 +190,39 @@
bindinput="onPatientNoteInput"
focus="{{editing}}"
/>
<text wx:else class="note-content">{{record.patientNote || '暂无备注'}}</text>
<view class="note-actions" wx:if="{{editing}}">
<button class="note-btn cancel" bindtap="onCancelEdit">取消</button>
<button class="note-btn confirm" bindtap="onSavePatientNote">保存</button>
<view class="edit-actions">
<view class="btn btn-ghost" bindtap="onCancelEdit">取消</view>
<view class="btn btn-primary" bindtap="onSavePatientNote">保存</view>
</view>
</block>
<block wx:else>
<view class="note-block" wx:if="{{record.patientNote}}">
<text class="note-text">{{record.patientNote}}</text>
</view>
<view class="note-section" wx:if="{{record.escortNote}}">
<view class="note-block" wx:if="{{record.escortNote}}">
<text class="note-label">陪诊记录</text>
<text class="note-content">{{record.escortNote}}</text>
<text class="note-text">{{record.escortNote}}</text>
</view>
<view class="note-section" wx:if="{{record.medicalSummary}}">
<view class="note-block" wx:if="{{record.medicalSummary}}">
<text class="note-label">就诊摘要</text>
<text class="note-content">{{record.medicalSummary}}</text>
</view>
<view class="empty-note" wx:if="{{!record.patientNote && !record.escortNote && !record.medicalSummary && !editing}}">
<text class="empty-note-text">暂无备注信息，点击添加</text>
<view class="add-note-btn" bindtap="onEditPatientNote">
<t-icon name="add" size="28rpx" color="#D4A853" />
<text class="note-text">{{record.medicalSummary}}</text>
</view>
<view class="note-empty" wx:if="{{!record.patientNote && !record.escortNote && !record.medicalSummary}}">
<text class="note-empty-text">暂无备注信息</text>
</view>
</block>
</view>
<!-- 费用信息 -->
<view class="detail-card">
<view class="card-title">
<t-icon name="wallet" class="card-icon" size="36rpx" />
<text>费用信息</text>
<view class="section">
<view class="section-head">
<view class="section-bar"></view>
<text class="section-title">费用信息</text>
</view>
<view class="info-row">
<text class="info-label">服务费用</text>
<text class="info-value fee">¥{{record.totalFee}}</text>
<text class="info-value fee-value">¥{{record.totalFee}}</text>
</view>
<view class="info-row">
<text class="info-label">已支付</text>
@@ -226,17 +230,18 @@
</view>
<view class="info-row">
<text class="info-label">支付状态</text>
<view class="payment-badge" style="color: {{record.paymentStatusColor}}; background: {{record.paymentStatusBg}};">
{{record.paymentStatusText}}
</view>
<view
class="status-chip"
style="background: {{record.paymentStatusBg}}; color: {{record.paymentStatusColor}}; border-color: {{record.paymentStatusBorder}};"
>{{record.paymentStatusText}}</view>
</view>
</view>
<!-- 订单信息 -->
<view class="detail-card">
<view class="card-title">
<t-icon name="order" class="card-icon" size="36rpx" />
<text>订单信息</text>
<view class="section">
<view class="section-head">
<view class="section-bar"></view>
<text class="section-title">订单信息</text>
</view>
<view class="info-row">
<text class="info-label">订单编号</text>
@@ -244,9 +249,10 @@
</view>
<view class="info-row">
<text class="info-label">订单状态</text>
<view class="status-badge-small" style="color: {{record.statusColor}}; background: {{record.statusBg}};">
{{record.statusText}}
</view>
<view
class="status-chip"
style="background: {{record.statusBg}}; color: {{record.statusColor}}; border-color: {{record.statusBorder}};"
>{{record.statusText}}</view>
</view>
<view class="info-row">
<text class="info-label">创建时间</text>
@@ -260,32 +266,32 @@
<!-- 底部占位 -->
<view class="bottom-placeholder"></view>
</view>
<!-- 底部操作栏 -->
<!-- 底部操作栏：同类实心块只保留一处——
再次预约为「已完成」时让位给「确认完成」，为「已取消」时自己成为主操作（§2.1） -->
<view class="bottom-bar">
<view class="bottom-right">
<view
class="action-btn cancel-btn"
class="action-btn action-ghost"
wx:if="{{record.status === 'pending' || record.status === 'confirmed'}}"
bindtap="onCancelOrder"
>取消订单</view>
<view
class="action-btn cancel-btn"
class="action-btn action-ghost"
wx:if="{{record.paymentStatus === 'unpaid' && record.status !== 'completed'}}"
bindtap="onDeleteOrder"
>删除订单</view>
<view
class="action-btn confirm-btn"
class="action-btn action-primary"
wx:if="{{record.status === 'completed'}}"
bindtap="onConfirmComplete"
>确认完成</view>
<view
class="action-btn rebook-btn"
class="action-btn {{record.status === 'cancelled' ? 'action-primary' : 'action-ghost'}}"
wx:if="{{record.status === 'completed' || record.status === 'cancelled'}}"
bindtap="onRebook"
>再次预约</view>
</view>
</view>
<!-- 取消订单弹窗 -->
<view class="popup-mask {{showCancelPopup ? 'show' : ''}}" bindtap="onCloseCancelPopup"></view>
@@ -293,7 +299,7 @@
<view class="popup-header">
<text class="popup-title">取消订单</text>
<view class="popup-close" bindtap="onCloseCancelPopup">
<t-icon name="close" size="40rpx" />
<t-icon name="close" size="40rpx" color="#6F655C" />
</view>
</view>
<view class="popup-body">
@@ -314,8 +320,8 @@
</view>
</view>
<view class="popup-footer">
<button class="popup-cancel-btn" bindtap="onCloseCancelPopup">再想想</button>
<button class="popup-confirm-btn" bindtap="onConfirmCancel">确认取消</button>
<view class="popup-btn popup-btn-ghost" bindtap="onCloseCancelPopup">再想想</view>
<view class="popup-btn popup-btn-primary" bindtap="onConfirmCancel">确认取消</view>
</view>
</view>
</view>
pages/escort/recorddetail.wxss
+333 -395
View File
@@ -1,422 +1,375 @@
/* pages/escort/recorddetail.wxss
设计方向：本页是一张陪诊订单的详情，按「状态 → 就诊人 → 医院 → 服务 → 需求 → 费用 → 订单」的顺序铺开。
- 配色并入全站暖橙体系（doc/DESIGN.md）：令牌来自 app.wxss，本页不再留副本；
状态色只用 §三 四档，旧版渐变横幅与金色体系全部移除
- 头部：短横色标 + 状态胶囊 + 状态说明（内页规范，不做整块主色面板）
- 分区：发丝线切分，标题走统一的 8×34rpx 单竖条 .section-bar
- 表单：标签 --muted + 值 --ink 700；选中项走浅橙底 + 实心橙描边
- 按钮：底栏主操作实心胶囊，其余为空心胶囊；同类实心块全页只保留一处（§2.1）
- 字号阶梯：34 分节标题 / 28 正文 · 表单 / 26 标签 / 24 元信息，最小 24rpx(12px) */
page {
background-color: #FAF6F1;
background-color: var(--paper);
/* 底栏上向阴影：小偏移、小模糊，令牌不在全局色板内，故本页登记 */
--shadow-bar: 0 -2rpx 8rpx rgba(63, 43, 25, 0.06);
}
.page-bg {
min-height: 100vh;
background: var(--paper);
}
.container {
min-height: 100vh;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
padding: 0 32rpx 40rpx;
}
/* 状态头部 */
.status-header {
padding: 48rpx 32rpx;
/* ===== 头部状态 ===== */
.page-header {
padding-top: 32rpx;
}
.header-accent {
width: 64rpx;
height: 8rpx;
border-radius: 4rpx;
background: var(--brand-strong);
}
.status-row {
margin-top: 22rpx;
}
/* 状态胶囊：底色 + 描边 + 字色三件套，颜色只做强化，文字才是信息（§三） */
.status-chip {
display: inline-flex;
align-items: center;
padding: 6rpx 18rpx;
border: 2rpx solid transparent;
border-radius: 12rpx;
font-size: 24rpx;
font-weight: 700;
letter-spacing: 1rpx;
line-height: 1.4;
white-space: nowrap;
}
.status-chip-lg {
padding: 8rpx 22rpx;
font-size: 28rpx;
}
.header-subtitle {
display: block;
margin-top: 14rpx;
font-size: 28rpx;
color: var(--muted);
line-height: 1.6;
letter-spacing: 1rpx;
}
/* ===== 分区：发丝线 + 单竖条标题 ===== */
.section {
margin-top: 44rpx;
padding-top: 30rpx;
border-top: 2rpx solid var(--line);
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 0 0 32rpx 32rpx;
margin-bottom: 6rpx;
}
.status-main {
display: flex;
flex-direction: column;
gap: 12rpx;
.section-bar {
flex-shrink: 0;
width: 8rpx;
height: 34rpx;
border-radius: 4rpx;
background: var(--brand-strong);
}
.status-text {
font-size: 40rpx;
.section-title {
margin-left: 16rpx;
font-size: 34rpx;
font-weight: 700;
color: #FFFFFF;
color: var(--ink);
letter-spacing: 1rpx;
}
.status-desc {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
/* 区块右侧入口：用 padding 撑热区、负 margin 抵消，保持标题行高度 */
.section-link {
display: flex;
align-items: center;
margin: -16rpx 0 -16rpx auto;
padding: 16rpx 0 16rpx 24rpx;
}
.status-icon-wrap {
.section-link:active {
opacity: 0.6;
}
/* 详情卡片 */
.detail-card {
background: #FFFFFF;
margin: 24rpx 24rpx 0;
border-radius: 20rpx;
padding: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
.section-link-text {
margin-right: 4rpx;
font-size: 24rpx;
color: var(--brand-ink);
}
.card-title {
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: 600;
color: #1F2937;
margin-bottom: 24rpx;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #F3F4F6;
}
.card-icon {
color: #D4A853;
margin-right: 12rpx;
}
.card-edit-btn {
display: flex;
align-items: center;
gap: 6rpx;
margin-left: auto;
}
/* 信息行 */
/* ===== 信息行（只读） ===== */
.info-row {
display: flex;
align-items: center;
align-items: baseline;
justify-content: space-between;
padding: 16rpx 0;
padding: 18rpx 0;
border-bottom: 2rpx solid var(--line);
}
.info-row + .info-row {
border-top: 1rpx solid #F9FAFB;
.info-row:last-child {
border-bottom: none;
}
.info-label {
font-size: 26rpx;
color: #9CA3AF;
flex-shrink: 0;
font-size: 26rpx;
color: var(--muted);
}
.info-value {
font-size: 26rpx;
color: #374151;
text-align: right;
flex: 1;
min-width: 0;
margin-left: 24rpx;
text-align: right;
font-size: 28rpx;
color: var(--ink-2);
word-break: break-all;
}
.info-value.phone {
color: #D4A853;
}
.info-value.fee {
color: #D4A853;
.info-link {
color: var(--brand-ink);
font-weight: 700;
font-size: 30rpx;
}
.info-value.order-id {
.fee-value {
color: var(--brand-strong);
font-weight: 700;
}
.order-id {
font-size: 24rpx;
color: #6B7280;
font-family: monospace;
color: var(--muted);
letter-spacing: 1rpx;
}
/* 支付状态徽标 */
.payment-badge {
font-size: 24rpx;
font-weight: 600;
padding: 6rpx 16rpx;
border-radius: 8rpx;
}
/* 订单状态小徽标 */
.status-badge-small {
font-size: 24rpx;
font-weight: 600;
padding: 6rpx 16rpx;
border-radius: 8rpx;
}
/* 备注区域 */
.note-section {
margin-bottom: 24rpx;
}
.note-section:last-child {
margin-bottom: 0;
}
.note-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12rpx;
}
.note-label {
font-size: 26rpx;
color: #6B7280;
font-weight: 500;
margin-bottom: 8rpx;
display: block;
}
.note-edit-btn {
display: flex;
align-items: center;
gap: 6rpx;
}
.edit-text {
font-size: 24rpx;
color: #D4A853;
}
.note-content {
font-size: 28rpx;
color: #374151;
line-height: 1.7;
background: #F9FAFB;
padding: 20rpx;
border-radius: 12rpx;
display: block;
}
.note-textarea {
width: 100%;
min-height: 200rpx;
background: #F9FAFB;
border-radius: 12rpx;
padding: 20rpx;
font-size: 28rpx;
color: #1F2937;
box-sizing: border-box;
line-height: 1.7;
}
.input-placeholder {
color: #9CA3AF;
}
.note-actions {
display: flex;
justify-content: flex-end;
gap: 16rpx;
margin-top: 16rpx;
}
.note-btn {
font-size: 26rpx;
padding: 12rpx 32rpx;
border-radius: 12rpx;
border: none;
line-height: 1.5;
}
.note-btn.cancel {
background: #F3F4F6;
color: #6B7280;
}
.note-btn.confirm {
background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
color: #FFFFFF;
font-weight: 600;
}
.note-btn::after {
border: none;
}
/* 编辑行 */
/* ===== 表单行（编辑态） ===== */
.edit-row {
display: flex;
align-items: center;
padding: 16rpx 0;
border-top: 1rpx solid #F9FAFB;
justify-content: space-between;
padding: 20rpx 0;
border-bottom: 2rpx solid var(--line);
}
.edit-label {
font-size: 26rpx;
color: #9CA3AF;
flex-shrink: 0;
width: 160rpx;
font-size: 28rpx;
color: var(--muted);
}
.edit-picker {
flex: 1;
min-width: 0;
margin-left: 24rpx;
}
/* 选择器内层已由 .edit-picker 让出间距，内层值不再重复缩进 */
.edit-picker .edit-input {
margin-left: 0;
}
.edit-input {
flex: 1;
font-size: 26rpx;
color: #374151;
text-align: right;
min-width: 0;
margin-left: 24rpx;
height: 56rpx;
line-height: 56rpx;
font-size: 28rpx;
font-weight: 700;
color: var(--ink);
text-align: right;
}
.edit-input.placeholder {
font-weight: 400;
color: var(--muted);
}
.input-placeholder {
color: var(--muted);
}
.edit-radio-group {
flex: 1;
display: flex;
justify-content: flex-end;
gap: 24rpx;
margin-left: 24rpx;
gap: 16rpx;
}
/* 选中项：浅橙底 + 实心橙描边（表单选中语言） */
.edit-radio {
padding: 8rpx 28rpx;
border: 2rpx solid var(--line);
border-radius: 999rpx;
font-size: 26rpx;
color: #6B7280;
padding: 8rpx 24rpx;
border-radius: 8rpx;
border: 1rpx solid #E5E7EB;
background: #FFFFFF;
color: var(--muted);
background: transparent;
}
.edit-radio.active {
color: #D4A853;
border-color: #D4A853;
background: #FEF3C7;
background: var(--brand-soft);
border-color: var(--brand-strong);
color: var(--brand-ink);
font-weight: 700;
}
/* ===== 按键：空心胶囊 / 实心胶囊 ===== */
.edit-actions {
display: flex;
justify-content: flex-end;
gap: 16rpx;
margin-top: 24rpx;
padding-top: 16rpx;
border-top: 1rpx solid #F3F4F6;
margin-top: 28rpx;
}
.edit-btn {
font-size: 26rpx;
padding: 12rpx 32rpx;
border-radius: 12rpx;
border: none;
line-height: 1.5;
}
.edit-btn.cancel {
background: #F3F4F6;
color: #6B7280;
}
.edit-btn.confirm {
background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
color: #FFFFFF;
font-weight: 600;
}
.edit-btn::after {
border: none;
}
/* 空备注 */
.empty-note {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 20rpx;
background: #F9FAFB;
border-radius: 12rpx;
}
.empty-note-text {
font-size: 26rpx;
color: #9CA3AF;
}
.add-note-btn {
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 56rpx;
height: 56rpx;
background: #FEF3C7;
border-radius: 50%;
padding: 16rpx 44rpx;
border-radius: 999rpx;
font-size: 28rpx;
line-height: 1.4;
}
/* 底部占位 */
.btn:active {
opacity: 0.7;
}
.btn-ghost {
border: 3rpx solid var(--sep);
color: var(--muted);
background: transparent;
}
.btn-primary {
background: var(--brand-strong);
color: var(--white);
font-weight: 700;
box-shadow: var(--shadow-cta);
}
/* ===== 备注 ===== */
.note-block {
margin-top: 18rpx;
}
.note-block:first-child {
margin-top: 6rpx;
}
.note-label {
display: block;
margin-bottom: 6rpx;
font-size: 24rpx;
color: var(--muted);
}
.note-text {
display: block;
font-size: 28rpx;
color: var(--ink-2);
line-height: 1.7;
letter-spacing: 1rpx;
}
.note-empty {
margin-top: 6rpx;
padding: 24rpx 0;
}
.note-empty-text {
font-size: 28rpx;
color: var(--muted);
}
.note-textarea {
box-sizing: border-box;
width: 100%;
min-height: 200rpx;
margin-top: 6rpx;
padding: 24rpx;
border: 2rpx solid var(--line);
border-radius: 16rpx;
background: var(--paper);
font-size: 28rpx;
color: var(--ink-2);
line-height: 1.7;
}
/* ===== 底部占位与操作栏 ===== */
.bottom-placeholder {
height: 160rpx;
}
/* 底部操作栏 */
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #FFFFFF;
padding: 20rpx 32rpx;
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
bottom: 0;
z-index: 100;
}
.bottom-left {
display: flex;
align-items: center;
gap: 32rpx;
}
.action-icon-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rpx;
}
.action-icon-label {
font-size: 20rpx;
color: #6B7280;
}
.bottom-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16rpx;
flex: 1;
flex-wrap: nowrap;
padding: 20rpx 32rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
background: var(--white);
border-top: 2rpx solid var(--line);
box-shadow: var(--shadow-bar);
}
.action-btn {
font-size: 26rpx;
font-weight: 600;
padding: 16rpx 20rpx;
border-radius: 16rpx;
line-height: 1.5;
min-width: 0;
white-space: nowrap;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 18rpx 44rpx;
border-radius: 999rpx;
font-size: 30rpx;
line-height: 1.4;
}
.cancel-btn {
background: #F3F4F6;
color: #6B7280;
.action-btn:active {
opacity: 0.7;
}
.pay-btn {
background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
color: #FFFFFF;
.action-ghost {
border: 3rpx solid var(--sep);
color: var(--muted);
background: transparent;
}
.confirm-btn {
background: linear-gradient(135deg, #6B8E7B 0%, #6B8E7B 100%);
color: #FFFFFF;
.action-primary {
background: var(--brand-strong);
color: var(--white);
font-weight: 700;
box-shadow: var(--shadow-cta);
}
.rebook-btn {
background: linear-gradient(135deg, #6B8E7B 0%, #6B8E7B 100%);
color: #FFFFFF;
}
/* 弹窗遮罩 */
/* ===== 取消订单弹窗 ===== */
.popup-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 200;
background: rgba(43, 37, 33, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popup-mask.show {
@@ -424,20 +377,19 @@ page {
visibility: visible;
}
/* 弹窗内容 */
.popup-content {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #FFFFFF;
border-radius: 24rpx 24rpx 0 0;
z-index: 201;
transform: translateY(100%);
transition: transform 0.3s ease-out;
display: flex;
flex-direction: column;
max-height: 70vh;
background: var(--white);
border-radius: 32rpx 32rpx 0 0;
transform: translateY(100%);
transition: transform 0.3s ease-out;
}
.popup-content.show {
@@ -447,129 +399,115 @@ page {
.popup-header {
display: flex;
align-items: center;
justify-content: center;
padding: 32rpx;
position: relative;
border-bottom: 1rpx solid #F3F4F6;
flex-shrink: 0;
justify-content: space-between;
padding: 28rpx 32rpx;
border-bottom: 2rpx solid var(--line);
}
.popup-title {
font-size: 32rpx;
font-weight: 600;
color: #1F2937;
font-weight: 700;
color: var(--ink);
}
.popup-close {
position: absolute;
right: 32rpx;
top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
padding: 8rpx;
margin: -8rpx;
}
.popup-close:active {
opacity: 0.5;
}
.popup-body {
flex: 1;
overflow-y: auto;
padding: 32rpx;
padding: 28rpx 32rpx;
}
.popup-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24rpx;
padding: 24rpx 32rpx;
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
border-top: 1rpx solid #F3F4F6;
background: #FFFFFF;
flex-shrink: 0;
}
.popup-cancel-btn {
flex: 1;
background: #F3F4F6;
color: #6B7280;
font-size: 30rpx;
font-weight: 600;
padding: 24rpx 0;
border-radius: 20rpx;
border: none;
line-height: 1.5;
}
.popup-cancel-btn::after {
border: none;
}
.popup-confirm-btn {
flex: 1;
background: linear-gradient(135deg, #EF4444 0%, #EF4444 100%);
color: #FFFFFF;
font-size: 30rpx;
font-weight: 600;
padding: 24rpx 0;
border-radius: 20rpx;
border: none;
line-height: 1.5;
}
.popup-confirm-btn::after {
border: none;
}
/* 取消原因 */
.cancel-tip {
font-size: 28rpx;
color: #6B7280;
color: var(--muted);
line-height: 1.6;
margin-bottom: 24rpx;
}
.cancel-reason-list {
display: flex;
flex-direction: column;
gap: 8rpx;
margin-top: 8rpx;
}
.cancel-reason-item {
display: flex;
align-items: center;
gap: 16rpx;
padding: 20rpx 16rpx;
border-radius: 12rpx;
transition: background 0.2s;
border-radius: 16rpx;
transition: background-color 0.15s ease;
}
.cancel-reason-item.active {
background: #FEF3C7;
background: var(--brand-soft);
}
.reason-radio {
width: 36rpx;
height: 36rpx;
border: 3rpx solid #D1D5DB;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 0.2s;
}
.cancel-reason-item.active .reason-radio {
border-color: #D4A853;
}
.reason-radio-inner {
width: 20rpx;
height: 20rpx;
background: #D4A853;
box-sizing: border-box;
width: 36rpx;
height: 36rpx;
border: 3rpx solid var(--sep);
border-radius: 50%;
}
.reason-text {
font-size: 28rpx;
color: #374151;
.cancel-reason-item.active .reason-radio {
border-color: var(--brand-strong);
}
.reason-radio-inner {
width: 18rpx;
height: 18rpx;
border-radius: 50%;
background: var(--brand-strong);
}
.reason-text {
margin-left: 16rpx;
font-size: 28rpx;
color: var(--ink-2);
}
.popup-footer {
display: flex;
gap: 16rpx;
padding: 20rpx 32rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
border-top: 2rpx solid var(--line);
}
.popup-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 22rpx 0;
border-radius: 999rpx;
font-size: 30rpx;
line-height: 1.4;
}
.popup-btn:active {
opacity: 0.7;
}
.popup-btn-ghost {
border: 3rpx solid var(--sep);
color: var(--muted);
}
.popup-btn-primary {
background: var(--brand-strong);
color: var(--white);
font-weight: 700;
}
pages/escort/recordlist.js
+16 -10
View File
@@ -1,11 +1,13 @@
const API = require('../../utils/api.js')
// 状态配色遵循 doc/DESIGN.md §三：「待服务 / 服务中 / 已完成 / 已取消」四档，
// 颜色只做强化，文字才是信息。待确认与已确认同属「等待」阶段，共用待服务档
const STATUS_MAP = {
pending: { text: '待确认', color: '#F59E0B', bg: '#FEF3C7' },
confirmed: { text: '待就诊', color: '#3B82F6', bg: '#DBEAFE' },
in_progress: { text: '进行中', color: '#8B5CF6', bg: '#EDE9FE' },
completed: { text: '已完成', color: '#10B981', bg: '#D1FAE5' },
cancelled: { text: '已取消', color: '#6B7280', bg: '#F3F4F6' }
pending: { text: '待确认', color: '#0F766E', bg: '#ECF7F4', border: '#C7E5DF' },
confirmed: { text: '已确认', color: '#0F766E', bg: '#ECF7F4', border: '#C7E5DF' },
in_progress: { text: '进行中', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
completed: { text: '已完成', color: '#1F7A4D', bg: '#EAF6EE', border: '#CDE9D7' },
cancelled: { text: '已取消', color: '#B4231A', bg: '#FCF0EE', border: '#F2D6D1' }
}
const TYPE_MAP = {
@@ -17,11 +19,13 @@ const TYPE_MAP = {
other: '其他'
}
// 支付状态：已支付走「已完成」档；未支付 / 退款中复用主色浅档提示待处理；
// 已退款走中性档（--muted 字 + --sep 描边 + 透明底，见 §三 禁用/中性写法）
const PAYMENT_STATUS_MAP = {
unpaid: { text: '未支付', color: '#F59E0B', bg: '#FEF3C7' },
paid: { text: '已支付', color: '#3B82F6', bg: '#DBEAFE' },
refunding: { text: '退款中', color: '#F59E0B', bg: '#FEF3C7' },
refunded: { text: '已退款', color: '#6B7280', bg: '#F3F4F6' }
unpaid: { text: '未支付', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
paid: { text: '已支付', color: '#1F7A4D', bg: '#EAF6EE', border: '#CDE9D7' },
refunding: { text: '退款中', color: '#B8520A', bg: '#FFF4E8', border: '#FFE0C2' },
refunded: { text: '已退款', color: '#6F655C', bg: 'transparent', border: '#E5DACC' }
}
Page({
@@ -148,13 +152,15 @@ Page({
statusText: statusInfo.text,
statusColor: statusInfo.color,
statusBg: statusInfo.bg,
statusBorder: statusInfo.border,
appointmentTime,
fee: fee.toFixed(2),
patientNote: item.notes?.patientNote || '',
escortNote: item.notes?.escortNote || '',
paymentStatusText: paymentStatusInfo.text,
paymentStatusColor: paymentStatusInfo.color,
paymentStatusBg: paymentStatusInfo.bg
paymentStatusBg: paymentStatusInfo.bg,
paymentStatusBorder: paymentStatusInfo.border
}
},
pages/escort/recordlist.json
+4 -1
View File
@@ -1,6 +1,9 @@
{
"navigationBarTitleText": "预约记录",
"usingComponents": {},
"usingComponents": {
"t-icon": "tdesign-miniprogram/icon/icon",
"t-loading": "tdesign-miniprogram/loading/loading"
},
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
}
pages/escort/recordlist.wxml
+49 -38
View File
@@ -1,18 +1,31 @@
<view class="container">
<!-- 状态筛选标签 -->
<view class="status-tabs">
<view class="page-bg">
<!-- 状态筛选：吸顶横滑胶囊。
选中态 = 浅橙底 + 2rpx 实心橙描边 + 暖橙字（全页唯一「选中」语言）；
未选中 = 纸面安静胶囊（透明底 + 发丝边 + --muted 字）。
胶囊必须带文字标签，颜色只做强化（DESIGN.md §四.8） -->
<view class="tabs-bar">
<scroll-view class="tabs-scroll" scroll-x show-scrollbar="{{false}}">
<view class="tabs">
<view
class="tab-item {{statusFilter === item.value ? 'active' : ''}}"
class="tab {{statusFilter === item.value ? 'active' : ''}}"
wx:for="{{statusTabs}}"
wx:key="value"
data-value="{{item.value}}"
bindtap="onTabChange"
>
{{item.label}}<text class="tab-count" wx:if="{{item.count > 0}}">({{item.count}})</text>
<text class="tab-label">{{item.label}}</text>
<text class="tab-count" wx:if="{{item.count > 0}}">{{item.count}}</text>
</view>
</view>
</scroll-view>
</view>
<!-- 记录列表 -->
<view class="container">
<!-- 记录列表：一单一卡。
卡内只留可扫读的四段：类型 + 状态 → 时间 → 就诊信息 → 费用 + 支付状态。
需求、陪诊记录等长文本交给详情页，保证每张卡一眼看完 -->
<view class="record-list" wx:if="{{records.length > 0}}">
<view
class="record-card"
@@ -21,19 +34,23 @@
data-id="{{item._id}}"
bindtap="onTapRecord"
>
<!-- 卡片头部 -->
<view class="card-header">
<view class="header-left">
<!-- 头部：服务类型 + 订单状态胶囊 -->
<view class="card-head">
<text class="record-type">{{item.typeText}}</text>
<text class="record-time">{{item.appointmentTime}}</text>
</view>
<view class="status-badge" style="color: {{item.statusColor}}; background: {{item.statusBg}};">
{{item.statusText}}
</view>
<view
class="status-chip"
style="background: {{item.statusBg}}; color: {{item.statusColor}}; border-color: {{item.statusBorder}};"
>{{item.statusText}}</view>
</view>
<!-- 卡片内容 -->
<view class="card-body">
<!-- 预约时间 -->
<view class="card-time">
<t-icon name="time" size="26rpx" color="#6F655C" />
<text class="time-text">{{item.appointmentTime}}</text>
</view>
<!-- 就诊信息 -->
<view class="card-info">
<view class="info-row">
<text class="info-label">就诊医院</text>
<text class="info-value">{{item.hospital}}</text>
@@ -43,31 +60,23 @@
<text class="info-value">{{item.department}}</text>
</view>
<view class="info-row">
<text class="info-label">就诊人姓名</text>
<text class="info-label">就诊人</text>
<text class="info-value">{{item.patientName}}</text>
</view>
<view class="info-row">
<text class="info-label">电话</text>
<text class="info-value">{{item.patientMobile}}</text>
</view>
<view class="info-row">
<text class="info-label">就诊需求</text>
<text class="info-value">{{item.patientNote}}</text>
</view>
<view class="info-row">
<text class="info-label">陪诊说明</text>
<text class="info-value">{{item.escortNote}}</text>
</view>
</view>
<!-- 卡片底部 -->
<view class="card-footer">
<view class="fee-wrap">
<text class="fee-label">费用：</text>
<text class="fee-value">¥{{item.fee}}</text>
<!-- 底部：费用 + 支付状态 + 进详情页的显性暗示 -->
<view class="card-foot">
<view class="fee">
<text class="fee-sym">¥</text>
<text class="fee-num">{{item.fee}}</text>
</view>
<view class="status-badge" style="color: {{item.paymentStatusColor}}; background: {{item.paymentStatusBg}};">
{{item.paymentStatusText}}
<view class="foot-right">
<view
class="pay-chip"
style="background: {{item.paymentStatusBg}}; color: {{item.paymentStatusColor}}; border-color: {{item.paymentStatusBorder}};"
>{{item.paymentStatusText}}</view>
<t-icon name="chevron-right" size="28rpx" color="#6F655C" />
</view>
</view>
</view>
@@ -75,7 +84,7 @@
<!-- 空状态 -->
<view class="empty-state" wx:if="{{!loading && records.length === 0}}">
<t-icon name="file-unknown" size="120rpx" color="#D1D5DB" />
<t-icon name="file-unknown" size="120rpx" color="#A79C92" />
<text class="empty-text">暂无陪诊记录</text>
<text class="empty-subtext">您还没有预约陪诊服务</text>
</view>
@@ -87,6 +96,8 @@
<!-- 到底提示 -->
<view class="no-more" wx:if="{{!loading && !hasMore && records.length > 0}}">
<text>—— 已经到底了 ——</text>
<text class="no-more-text">已经到底了</text>
</view>
</view>
</view>
pages/escort/recordlist.wxss
+154 -89
View File
@@ -1,180 +1,245 @@
/* pages/escort/recordlist.wxss
设计方向：本页是「一单一卡」的预约记录表，扫读优先。
- 配色并入全站暖橙体系（doc/DESIGN.md）：令牌来自 app.wxss，本页不再留副本；
状态色只用 §三 四档，旧的金色体系与全部渐变已移除
- 顶部筛选做成吸顶横滑胶囊：选中态 = 浅橙底 + 2rpx 实心橙描边 + 暖橙字，
未选中 = 纸面安静胶囊；胶囊带文字标签，颜色只做强化（§四.8）
- 卡面走「白底 + 发丝边 + 紧阴影」（中性 --shadow-card，28rpx 圆角），
与首页、清单页同一套白面语言
- 卡内四段：类型 + 状态 → 时间 → 就诊信息 → 费用 + 支付状态；
长文本（需求、陪诊记录）交给详情页，保证每张卡一眼看完
- 形状锁定：卡 28rpx、状态胶囊 10rpx、筛选胶囊 999rpx
- 字号阶梯：费用 34 / 类型 30 / 就诊信息 28 / 时间 · 胶囊 24（rpx），
全页最小 24rpx(12px)，达可读下限 */
page {
background-color: #FAF6F1;
background-color: var(--paper);
}
.page-bg {
min-height: 100vh;
background: var(--paper);
}
.container {
min-height: 100vh;
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
padding: 0 32rpx calc(40rpx + env(safe-area-inset-bottom));
}
/* 状态筛选标签 */
.status-tabs {
display: flex;
align-items: center;
gap: 4rpx;
padding: 24rpx 32rpx;
background: #FFFFFF;
/* ===== 顶部筛选：吸顶横滑 ===== */
.tabs-bar {
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
overflow-x: auto;
padding: 20rpx 0 12rpx;
background: var(--paper);
}
.tabs-scroll {
white-space: nowrap;
}
.tab-item {
.tabs {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12rpx 28rpx;
gap: 16rpx;
padding: 0 32rpx;
}
.tab {
display: inline-flex;
align-items: baseline;
padding: 12rpx 26rpx;
border: 2rpx solid var(--line);
border-radius: 999rpx;
background: transparent;
transition: background-color 0.15s ease;
}
.tab:active {
opacity: 0.75;
}
.tab-label {
font-size: 26rpx;
color: #6B7280;
background: #F3F4F6;
border-radius: 32rpx;
transition: all 0.2s;
color: var(--muted);
}
.tab-item.active {
color: #FFFFFF;
background: linear-gradient(135deg, #D4A853 0%, #D4A853 100%);
font-weight: 600;
.tab-count {
margin-left: 6rpx;
font-size: 24rpx;
color: var(--muted);
}
/* 记录列表 */
/* 选中：浅橙底 + 实心橙描边 + 暖橙字（浅橙底 5.96:1，过 AA） */
.tab.active {
background: var(--brand-soft);
border-color: var(--brand-strong);
}
.tab.active .tab-label,
.tab.active .tab-count {
color: var(--brand-ink);
}
/* ===== 记录列表 ===== */
.record-list {
padding: 20rpx 24rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
gap: 24rpx;
margin-top: 12rpx;
}
.record-card {
background: #FFFFFF;
border-radius: 20rpx;
padding: 28rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
padding: 28rpx 28rpx 24rpx;
border-radius: 28rpx;
background: var(--white);
border: 2rpx solid var(--line);
box-shadow: var(--shadow-card);
transition: transform 0.15s ease;
}
/* 卡片头部 */
.card-header {
.record-card:active {
transform: scale(0.99);
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #F3F4F6;
}
.header-left {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.record-type {
font-size: 30rpx;
font-weight: 600;
color: #1F2937;
font-weight: 700;
color: var(--ink);
letter-spacing: 1rpx;
}
.record-time {
/* 状态胶囊：底色 + 描边 + 字色三件套，颜色只做强化，文字才是信息（§三） */
.status-chip {
flex-shrink: 0;
padding: 4rpx 16rpx;
border: 2rpx solid transparent;
border-radius: 10rpx;
font-size: 24rpx;
color: #9CA3AF;
font-weight: 700;
letter-spacing: 1rpx;
line-height: 1.4;
white-space: nowrap;
}
.status-badge {
font-size: 24rpx;
font-weight: 600;
padding: 8rpx 20rpx;
border-radius: 8rpx;
}
/* 卡片内容 */
.card-body {
.card-time {
display: flex;
flex-direction: column;
gap: 16rpx;
margin-bottom: 20rpx;
align-items: center;
margin-top: 14rpx;
}
.time-text {
margin-left: 8rpx;
font-size: 24rpx;
color: var(--muted);
}
.card-info {
margin-top: 6rpx;
}
.info-row {
display: flex;
align-items: center;
align-items: baseline;
margin-top: 12rpx;
}
.info-label {
font-size: 26rpx;
color: #9CA3AF;
width: 140rpx;
flex-shrink: 0;
width: 130rpx;
font-size: 26rpx;
color: var(--muted);
}
.info-value {
font-size: 26rpx;
color: #374151;
flex: 1;
min-width: 0;
font-size: 28rpx;
color: var(--ink-2);
}
/* 卡片底部 */
.card-footer {
.card-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20rpx;
border-top: 1rpx solid #F3F4F6;
margin-top: 22rpx;
padding-top: 22rpx;
border-top: 2rpx solid var(--line);
}
.fee-wrap {
.fee {
display: flex;
align-items: baseline;
}
.fee-label {
.fee-sym {
font-size: 26rpx;
color: #6B7280;
}
.fee-value {
font-size: 32rpx;
color: #D4A853;
font-weight: 700;
color: var(--brand-strong);
}
.fee-num {
margin-left: 2rpx;
font-size: 34rpx;
font-weight: 700;
color: var(--brand-strong);
}
.foot-right {
display: flex;
align-items: center;
}
/* 空状态 */
/* 支付状态胶囊：比订单状态轻一档（无底色的中性档只留字与描边） */
.pay-chip {
margin-right: 12rpx;
padding: 4rpx 14rpx;
border: 2rpx solid transparent;
border-radius: 10rpx;
font-size: 24rpx;
letter-spacing: 1rpx;
line-height: 1.4;
white-space: nowrap;
}
/* ===== 空 / 加载 / 到底 ===== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 200rpx;
padding-top: 180rpx;
}
.empty-text {
font-size: 30rpx;
color: #9CA3AF;
margin-top: 24rpx;
font-size: 28rpx;
color: var(--muted);
}
.empty-subtext {
font-size: 26rpx;
color: #D1D5DB;
margin-top: 12rpx;
margin-top: 10rpx;
font-size: 24rpx;
color: var(--muted);
}
/* 加载中 */
.loading-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
padding: 60rpx;
}
/* 到底提示 */
.no-more {
padding: 36rpx 0 8rpx;
text-align: center;
padding: 32rpx;
font-size: 24rpx;
color: #D1D5DB;
}
.no-more-text {
font-size: 24rpx;
color: var(--muted);
}