| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <!--module/order/pages/appointment/appointment.wxml-->
- <t-navbar title="预约" left-arrow />
- <scroll-view class="page-scroll__container" type="list" scroll-y style="{{containerStyle}}">
- <!-- 服务信息卡片 -->
- <view class="service-card">
- <image class="service-image" src="{{goodsInfo.image}}" mode="aspectFill" wx:if="{{goodsInfo.image}}" />
- <view class="service-placeholder" wx:else>
- <text class="placeholder-icon">📦</text>
- </view>
- <view class="service-info">
- <text class="service-name">{{goodsInfo.name}}</text>
- <text class="service-duration">{{goodsInfo.duration}}分钟</text>
- </view>
- </view>
- <!-- 时间选择区域 -->
- <view class="time-selection-card">
- <view class="time-selection-header">
- <text class="time-selection-title">请选择开始服务时间</text>
- <view class="time-selection-icon" bindtap="onOpenCalendar">
- <t-icon name="calendar" size="40rpx" color="#000" />
- </view>
- </view>
- <!-- 日期选择 -->
- <view class="date-selector">
- <view class="date-item {{item.isSelected ? 'date-item--selected' : ''}}" wx:for="{{dateList}}" wx:key="date" bindtap="onDateSelect" data-index="{{index}}">
- <text class="date-label">{{item.label}}</text>
- <text class="date-value">{{item.dateStr}}</text>
- </view>
- </view>
- <!-- 时间选择网格 -->
- <view class="time-grid">
- <view class="time-slot {{item.isSelected ? 'time-slot--selected' : ''}} {{item.isDisabled ? 'time-slot--disabled' : ''}}" wx:for="{{timeSlots}}" wx:key="time" bindtap="onTimeSelect" data-index="{{index}}" data-time="{{item.time}}">
- {{item.time}}
- </view>
- </view>
- </view>
- <!-- 底部安全区占位 -->
- <view class="safe-bottom-spacer"></view>
- </scroll-view>
- <!-- 提交按钮 -->
- <view class="submit-footer" style="padding-bottom: {{container.safeBottomOffset}}px;">
- <view class="submit-btn" bindtap="onSubmit">
- 提交预约
- </view>
- </view>
- <!-- 日期选择弹窗 -->
- <van-calendar show="{{ show }}" show-title title="日期选择" bind:close="onClose" bind:confirm="onConfirm" color="#1d6ff6" />
|