jzmall_wx/pages/ucenter/appointOrder/appointOrder.wxml

<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-left">
          <view wx:for="{{dateList}}" wx:key="index" class="time-select-left-item" bindtap="dateCheck"
            data-index="{{index}}" data-week="{{item.week}}" data-date="{{item.date}}" data-isbook="{{item.isBook}}">
						<view class="date-line-wrapper">
            <view class="{{dateIndex==index?'current-date':''}}">{{item.bookdate+' '+item.weekOfDay}}</view>
            <view>
              <text wx:if="{{index<=1}}" class="date-tag">{{index==0?'今天':'明天'}}</text>
            
            </view>
					</view>
						<view class="date-msg {{item.dateMsg=='可约'?'avail-date':''}}">{{item.dateMsg}}</view>
           
          </view>
        </view>
        <view class="time-select-right">
          <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 wx:for="{{timeList}}" wx:key="id" class="time-select-right-item {{item.timeMsg?'invalid-time':''}}" bindtap="timeCheck"
            data-stock="{{item.stock}}" data-index="{{index}}" data-msg="{{item.timeMsg}}">
            <!-- <view class="{{item.stock<=0?'zero-stock':''}}"> -->
            <view class="time-line">
              <text class="{{timeIndex===index?'current-date':''}}">{{item.begin}} </text>
              <!-- <text class="stock-text">(库存:{{item.stock}})</text> -->
              <text wx:if="{{selectTimeValue>=17&&timeIndex==index&&(!item.timeMsg)}}" class="extra-tips">收夜间服务费</text>
              <text wx:if="{{timeIndex===index}}" class="date-tag">已选</text>
              <view wx:if="{{item.timeMsg&&item.timeMsg!=null}}" class="time-msg">
                {{item.timeMsg}}
                </view>

            </view>
            <!-- <view wx:if="{{timeIndex===index&&item.value>=17}}" style="font-size: 11px;line-height: 12px;">您选的时间段可能会加收夜间服务费，具体以与商家的沟通为准</view> -->
          </view>
        </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>