200 lines
7.7 KiB
Plaintext
200 lines
7.7 KiB
Plaintext
<view class="container">
|
||
<!-- 服务图片 -->
|
||
<view class="service-image-wrap">
|
||
<image class="service-image" src="{{service.image}}" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<!-- 服务基本信息 -->
|
||
<view class="info-card">
|
||
<view class="service-header">
|
||
<view class="service-title-wrap">
|
||
<text class="service-title">{{service.title}}</text>
|
||
<view class="service-tag" wx:if="{{service.tag}}">{{service.tag}}</view>
|
||
</view>
|
||
<view class="service-price-wrap">
|
||
<text class="price-symbol">¥</text>
|
||
<text class="service-price">{{service.price}}</text>
|
||
<text class="price-unit">/次</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-subtitle">{{service.subtitle}}</view>
|
||
</view>
|
||
|
||
<!-- 服务详情 -->
|
||
<view class="detail-card">
|
||
<view class="card-title">
|
||
<t-icon name="info-circle" class="card-icon" size="36rpx" />
|
||
<text>服务详情</text>
|
||
</view>
|
||
<view class="detail-content">
|
||
<text class="detail-text">{{service.description}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务流程 -->
|
||
<view class="detail-card">
|
||
<view class="card-title">
|
||
<t-icon name="list" class="card-icon" size="36rpx" />
|
||
<text>服务流程</text>
|
||
</view>
|
||
<view class="flow-list">
|
||
<view class="flow-item" wx:for="{{service.flow}}" wx:key="index">
|
||
<view class="flow-number">{{index + 1}}</view>
|
||
<view class="flow-content">
|
||
<text class="flow-title">{{item.title}}</text>
|
||
<text class="flow-desc">{{item.desc}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 注意事项 -->
|
||
<view class="detail-card">
|
||
<view class="card-title">
|
||
<t-icon name="error-circle" class="card-icon" size="36rpx" />
|
||
<text>注意事项</text>
|
||
</view>
|
||
<view class="notice-list">
|
||
<view class="notice-item" wx:for="{{service.notices}}" wx:key="index">
|
||
<view class="notice-dot"></view>
|
||
<text class="notice-text">{{item}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部占位，避免被下单栏遮挡 -->
|
||
<view class="bottom-placeholder"></view>
|
||
|
||
<!-- 底部下单栏 -->
|
||
<view class="bottom-bar">
|
||
<view class="price-info">
|
||
<text class="total-label">合计：</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" />
|
||
</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>
|
||
</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 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 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 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 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="popup-price-value">¥{{totalPrice}}</text>
|
||
</view>
|
||
<button class="popup-submit-btn" bindtap="submitOrder">提交预约</button>
|
||
</view>
|
||
</view>
|
||
</view>
|