tmp
This commit is contained in:
@@ -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: '删除中...' })
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "预约记录详情",
|
||||
"usingComponents": {},
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
},
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundTextStyle": "dark"
|
||||
}
|
||||
|
||||
+282
-276
@@ -1,290 +1,296 @@
|
||||
<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)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-bg">
|
||||
<view class="container">
|
||||
|
||||
<!-- 就诊人信息 -->
|
||||
<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>
|
||||
<!-- 状态头：短横色标 + 状态胶囊 + 状态说明。
|
||||
状态色只包住胶囊文字本身（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 wx:if="{{!editingPatient}}">
|
||||
<view class="info-row">
|
||||
<text class="info-label">姓名</text>
|
||||
<text class="info-value">{{record.patientName || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">性别</text>
|
||||
<text class="info-value">{{record.patientSexText || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">年龄</text>
|
||||
<text class="info-value">{{record.patientAge ? record.patientAge + '岁' : '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">体重</text>
|
||||
<text class="info-value">{{record.patientWeight ? record.patientWeight + 'kg' : '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">身高</text>
|
||||
<text class="info-value">{{record.patientHeight ? record.patientHeight + 'cm' : '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">联系电话</text>
|
||||
<text class="info-value phone" 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}}">
|
||||
<view class="edit-row">
|
||||
<text class="edit-label">姓名</text>
|
||||
<input class="edit-input" value="{{editPatient.name}}" 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="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 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>
|
||||
|
||||
<block wx:if="{{!editingPatient}}">
|
||||
<view class="info-row">
|
||||
<text class="info-label">姓名</text>
|
||||
<text class="info-value">{{record.patientName || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">性别</text>
|
||||
<text class="info-value">{{record.patientSexText || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">年龄</text>
|
||||
<text class="info-value">{{record.patientAge ? record.patientAge + '岁' : '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">体重</text>
|
||||
<text class="info-value">{{record.patientWeight ? record.patientWeight + 'kg' : '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">身高</text>
|
||||
<text class="info-value">{{record.patientHeight ? record.patientHeight + 'cm' : '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">联系电话</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>
|
||||
</block>
|
||||
|
||||
<block wx:else>
|
||||
<view class="edit-row">
|
||||
<text class="edit-label">姓名</text>
|
||||
<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-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 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="请输入" 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="请输入" 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="请输入" 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="请输入" placeholder-class="input-placeholder" data-field="idnumber" bindinput="onPatientInfoInput" />
|
||||
</view>
|
||||
<view class="edit-actions">
|
||||
<view class="btn btn-ghost" bindtap="onCancelEditPatientInfo">取消</view>
|
||||
<view class="btn btn-primary" bindtap="onSavePatientInfo">保存</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 医院预约信息 -->
|
||||
<view class="section">
|
||||
<view class="section-head">
|
||||
<view class="section-bar"></view>
|
||||
<text class="section-title">医院预约信息</text>
|
||||
</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" />
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊省份</text>
|
||||
<text class="info-value">{{record.hospitalProvince || '--'}}</text>
|
||||
</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" />
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊医院</text>
|
||||
<text class="info-value">{{record.hospitalName || '--'}}</text>
|
||||
</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" />
|
||||
<view class="info-row" wx:if="{{record.hospitalAddress}}">
|
||||
<text class="info-label">医院地址</text>
|
||||
<text class="info-value">{{record.hospitalAddress}}</text>
|
||||
</view>
|
||||
<view class="edit-row">
|
||||
<text class="edit-label">身份证号</text>
|
||||
<input class="edit-input" value="{{editPatient.idnumber}}" placeholder="请输入身份证号" data-field="idnumber" bindinput="onPatientInfoInput" />
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊科室</text>
|
||||
<text class="info-value">{{record.hospitalDepartment || '--'}}</text>
|
||||
</view>
|
||||
<view class="edit-actions">
|
||||
<button class="edit-btn cancel" bindtap="onCancelEditPatientInfo">取消</button>
|
||||
<button class="edit-btn confirm" bindtap="onSavePatientInfo">保存</button>
|
||||
<view class="info-row" wx:if="{{record.hospitalDoctor}}">
|
||||
<text class="info-label">就诊医生</text>
|
||||
<text class="info-value">{{record.hospitalDoctor}}</text>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{record.medicalRecordNo}}">
|
||||
<text class="info-label">病历号</text>
|
||||
<text class="info-value">{{record.medicalRecordNo}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约日期</text>
|
||||
<text class="info-value">{{record.scheduleDate || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约时间</text>
|
||||
<text class="info-value">{{record.scheduleStartTime || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{record.scheduleEndTime}}">
|
||||
<text class="info-label">结束时间</text>
|
||||
<text class="info-value">{{record.scheduleEndTime}}</text>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{record.scheduleDuration}}">
|
||||
<text class="info-label">陪诊时长</text>
|
||||
<text class="info-value">{{record.scheduleDuration}}分钟</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 陪诊服务 -->
|
||||
<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" wx:if="{{record.sexRequirementText}}">
|
||||
<text class="info-label">性别要求</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>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{record.attendantMobile}}">
|
||||
<text class="info-label">陪诊员电话</text>
|
||||
<text class="info-value info-link" bindtap="onCallAttendant">{{record.attendantMobile}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 陪诊需求与症状 -->
|
||||
<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>
|
||||
|
||||
<block wx:if="{{editing}}">
|
||||
<textarea
|
||||
class="note-textarea"
|
||||
value="{{editPatientNote}}"
|
||||
placeholder="请输入陪诊需求或症状描述"
|
||||
maxlength="500"
|
||||
placeholder-class="input-placeholder"
|
||||
bindinput="onPatientNoteInput"
|
||||
focus="{{editing}}"
|
||||
/>
|
||||
<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-block" wx:if="{{record.escortNote}}">
|
||||
<text class="note-label">陪诊记录</text>
|
||||
<text class="note-text">{{record.escortNote}}</text>
|
||||
</view>
|
||||
<view class="note-block" wx:if="{{record.medicalSummary}}">
|
||||
<text class="note-label">就诊摘要</text>
|
||||
<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="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-value">¥{{record.totalFee}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">已支付</text>
|
||||
<text class="info-value">¥{{record.paidFee}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">支付状态</text>
|
||||
<view
|
||||
class="status-chip"
|
||||
style="background: {{record.paymentStatusBg}}; color: {{record.paymentStatusColor}}; border-color: {{record.paymentStatusBorder}};"
|
||||
>{{record.paymentStatusText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<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 order-id">{{record._id || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单状态</text>
|
||||
<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>
|
||||
<text class="info-value">{{record.createTime || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">更新时间</text>
|
||||
<text class="info-value">{{record.updateTime || '--'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部占位 -->
|
||||
<view class="bottom-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 医院预约信息 -->
|
||||
<view class="detail-card">
|
||||
<view class="card-title">
|
||||
<t-icon name="hospital" class="card-icon" size="36rpx" />
|
||||
<text>医院预约信息</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊省份</text>
|
||||
<text class="info-value">{{record.hospitalProvince || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊医院</text>
|
||||
<text class="info-value">{{record.hospitalName || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{record.hospitalAddress}}">
|
||||
<text class="info-label">医院地址</text>
|
||||
<text class="info-value">{{record.hospitalAddress}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊科室</text>
|
||||
<text class="info-value">{{record.hospitalDepartment || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{record.hospitalDoctor}}">
|
||||
<text class="info-label">就诊医生</text>
|
||||
<text class="info-value">{{record.hospitalDoctor}}</text>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{record.medicalRecordNo}}">
|
||||
<text class="info-label">病历号</text>
|
||||
<text class="info-value">{{record.medicalRecordNo}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约日期</text>
|
||||
<text class="info-value">{{record.scheduleDate || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约时间</text>
|
||||
<text class="info-value">{{record.scheduleStartTime || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{record.scheduleEndTime}}">
|
||||
<text class="info-label">结束时间</text>
|
||||
<text class="info-value">{{record.scheduleEndTime}}</text>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{record.scheduleDuration}}">
|
||||
<text class="info-label">陪诊时长</text>
|
||||
<text class="info-value">{{record.scheduleDuration}}分钟</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 陪诊服务信息 -->
|
||||
<view class="detail-card">
|
||||
<view class="card-title">
|
||||
<t-icon name="service" class="card-icon" size="36rpx" />
|
||||
<text>陪诊服务</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">服务类型</text>
|
||||
<text class="info-value">{{record.escortServiceName || '陪诊服务'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">性别要求</text>
|
||||
<text class="info-value">{{record.escortSexRequirementText}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">陪诊员</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">
|
||||
<text class="info-label">陪诊员电话</text>
|
||||
<text class="info-value phone" 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>
|
||||
</view>
|
||||
<view class="note-section" wx:if="{{record.patientNote || editing}}">
|
||||
<textarea
|
||||
wx:if="{{editing}}"
|
||||
class="note-textarea"
|
||||
value="{{editPatientNote}}"
|
||||
placeholder="请输入陪诊需求或症状描述"
|
||||
maxlength="500"
|
||||
placeholder-class="input-placeholder"
|
||||
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>
|
||||
</view>
|
||||
<view class="note-section" wx:if="{{record.escortNote}}">
|
||||
<text class="note-label">陪诊记录</text>
|
||||
<text class="note-content">{{record.escortNote}}</text>
|
||||
</view>
|
||||
<view class="note-section" 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" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 费用信息 -->
|
||||
<view class="detail-card">
|
||||
<view class="card-title">
|
||||
<t-icon name="wallet" class="card-icon" size="36rpx" />
|
||||
<text>费用信息</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">服务费用</text>
|
||||
<text class="info-value fee">¥{{record.totalFee}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">已支付</text>
|
||||
<text class="info-value">¥{{record.paidFee}}</text>
|
||||
</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>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="detail-card">
|
||||
<view class="card-title">
|
||||
<t-icon name="order" class="card-icon" size="36rpx" />
|
||||
<text>订单信息</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单编号</text>
|
||||
<text class="info-value order-id">{{record._id || '--'}}</text>
|
||||
</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>
|
||||
<view class="info-row">
|
||||
<text class="info-label">创建时间</text>
|
||||
<text class="info-value">{{record.createTime || '--'}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">更新时间</text>
|
||||
<text class="info-value">{{record.updateTime || '--'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部占位 -->
|
||||
<view class="bottom-placeholder"></view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<!-- 底部操作栏：同类实心块只保留一处——
|
||||
再次预约为「已完成」时让位给「确认完成」，为「已取消」时自己成为主操作（§2.1） -->
|
||||
<view class="bottom-bar">
|
||||
<view class="bottom-right">
|
||||
<view
|
||||
class="action-btn cancel-btn"
|
||||
wx:if="{{record.status === 'pending' || record.status === 'confirmed'}}"
|
||||
bindtap="onCancelOrder"
|
||||
>取消订单</view>
|
||||
<view
|
||||
class="action-btn cancel-btn"
|
||||
wx:if="{{record.paymentStatus === 'unpaid' && record.status !== 'completed'}}"
|
||||
bindtap="onDeleteOrder"
|
||||
>删除订单</view>
|
||||
<view
|
||||
class="action-btn confirm-btn"
|
||||
wx:if="{{record.status === 'completed'}}"
|
||||
bindtap="onConfirmComplete"
|
||||
>确认完成</view>
|
||||
<view
|
||||
class="action-btn rebook-btn"
|
||||
wx:if="{{record.status === 'completed' || record.status === 'cancelled'}}"
|
||||
bindtap="onRebook"
|
||||
>再次预约</view>
|
||||
</view>
|
||||
<view
|
||||
class="action-btn action-ghost"
|
||||
wx:if="{{record.status === 'pending' || record.status === 'confirmed'}}"
|
||||
bindtap="onCancelOrder"
|
||||
>取消订单</view>
|
||||
<view
|
||||
class="action-btn action-ghost"
|
||||
wx:if="{{record.paymentStatus === 'unpaid' && record.status !== 'completed'}}"
|
||||
bindtap="onDeleteOrder"
|
||||
>删除订单</view>
|
||||
<view
|
||||
class="action-btn action-primary"
|
||||
wx:if="{{record.status === 'completed'}}"
|
||||
bindtap="onConfirmComplete"
|
||||
>确认完成</view>
|
||||
<view
|
||||
class="action-btn {{record.status === 'cancelled' ? 'action-primary' : 'action-ghost'}}"
|
||||
wx:if="{{record.status === 'completed' || record.status === 'cancelled'}}"
|
||||
bindtap="onRebook"
|
||||
>再次预约</view>
|
||||
</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>
|
||||
</view>
|
||||
+333
-395
@@ -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;
|
||||
}
|
||||
+16
-10
@@ -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
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "预约记录",
|
||||
"usingComponents": {},
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-loading": "tdesign-miniprogram/loading/loading"
|
||||
},
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundTextStyle": "dark"
|
||||
}
|
||||
|
||||
@@ -1,92 +1,103 @@
|
||||
<view class="container">
|
||||
<!-- 状态筛选标签 -->
|
||||
<view class="status-tabs">
|
||||
<view
|
||||
class="tab-item {{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>
|
||||
</view>
|
||||
<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 {{statusFilter === item.value ? 'active' : ''}}"
|
||||
wx:for="{{statusTabs}}"
|
||||
wx:key="value"
|
||||
data-value="{{item.value}}"
|
||||
bindtap="onTabChange"
|
||||
>
|
||||
<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="record-list" wx:if="{{records.length > 0}}">
|
||||
<view
|
||||
class="record-card"
|
||||
wx:for="{{records}}"
|
||||
wx:key="_id"
|
||||
data-id="{{item._id}}"
|
||||
bindtap="onTapRecord"
|
||||
>
|
||||
<!-- 卡片头部 -->
|
||||
<view class="card-header">
|
||||
<view class="header-left">
|
||||
<view class="container">
|
||||
|
||||
<!-- 记录列表：一单一卡。
|
||||
卡内只留可扫读的四段：类型 + 状态 → 时间 → 就诊信息 → 费用 + 支付状态。
|
||||
需求、陪诊记录等长文本交给详情页，保证每张卡一眼看完 -->
|
||||
<view class="record-list" wx:if="{{records.length > 0}}">
|
||||
<view
|
||||
class="record-card"
|
||||
wx:for="{{records}}"
|
||||
wx:key="_id"
|
||||
data-id="{{item._id}}"
|
||||
bindtap="onTapRecord"
|
||||
>
|
||||
<!-- 头部：服务类型 + 订单状态胶囊 -->
|
||||
<view class="card-head">
|
||||
<text class="record-type">{{item.typeText}}</text>
|
||||
<text class="record-time">{{item.appointmentTime}}</text>
|
||||
<view
|
||||
class="status-chip"
|
||||
style="background: {{item.statusBg}}; color: {{item.statusColor}}; border-color: {{item.statusBorder}};"
|
||||
>{{item.statusText}}</view>
|
||||
</view>
|
||||
<view class="status-badge" style="color: {{item.statusColor}}; background: {{item.statusBg}};">
|
||||
{{item.statusText}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 卡片内容 -->
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊医院</text>
|
||||
<text class="info-value">{{item.hospital}}</text>
|
||||
<!-- 预约时间 -->
|
||||
<view class="card-time">
|
||||
<t-icon name="time" size="26rpx" color="#6F655C" />
|
||||
<text class="time-text">{{item.appointmentTime}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊科室</text>
|
||||
<text class="info-value">{{item.department}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<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-info">
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊医院</text>
|
||||
<text class="info-value">{{item.hospital}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊科室</text>
|
||||
<text class="info-value">{{item.department}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">就诊人</text>
|
||||
<text class="info-value">{{item.patientName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-badge" style="color: {{item.paymentStatusColor}}; background: {{item.paymentStatusBg}};">
|
||||
{{item.paymentStatusText}}
|
||||
|
||||
<!-- 底部：费用 + 支付状态 + 进详情页的显性暗示 -->
|
||||
<view class="card-foot">
|
||||
<view class="fee">
|
||||
<text class="fee-sym">¥</text>
|
||||
<text class="fee-num">{{item.fee}}</text>
|
||||
</view>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:if="{{!loading && records.length === 0}}">
|
||||
<t-icon name="file-unknown" size="120rpx" color="#D1D5DB" />
|
||||
<text class="empty-text">暂无陪诊记录</text>
|
||||
<text class="empty-subtext">您还没有预约陪诊服务</text>
|
||||
</view>
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:if="{{!loading && records.length === 0}}">
|
||||
<t-icon name="file-unknown" size="120rpx" color="#A79C92" />
|
||||
<text class="empty-text">暂无陪诊记录</text>
|
||||
<text class="empty-subtext">您还没有预约陪诊服务</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<view class="loading-wrap" wx:if="{{loading}}">
|
||||
<t-loading theme="circular" size="40rpx" text="加载中..." />
|
||||
</view>
|
||||
<!-- 加载中 -->
|
||||
<view class="loading-wrap" wx:if="{{loading}}">
|
||||
<t-loading theme="circular" size="40rpx" text="加载中..." />
|
||||
</view>
|
||||
|
||||
<!-- 到底提示 -->
|
||||
<view class="no-more" wx:if="{{!loading && !hasMore && records.length > 0}}">
|
||||
<text class="no-more-text">已经到底了</text>
|
||||
</view>
|
||||
|
||||
<!-- 到底提示 -->
|
||||
<view class="no-more" wx:if="{{!loading && !hasMore && records.length > 0}}">
|
||||
<text>—— 已经到底了 ——</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
+154
-89
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user