<t-navbar title="取消预约" left-arrow />
<scroll-view class="page-container" scroll-y>
  <!-- 预约成功卡片 -->
  <view class="appointment-success-card">
    <!-- 标题 -->
    <view class="appointment-success-title">取消预约成功</view>

    <!-- 预约详情 -->
    <view class="appointment-info">
     <view class="info-item">
        <text class="info-label">预约项目:</text>
        <text class="info-value">{{appointmentInfo.arrangeTime}}</text>
      </view>
      <view class="info-item" wx:if="{{appointmentInfo.arrangeTime}}">
        <text class="info-label">开始服务时间:</text>
        <text class="info-value">{{appointmentInfo.arrangeTime}}</text>
      </view>
      <view class="info-item" wx:if="{{appointmentInfo.arrangeDuration}}">
        <text class="info-label">服务所需时间:</text>
        <text class="info-value">{{appointmentInfo.arrangeDuration}}分钟</text>
      </view>
      <view class="info-item" wx:if="{{appointmentInfo.conditioningProgramSupplierName}}">
        <text class="info-label">服务机构:</text>
        <text class="info-value" wx:if="{{appointmentInfo.pieTime}}">{{appointmentInfo.conditioningProgramSupplierName}}</text>
        <text class="info-value" wx:else>待分配</text>
      </view>
      <view class="info-item" wx:if="{{appointmentInfo.cpSupplierDetailAddress}}">
        <text class="info-label">服务地址:</text>
        <text class="info-value">{{appointmentInfo.cpSupplierDetailAddress}}</text>
      </view>
      <view class="info-item" wx:if="{{appointmentInfo.cpSupplierPhone}}">
        <text class="info-label">联系电话:</text>
        <text class="info-value">{{appointmentInfo.cpSupplierPhone}}</text>
      </view>
    </view>
  </view>
  <!-- 返回按钮 -->
  <view class="bottom-actions">
    <view class="bottom-btn" catchtap="onBack">返回</view>
  </view>
</scroll-view>