order.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. <!-- +---------------------------------------------------------------------- -->
  2. <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
  3. <!-- +---------------------------------------------------------------------- -->
  4. <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
  5. <!-- +---------------------------------------------------------------------- -->
  6. <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
  7. <!-- +---------------------------------------------------------------------- -->
  8. <!-- | Author: CRMEB Team <admin@crmeb.com> -->
  9. <!-- +---------------------------------------------------------------------- -->
  10. {extend name="public/container"}
  11. {block name="title"}订单详情{/block}
  12. {block name="head_top"}
  13. <style>
  14. body {
  15. padding-bottom: 1.12rem;
  16. background-color: #f5f5f5;
  17. }
  18. a[href^="tel"] {
  19. color: #191C6E;
  20. }
  21. </style>
  22. {/block}
  23. {block name="content"}
  24. <div v-cloak id="app">
  25. <div class="order-detail">
  26. <!-- 退款 -->
  27. {if condition="$order.refund_reason neq '' && $order.refund_status eq 0"}
  28. <div class="section return">
  29. <div>卖家拒绝退款</div>
  30. <div class="time">拒绝退款原因:{$order.refund_reason}</div>
  31. <div class="time">处理时间:{$order.refund_reason_time}</div>
  32. </div>
  33. {/if}
  34. <!-- 退货 -->
  35. {if condition="$order.refund_status eq 1"}
  36. <div class="section return">
  37. <div>退款中</div>
  38. <div class="time">申请时间:{$order.refund_application_time}</div>
  39. </div>
  40. {elseif condition="$order.refund_status eq 2"}
  41. <div class="section return">
  42. <div>已退款</div>
  43. <div class="time">{$order._status._msg}</div>
  44. </div>
  45. {/if}
  46. {if condition="$order.refund_status eq 0 && $order.refund_reason eq ''"}
  47. <div class="section status">
  48. <div class="image">
  49. <img src="{$order.status_pic}">
  50. </div>
  51. <div class="text">
  52. <div>{$order._status._title}</div>
  53. <div class="time">{$order._status._msg}</div>
  54. </div>
  55. </div>
  56. {/if}
  57. <div class="section contact">
  58. <div>
  59. <span>{$order.real_name}</span>
  60. <span>{$order.user_phone}</span>
  61. </div>
  62. <div class="address">{$order.user_address}</div>
  63. </div>
  64. <div class="section goods">
  65. {volist name="order.cartInfo" id="cart"}
  66. <div class="goods-bd">
  67. <div class="image">
  68. <img src="{$cart.productInfo.image}">
  69. </div>
  70. <div class="text">
  71. <div class="name">{$cart.productInfo.store_name}</div>
  72. <div class="money">
  73. <div class="price">¥
  74. <span>{$cart.truePrice}</span>
  75. </div>
  76. </div>
  77. </div>
  78. {if condition="$order._status._type eq 3"}
  79. <div>
  80. <div class="num">x{$cart.cart_num}</div>
  81. <a href="{:url('my/order_reply')}?unique={$cart.unique}">评价</a>
  82. </div>
  83. {/if}
  84. </div>
  85. {/volist}
  86. <div class="goods-ft">共{$order.total_num}件商品,总金额 <span>¥{$order.pay_price}</span></div>
  87. </div>
  88. <!-- 待收货 -->
  89. {if condition="$order.status EGT 1"}
  90. <div class="section express">
  91. <div class="image">
  92. <img src="/wap/first/zsff/images/express.png">
  93. </div>
  94. <div class="text">
  95. <div>物流公司:<span>{$order.delivery_name}</span></div>
  96. <div>快递单号:<span id="account">{$order.delivery_id}</span></div>
  97. </div>
  98. <button type="button" data-clipboard-action="copy" data-clipboard-target="#account" @click="copyNo" id="copy">复制单号</button>
  99. </div>
  100. {/if}
  101. <ul class="section list">
  102. <li>
  103. <div>订单编号:</div>
  104. <div>{$order.order_id}</div>
  105. </li>
  106. <li>
  107. <div>下单时间:</div>
  108. <div>{$order.add_time|date="Y-m-d H:i",###}</div>
  109. </li>
  110. <li>
  111. <div>商品金额:</div>
  112. <div>¥{$order.total_price}</div>
  113. </li>
  114. <li>
  115. <div>支付方式:</div>
  116. <div>{$order._status._payType}</div>
  117. </li>
  118. {gt name="order.total_postage" value="0"}
  119. <li>
  120. <div>运费:</div>
  121. <div>¥{$order.total_postage}</div>
  122. </li>
  123. {/gt}
  124. {gt name="order.use_gold" value="0"}
  125. <li>
  126. <div>使用{$gold_name}:</div>
  127. <div>{$order.use_gold}</div>
  128. </li>
  129. {/gt}
  130. {gt name="order.back_gold" value="0"}
  131. <li>
  132. <div>退还{$gold_name}:</div>
  133. <div>¥{$order.back_gold}</div>
  134. </li>
  135. {/gt}
  136. <li>
  137. <div>实付款:</div>
  138. <div>¥{$order.pay_price}</div>
  139. </li>
  140. <li>
  141. <div>买家留言:</div>
  142. <div class="msg">{$order.mark}</div>
  143. </li>
  144. </ul>
  145. <div class="footer">
  146. {if condition="$order._status._type eq 0"}
  147. <a href="javascript:void(0);" class="blue" @click="submit">立即付款</a>
  148. <a href="javascript:void(0);" @click="removeOrder('取消')">取消订单</a>
  149. {elseif condition="$order._status._type eq 1 && $order.refund_reason eq '' && $order.refund_status eq 0 && $order.pay_price gt 0"}
  150. <a href="javascript:void(0);" @click="applyRefundOrder">申请退款</a>
  151. {elseif condition="$order._status._type eq 2"}
  152. <a href="javascript:void(0);" class="blue" @click="userTake">确认收货</a>
  153. {elseif condition="$order._status._type eq 3 && $order.refund_reason eq '' && $order.refund_status eq 0 && $order.pay_price gt 0"}
  154. <a href="javascript:void(0);" @click="applyRefundOrder">申请退款</a>
  155. <a href="javascript:void(0);" @click="removeOrder('删除')">删除订单</a>
  156. {elseif condition="$order._status._type eq 4 && $order.refund_reason eq '' && $order.refund_status eq 0 && $order.pay_price gt 0"}
  157. <a href="javascript:void(0);" @click="applyRefundOrder">申请退款</a>
  158. <a href="javascript:void(0);" @click="removeOrder('删除')">删除订单</a>
  159. {elseif condition="$order.refund_reason neq '' && $order.refund_status eq 0 && $order._status._type eq 3 && $order.pay_price gt 0"}
  160. <a href="javascript:void(0);" class="blue" @click="applyRefundOrder()">再次申请</a>
  161. <a href="javascript:void(0);" @click="removeOrder('删除')">删除订单</a>
  162. {elseif condition="$order.refund_status eq 2 || $order._status._type eq 3 && $order.pay_price eq 0"}
  163. <a href="javascript:void(0);" @click="removeOrder('删除')">删除订单</a>
  164. {/if}
  165. <a href="javascript:void(0);" @click="services">联系客服</a>
  166. {if condition="$order.status EGT 1"}
  167. <a href="javascript:void(0);" @click="express">查看物流</a>
  168. {/if}
  169. </div>
  170. </div>
  171. <!-- 支付弹窗 -->
  172. <pay-dialog
  173. :open.sync="payDialogOpen"
  174. :money="money"
  175. :now_money="now_money"
  176. :special_id="id"
  177. :pay_type_num="pay_type_num"
  178. :is-wechat="isWechat"
  179. :is-alipay="is_alipay"
  180. :is-balance="is_yue"
  181. :template-id="templateId"
  182. :wxpay-h5="wxpayH5"
  183. @change="changeVal"
  184. ></pay-dialog>
  185. <base-login :login-show="loginShow" :site-name="site_name"></base-login>
  186. <quick-menu></quick-menu>
  187. </div>
  188. <script>
  189. require(['vue', 'store', 'helper','layer','clipboard','components/pay-dialog/index', 'components/base-login/index', '{__WAP_PATH}zsff/js/enter.js', 'quick'], function (Vue, api, $h,layer,ClipboardJS, PayDialog, BaseLogin) {
  190. var site_name = '{$Auth_site_name}';
  191. var id="{$order.id}";
  192. var orderId="{$order.order_id}";
  193. var money="{$order.pay_price}";
  194. var isWechat={$isWechat ? 'true' : 'false'};
  195. var is_yue={$is_yue ? 'true' : 'false'};
  196. var now_money={$now_money};
  197. var is_alipay={$is_alipay ? 'true' : 'false'};
  198. var wxpayH5={$is_h5_wechat_payment_switch ? 'true' : 'false'};
  199. var callback_url = '{$callback_url}';
  200. var app = new Vue({
  201. el: '#app',
  202. components: {
  203. 'pay-dialog': PayDialog,
  204. 'base-login': BaseLogin
  205. },
  206. data: {
  207. loginShow: false,
  208. isWechat:isWechat,
  209. url:isWechat ? $h.U({c:'index',a:'login'}):$h.U({c:'login',a:'phone_check'}),
  210. id:id,
  211. orderId:orderId,
  212. payDialogOpen:false, // 是否显示支付弹窗
  213. money:money,
  214. pay_type_num:50,
  215. is_alipay: is_alipay, //支付宝是否开启
  216. now_money: now_money, //余额
  217. is_yue:is_yue, //余额是否开启
  218. templateId: '',
  219. wxpayH5: wxpayH5,
  220. site_name: site_name
  221. },
  222. mounted: function () {
  223. api.baseGet($h.U({c:'index',a:'user_login'}),function (res) {
  224. this.loginShow=false;
  225. }.bind(this),function (res) {
  226. this.loginShow=true;
  227. return false;
  228. }.bind(this));
  229. this.subscribeTemplate();
  230. },
  231. methods: {
  232. subscribeTemplate: function () {
  233. api.baseGet($h.U({
  234. c: 'special',
  235. a: 'getTemplateIds',
  236. q: {
  237. pay_type_num: this.pay_type_num,
  238. special_id: this.id
  239. }
  240. }), function (res) {
  241. this.templateId = res.data.msg;
  242. }.bind(this));
  243. },
  244. submit: function () {
  245. this.payDialogOpen=true;
  246. },
  247. copyNo:function(delivery_id){
  248. var clipboard = new ClipboardJS('#copy');
  249. clipboard.on('success', function (e) {
  250. $h.pushMsgOnce('复制成功');
  251. e.clearSelection();
  252. });
  253. clipboard.on('error', function (e) {
  254. $h.pushMsgOnce('复制失败');
  255. });
  256. },
  257. userTake:function(){
  258. var that = this;
  259. layer.confirm('确定立即收货?',{icon:3},function(index){
  260. layer.close(index);
  261. $h.loadFFF();
  262. api.userTakeOrder(that.orderId,function(){
  263. $h.loadClear();
  264. $h.pushMsg('收货成功',function(){
  265. location.reload(true);
  266. });
  267. },function(e){ $h.loadClear(); return true; });
  268. })
  269. },
  270. removeOrder: function (title) {
  271. var that = this;
  272. layer.confirm('确认'+title+'该订单?', { icon: 3, title: false, btn: ['确定', '取消'] }, function (index) {
  273. layer.close(index);
  274. $h.loadFFF();
  275. api.removeUserOrder(that.orderId, function () {
  276. $h.loadClear();
  277. $h.pushMsg(title+'成功', function () {
  278. location.replace($h.U({
  279. c: 'special',
  280. a: 'order_store_list'
  281. }));
  282. });
  283. }, function (e) { $h.loadClear(); return true; });
  284. })
  285. },
  286. // 联系客服
  287. services:function(){
  288. api.baseGet($h.U({
  289. c: 'public_api',
  290. a: 'public_data'
  291. }), function (res) {
  292. var data = res.data.data;
  293. if (data.customer_service === '3') {
  294. if (data.site_service_phone) {
  295. layer.confirm('是否拨打 <a href="tel:' + data.site_service_phone + '">' + data.site_service_phone + '</a> 进行咨询?', {
  296. title: false,
  297. closeBtn: false,
  298. btn: ['拨打', '取消']
  299. }, function (index) {
  300. window.location.assign('tel:' + data.site_service_phone);
  301. layer.close(index);
  302. });
  303. } else {
  304. layer.msg('抱歉,无法联系客服');
  305. }
  306. } else {
  307. window.location.assign($h.U({
  308. c: 'service',
  309. a: 'service_list'
  310. }));
  311. }
  312. });
  313. },
  314. applyRefundOrder:function(){
  315. location.replace($h.U({
  316. c:'my',
  317. a:'refund_apply',
  318. p:{order_id:this.orderId}
  319. }));
  320. },
  321. pay_order:function(data){
  322. this.orderId=data.data.result.orderId || '';
  323. switch (data.data.status){
  324. case "PAY_ERROR":case 'ORDER_EXIST':case 'ORDER_ERROR':
  325. this.extendOrder(data.msg);
  326. break;
  327. case 'WECHAT_PAY':
  328. this.wechatPay(data.data.result.jsConfig);
  329. break;
  330. case 'WECHAT_H5_PAY':
  331. this.payDialogOpen=false;
  332. var callbackUrl = callback_url + '?type=2&id=0';
  333. var mwebUrl = data.data.result.jsConfig.mweb_url + '&redirect_url=' + encodeURIComponent(callbackUrl);
  334. window.location.href = mwebUrl;
  335. break;
  336. case 'SUCCESS':
  337. this.successOrder(data.msg);
  338. break;
  339. case 'ZHIFUBAO_PAY':
  340. window.location.href=$h.U({m:'wap',c:'alipay',a:'index',q:{info:data.data.result,params:'goods'}});
  341. break;
  342. }
  343. },
  344. wechatPay:function(config){
  345. var that = this;
  346. mapleWx($jssdk(),function(){
  347. this.chooseWXPay(config,function(){
  348. that.successOrder();
  349. },{
  350. fail:that.extendOrder,
  351. cancel:that.extendOrder
  352. });
  353. });
  354. },
  355. successOrder:function(msg){
  356. $h.showMsg({
  357. title:msg ? msg :'支付成功',
  358. icon:'success',
  359. success:function (){
  360. location.reload();
  361. }
  362. });
  363. },
  364. extendOrder:function(msg){
  365. if (typeof msg === 'object') {
  366. if (msg.errMsg === 'chooseWXPay:cancel') {
  367. msg = '微信支付取消';
  368. } else {
  369. msg = '支付失败';
  370. }
  371. } else {
  372. msg = '支付失败';
  373. }
  374. $h.pushMsg(msg, function () {
  375. location.reload();
  376. });
  377. },
  378. enter: function () {
  379. this.loginShow = true;
  380. },
  381. //所有插件回调处理事件
  382. changeVal: function (opt) {
  383. if (typeof opt != 'object') opt = {};
  384. var action = opt.action || '';
  385. var value = opt.value || '';
  386. this[action] && this[action](value);
  387. },
  388. express: function () {
  389. window.location.assign("{:url('my/express')}?uni=" + orderId);
  390. }
  391. }
  392. });
  393. });
  394. </script>
  395. {/block}