payProject/pages/reserveProduct/reserveProduct.wxml

<wxs src="./../../utils/wxsUtil.wxs" module="wxsUtil" />
<view class="content">
  <view class="border-radius top flex-column" style="padding: 20rpx 24rpx;">
    <view class="flex" style="margin-bottom: 20rpx;">
      <text style="font-size:28rpx;color:#999;">{{source == "project" ? "预约项目：" : "预约产品："}}</text>
      <text style="font-size:28rpx">{{productData.name}}</text>
    </view>
    <view class="flex" style="margin-bottom: 20rpx;">
      <text style="font-size:28rpx;color:#999;">预约店铺：</text>
      <text style="font-size:28rpx">{{productData.store_name}}</text>
    </view>
    <view class="flex">
      <text style="font-size:28rpx;color:#999;">门店地址：</text>
      <text class="ellipsis flex1" style="font-size:28rpx">{{productData.store_address}}</text>
    </view>
    <!-- <text class="name">{{productData.project_name}}</text>
    <text class="store">{{productData.store_name}}</text>
    <view class="address flex-align-center ellipsis">
      <image src="/images/icon_05.png"></image>
      <text class="ellipsis" style="font-size: 24rpx;color: #666666;">{{productData.store_address}}</text>
    </view> -->
  </view>
  <view class="list-active " wx:if="{{source == 'product'}}">
    <view class="flex-column" style="padding-left:24rpx;">
      <text class="label">选择使用项目</text>
      <text wx:if="{{!projectOrderList.length}}" class="label-tips">未检测到您的预约项目！\n 该产品需要在项目中使用，请选择项目一起预约。</text>
    </view>
    <!-- 项目耗材下单 - 展示进行中、待使用的可用项目 -->
    <view wx:if="{{projectOrderList.length > 0}}">
      <view wx:for="{{ projectOrderList }}" wx:key="index" class="item-active border-radius" bindtap="selectProjectOrder" data-index="{{index}}" data-item="{{item}}">
        <view class="title flex-justify-space-between">
          <text style="font-family: PingFangSC-Semibold, PingFang SC;">水光嫩肤</text>
          <text style="font-weight: 600;color: #FA7D22;">{{item.status == 2 ? '进行中' : '待使用'}}</text>
        </view>
        <view class="item-active-content flex flex-align-center">
          <image class="change-img" src="{{currentProjectOrderIndex == index ? '/images/icon_17.png' : '/images/icon_16.png'}}"></image>
          <image class="active-project-img" src="{{item.cover_url}}"></image>
          <view class="flex-column flex1 right ellipsis">
            <view class="flex ">
              <text>预约店铺：</text>
              <text class="flex1 ellipsis">{{item.store_name}}</text>
            </view>
            <view class="flex" style="margin: 20rpx 0;">
              <text>使用时间：</text>
              <text class="flex1 ellipsis">{{item.order_time}}</text>
            </view>
            <view class="flex ">
              <text>使用设备：</text>
              <text class="flex1 ellipsis">{{item.device_name}}</text>
            </view>
          </view>
        </view>
        <view class="item-active-price flex-align-center">
          <text style="font-size: 28rpx;color: #999;">实付：</text>
          <text style="font-size: 36rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;">¥{{item.price}}</text>
        </view>
      </view>
    </view>
    <!-- 项目耗材下单 - 没有可用的项目 -->
    <view wx:else>
      <view wx:for="{{ productProjectList }}" wx:key="index" class="item-active border-radius" bindtap="selectProductProject" data-item="{{item}}" data-index="{{index}}">
        <view class="item-active-content flex flex-align-center">
          <image class="change-img" src="{{currentProductProjectIndex == index ? '/images/icon_17.png' : '/images/icon_16.png'}}"></image>
          <image class="active-project-img" src="{{item.cover_url}}"></image>
          <view class="flex-column flex1 ellipsis">
            <view class="flex project-title">
              <text class="flex1 ellipsis">{{item.project_name}}</text>
            </view>
            <view class="flex tags" style="margin: 20rpx 0;">
              <view class="tags-item ellipsis" wx:for="{{ wxsUtil.split(item.project_desc, ' ') }}" wx:key="t_index" wx:for-item="t_item">
                {{t_item}}
              </view>
            </view>
            <view class="flex">
              <!-- <text class="flex1 ellipsis price2">¥{{item.is_member ? item.member_price : item.price}}</text> -->
              <text class="flex1 ellipsis price2">¥{{item.price}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view wx:if="{{showDateControl}}" class="border-radius flex-column">
    <view class="title">到店时间</view>
    <view class="scroll-x flex1 flex" style="overflow-x: scroll">
      <view class="item flex-column flex-align-center {{currentDateIndex == index ? 'active' : ''}}" wx:for="{{ times }}" wx:key="index" bindtap="onChangeDate" data-index="{{ index }}">
        <text wx:if="{{index == 0 }}">今天</text>
        <text wx:elif="{{index == 1 }}">明天</text>
        <text wx:else>{{item.week}}</text>
        <text style="margin-top: 2rpx;">{{item.day}}</text>
      </view>
    </view>
    <view class="time-box">
      <view class="tabs-title flex-align-center">
        <!-- <text wx:for="{{projectTime}}" wx:key="index" class="{{ currentSwiperIndex==index ? 'active' : '' }}" data-index="{{index}}" bindtap="onChangeSwiper">{{item.name}}</text> -->
        <text class="{{ currentSwiperIndex==0 ? 'active' : '' }}" data-index="0" bindtap="onChangeSwiper">{{projectTime[0].name}}</text>
        <text class="flex1" style="font-family: PingFangSC-Semibold, PingFang SC;color: #333333;">|</text>
        <text class="{{ currentSwiperIndex==1 ? 'active' : '' }}" data-index="1" bindtap="onChangeSwiper">{{projectTime[1].name}}</text>
      </view>
      <swiper circular indicator-color="#CECECE" indicator-active-color="#FA7D22" current="{{currentSwiperIndex}}" bindchange="changeSwiper">
        <swiper-item wx:for="{{projectTime}}" wx:key="index">
          <view class="tabs-content">
            <view class="item flex-center {{item.status == 0 ? 'no-change' : ''}} {{currentTimeIndex == item.index ? 'active' : '' }}" wx:for="{{ item.list }}" wx:key="index" data-index="{{item.index}}" bindtap="onChangeTime">
              {{ item.time_id }}
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="custom-time flex flex-align-center">
      <text style="font-family: PingFangSC-Medium, PingFang SC;">自定义到店时间</text>
      <picker mode="time" value="{{time}}" start="{{projectTime[0].list[0].order_time}}" end="{{projectTime[1].list[projectTime[1].list.length-1].order_time}}" bindchange="bindTimeChange">
        <view class="input {{currentTimeIndex == -1 ? 'active' : ''}} flex-center">{{ time }}</view>
      </picker>
      <!-- <text class="flex1"></text>
      <image src="/images/icon_04.png"></image>
      <text style="font-size: 24rpx;">建议选择推荐时间</text> -->
    </view>
  </view>
  <view class="border-radius" wx:if="{{showDateControl && deviceList.length > 0}}">
    <!-- <view class="title">选择设备</view> -->
    <view class="title">已为您自动匹配设备</view>
    <view class="current-project flex" style="padding-bottom: 20rpx;">
      <image src="{{deviceList[0].cover_url}}"></image>
      <view class="project-text flex1 flex-column flex-justify-space-around">
        <view class="flex">
          <text style="font-size: 28rpx;color: #999;">可用项目：</text>
          <text style="font-size: 28rpx;">{{projectData.project_name}}</text>
        </view>
        <view class="flex">
          <text style="font-size: 28rpx;color: #999;">设备名称：</text>
          <text style="font-size: 28rpx;">{{deviceList[0].device_name}}</text>
        </view>
        <view class="flex">
          <text style="font-size: 28rpx;color: #999;">房间号码：</text>
          <text style="font-size: 28rpx;">{{deviceList[0].room}}</text>
        </view>
      </view>
    </view>
    <!-- <view class="project-scroll-x flex1 flex" style="overflow-x: scroll">
      <view class="ellipsis item flex-column flex-align-center {{item.status == 0 ? 'no-change' : ''}} {{index == currentDeviceIndex && item.status == 1 ? 'active' : ''}}" wx:for="{{ deviceList }}" wx:key="index" data-index="{{index}}" bindtap="onChangeDevice">
        <view class="project-box flex-column flex-align-center">
          <image src="{{item.cover_url}}" class="project-img"></image>
          <text class="flex1">{{item.status == 0 ? '不可预约' : '可预约'}}</text>
          <image src="/images/icon_03.png" class="active-img" wx:if="{{ item.status == 1 }}"></image>
        </view>
        <text class="name ellipsis">{{ item.device_name }}</text>
        <text class="name ellipsis" wx:if="{{item.room}}">({{ item.room }})</text>
      </view>
    </view> -->
  </view>
  <view class="border-radius" wx:if="{{showDateControl && deviceList.length == 0}}">
    <view class="title">暂无可用设备</view>
    <view class="current-project flex" style="padding-bottom: 20rpx;">
      <image src="/images/icon_no_device.png"></image>
    </view>
  </view>
</view>
<view class="btm flex-center">
  <view class="btm-btn flex-center" style="{{allowAddOrder ? '' : 'opacity: 0.3'}}" bindtap="addOrder">
    确认
  </view>
</view>
<view style="height: 152rpx;"></view>