health.applet/miniprogram/module/order/pages/appointment/appointment.wxml

<!--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">
  <view class="submit-btn" bindtap="onSubmit">
    提交预约
  </view>
</view>
<!-- 日期选择弹窗 -->
<t-calendar visible="{{ show }}" title="日期选择" bind:close="onClose" bind:confirm="onCalendarSelect" />