checkout.wxml 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. <wxs src="../../utils/formatFuc.wxs" module="formatFuc" />
  2. <view class="container">
  3. <view class="address-box">
  4. <view class="address-item" bindtap="selectAddress" wx:if="{{checkedAddress.id > 0}}">
  5. <view class="l">
  6. <text class="name">{{checkedAddress.name}}</text>
  7. <text class="default" wx:if="{{checkedAddress.isDefault}}">默认</text>
  8. </view>
  9. <view class="m">
  10. <text class="mobile">{{checkedAddress.tel}}</text>
  11. <text class="address">{{checkedAddress.addressDetail}}</text>
  12. </view>
  13. <view class="r">
  14. <van-icon name="arrow" />
  15. </view>
  16. </view>
  17. <view class="address-item address-empty" bindtap="selectAddress" wx:else>
  18. <view class="m">
  19. 还没有收货地址,去添加
  20. </view>
  21. <view class="r">
  22. <van-icon name="arrow" />
  23. </view>
  24. </view>
  25. </view>
  26. <view style="float: right;height: 50rpx;">*请确保服务地址正确,确保服务者顺利上门!</view>
  27. <view class="coupon-box">
  28. <view class="coupon-item" bindtap="selectCoupon">
  29. <view class="l" wx:if="{{couponId == 0}}">
  30. <text class="name">没有可用的优惠券</text>
  31. <text class="txt">0张</text>
  32. </view>
  33. <view class="l" wx:elif="{{couponId == -1}}">
  34. <text class="name">优惠券</text>
  35. <text class="txt">{{availableCouponLength}}张</text>
  36. </view>
  37. <view class="l" wx:else>
  38. <text class="name">优惠券</text>
  39. <text class="txt">-¥{{couponPrice}}元</text>
  40. </view>
  41. <view class="r">
  42. <van-icon name="arrow" />
  43. </view>
  44. </view>
  45. </view>
  46. <view class="order-box" wx:if="{{couponId==24}}">
  47. <view class="order-item no-border">
  48. <view class="l">
  49. <text class="name">预约时间</text>
  50. </view>
  51. <view class="r">
  52. <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
  53. value="{{multiIndex}}" range="{{multiArray}}">
  54. <text class="message-app txt">{{orderData}}</text>
  55. </picker>
  56. </view>
  57. </view>
  58. </view>
  59. <!-- 预约时间 -->
  60. <view class="appoint-time-block" wx:if="{{isNeedAppoint||couponId==24}}">
  61. <view class="appoint-time-operate">
  62. <view class="operate-left">
  63. 预约时间
  64. </view>
  65. <view class="operate-right" bindtap="showAppoint">
  66. <text class="not-select" wx:if="{{!isFinishAppoint}}">请选择</text>
  67. <text wx:if="{{isFinishAppoint}}">更改</text>
  68. <van-icon name="arrow" />
  69. </view>
  70. </view>
  71. <view class="appoint-time-show" wx:if="{{isFinishAppoint}}">
  72. <!-- 服务时间 -->
  73. <view class="one-time" wx:if="{{isOneAppoint}}">
  74. <text>服务时间</text>
  75. <text>{{oneTimeAppoint}}</text>
  76. </view>
  77. <view class="multi-times" wx:if="{{!isOneAppoint}}">
  78. <view class="multi-times-item">
  79. <text>服务频率</text>
  80. <text>{{activeTab==1?'一周1次':(activeTab==2?'一周2次':'二周1次')}}</text>
  81. </view>
  82. <view class="multi-times-item">
  83. <text>服务时间</text>
  84. <text>{{selectedDateList[0].weekStr+' '+selectedDateList[0].time}}</text>
  85. </view>
  86. <view class="multi-times-item" wx:if="{{activeTab==2}}">
  87. <text></text>
  88. <text>{{selectedDateList[1].weekStr+' '+selectedDateList[1].time}}</text>
  89. </view>
  90. <view class="multi-times-item">
  91. <text>首次服务时间</text>
  92. <text>{{firstAppointList[firstDateIndex].date}}</text>
  93. </view>
  94. </view>
  95. </view>
  96. </view>
  97. <!-- 多次预约结果 -->
  98. <view class="appoint-result" wx:if="{{appointFailTip}}">
  99. 根据您的预约需求,有<text class="orange-font">{{noSerTimes}}</text>个日期暂时无法提供预约服务,为您保留<text class="orange-font">{{noSerTimes}}</text>个保洁次卡,下单成功后在"<text class="orange-font">我的订单-查看服务</text>"里预约服务
  100. </view>
  101. <view class="order-box">
  102. <view class="order-item no-border">
  103. <view class="l">
  104. <text class="name">备注</text>
  105. </view>
  106. <view class="r">
  107. <input class="txt" class="message-item" bindinput="bindMessageInput" placeholder="如需要,请输入备注信息" value="{{message}}" />
  108. </view>
  109. </view>
  110. </view>
  111. <view class="order-box">
  112. <view class="order-item">
  113. <view class="l">
  114. <text class="name">商品合计</text>
  115. </view>
  116. <view class="r">
  117. <text class="txt">¥{{goodsTotalPrice}}元</text>
  118. </view>
  119. </view>
  120. <view class="order-item no-border">
  121. <view class="l">
  122. <text class="name">优惠券</text>
  123. </view>
  124. <view class="r">
  125. <text class="txt">-¥{{couponPrice}}元</text>
  126. </view>
  127. </view>
  128. </view>
  129. <view class="goods-items">
  130. <view class="item" wx:for="{{checkedGoodsList}}" wx:key="id">
  131. <view class="name">{{item.goodsName}}</view>
  132. <view style="display: flex;">
  133. <view class="img">
  134. <image src="{{item.picUrl}}"></image>
  135. </view>
  136. <view class="info">
  137. <view class="m" style="margin-top:20rpx">规格:{{item.specifications}}</view>
  138. <view class="m">服务次数:{{item.goods.serviceTimes}}</view>
  139. <view class="b">单价:¥{{item.price}}</view>
  140. </view>
  141. </view>
  142. </view>
  143. </view>
  144. <view class="actual-price">
  145. 实付:¥{{actualPrice}}元
  146. </view>
  147. <!-- <view class="order-total">
  148. <view class="l">实付:¥{{actualPrice}}</view>
  149. <view class="r" bindtap="submitOrder">去付款</view>
  150. </view> -->
  151. <view class="go-pay-wrapper">
  152. <van-button type="info" block round bindtap="submitOrder">去付款</van-button>
  153. </view>
  154. <!-- custom-style="height: 80%" -->
  155. <van-popup
  156. show="{{ choosePopup }}"
  157. round
  158. position="bottom"
  159. bind:click-overlay="onClose"
  160. >
  161. <view class="popup-wrapper">
  162. <!-- 标题 -->
  163. <view class="popup-title">
  164. {{popupType==1?'选择预约时间':(popupType==2?'选择服务频次':'选择首次预约时间')}}
  165. </view>
  166. <block wx:if="{{popupType==1}}">
  167. <view class="popup-content">
  168. <view class="time-select-left">
  169. <view wx:for="{{dateList}}" wx:key="index" class="time-select-left-item" bindtap="dateCheck" data-index="{{index}}">
  170. <!-- <view hidden="{{index>1}}" class="date-tag">{{index==0?'明天':'后天'}}</view> -->
  171. <view>
  172. <text wx:if="{{index<=1}}" class="date-tag">{{index==0?'明天':'后天'}}</text>
  173. <text hidden="{{index>=2}}" class="full-time">约满</text>
  174. </view>
  175. <view class="{{dateIndex==index?'current-date':''}}">{{item.date+' '+item.week}}</view>
  176. </view>
  177. </view>
  178. <view class="time-select-right">
  179. <view wx:for="{{timeList}}" wx:key="id" class="time-select-right-item" bindtap="timeCheck" data-index="{{index}}">
  180. <view class="{{timeIndex==index?'current-date':''}}">{{item.time}}</view>
  181. <view wx:if="{{timeIndex==index}}" class="date-tag">已选</view>
  182. </view>
  183. </view>
  184. </view>
  185. </block>
  186. <!-- 选择频次 -->
  187. <block wx:if="{{popupType==2}}">
  188. <van-tabs wx:if="{{ choosePopup }}" active="{{ activeTab }}" color="#09afff" bind:change="onTabChange">
  189. <van-tab title="一周1次" name="1"></van-tab>
  190. <van-tab title="一周2次" name="2"></van-tab>
  191. <van-tab title="二周1次" name="3"></van-tab>
  192. </van-tabs>
  193. <view class="popup-content select-week-times">
  194. <view class="time-select-left week-select-left">
  195. <view wx:for="{{weekArrList}}" wx:key="index" class="time-select-left-item " bindtap="weekCheck" data-index="{{index}}">
  196. <view class="week-str {{weekIndex==index?'current-date':''}}">{{item.week}}</view>
  197. <view class="select-num-tag" wx:if="{{item.num>0}}">{{item.num}}</view>
  198. </view>
  199. </view>
  200. <view class="time-select-right">
  201. <view wx:for="{{timeList}}" wx:key="id" class="time-select-right-item" bindtap="timeSelect" data-index="{{index}}" data-time="{{item.time}}">
  202. <!-- <view class="{{formatFuc.defineIndexOf(selectedWeekList,weekIndex)>-1?'current-date':''}}">{{item.time}}</view>
  203. <view wx:if="{{formatFuc.defineIndexOf(selectedWeekList,weekIndex)>-1}}" class="date-tag">已选</view> -->
  204. <view class="{{formatFuc.includeItem(selectedDateList,weekIndex,item.time)&&formatFuc.defineIndexOf(selectedWeekList,weekIndex)>-1?'current-date':''}}">{{item.time}}</view>
  205. <view wx:if="{{formatFuc.includeItem(selectedDateList,weekIndex,item.time)&&formatFuc.defineIndexOf(selectedWeekList,weekIndex)>-1}}" class="date-tag">已选</view>
  206. </view>
  207. </view>
  208. </view>
  209. </block>
  210. <!-- 选择首次预约时间 -->
  211. <block wx:if="{{popupType==3}}">
  212. <view class="popup-content">
  213. <view class="first-appoint-date-list">
  214. <view class="first-appoint-date-item" wx:for="{{firstAppointList}}" wx:key="index" bindtap="firstDateCheck" data-index="{{index}}">
  215. <view class="{{firstDateIndex==index?'current-date':''}}">{{item.date+' '+item.week}}</view>
  216. <view wx:if="{{firstDateIndex==index}}" class="first-time-selected date-tag">已选</view>
  217. </view>
  218. </view>
  219. </view>
  220. </block>
  221. </view>
  222. <!-- 确认按钮 -->
  223. <view class="popup-btn-wrapper">
  224. <van-button type="info" block round bindtap="confirmTime">确定</van-button>
  225. </view>
  226. </van-popup>
  227. <!-- 支付失败弹框 -->
  228. <van-overlay show="{{ payFailShow }}" >
  229. <view class="overlay-wrapper">
  230. <view class="fail-wrapper">
  231. <view class="fail-top">
  232. <image src="/static/images/new/icon-fail.png"></image>
  233. <view class="fail-text">支付失败</view>
  234. <view class="sub-color">支付遇到问题,请尝试重新支付</view>
  235. </view>
  236. <view class="fail-bottom">
  237. <view class="cancel-btn" bindtap="cancelPay">取消</view>
  238. <view class="btn-devide"></view>
  239. <view class="repay-btn" bindtap="rePay">重新支付</view>
  240. </view>
  241. </view>
  242. </view>
  243. </van-overlay>
  244. </view>