wxapp使用submodule
This commit is contained in:
1123
pages/itemdetail/itemdetail.js
Normal file
1123
pages/itemdetail/itemdetail.js
Normal file
File diff suppressed because it is too large
Load Diff
6
pages/itemdetail/itemdetail.json
Normal file
6
pages/itemdetail/itemdetail.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
},
|
||||
"navigationBarTitleText": "服务详情"
|
||||
}
|
||||
179
pages/itemdetail/itemdetail.wxml
Normal file
179
pages/itemdetail/itemdetail.wxml
Normal file
@@ -0,0 +1,179 @@
|
||||
<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">
|
||||
<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>
|
||||
495
pages/itemdetail/itemdetail.wxss
Normal file
495
pages/itemdetail/itemdetail.wxss
Normal file
@@ -0,0 +1,495 @@
|
||||
page {
|
||||
background-color: #FAF6F1;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* 服务图片 */
|
||||
.service-image-wrap {
|
||||
width: 100%;
|
||||
height: 420rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background: #FFFFFF;
|
||||
margin: -40rpx 24rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.service-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.service-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.service-tag {
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF8500 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.service-price-wrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-size: 28rpx;
|
||||
color: #FF9B33;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-price {
|
||||
font-size: 44rpx;
|
||||
color: #FF9B33;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.price-unit {
|
||||
font-size: 24rpx;
|
||||
color: #9CA3AF;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.service-subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #6B7280;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 详情卡片 */
|
||||
.detail-card {
|
||||
background: #FFFFFF;
|
||||
margin: 0 24rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
color: #FF9B33;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
font-size: 28rpx;
|
||||
color: #4B5563;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* 服务流程 */
|
||||
.flow-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.flow-number {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF8500 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flow-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flow-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.flow-desc {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #6B7280;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 注意事项 */
|
||||
.notice-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.notice-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.notice-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #FF9B33;
|
||||
border-radius: 50%;
|
||||
margin-top: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notice-text {
|
||||
font-size: 28rpx;
|
||||
color: #4B5563;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 底部占位 */
|
||||
.bottom-placeholder {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
/* 底部下单栏 */
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FFFFFF;
|
||||
padding: 24rpx 32rpx;
|
||||
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(24rpx + 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);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.price-info {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 28rpx;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 40rpx;
|
||||
color: #FF9B33;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF8500 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
padding: 24rpx 56rpx;
|
||||
border-radius: 40rpx;
|
||||
border: none;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.order-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 弹窗遮罩 */
|
||||
.popup-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 200;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
}
|
||||
|
||||
.popup-mask.show {
|
||||
opacity: 1;
|
||||
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: 85vh;
|
||||
}
|
||||
|
||||
.popup-content.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
border-bottom: 1rpx solid #F3F4F6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 32rpx;
|
||||
max-height: 60vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* 弹窗内服务信息 */
|
||||
.order-service-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 1rpx solid #F3F4F6;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.order-service-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.order-service-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-service-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.order-service-price {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #FF9B33;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 表单行 */
|
||||
.order-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #F3F4F6;
|
||||
}
|
||||
|
||||
.order-row.column {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.order-label {
|
||||
font-size: 28rpx;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.order-input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #1F2937;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
font-size: 28rpx;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.picker-value.placeholder {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
/* 数量控制 */
|
||||
.quantity-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.quantity-btn {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
background: #F3F4F6;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #1F2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quantity-btn.disabled {
|
||||
color: #CCCCCC;
|
||||
background: #F9FAFB;
|
||||
}
|
||||
|
||||
.quantity-value {
|
||||
font-size: 30rpx;
|
||||
color: #1F2937;
|
||||
font-weight: 600;
|
||||
min-width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 文本域 */
|
||||
.order-textarea {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
background: #F9FAFB;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #1F2937;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.textarea-count {
|
||||
font-size: 24rpx;
|
||||
color: #9CA3AF;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
/* 弹窗底部 */
|
||||
.popup-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.popup-price-label {
|
||||
font-size: 28rpx;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.popup-price-value {
|
||||
font-size: 40rpx;
|
||||
color: #FF9B33;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.popup-submit-btn {
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF8500 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
padding: 24rpx 56rpx;
|
||||
border-radius: 40rpx;
|
||||
border: none;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.popup-submit-btn::after {
|
||||
border: none;
|
||||
}
|
||||
Reference in New Issue
Block a user