orderDetail.wxml 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. <wxs src="../../../utils/formatFuc.wxs" module="utils" />
  2. <view class="container">
  3. <!-- 未支付 -->
  4. <view class="not-pay-module" wx:if="{{payOverTime>0}}">
  5. <view class="pay-amount">
  6. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-wallet.png"></image>
  7. <view> 待支付,剩余<text>{{utils.formatOverTime(payOverTime)}}</text></view>
  8. </view>
  9. <view class="over-time">超过30分钟未支付,订单将自动取消</view>
  10. <view class="pay-now" catchtap="payOrder" data-id="{{orderInfo.id}}" data-sn="{{orderInfo.orderSn}}"
  11. wx:if="{{orderInfo.handleOption.pay}}">立即支付</view>
  12. </view>
  13. <!-- 卡片 -->
  14. <view class="top-card" tt-if="{{orderInfo.orderStatusVal!='未支付'&&orderInfo.orderStatusVal!='已取消'}}">
  15. <view class="top-name">{{orderInfo.goodsName}}</view>
  16. <view class="top-times">
  17. <view class="top-sku-name">{{orderInfo.skuName}}</view>
  18. <view>剩余<text>{{remainTimes}}</text>次</view>
  19. <view class="serviced-times">已服务<text>{{orderInfo.servedTimes}}</text>次</view>
  20. </view>
  21. <view class="top-tips">预约后,将为您上门服务,详情请咨询客服。</view>
  22. <!-- tt-if="{{orderInfo.orderStatusVal!='服务已完成'}}" -->
  23. <view class="appoint-tag" bindtap="goAppoint" wx:if="{{orderInfo.handleOption.book}}">预约服务</view>
  24. </view>
  25. <!-- 退款工单 -->
  26. <view class="refund-order-module" wx:if="{{afterSale}}">
  27. <view class="refund-title">
  28. <view class="title-text">退款工单</view>
  29. <view class="title-order">编号:{{afterSale.afterSn}}</view>
  30. <view class="title-status">{{afterSale.statusVal}}</view>
  31. </view>
  32. <view class="refund-main">
  33. <view class="row">
  34. <text>申请时间:</text>
  35. {{afterSale.createTime}}
  36. </view>
  37. <view class="row" wx:if="{{afterSale.refundTime!=null}}">
  38. <text>退款时间:</text>
  39. {{afterSale.refundTime}}
  40. </view>
  41. <view class="row">
  42. <text>退款原因:</text>
  43. {{afterSale.typeVal}}
  44. </view>
  45. <view class="row">
  46. <text>详细原因:</text>
  47. {{afterSale.reason}}
  48. </view>
  49. </view>
  50. <view class="refuse-remark-wrapper" wx:if="{{afterSale.statusVal=='已拒绝'}}">
  51. <view class="refuse-remark">
  52. <text>已拒绝:</text>
  53. {{afterSale.refusalRemark}}
  54. </view>
  55. </view>
  56. <view wx:if="{{afterSale.statu=='1'}}" class="refund-operate">
  57. <view bindtap="cancelRefund">取消退款</view>
  58. </view>
  59. </view>
  60. <!-- 工单列表 -->
  61. <view class="service-list" wx:if="{{dyDetails.length>0}}">
  62. <view class="service-item" wx:for="{{dyDetails}}" wx:key="index">
  63. <view class="service-title">
  64. <view class="sercive-name">服务{{utils.servciceName(index)}}</view>
  65. <view class="service-id">工单编号:{{item.id}}</view>
  66. <view class="service-status">{{item.statusVal}}</view>
  67. </view>
  68. <view class="service-main">
  69. <view class="customer-info">
  70. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.png"></image>
  71. <view class="customer-main">
  72. <view class="main-line">
  73. <view>{{item.customerName}}</view>
  74. <view class="phone">{{item.customerPhone}}</view>
  75. </view>
  76. <view class="customer-address" wx:if="{{item.addressName}}">{{item.addressName}}</view>
  77. <view class="customer-address" wx:else="">{{item.serviceAddress}}</view>
  78. </view>
  79. </view>
  80. <view class="row" wx:if="{{isShowPL}}">
  81. <text>开始时间:</text>{{item.bookStartTime}}
  82. </view>
  83. <view class="row" wx:else="">
  84. <text>上门时段:</text>{{item.bookTime}}
  85. </view>
  86. <view class="row" wx:if="{{isShowPL}}">
  87. <text>服务内容:</text>{{orderInfo.skuName}}
  88. </view>
  89. <view class="row">
  90. <text>预约备注:</text>{{item.customerRemark}}
  91. </view>
  92. </view>
  93. <view class="service-remark-wrapper">
  94. <view class="service-store">
  95. <view class="store-left">
  96. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-store.png"></image>
  97. <view>{{item.fraShopName}}</view>
  98. </view>
  99. <view>服务咨询</view>
  100. <view class="store-right" bindtap="makeStorePhone" data-phone="{{item.shopPhone}}">
  101. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-phone.png"></image>
  102. </view>
  103. </view>
  104. <view class="service-remark" wx:if="{{item.reminder}}">
  105. <text>提醒:</text>
  106. {{item.reminder}}
  107. </view>
  108. </view>
  109. <view wx:if="{{item.ticketVo}}" class="ticket">
  110. <view class="title">
  111. <view style="font-weight: 600;">售后进度</view>
  112. <view class="comment" bindtap="showTicketTips" data-id="{{item.ticketVo.ticketId}}"
  113. wx:if="{{item.ticketVo.isSatisfaction}}">评价售后</view>
  114. </view>
  115. <view class="timeline">
  116. <block wx:for="{{item.ticketVo.actions}}" wx:for-index="index" wx:for-item="action" wx:key="action">
  117. <view class="timeline-event">
  118. <view style="{{index==0?'background-color: #09afff':'background-color: rgb(193 194 195)'}}"
  119. class="timeline-marker"></view>
  120. <!-- <view wx:else style="background-color: rgb(193 194 195);border-radius: 50%; height: 15px;width: 15px;"></view> -->
  121. <view class="timeline-event-copy">
  122. <view class="timeline-event-thumbnail">
  123. <text class="{{index==0?'':'timeline-text'}}">状态:{{action.status}}</text>
  124. <text class="timeline-text">{{action.createTime}}</text>
  125. </view>
  126. <view class="timeline-event-content">
  127. <text class="timeline-text">{{action.content}}</text>
  128. </view>
  129. </view>
  130. </view>
  131. </block>
  132. </view>
  133. </view>
  134. <view class="service-operate" wx:if="{{item.status==1||item.status==7||item.acceptanceAble}}">
  135. <view wx:if="{{item.status==1||item.status==7}}" bindtap="goEditAppoint" data-id="{{item.id}}"
  136. data-status="{{item.status}}" data-time="{{item.bookTime}}">修改预约</view>
  137. <view wx:if="{{item.acceptanceAble}}" bindtap="goReVisit" data-id="{{item.id}}">服务验收</view>
  138. <view wx:if="{{item.isCancel}}" class="warning-color" bindtap="goCancelBook" data-id="{{item.id}}"
  139. data-phone="{{item.shopPhone}}">取消预约</view>
  140. </view>
  141. </view>
  142. </view>
  143. <!-- 商品和订单信息 -->
  144. <view class="product-block">
  145. <view class="product-detail">
  146. <view class="profuct-info">
  147. <image mode="aspectFit" class="product-img" src="{{orderInfo.picUrl+'?w=200'}}"></image>
  148. <view class="info-right">
  149. <view class="info-main">
  150. <view class="product-name">{{orderInfo.goodsName}}</view>
  151. <view class="price">¥<text style="font-size: 24rpx;">{{orderInfo.actualPrice}}</text></view>
  152. </view>
  153. <view class="sku-name" wx:if="{{orderInfo.increaseSumPrice}}">
  154. <view> 加购: {{orderInfo.unitDescribe}}*{{orderInfo.unitIncreaseNumber}}</view>
  155. <view>¥{{orderInfo.increaseSumPrice}}</view>
  156. </view>
  157. <view class="sku-name">
  158. 规格:{{orderInfo.skuName}}
  159. </view>
  160. <view class="other-info">服务{{orderInfo.serviceTimes}}次</view>
  161. </view>
  162. </view>
  163. </view>
  164. <!-- 过期退,随时退 -->
  165. <view wx:if="{{payOverTime>0}}" class="refund-tips-bar">
  166. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png"></image>
  167. <view>过期退</view>
  168. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png"></image>
  169. <view>随时退</view>
  170. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png"></image>
  171. <view>0费用</view>
  172. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png"></image>
  173. <view>全国百城连锁</view>
  174. </view>
  175. </view>
  176. <view class="order-info">
  177. <view class="order-top">
  178. <view class="topic">
  179. 订单编号:
  180. </view>
  181. <view>
  182. {{orderInfo.orderSn}}
  183. </view>
  184. <image mode="aspectFit" class="copy-img" src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-order-copy.png"
  185. bindtap="copyOrder"></image>
  186. </view>
  187. <view class="order-top">
  188. <view class="topic">
  189. 下单时间:
  190. </view>
  191. <view>
  192. {{orderInfo.createTime}}
  193. </view>
  194. </view>
  195. <view class="order-top">
  196. <view class="topic">
  197. 支付方式:
  198. </view>
  199. <view>
  200. {{orderInfo.payChannel}}
  201. </view>
  202. </view>
  203. <view class="order-bottom">
  204. <view class="order-price">
  205. <view class="topic">
  206. 订单金额:
  207. </view>
  208. <view>
  209. ¥{{orderInfo.orderPrice}}
  210. </view>
  211. </view>
  212. <view class="coupon-price">
  213. <view class="topic">
  214. 优惠金额:
  215. </view>
  216. <view>
  217. ¥{{orderInfo.discountPrice}}
  218. </view>
  219. </view>
  220. <view class="real-price">
  221. 实际付款:<text>¥{{orderInfo.actualPrice}}</text>
  222. </view>
  223. </view>
  224. </view>
  225. <!-- 客户服务 -->
  226. <view class="customer-service">
  227. <view class="title">
  228. 客户服务
  229. </view>
  230. <view class="contact-store" wx:if="{{payOverTime>0}}">
  231. <view class="topic">联系门店</view>
  232. <view class="remark">预约、服务信息咨询</view>
  233. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-phone.png"
  234. bindtap="makeStorePhone" data-phone="4009218987"></image>
  235. </view>
  236. <view class="contact-company">
  237. <view class="topic">总部客服</view>
  238. <view class="remark">订单咨询、投诉建议</view>
  239. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-kf.png"></image>
  240. <button class="contact-btn" open-type="contact">客服</button>
  241. </view>
  242. </view>
  243. <!-- 底部按钮 -->
  244. <view class="fixed-bottom">
  245. <view class="order-operate-wrapper">
  246. <view catchtap="cancelOrder" wx:if="{{orderInfo.handleOption.cancel}}" data-id="{{orderInfo.id}}" class="del">取消订单
  247. </view>
  248. <view catchtap="aftersaleOrder" data-id="{{orderInfo.id}}" wx:if="{{orderInfo.handleOption.refund}}" class="del">
  249. 售后/退款</view>
  250. <!-- <view data-id="{{orderInfo.id}}" data-sn="{{orderInfo.orderSn}}" data-aid="{{orderInfo.addressId}}"
  251. data-type="{{orderInfo.type}}" wx:if="{{orderInfo.handleOption.book}}" class="eval-btn">评价</view> -->
  252. <view wx:if="{{orderInfo.handleOption.book}}" class="appoint" catchtap="goAppoint">预约服务</view>
  253. <view catchtap="payOrder" data-id="{{orderInfo.id}}" data-sn="{{orderInfo.orderSn}}"
  254. wx:if="{{orderInfo.handleOption.pay}}">立即支付</view>
  255. <view class="blue-color"
  256. wx:if="{{orderInfo.orderStatus==201||orderInfo.orderStatus==205||orderInfo.orderStatus==206||orderInfo.orderStatus==301}}"
  257. bindtap="showMsg">追加备注</view>
  258. <view class="btn-rebuy" bindtap="buyAgain" data-id="{{orderInfo.goodsId}}"
  259. wx:if="{{orderInfo.orderStatusVal!='未支付'}}">再次购买</view>
  260. </view>
  261. </view>
  262. </view>
  263. <!-- 投诉建议弹框 -->
  264. <view class="goods-info-overlay" wx:if="{{ complainTips }}">
  265. <view class="goods-info-popup">
  266. <view class="popup-title">
  267. 投诉建议
  268. </view>
  269. <view class="tips-title">
  270. 电话:{{shopPhone}}
  271. </view>
  272. <view style="padding:0 20rpx 100rpx 32rpx;margin-top:-20rpx;">
  273. 对服务不满意或其他建议,请拨打投诉电话。
  274. </view>
  275. <view class="popup-bottom">
  276. <view class="btn-cancel" bindtap="cancelComplain">取消</view>
  277. <view class='btn-conf' bindtap="confComplain">拨打电话</view>
  278. </view>
  279. </view>
  280. </view>
  281. <!-- 客户追加备注弹框 -->
  282. <view class="appoint-overlay-wrapper" wx:if="{{ msgShow }}" bindtap="onMsgClose">
  283. </view>
  284. <view class="remark-popup" wx:if="{{ msgShow }}">
  285. <view class="title">
  286. 订单备注
  287. </view>
  288. <textarea bindinput="bindMsgInput" placeholder="请输入订单备注信息,此信息会提醒到服务人员" value="{{message}}"
  289. placeholder-style="font-size:26rpx;color:#666;" maxlength="100" class="remark-textarea"></textarea>
  290. <view class="btn" bindtap="confirmMsg">
  291. 确定
  292. </view>
  293. </view>
  294. <!-- 售后投诉满意回收 -->
  295. <view class="goods-info-overlay" wx:if="{{ ticketTips }}">
  296. <view class="goods-info-popup">
  297. <view class="popup-title">
  298. 售后评价
  299. </view>
  300. <view class="ticket-tips-content">
  301. 你的售后问题是否已被解决?您对售后服务是否满意?请打分。
  302. </view>
  303. <view style="display: flex;justify-content: center;">
  304. <image class="ticket-img" data-id="1" bindtap="selectTicketValue"
  305. src="/static/images/new/{{satisfaction==0?'star':(satisfaction==2||satisfaction==1?'star_red':'star_yellow')}}.png">
  306. </image>
  307. <image class="ticket-img" data-id="2" bindtap="selectTicketValue"
  308. src="/static/images/new/{{satisfaction<=1?'star':(satisfaction==2?'star_red':'star_yellow')}}.png"></image>
  309. <image class="ticket-img" data-id="3" bindtap="selectTicketValue"
  310. src="/static/images/new/{{satisfaction>=3?'star_yellow':'star'}}.png">
  311. </image>
  312. <image class="ticket-img" data-id="4" bindtap="selectTicketValue"
  313. src="/static/images/new/{{satisfaction>=4?'star_yellow':'star'}}.png">
  314. </image>
  315. <image class="ticket-img" data-id="5" bindtap="selectTicketValue"
  316. src="/static/images/new/{{satisfaction==5?'star_yellow':'star'}}.png">
  317. </image>
  318. </view>
  319. <view class="ticket-tips">{{satisfactionTips.tips}} </view>
  320. <view class="popup-bottom">
  321. <view class="btn-cancel" bindtap="cancelTicketTips">取消</view>
  322. <view class='btn-conf' bindtap="confTicketTips">立即提交</view>
  323. </view>
  324. </view>
  325. </view>
  326. <!-- 选择取消原因 -->
  327. <view class="appoint-overlay-wrapper remark-overlay" wx:if="{{ cancelShow }}" bindtap="onCancelPopupClose">
  328. <view class="remark-select" catchtap="onCancelClick">
  329. <view class="title">
  330. 选择取消原因
  331. </view>
  332. <view class="remark-list">
  333. <view class="remark-item" wx:for="{{cancelList}}" wx:key="index" data-id="{{item.id}}"
  334. catchtap="cancelItemSelect">
  335. <view class="remark-value">{{item.value}}</view>
  336. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png"
  337. class="radio-img" wx:if="{{cancelReason==item.id}}"></image>
  338. <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png"
  339. class="radio-img" wx:else></image>
  340. </view>
  341. </view>
  342. <view class="remark-conf-btn" catchtap="cancelItemConfirm">取消预约</view>
  343. </view>
  344. </view>