order.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. {extend name="public/container"}
  2. {block name="title"}订单详情{/block}
  3. {block name="content"}
  4. <div id="user-order" class="user-order-con">
  5. <section>
  6. <div class="coc-header send clearfix">
  7. <div class="logistics-state {$order._status._class} fl"></div>
  8. <div class="logistics-info fr">
  9. <div class="logistics-info-txt">
  10. <p>{$order._status._title}</p>
  11. {if condition="$order['pink_id']"}
  12. {if condition="isPinkStatus($order['pink_id'])"}
  13. <span>{$order._status._msg}</span>
  14. {else/}
  15. <span>拼团活动已经结束</span>
  16. {/if}
  17. {else/}
  18. <span>{$order._status._msg}</span>
  19. {/if}
  20. </div>
  21. </div>
  22. </div>
  23. <div class="adderss-info">
  24. <i class="iconfont icon-dizhi1"></i>
  25. <div class="content">
  26. <p>{$order.real_name} {$order.user_phone}</p>
  27. <p class="address-content">{$order.user_address}</p>
  28. </div>
  29. </div>
  30. {egt name="order._status._type" value="2"}
  31. <div class="item-block delivery-infos">
  32. <div class="con-tit">配送信息</div>
  33. <div class="delivery-con">
  34. <ul>
  35. <li>配送方式:{$order._status._deliveryType}</li>
  36. {eq name="order.delivery_type" value="express"}
  37. <li>快递公司:{$order.delivery_name}</li>
  38. <li>快递单号:{$order.delivery_id}</li>
  39. {/eq}
  40. {eq name="order.delivery_type" value="send"}
  41. <li>配送人员:{$order.delivery_name}</li>
  42. <li>联系电话:<a class="tel" href="tel:{$order.delivery_id}">{$order.delivery_id}</a> <i class="icon-tel"></i></li>
  43. {/eq}
  44. </ul>
  45. </div>
  46. </div>
  47. {/egt}
  48. <div class="item-block product-info">
  49. <div class="con-tit">产品信息</div>
  50. <div class="delivery-con">
  51. <ul>
  52. {volist name="order.cartInfo" id="cart"}
  53. <li>
  54. <a class="flex" href="javascript:void(0);">
  55. <div class="picture"><img @click.stop="toProductUrl('{$cart.productInfo.id}')" src="{$cart.productInfo.image}" /></div>
  56. <div class="info-centent flex">
  57. <p class="name">{$cart.productInfo.store_name}</p>
  58. <p class="description"><?=isset($cart['productInfo']['attrInfo']) ? $cart['productInfo']['attrInfo']['suk'] : ''?></p>
  59. <p class="count"><span>¥{$cart.truePrice}</span> X{$cart.cart_num}</p>
  60. </div>
  61. </a>
  62. {eq name="order._status._type" value="3"}
  63. <?php if(!\app\wap\model\store\StoreProductReply::isReply($cart['unique'],'product')): ?>
  64. <div class="assess status-on">
  65. <a href="javascript:void(0);" @click="goReply('{$cart.unique}')">评价</a>
  66. </div>
  67. <?php endif; ?>
  68. {/eq}
  69. </li>
  70. {/volist}
  71. </ul>
  72. </div>
  73. <div class="all-price">
  74. <div class="infos">
  75. {gt name="order.total_postage" value="0"}
  76. <p>运费 <span class="fr">¥{$order.total_postage}</span></p>
  77. {/gt}
  78. <p>商品总价 <span class="fr">¥{$order.total_price}</span></p>
  79. {gt name="order.coupon_price" value="0"}
  80. <p class="deb">优惠 <span class="fr">-¥{$order.coupon_price}</span></p>
  81. {/gt}
  82. {gt name="order.deduction_price" value="0"}
  83. <p class="deb">积分抵扣 <span class="fr">-¥{$order.deduction_price}</span></p>
  84. {/gt}
  85. </div>
  86. <div class="all-count">实付款 <span class="fr">¥{$order.pay_price}</span></div>
  87. </div>
  88. </div>
  89. <div class="item-block delivery-infos">
  90. <div class="con-tit">订单信息</div>
  91. <div class="delivery-con">
  92. <ul>
  93. <li>订单编号:{$order.order_id}</li>
  94. <li>下单时间:{$order.add_time|date="Y-m-d H:i",###}</li>
  95. <li>支付方式:{$order._status._payType}</li>
  96. <li>支付状态:{$order.paid == 1 ? '已支付' : '未支付'}</li>
  97. {eq name="order.paid" value="1"}
  98. <li>支付时间:{$order.pay_time|date="Y-m-d H:i",###}</li>
  99. {/eq}
  100. </ul>
  101. </div>
  102. </div>
  103. <?php if(($order['_status']['_type'] != -1 && $order['_status']['_type'] != 3 && $order['pay_type'] != 'offline') || ($order['pay_type'] == 'offline' && ($order['status'] == 1 || $order['status'] > 2))): ?>
  104. <div style="height:1rem"></div>
  105. <div class="order-con-btn">
  106. <?php if($order['_status']['_type'] != 2): ?>
  107. <span class="more-menu" @click.self="showMenu = !showMenu">
  108. 更多
  109. <ul :class="{active:showMenu == true}">
  110. <?php if($order['_status']['_type'] == 0 || $order['_status']['_type'] == 4 || $order['_status']['_type'] == -2){ ?>
  111. <li><a href="javascript:void(0);" @click="removeOrder">删除订单</a></li>
  112. <?php }else if($order['_status']['_type'] != 2 && $order['_status']['_type'] != 3 && $order['_status']['_type'] != -1){ ?>
  113. <li><a href="javascript:void(0);" @click="applyRefundOrder">申请退款</a></li>
  114. <?php } ?>
  115. </ul>
  116. </span>
  117. <?php endif; ?>
  118. {if condition="$order['pink_id']"}
  119. <a href="javascript:void(0);" @click="LinkPink({$order.pink_id})"><span class="delete-order">查看拼团</span></a>
  120. {/if}
  121. <?php if($order['_status']['_type'] == 0){ ?>
  122. <a class="payment" href="javascript:void(0);" @click="confirm">立即付款</a>
  123. <?php }else if($order['_status']['_type'] == 2){ ?>
  124. {eq name="order.delivery_type" value="express"}
  125. <a href="{:url('express',['uni'=>$order['order_id']])}"><span class="delete-order">查询快递</span></a>
  126. {/eq}
  127. <a class="payment" href="javascript:void(0);" @click="userTake">确认收货</a>
  128. <?php } ?>
  129. </div>
  130. <?php endif; ?>
  131. {eq name="order._status._type" value="3"}
  132. <div style="height:1rem"></div>
  133. <div class="order-con-btn">
  134. <a class="payment" href="javascript:void(0);" @click="goDetails">再来一单</a>
  135. </div>
  136. {/eq}
  137. </section>
  138. </div>
  139. <script type="text/javascript">
  140. requirejs(['vue','store','helper','layer'],function(Vue,storeApi,$h,layer){
  141. new Vue({
  142. el:"#user-order",
  143. data:{
  144. orderId:'<?=$order['order_id']?>',
  145. payType:'<?=$order['pay_type']?>',
  146. showMenu:false
  147. },
  148. methods:{
  149. toProductUrl:function(id){
  150. location.href = $h.U({c:'store',a:'detail',p:{id:id}});
  151. },
  152. goDetails:function () {
  153. that = this;
  154. storeApi.orderDetails(that.orderId,function(res){
  155. if(res.data.code == 200){
  156. var cartId = res.data.data;
  157. location.href = $h.U({
  158. c: 'store',
  159. a: 'confirm_order',
  160. p: {cartId: cartId}
  161. });
  162. }else{
  163. $h.pushMsg(res.data.msg);
  164. }
  165. },function(res){
  166. $h.pushMsg(res.msg);
  167. });
  168. },
  169. applyRefundOrder:function(){
  170. var that = this;
  171. layer.confirm('确定申请退款?',{icon:3},function(index){
  172. layer.close(index);
  173. require(['wap/crmeb/module/refund-reason'],function($r){
  174. Vue.use($r);
  175. that.$orderRefundReason(function(msg){
  176. $h.load();
  177. storeApi.orderApplyRefund(that.orderId,msg,function(res){
  178. $h.loadClear();
  179. $h.pushMsg('申请退款成功!',function(){
  180. location.reload(true);
  181. });
  182. },function(){ $h.loadClear(); return true; });
  183. });
  184. });
  185. });
  186. },
  187. removeOrder:function(){
  188. var that = this;
  189. layer.confirm('确定删除该订单?',{icon:3},function(index){
  190. layer.close(index);
  191. $h.loadFFF();
  192. storeApi.removeUserOrder(that.orderId,function(){
  193. $h.loadClear();
  194. $h.pushMsg('删除成功',function(){
  195. location.replace($h.U({
  196. c:'my',
  197. a:'order_list'
  198. }));
  199. });
  200. });
  201. })
  202. },
  203. confirm:function(){
  204. if(this.payType == 'yue')
  205. layer.confirm('确定使用余额支付?',{icon:3},this.goPay);
  206. else if(this.payType == 'offline')
  207. layer.confirm('确定使用线下付款方式支付?',{icon:3},this.goPay);
  208. else
  209. this.goPay();
  210. },
  211. LinkPink:function (pink_id) {
  212. location.href = $h.U({
  213. c:'my',
  214. a:'order_pink',
  215. p:{id:pink_id}
  216. });
  217. },
  218. goPay:function(){
  219. $h.loadFFF();
  220. storeApi.payOrder(this.orderId,function(res){
  221. $h.loadClear();
  222. var data = res.data;
  223. if(data.data.status == 'WECHAT_PAY'){
  224. mapleWx($jssdk(),function(){
  225. this.chooseWXPay(data.data.result.jsConfig,function(){
  226. $h.pushMsg('支付成功',function(){
  227. location.reload(true);
  228. })
  229. },{
  230. fail:function(){ $h.pushMsg('已取消支付');},
  231. cancel:function(){ $h.pushMsg('已取消支付');}
  232. });
  233. });
  234. }else{
  235. $h.pushMsg(data.msg,function(){
  236. location.reload(true);
  237. });
  238. }
  239. },function(e){ $h.loadClear(); return true; })
  240. },
  241. userTake:function(){
  242. var that = this;
  243. layer.confirm('确定立即收货?',{icon:3},function(index){
  244. layer.close(index);
  245. $h.loadFFF();
  246. storeApi.userTakeOrder(that.orderId,function(){
  247. $h.loadClear();
  248. $h.pushMsg('收货成功',function(){
  249. location.reload(true);
  250. });
  251. },function(e){ $h.loadClear(); return true; });
  252. })
  253. },
  254. goReply:function(unique){
  255. location.href = $h.U({
  256. c:'my',
  257. a:'order_reply',
  258. p:{unique:unique}
  259. });
  260. }
  261. },
  262. mounted:function () {
  263. vm = this;
  264. }
  265. })
  266. });
  267. </script>
  268. {/block}