198 lines
8.5 KiB
Plaintext
198 lines
8.5 KiB
Plaintext
<view class="page-bg">
|
||
<view class="container">
|
||
|
||
<!-- 头部：短横色标 + 深墨标题。原顶部 420rpx 大图已去掉：
|
||
服务图在多条服务间复用同一张占位图，既分不出是哪项服务，又白占掉大半首屏 -->
|
||
<view class="page-header">
|
||
<view class="header-accent"></view>
|
||
<view class="title-row">
|
||
<text class="header-title">{{ service.title }}</text>
|
||
<view class="header-tag" wx:if="{{ service.tag }}">{{ service.tag }}</view>
|
||
</view>
|
||
<text class="header-subtitle">{{ service.subtitle }}</text>
|
||
</view>
|
||
|
||
<!-- 服务详情 -->
|
||
<view class="section">
|
||
<view class="section-head">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">服务详情</text>
|
||
</view>
|
||
<text class="detail-text">{{ service.description }}</text>
|
||
</view>
|
||
|
||
<!-- 服务流程：这是真序列，编号在此处合法。橙色导轨是本页唯一的结构性重音，
|
||
实心橙仍只留给底部与弹窗的提交按钮 -->
|
||
<view class="section">
|
||
<view class="section-head">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">服务流程</text>
|
||
</view>
|
||
<view class="step-list">
|
||
<view class="step" wx:for="{{ service.flow }}" wx:key="index">
|
||
<view class="step-rail">
|
||
<view class="step-dot">{{ index + 1 }}</view>
|
||
<view class="step-line" wx:if="{{ index < service.flow.length - 1 }}"></view>
|
||
</view>
|
||
<view class="step-body">
|
||
<text class="step-title">{{ item.title }}</text>
|
||
<text class="step-desc">{{ item.desc }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 注意事项：与指南页同一套圆点语言 -->
|
||
<view class="section">
|
||
<view class="section-head">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">注意事项</text>
|
||
</view>
|
||
<view class="dot-list">
|
||
<view class="dot-item" wx:for="{{ service.notices }}" wx:key="index">
|
||
<view class="dot"></view>
|
||
<text class="dot-text">{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部占位，避免被下单栏遮挡 -->
|
||
<view class="bottom-placeholder"></view>
|
||
|
||
<!-- 底部下单栏：价格只在这里出现一次（totalPrice 即服务单价，头部再放一次是纯重复） -->
|
||
<view class="bottom-bar">
|
||
<view class="price-info">
|
||
<text class="total-label">合计</text>
|
||
<text class="price-sym">¥</text>
|
||
<text class="total-price">{{ totalPrice }}</text>
|
||
</view>
|
||
<button class="order-btn" bindtap="openOrderPopup">立即预约</button>
|
||
</view>
|
||
|
||
<!-- 下单弹窗遮罩 -->
|
||
<view class="popup-mask {{showOrderPopup ? 'show' : ''}}" bindtap="closeOrderPopup"></view>
|
||
|
||
<!-- 下单弹窗 -->
|
||
<view class="popup-content {{showOrderPopup ? 'show' : ''}}">
|
||
<view class="popup-header">
|
||
<text class="popup-title">确认预约信息</text>
|
||
<view class="popup-close" bindtap="closeOrderPopup">
|
||
<t-icon name="close" size="40rpx" color="#6F655C" />
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view class="popup-body" scroll-y>
|
||
<!-- 服务信息 -->
|
||
<view class="order-service-info">
|
||
<image class="order-service-image" src="{{service.image}}" mode="aspectFill"></image>
|
||
<view class="order-service-text">
|
||
<text class="order-service-title">{{service.title}}</text>
|
||
<text class="order-service-price">¥{{service.price}}/次</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择就诊人：从已保存的就诊人一键带入姓名与电话 -->
|
||
<view class="order-row column">
|
||
<text class="order-label">选择就诊人</text>
|
||
<scroll-view class="patient-scroll" scroll-x wx:if="{{profiles.length > 0}}">
|
||
<view class="patient-chips">
|
||
<view class="patient-chip {{selectedProfileId === item._id ? 'active' : ''}}" wx:for="{{profiles}}" wx:key="_id"
|
||
data-id="{{item._id}}" bindtap="onSelectProfile">
|
||
<text class="patient-chip-name">{{item.name}}</text>
|
||
<text class="patient-chip-phone">{{item.mobile}}</text>
|
||
</view>
|
||
<view class="patient-chip patient-chip-add" bindtap="goToAddProfile">
|
||
<text class="patient-chip-name">＋ 添加就诊人</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="add-profile-tip" wx:else bindtap="goToAddProfile">
|
||
<text class="add-profile-tip-text">还没有就诊人，去添加后可一键带入</text>
|
||
<t-icon name="chevron-right" size="24rpx" color="#9A3412" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 就诊人姓名 -->
|
||
<view class="order-row">
|
||
<text class="order-label">就诊人姓名</text>
|
||
<input class="order-input" value="{{patientName}}" placeholder="请输入就诊人姓名" placeholder-class="input-placeholder" bindinput="onPatientNameChange" />
|
||
</view>
|
||
|
||
<!-- 就诊人电话 -->
|
||
<view class="order-row">
|
||
<text class="order-label">联系电话</text>
|
||
<input class="order-input" value="{{patientPhone}}" placeholder="请输入联系电话" placeholder-class="input-placeholder" type="number" bindinput="onPatientPhoneChange" />
|
||
</view>
|
||
|
||
<!-- 就诊省份 -->
|
||
<view class="order-row">
|
||
<text class="order-label">就诊省份</text>
|
||
<picker class="order-picker" mode="selector" range="{{provinces}}" value="{{provinceIndex}}" bindchange="onProvinceChange">
|
||
<view class="picker-value {{province ? '' : 'placeholder'}}">
|
||
{{province || '请选择省份'}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 就诊医院 -->
|
||
<view class="order-row">
|
||
<text class="order-label">就诊医院</text>
|
||
<input class="order-input" value="{{hospital}}" placeholder="请输入就诊医院" placeholder-class="input-placeholder" bindinput="onHospitalChange" />
|
||
</view>
|
||
|
||
<!-- 就诊科室 -->
|
||
<view class="order-row">
|
||
<text class="order-label">就诊科室</text>
|
||
<input class="order-input" value="{{department}}" placeholder="请输入就诊科室" placeholder-class="input-placeholder" bindinput="onDepartmentChange" />
|
||
</view>
|
||
|
||
<!-- 陪诊师性别要求 -->
|
||
<view class="order-row">
|
||
<text class="order-label">陪诊师性别</text>
|
||
<picker class="order-picker" mode="selector" range="{{genderOptions}}" value="{{genderIndex}}" bindchange="onGenderChange">
|
||
<view class="picker-value {{gender ? '' : 'placeholder'}}">
|
||
{{gender || '请选择性别要求'}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 预约日期 -->
|
||
<view class="order-row">
|
||
<text class="order-label">预约日期</text>
|
||
<picker class="order-picker" mode="date" value="{{appointmentDate}}" start="{{today}}" bindchange="onDateChange">
|
||
<view class="picker-value {{appointmentDate ? '' : 'placeholder'}}">
|
||
{{appointmentDate || '请选择预约日期'}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 预约时间 -->
|
||
<view class="order-row">
|
||
<text class="order-label">预约时间</text>
|
||
<picker class="order-picker" mode="time" value="{{appointmentTime}}" start="08:00" end="18:00" bindchange="onTimeChange">
|
||
<view class="picker-value {{appointmentTime ? '' : 'placeholder'}}">
|
||
{{appointmentTime || '请选择预约时间'}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 备注 -->
|
||
<view class="order-row column">
|
||
<text class="order-label">备注说明</text>
|
||
<textarea class="order-textarea" value="{{remark}}" placeholder="请输入其他需求或备注信息" maxlength="200" placeholder-class="input-placeholder" bindinput="onRemarkChange" />
|
||
<text class="textarea-count">{{remark.length}}/200</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="popup-footer">
|
||
<view class="popup-price">
|
||
<text class="popup-price-label">合计</text>
|
||
<text class="price-sym">¥</text>
|
||
<text class="popup-price-value">{{ totalPrice }}</text>
|
||
</view>
|
||
<button class="popup-submit-btn" bindtap="submitOrder">提交预约</button>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view> |