dorm-manager/dorm-manager-wx/pages/user/reservation/details/index.wxml

<view style='background-color:#fff;margin-top:20rpx;'>
  <view class='content'>
    <view class='content-title'>预约信息</view>
    <view style='height:20rpx;'></view>
    <view class='content-text'>
      <view class='content-text-title'>预约号</view>
      <view class='content-number'>{{item.reservationNumber}}</view>
    </view>
    <view class='content-text'>
      <view class='content-text-title'>预约窗口</view>
      <view class='content-number'>{{item.deptName}}</view>
    </view>
    <view class='content-text'>
      <view class='content-text-title'>预约事项</view>
      <view class='content-number'>{{item.serviceName}}</view>
    </view>
    <view class='content-text'>
      <view class='content-text-title'>预约日期</view>
      <view class='content-number'>{{item.reservationDate}}  {{item.reservationInterval=='AM'?'上午':'下午'}}</view>
    </view>
    <view class='content-text'>
      <view class='content-text-title'>预约人姓名</view>
      <view class='content-number'>{{item.applicantName}}</view>
    </view>
    <view class='content-text'>
      <view class='content-text-title'>预约人手机</view>
      <view class='content-number'>{{item.applicantPhone}}</view>
    </view>
    <view class='content-text'>
      <view class='content-text-title'>证件类型</view>
      <view class='content-number'>{{item.applicantIdType}}</view>
    </view>
    <view class='content-text'>
      <view class='content-text-title'>证件号码</view>
      <view class='content-number'>{{item.applicantIdCard}}</view>
    </view>
    <view class='content-text'>
      <view class='content-text-title'>预约状态</view>
      <view wx:if='{{item.reservationState==1||item.reservationState==5}}' class='content-number' style="color: #33ad37;">已预约</view>
      <view wx:elif='{{item.reservationState==2}}' class='content-number' style="color: #28a5f9;">已取消</view>
      <view wx:elif='{{item.reservationState==3}}' class='content-number' style="color: #ff7878;">已失约</view>
      <view wx:elif='{{item.reservationState==4}}' class='content-number' style="color: ##f69930;">已完成</view>
    </view>
  </view>
</view>
<view style='background-color:#fff;margin-top:20rpx;'>
  <view class='content'>
    <view class='content-title'>预约信息</view>
    <view style='height:20rpx;'></view>
    <view class='content-text ps'>
      1.预约成功，如果临时有事无法办理，请取消预约。
    </view>
    <view class='content-text ps'>
      2.预约成功，过号未办理，超过2次，将会被取消预约权限。
    </view>
    <view class='content-text ps'>
      3.预约取消请提前6小时。
    </view>
  </view>
</view>
<view class='submit'>
   <button wx:if='{{item.reservationState==1}}' catchtap='cancelReservation' disabled="{{!item.canCancel}}" data-id="{{id}}" class="button">取消预约</button>
  <button catchtap='navigateBack' class="button back">返回上级</button>
</view>