392 lines
17 KiB
Plaintext
392 lines
17 KiB
Plaintext
<view class="page-bg">
|
|
<!-- 数据到位前不渲染内容：record 初始是 {}，直接铺开会先闪一帧
|
|
「就诊医院待补充 / ¥0.00 / 暂无备注信息」的假数据，用 _id 作到位判据 -->
|
|
<view class="container" wx:if="{{record._id}}">
|
|
|
|
<!-- 状态头：短横色标 + 状态胶囊 + 状态说明，是本页的「单据抬头」，不走卡片。
|
|
状态色只包住胶囊文字本身（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>
|
|
<text class="header-subtitle">{{record.statusDesc}}</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="{{record.healthProfileId}}" bindtap="onEditProfile">
|
|
<text class="section-link-text">修改</text>
|
|
<t-icon name="edit" size="26rpx" color="#6F655C" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 身份牌：首字牌定位「是谁」，姓名、体征元信息、证件号收进首字牌右侧纵列；
|
|
发丝线之下只留一个动作（拨打） -->
|
|
<view class="card patient-card">
|
|
<view class="patient-head">
|
|
<!-- 首字牌沿用「浅橙衬底承载标识」：有姓名取姓氏首字，无则退到 user 图标 -->
|
|
<view class="patient-mark">
|
|
<text wx:if="{{record.patientInitial}}" class="patient-mark-text">{{record.patientInitial}}</text>
|
|
<t-icon wx:else name="user" size="44rpx" color="#9B4508" />
|
|
</view>
|
|
<view class="patient-info">
|
|
<text class="patient-name">{{record.patientName || '--'}}</text>
|
|
|
|
<!-- 体征行：空值已在 JS 里整项剔除，这里只按序插竖线 -->
|
|
<view class="meta-list patient-meta-row" wx:if="{{record.patientMeta.length > 0}}">
|
|
<block wx:for="{{record.patientMeta}}" wx:key="*this">
|
|
<view class="meta-sep" wx:if="{{index > 0}}"></view>
|
|
<text class="meta-item">{{item}}</text>
|
|
</block>
|
|
</view>
|
|
|
|
<text class="patient-id" wx:if="{{record.patientIdnumber}}">身份证号 {{record.patientIdnumber}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 发丝线之上是「是谁」，之下是唯一动作：整行可点拨打 -->
|
|
<view class="patient-contact" bindtap="onCallPatient">
|
|
<t-icon name="call" size="30rpx" color="#9B4508" />
|
|
<text class="patient-contact-text">{{record.patientMobile || '--'}}</text>
|
|
</view>
|
|
</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="{{record.canEditOrder}}" bindtap="onEditHospital">
|
|
<text class="section-link-text">修改</text>
|
|
<t-icon name="edit" size="26rpx" color="#6F655C" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card hospital-card">
|
|
<!-- 省份提到右上角，与医院名同一行：名称是主信息，省份降为右侧小字标签 -->
|
|
<view class="hospital-head">
|
|
<text class="hospital-name {{!record.hospitalName ? 'is-empty' : ''}}">{{record.hospitalName || '就诊医院待补充'}}</text>
|
|
<text class="hospital-province" wx:if="{{record.hospitalProvince}}">{{record.hospitalProvince}}</text>
|
|
</view>
|
|
|
|
<view class="meta-list hospital-meta" wx:if="{{record.hospitalMeta.length > 0}}">
|
|
<block wx:for="{{record.hospitalMeta}}" wx:key="*this">
|
|
<view class="meta-sep" wx:if="{{index > 0}}"></view>
|
|
<text class="meta-item">{{item}}</text>
|
|
</block>
|
|
</view>
|
|
|
|
<text class="hospital-address" wx:if="{{record.hospitalAddress}}">{{record.hospitalAddress}}</text>
|
|
|
|
<!-- 预约时间条：日期（带星期）在左、时段与陪诊时长在右，一行排开；空值有兜底文案 -->
|
|
<view class="schedule-row">
|
|
<text class="schedule-date {{!record.scheduleDateText ? 'is-empty' : ''}}">{{record.scheduleDateText || '预约日期待定'}}</text>
|
|
<text class="schedule-time" wx:if="{{record.scheduleTimeText}}">{{record.scheduleTimeText}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 陪诊需求与症状：纯文本块展示，修改走底部弹窗（textarea 在弹窗里） -->
|
|
<view class="section">
|
|
<view class="section-head">
|
|
<view class="section-bar"></view>
|
|
<text class="section-title">陪诊需求与症状</text>
|
|
<view class="section-link" wx:if="{{record.canEditOrder}}" bindtap="onEditPatientNote">
|
|
<text class="section-link-text">修改</text>
|
|
<t-icon name="edit" size="26rpx" color="#6F655C" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<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>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 服务与费用：服务名称为主、支付状态胶囊收尾同行（仅待处理时显示，已付清不出现）；
|
|
费用行用字号差做层级（金额是全卡唯一的大字号焦点），不铺清单行；
|
|
未付清时在费用行下补一句客服指引（全站没有线上支付入口，本页给不出可点的动作）。
|
|
位置收在末尾：前面各块回答「服务什么」（人 → 去哪 → 要什么），
|
|
费用与订单号同属「账与单」，连排在最后 -->
|
|
<view class="section">
|
|
<view class="section-head">
|
|
<view class="section-bar"></view>
|
|
<text class="section-title">服务与费用</text>
|
|
</view>
|
|
<view class="card service-card">
|
|
<view class="service-head">
|
|
<text class="service-name">{{record.escortServiceName || '陪诊服务'}}</text>
|
|
<!-- 支付完成（paid）是常态不显示胶囊；只有待处理（未支付/部分支付/已退款）才提示 -->
|
|
<view
|
|
class="status-chip"
|
|
wx:if="{{record.paymentStatus !== 'paid'}}"
|
|
style="background: {{record.paymentStatusBg}}; color: {{record.paymentStatusColor}}; border-color: {{record.paymentStatusBorder}};"
|
|
>{{record.paymentStatusText}}</view>
|
|
</view>
|
|
<view class="meta-list service-meta" wx:if="{{record.sexRequirementText}}">
|
|
<text class="meta-item">陪诊师性别要求 {{record.sexRequirementText}}</text>
|
|
</view>
|
|
<view class="fee-row">
|
|
<view class="fee-main">
|
|
<text class="fee-label">服务费用</text>
|
|
<text class="fee-amount">¥{{record.totalFee}}</text>
|
|
</view>
|
|
<text class="fee-paid">已支付 ¥{{record.paidFee}}</text>
|
|
</view>
|
|
|
|
<!-- 未付清时的出口指引：全站没有线上支付入口，只能引到客服；
|
|
收在费用行之下——「已支付 ¥0.00」之后正是用户想问「怎么付」的位置 -->
|
|
<text class="pay-hint" wx:if="{{record.paymentHint}}">{{record.paymentHint}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单信息：只留编号与时间，订单状态在抬头已出现一次，不重复 -->
|
|
<view class="section">
|
|
<view class="section-head">
|
|
<view class="section-bar"></view>
|
|
<text class="section-title">订单信息</text>
|
|
</view>
|
|
<view class="card order-card">
|
|
<text class="order-no">订单编号 {{record._id || '--'}}</text>
|
|
<view class="meta-list order-meta">
|
|
<text class="meta-item">创建于 {{record.createTime || '--'}}</text>
|
|
<view class="meta-sep"></view>
|
|
<text class="meta-item">更新于 {{record.updateTime || '--'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部占位：只为垫开固定底栏，底栏不出现时不留这段空 -->
|
|
<view class="bottom-placeholder" wx:if="{{record.showBottomBar}}"></view>
|
|
</view>
|
|
|
|
<!-- 底部操作栏：同类实心块只保留一处——
|
|
再次预约为「已完成」时让位给「确认完成」，为「已取消」时自己成为主操作（§2.1）。
|
|
四种动作都为假时整条栏不出现：进行中且已支付这类状态没有动作可给，不留空白栏 -->
|
|
<view class="bottom-bar" wx:if="{{record.showBottomBar}}">
|
|
<view
|
|
class="action-btn action-ghost"
|
|
wx:if="{{record.canCancel}}"
|
|
bindtap="onCancelOrder"
|
|
>取消订单</view>
|
|
<view
|
|
class="action-btn action-ghost action-danger"
|
|
wx:if="{{record.canDelete}}"
|
|
bindtap="onDeleteOrder"
|
|
>删除订单</view>
|
|
<view
|
|
class="action-btn action-primary"
|
|
wx:if="{{record.canComplete}}"
|
|
bindtap="onConfirmComplete"
|
|
>确认完成</view>
|
|
<view
|
|
class="action-btn {{record.status === 'cancelled' ? 'action-primary' : 'action-ghost'}}"
|
|
wx:if="{{record.canRebook}}"
|
|
bindtap="onRebook"
|
|
>再次预约</view>
|
|
</view>
|
|
|
|
<!-- 医院预约信息编辑弹窗：页面内嵌表单全部收进这里。
|
|
弹窗比取消弹窗高（popup-tall），表单行可滚动 -->
|
|
<view class="popup-mask {{showHospitalPopup ? 'show' : ''}}" bindtap="onCancelHospitalEdit"></view>
|
|
<view class="popup-content popup-tall {{showHospitalPopup ? 'show' : ''}}">
|
|
<view class="popup-header">
|
|
<text class="popup-title">修改医院预约信息</text>
|
|
<view class="popup-close" bindtap="onCancelHospitalEdit">
|
|
<t-icon name="close" size="40rpx" color="#6F655C" />
|
|
</view>
|
|
</view>
|
|
<view class="popup-body">
|
|
<view class="form-row">
|
|
<text class="form-label">就诊省份</text>
|
|
<picker
|
|
class="form-picker"
|
|
mode="selector"
|
|
range="{{provinces}}"
|
|
value="{{editHospital.provinceIndex}}"
|
|
bindchange="onProvinceChange"
|
|
>
|
|
<view class="form-picker-value">{{editHospital.province || '请选择省份'}}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="form-row">
|
|
<text class="form-label">就诊医院</text>
|
|
<input
|
|
class="form-input"
|
|
value="{{editHospital.name}}"
|
|
placeholder="请输入医院名称"
|
|
placeholder-class="input-placeholder"
|
|
bindinput="onHospitalFieldInput"
|
|
data-field="name"
|
|
/>
|
|
</view>
|
|
<view class="form-row">
|
|
<text class="form-label">医院地址</text>
|
|
<input
|
|
class="form-input"
|
|
value="{{editHospital.address}}"
|
|
placeholder="请输入医院地址"
|
|
placeholder-class="input-placeholder"
|
|
bindinput="onHospitalFieldInput"
|
|
data-field="address"
|
|
/>
|
|
</view>
|
|
<view class="form-row">
|
|
<text class="form-label">就诊科室</text>
|
|
<input
|
|
class="form-input"
|
|
value="{{editHospital.department}}"
|
|
placeholder="请输入就诊科室"
|
|
placeholder-class="input-placeholder"
|
|
bindinput="onHospitalFieldInput"
|
|
data-field="department"
|
|
/>
|
|
</view>
|
|
<view class="form-row">
|
|
<text class="form-label">就诊医生</text>
|
|
<input
|
|
class="form-input"
|
|
value="{{editHospital.doctor}}"
|
|
placeholder="请输入就诊医生"
|
|
placeholder-class="input-placeholder"
|
|
bindinput="onHospitalFieldInput"
|
|
data-field="doctor"
|
|
/>
|
|
</view>
|
|
<view class="form-row">
|
|
<text class="form-label">病历号</text>
|
|
<input
|
|
class="form-input"
|
|
value="{{editHospital.medicalRecordNo}}"
|
|
placeholder="请输入病历号"
|
|
placeholder-class="input-placeholder"
|
|
bindinput="onHospitalFieldInput"
|
|
data-field="medicalRecordNo"
|
|
/>
|
|
</view>
|
|
<view class="form-row">
|
|
<text class="form-label">预约日期</text>
|
|
<picker
|
|
class="form-picker"
|
|
mode="date"
|
|
value="{{editHospital.scheduleDate}}"
|
|
bindchange="onScheduleDateChange"
|
|
>
|
|
<view class="form-picker-value">{{editHospital.scheduleDate || '请选择日期'}}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="form-row">
|
|
<text class="form-label">开始时间</text>
|
|
<picker
|
|
class="form-picker"
|
|
mode="time"
|
|
value="{{editHospital.startTime}}"
|
|
bindchange="onStartTimeChange"
|
|
>
|
|
<view class="form-picker-value">{{editHospital.startTime || '请选择时间'}}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="form-row">
|
|
<text class="form-label">结束时间</text>
|
|
<picker
|
|
class="form-picker"
|
|
mode="time"
|
|
value="{{editHospital.endTime}}"
|
|
bindchange="onEndTimeChange"
|
|
>
|
|
<view class="form-picker-value">{{editHospital.endTime || '请选择时间'}}</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="popup-footer">
|
|
<view class="popup-btn popup-btn-ghost" bindtap="onCancelHospitalEdit">取消</view>
|
|
<view class="popup-btn popup-btn-primary" bindtap="onSaveHospital">保存</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 陪诊需求编辑弹窗 -->
|
|
<view class="popup-mask {{showNotePopup ? 'show' : ''}}" bindtap="onCancelEdit"></view>
|
|
<view class="popup-content {{showNotePopup ? 'show' : ''}}">
|
|
<view class="popup-header">
|
|
<text class="popup-title">修改陪诊需求</text>
|
|
<view class="popup-close" bindtap="onCancelEdit">
|
|
<t-icon name="close" size="40rpx" color="#6F655C" />
|
|
</view>
|
|
</view>
|
|
<view class="popup-body">
|
|
<textarea
|
|
class="note-textarea"
|
|
value="{{editPatientNote}}"
|
|
placeholder="请输入陪诊需求或症状描述"
|
|
maxlength="500"
|
|
placeholder-class="input-placeholder"
|
|
bindinput="onPatientNoteInput"
|
|
focus="{{showNotePopup}}"
|
|
/>
|
|
</view>
|
|
<view class="popup-footer">
|
|
<view class="popup-btn popup-btn-ghost" bindtap="onCancelEdit">取消</view>
|
|
<view class="popup-btn popup-btn-primary" bindtap="onSavePatientNote">保存</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 取消订单弹窗 -->
|
|
<view class="popup-mask {{showCancelPopup ? 'show' : ''}}" bindtap="onCloseCancelPopup"></view>
|
|
<view class="popup-content {{showCancelPopup ? 'show' : ''}}">
|
|
<view class="popup-header">
|
|
<text class="popup-title">取消订单</text>
|
|
<view class="popup-close" bindtap="onCloseCancelPopup">
|
|
<t-icon name="close" size="40rpx" color="#6F655C" />
|
|
</view>
|
|
</view>
|
|
<view class="popup-body">
|
|
<text class="cancel-tip">确定要取消该陪诊订单吗？取消后陪诊师将收到通知。</text>
|
|
<view class="cancel-reason-list">
|
|
<view
|
|
class="cancel-reason-item {{cancelReason === item ? 'active' : ''}}"
|
|
wx:for="{{cancelReasons}}"
|
|
wx:key="*this"
|
|
data-reason="{{item}}"
|
|
bindtap="onSelectCancelReason"
|
|
>
|
|
<view class="reason-radio">
|
|
<view class="reason-radio-inner" wx:if="{{cancelReason === item}}"></view>
|
|
</view>
|
|
<text class="reason-text">{{item}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="popup-footer">
|
|
<view class="popup-btn popup-btn-ghost" bindtap="onCloseCancelPopup">再想想</view>
|
|
<view class="popup-btn popup-btn-primary" bindtap="onConfirmCancel">确认取消</view>
|
|
</view>
|
|
</view>
|
|
</view>
|