jzmall_wx/pages/ucenter/appointOrder/appointOrder.wxml

<wxs module="filter" src="../../../utils/filter.wxs" />
<view class="container">
  <!-- 地址 -->
  <view class="order-address">
    <!-- 有地址，选择 -->
    <view wx:if="{{addressId>0}}" class="address-select" bindtap="addressSelect">
      <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.png" class="map-img">
      </image>

      <view class="address-main">
        <view class="main-line">
          <view>{{checkedAddress.name}}</view>
          <view class="phone">{{checkedAddress.tel}}</view>
        </view>
        <view class="customer-address" wx:if="{{checkedAddress.addressName}}">{{checkedAddress.addressName}}{{checkedAddress.detail}}</view>
        <view class="customer-address" wx:else="">{{checkedAddress.addressDetail}}</view>
      </view>
      <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/wx-dy/arrow-grey.png" class="arrow-img"></image>

    </view>
    <!-- 没地址，输入 -->
    <view wx:else class="address-input-module add-address">
      <view class="add-form">
        <view class="form-item" bindtap="goMap" style="height:auto;min-height:78rpx; ">
          <view class="label"><text>*</text>服务地址</view>
          <view class="content" style="height:auto;min-height:78rpx; ">
            <view wx:if="{{address.addressname==''}}" style="color: #ACADB1;;font-size:24rpx;" class="input">
              选择省、市、县（区）、乡（镇）
            </view>
            <view wx:else class="input"> {{address.addressname}}</view>
            <!-- <input class="input" value="{{address.addressname}}" disabled="true" placeholder="选择省、市、县（区）、乡（镇）"  placeholder-style="color: #ACADB1;;font-size:24rpx;"/> -->

            <image src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-address-map.png" style="width: 28rpx;height: 28rpx;margin:28rpx 0 0 10rpx;"></image>
          </view>
        </view>
        <view class="form-item">
          <view class="label"><text>*</text>小区门牌</view>
          <view class="content">
            <input class="input" bindinput="bindinputAddress" value="{{address.detail}}" placeholder="详细地址，例xx小区x号楼x单元xx室" placeholder-style="color: #ACADB1;;font-size:24rpx;" />
          </view>
        </view>
        <view class="form-item">
          <view class="label"><text>*</text>联系人</view>
          <view class="content special-content">
            <input class="input" bindinput="bindinputName" placeholder="姓名" value="{{address.name}}" auto-focus placeholder-style="color: #ACADB1;;font-size:24rpx;" />
            <view class="gender-wrapper">
              <view class="female" bindtap="femaleSelect">
                <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-select-popup.png" mode="asceptFit" wx:if="{{gender==2}}"></image>
                <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-unselect-popup.png" mode="asceptFit" wx:else>
                </image>
                <text>女士</text>
              </view>
              <view class="male" bindtap="maleSelect">
                <image src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png" mode="asceptFit" wx:if="{{gender==1}}"></image>
                <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-unselect-popup.png" mode="asceptFit" wx:else>
                </image>
                <text>先生</text>
              </view>


            </view>

          </view>
        </view>
        <view class="form-item">
          <view class="label"><text>*</text>联系电话</view>
          <view class="content">
            <input class="input" bindinput="bindinputMobile" value="{{address.tel}}" type="number" placeholder="手机号码" maxlength="11" placeholder-style="color: #ACADB1;;font-size:24rpx;" />
          </view>
        </view>






      </view>
    </view>

  </view>

  <!-- <view style="color:red;font-size:24rpx;margin-top:20rpx;">临近春节，服务力紧张，我们会尽量为您安排。如果不能准时服务，支持全额退款</view> -->

  <!-- 预约服务时间 -->
  <view class="appoint-main-module">
    <view class="appoint-block" bindtap="showAppoint">
      <view class="title"><text>*</text>上门时段</view>
      <view class="appoint-time" wx:if="{{appointDate==''}}">服务者将在此时段内上门</view>
      <view class="appoint-timed" wx:else>{{appointDate}}</view>
      <image src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png" mode="aspectFit" class="arrow-img"></image>
    </view>
    <view class="appoint-block" bindtap="showRemarkSelect">
      <view class="title">选择备注</view>
      <view class="appoint-time" wx:if="{{remark==''}}">请选择备注</view>
      <view class="appoint-timed" wx:else>{{remark}}</view>
      <image src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png" mode="aspectFit" class="arrow-img"></image>
    </view>
    <view class="appoint-block">
      <view class="title">补充信息</view>

      <input placeholder="请输入补充信息" class="appoint-timed" value="{{message}}" placeholder-style="font-size:24rpx;color: #ACADB1;" bindinput="bindMessageInput" />
      <image src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png" mode="aspectFit" class="arrow-img"></image>
    </view>
  </view>

  <!-- 预约备注 -->
  <!-- <view class="appoint-block" bindtap="showRemark">
    <view>预约备注</view>
    <view class="appoint-time" wx:if="{{message==''}}">请备注您的需求</view>
    <view wx:else class="remark-text">{{message}}</view>
    <image src="https://mall.zhaijieshi.cc/file/wx-dy/order-arrow.png" mode="aspectFit" class="arrow-img"></image>
  </view> -->

  <!-- 商品 -->
  <view class="product-block">
    <!-- <view class="title">
      服务项目
    </view> -->
    <view class="product-detail">
      <view class="profuct-info">
        <image mode="aspectFit" class="product-img" src="{{orderInfo.picUrl+'?w=200'}}"></image>
        <view class="info-right">
          <view class="info-main">
            <view class="product-name">{{orderInfo.goodsName}}</view>
            <view class="price">¥<text style="font-size: 24rpx;">{{orderInfo.actualPrice}}</text></view>
          </view>
          <view class="sku-name" wx:if="{{orderInfo.increaseSumPrice}}">
            <view> 加购: {{orderInfo.unitDescribe}}*{{orderInfo.unitIncreaseNumber}}</view>
            <view>¥{{orderInfo.increaseSumPrice}}</view>

          </view>
          <view class="sku-name">
            规格:{{orderInfo.skuName}}
          </view>
          <!-- <view class="other-info">规格：1</view> -->
          <view class="other-info">服务{{orderInfo.serviceTimes}}次</view>
          <!-- <view class="other-info">单价：¥{{product.price}}</view> -->
        </view>
      </view>

    </view>


  </view>

  <!-- 服务须知 -->
  <view wx:if="{{goodsTip.remark!=null}}" class="notice-block">
    <view class="notice-title">{{goodsTip.title}}</view>
    <view class="notice-item" wx:for="{{goodsTip.remark}}" wx:key="index">
      <view class="notice-index">{{index+1}}.</view>
      <view>{{item}}</view>
    </view>
  </view>

  <!-- 订单信息 -->
  <view class="order-info">
    <view class="order-top">
      <view class="topic">
        订单编号：
      </view>
      <view>
        {{orderInfo.orderSn}}
      </view>
      <image mode="aspectFit" class="copy-img" src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-order-copy.png" bindtap="copyOrder"></image>
    </view>
    <view class="order-top">
      <view class="topic">
        下单时间：
      </view>
      <view>
        {{orderInfo.createTime}}
      </view>
    </view>
    <view class="order-top">
      <view class="topic">
        支付方式：
      </view>
      <view>
        {{orderInfo.payChannel}}
      </view>
    </view>
    <view class="order-bottom">
      <view class="order-price">
        <view class="topic">
          订单金额：
        </view>
        <view>
          ¥{{orderInfo.orderPrice}}
        </view>
      </view>
      <view class="coupon-price">
        <view class="topic">
          优惠金额：
        </view>
        <view>
          ¥{{orderInfo.discountPrice}}
        </view>
      </view>
      <view class="real-price">
        实际付款：<text>¥{{orderInfo.actualPrice}}</text>
      </view>

    </view>
  </view>
  <!-- 提交按钮 -->
  <view class="appoint-btn" bindtap="submitAll" wx:if="{{!isHide}}">
    立即预约
  </view>

  <!-- 备注弹框 -->
  <view class="appoint-overlay-wrapper" wx:if="{{ remarkShow }}" bindtap="onRemarkClose">
  </view>
  <view class="remark-popup" wx:if="{{ remarkShow }}">
    <view class="title">
      订单备注
    </view>
    <textarea bindinput="bindMessageInput" placeholder="请输入订单备注信息" value="{{message}}" placeholder-style="font-size:26rpx;color:#666;" maxlength="200" class="remark-textarea"></textarea>
    <view class="btn" bindtap="confirmRemark">
      确定
    </view>
  </view>


  <view class="appoint-overlay-wrapper" wx:if="{{ choosePopup }}" bindtap="onClose">
  </view>
  <view class="popup-wrapper popup-wrapper-special" wx:if="{{ choosePopup }}">
    <!-- 标题 -->
    <view class="popup-title popup-title-special popup-title-new">
      <view>选择服务开始时间</view>
      <view wx:if="{{selectTimeValue>=17}}" class="fee-tips">您选的时间段可能会加收夜间服务费，具体以与商家的沟通为准</view>
    </view>

    <block>
      <view class="popup-content popup-content-special">

        <view class="time-select-top" style="display: flex;">
          <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
            <view class="time-select-left-item" bindtap="dateCheck" data-index="{{index}}" data-week="{{item.week}}" data-date="{{item.date}}" data-isbook="{{item.isBook}}" wx:for="{{dateList}}" wx:key="index" style="display: inline-block;">
              <view class="date-line-wrapper">
                <view class="date-msg {{dateIndex == index ? 'current-date' : ''}} {{item.dateMsg == '不可约' ? 'avail-date' : ''}}">
                  {{item.weekOfDay}}
                </view>

                <view class="date-msg1 {{dateIndex == index ? 'current-date' : ''}} {{item.dateMsg == '不可约' ? 'avail-date' : ''}}"> {{ filter.formatTime(item.bookdate)}}</view>
                <view class=" {{dateIndex == index ? 'current-line' : ''}} {{item.dateMsg == '不可约' ? 'current-line0' : ''}}"></view>

              </view>
            </view>
          </scroll-view>
        </view>
        <view class="time-select-middle">
          <view class="noon-select">
            <view class="noon-item {{noonType=='1'?'active-noon':''}}" data-noon="1" bindtap="noonTab">上午</view>
            <view class="noon-item {{noonType=='2'?'active-noon':''}}" data-noon="2" bindtap="noonTab">下午</view>
          </view>

          <view class="time-item-wrapper">
            <view bindtap="timeCheck" data-stock="{{item.stock}}" data-index="{{index}}" data-msg="{{item.timeMsg}}" data-toastmsg="{{item.toastMsg}}" class="time-msg {{timeIndex == index ? 'current-time' : ''}} {{item.timeMsg == '不可约' ? 'avail-time' : ''}}" wx:for="{{timeList}}" wx:key="index">
              <view class="{{timeIndex === index ? 'current-time' : ''}}">{{ item.begin }}</view>



            </view>
          </view>
          <view class="appointment-tips">
            <view> <span></span>
              <text>可预约</text>
            </view>
            <view> <span class="selected"></span>
              <text>已选择</text>
            </view>
            <view> <span class="no-appointment"></span>
              <text>不可约</text>
            </view>
          </view>

          <view class="time-select-bottom" wx:if="{{date!=''&&time!=''&&week!=''}}">
            <span>当前选择：</span>{{date}}（{{week}}）{{time}}
          </view>
        </view>
      </view>
    </block>


    <!-- 确认按钮 -->
    <view class="popup-btn-wrapper">
      <view bindtap="confirmTime" class="confirm-btn">确定</view>
    </view>
  </view>




  <!-- 地址弹框 -->
  <view class="appoint-overlay-wrapper address-overlay" wx:if="{{ addressShow }}" bindtap="onAddressClose">

    <view class="address-popup" cantap="onAddressClick">
      <view class="title">
        选择地址
      </view>
      <view class="address-list">
        <view class="address-item" wx:for="{{addressList}}" wx:key="index" data-address="{{item}}" bindtap="addressConfirm">
          <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.png" class="map-img"></image>

          <view class="address-main">
            <view class="main-line">
              <view>{{item.name}}</view>
              <view class="phone">{{item.tel}}</view>
            </view>
            <view class="customer-address" wx:if="{{item.addressName}}">{{item.addressName}}{{item.detail}}</view>
            <view class="customer-address" wx:else="">{{item.addressDetail}}</view>
          </view>
          <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/wx-dy/arrow-grey.png" class="arrow-img">
          </image>
        </view>
      </view>
      <view class="add-address-btn" bindtap="goAddAddress">添加其他地址</view>
    </view>
  </view>

  <!-- 备注弹框 -->
  <view class="appoint-overlay-wrapper remark-overlay" wx:if="{{ remarkPopupShow }}" bindtap="onRemarkPopupClose">

    <view class="remark-select" catchtap="onRemarkClick">
      <view class="title">
        选择备注
      </view>
      <view class="remark-list">
        <view class="remark-item" wx:for="{{remarkList}}" wx:key="index" data-remark="{{item}}" catchtap="remarkItemSelect">
          <view class="remark-value">{{item}}</view>
          <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png" class="radio-img" wx:if="{{remarkActive==item}}"></image>
          <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png" class="radio-img" wx:else></image>
        </view>
      </view>
      <view class="remark-conf-btn" catchtap="remarkItemConfirm">提交备注</view>
    </view>
  </view>




</view>