paycenter.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  1. {php define('MUI', true);}
  2. {template 'common/header'}
  3. <div class="mui-content pay-method">
  4. <h5 class="mui-desc-title mui-pl10">订单详情</h5>
  5. <ul class="mui-table-view">
  6. <li class="mui-table-view-cell">
  7. 商品名称<span class="mui-pull-right mui-text-muted">{$params['title']}</span>
  8. </li>
  9. <li class="mui-table-view-cell">
  10. 订单编号<span class="mui-pull-right mui-text-muted">{$params['ordersn']}</span>
  11. </li>
  12. <li class="mui-table-view-cell">
  13. 商家名称<span class="mui-pull-right mui-text-muted">{$_W['account']['name']}</span>
  14. </li>
  15. {if !empty($mine)}
  16. <li class="mui-table-view-cell">
  17. 优惠信息<span class="mui-pull-right mui-text-muted">{$mine['name']}</span>
  18. </li>
  19. {/if}
  20. <li class="mui-table-view-cell">
  21. 商品价格<span class="mui-pull-right mui-text-success mui-big mui-rmb">{$params['fee']} 元</span>
  22. </li>
  23. </ul>
  24. {if !empty($token) || !empty($coupon)}
  25. <h5 class="mui-desc-title mui-pl10">可用卡券</h5>
  26. <ul class="mui-table-view ">
  27. {if !empty($token)}
  28. <li class="mui-table-view-cell mui-table-view-chevron">
  29. <a href="javascript:;" class="mui-navigate-right js-token">
  30. 代金券
  31. {if !empty($token)}
  32. <span class="used-num">{php echo count($token);}张可用</span>
  33. {/if}
  34. <span class="mui-pull-right mui-mr10">
  35. <span class="mui-mr10 js-card-info">{if !empty($token)}未使用{else}无可用{/if}</span>
  36. </span>
  37. </a>
  38. </li>
  39. {/if}
  40. {if !empty($coupon)}
  41. <li class="mui-table-view-cell mui-table-view-chevron">
  42. <a href="javascript:;" class="mui-navigate-right js-coupon">
  43. 折扣券
  44. {if !empty($coupon)}
  45. <span class="used-num">{php echo count($coupon);}张可用</span>
  46. {/if}
  47. <span class="mui-pull-right mui-mr10">
  48. <span class="mui-mr10 js-card-info">{if !empty($coupon)}未使用{else}无可用{/if}</span>
  49. </span>
  50. </a>
  51. </li>
  52. {/if}
  53. </ul>
  54. {/if}
  55. {if $pay['mix']['switch'] && $credtis[$setting['creditbehaviors']['currency']] > 0 && $credtis[$setting['creditbehaviors']['currency']] < $params['fee']}
  56. <ul class="mui-table-view">
  57. <li class="mui-table-view-cell mui-table-view-chevron">
  58. <input type="checkbox" name="mix" checked>
  59. 混合支付<span class="mui-pull-right mui-text-success mui-big" data-price="{php echo sprintf('%.2f', $credtis[$setting['creditbehaviors']['currency']]);}">余额支付{php echo sprintf('%.2f', $credtis[$setting['creditbehaviors']['currency']]);} 元</span>
  60. </li>
  61. </ul>
  62. {/if}
  63. <ul class="mui-table-view">
  64. <li class="mui-table-view-cell mui-table-view-chevron">
  65. 还需支付<span class="mui-pull-right mui-text-success mui-big mui-rmb js-need-pay" data-price="{php echo sprintf('%.2f', $params['fee']);}">{php echo sprintf('%.2f', $params['fee']);} 元</span>
  66. </li>
  67. </ul>
  68. <h5 class="mui-desc-title mui-pl10">选择支付方式</h5>
  69. <ul class="mui-table-view mui-table-view-chevron pay-style">
  70. {if !empty($pay['credit']['switch'])}
  71. <li class="mui-table-view-cell credit">
  72. <a class="mui-navigate-right mui-media js-pay credit-js-pay" href="javascript:;">
  73. <form action="{php echo url('mc/cash/credit');}" method="post" id="credit_pay">
  74. <input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
  75. <input type="hidden" name="code" value="" />
  76. <input type="hidden" name="coupon_id" value="" />
  77. </form>
  78. <img src="resource/images/money.png" alt="" class="mui-media-object mui-pull-left"/>
  79. <span class="mui-media-body mui-block">
  80. 余额
  81. <span class="mui-block mui-text-muted mui-rmb mui-mt5"> {php echo sprintf('%.2f', $credtis[$setting['creditbehaviors']['currency']]);}</span>
  82. </span>
  83. </a>
  84. </li>
  85. {/if}
  86. {if !empty($pay['baifubao']['switch'])}
  87. <li class="mui-table-view-cell">
  88. <a class="mui-navigate-right mui-media js-pay" href="javascript:;">
  89. <form action="{php echo url('mc/cash/baifubao');}" method="post">
  90. <input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
  91. <input type="hidden" name="code" value="" />
  92. <input type="hidden" name="coupon_id" value="" />
  93. </form>
  94. <img src="resource/images/baidu-pay.png" alt="" class="mui-media-object mui-pull-left"/>
  95. <span class="mui-media-body mui-block">
  96. 百度钱包
  97. <span class="mui-block mui-text-muted mui-mt5">百度安全支付服务</span>
  98. </span>
  99. </a>
  100. </li>
  101. {/if}
  102. {if !empty($pay['unionpay']['switch'])}
  103. <li class="mui-table-view-cell">
  104. <a class="mui-navigate-right mui-media js-pay" href="javascript:;">
  105. <form action="{php echo url('mc/cash/unionpay');}" method="post">
  106. <input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
  107. <input type="hidden" name="code" value="" />
  108. <input type="hidden" name="coupon_id" value="" />
  109. </form>
  110. <img src="resource/images/yl-icon.png" alt="" class="mui-media-object mui-pull-left"/>
  111. <span class="mui-media-body mui-block">
  112. 银联支付
  113. <span class="mui-block mui-text-muted mui-mt5">银联安全支付服务</span>
  114. </span>
  115. </a>
  116. </li>
  117. {/if}
  118. {if !empty($pay['wechat']['switch']) && intval($pay['wechat']['switch']) != 4}
  119. <li class="mui-table-view-cell mui-disabled js-wechat-pay">
  120. <a class="mui-navigate-right mui-media" href="javascript:;">
  121. <form action="{php echo url('mc/cash/wechat');}" method="post">
  122. <input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
  123. <input type="hidden" name="code" value="" />
  124. <input type="hidden" name="coupon_id" value="" />
  125. <input type="hidden" name="mix_pay" value="" />
  126. </form>
  127. <img src="resource/images/wx-icon.png" alt="" class="mui-media-object mui-pull-left"/>
  128. <span class="mui-media-body mui-block">
  129. <span id="wetitle">微信支付</span>
  130. <span class="mui-block mui-text-muted mui-mt5">微信支付,安全快捷(只能在微信内使用)</span>
  131. </span>
  132. </a>
  133. </li>
  134. {/if}
  135. <li class="mui-table-view-cell mui-disabled js-webwxapp-pay hide">
  136. <a class="mui-navigate-right mui-media" href="javascript:;">
  137. <img src="resource/images/wx-icon.png" alt="" class="mui-media-object mui-pull-left"/>
  138. <span class="mui-media-body mui-block">
  139. <span id="wetitle">微信支付</span>
  140. <span class="mui-block mui-text-muted mui-mt5">微信支付,安全快捷</span>
  141. </span>
  142. </a>
  143. </li>
  144. {if !empty($pay['jueqiymf']['switch'])}
  145. <li class="mui-table-view-cell mui-disabled js-pay">
  146. <a class="mui-navigate-right mui-media" href="javascript:;">
  147. <form action="{php echo url('mc/cash/jueqiymf');}" method="post">
  148. <input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
  149. <input type="hidden" name="code" value="" />
  150. <input type="hidden" name="coupon_id" value="" />
  151. </form>
  152. <img src="resource/images/wx-icon.png" alt="" class="mui-media-object mui-pull-left"/>
  153. <span class="mui-media-body mui-block">
  154. <span id="wetitle">一码付</span>
  155. <span class="mui-block mui-text-muted mui-mt5">一码多用</span>
  156. </span>
  157. </a>
  158. </li>
  159. {/if}
  160. {if !empty($pay['alipay']['switch'])}
  161. <li class="mui-table-view-cell">
  162. <a class="mui-navigate-right mui-media js-pay" href="javascript:;">
  163. <form action="{php echo url('mc/cash/alipay');}" method="post">
  164. <input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
  165. <input type="hidden" name="code" value="" />
  166. <input type="hidden" name="coupon_id" value="" />
  167. <input type="hidden" name="mix_pay" value="" />
  168. </form>
  169. <img src="resource/images/zfb-icon.png" alt="" class="mui-media-object mui-pull-left"/>
  170. <span class="mui-media-body mui-block">
  171. 支付宝
  172. <span class="mui-block mui-text-muted mui-mt5">简单、安全、快速</span>
  173. </span>
  174. </a>
  175. </li>
  176. {/if}
  177. {if !empty($pay['delivery']['switch'])}
  178. <li class="mui-table-view-cell">
  179. <a class="mui-navigate-right mui-media js-pay" href="javascript:;">
  180. <form action="{php echo url('mc/cash/delivery');}" method="post">
  181. <input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
  182. <input type="hidden" name="code" value="" />
  183. <input type="hidden" name="coupon_id" value="" />
  184. </form>
  185. <img src="resource/images/sum-recharge.png" alt="" class="mui-media-object mui-pull-left"/>
  186. <span class="mui-media-body mui-block">
  187. 货到付款
  188. <span class="mui-block mui-text-muted mui-mt5">线下当面交易,到店付款,货到付款</span>
  189. </span>
  190. </a>
  191. {/if}
  192. {if !empty($pay['line']['switch'])}
  193. <li class="mui-table-view-cell mui-disabled">
  194. <div class="mui-navigate-right mui-media" style="white-space: normal;">
  195. <img src="resource/images/icon-vip.png" alt="" class="mui-media-object mui-pull-left"/>
  196. <span class="mui-media-body mui-block">
  197. 线下汇款
  198. <span class="mui-block mui-text-muted mui-mt5">{php echo htmlspecialchars_decode($pay['line']['message'])}</span>
  199. </span>
  200. </div>
  201. </li>
  202. {/if}
  203. </ul>
  204. </div>
  205. {if !empty($cards)}
  206. <div id="pay-select-coupon-modal" class="mui-modal">
  207. <header class="mui-bar mui-bar-nav">
  208. <a class="mui-icon mui-icon-close mui-pull-right" href="javascript:;"></a>
  209. <h1 class="mui-title">请选择卡券</h1>
  210. </header>
  211. <nav class="mui-bar mui-bar-footer">
  212. <div class="js-coupon-submit">
  213. <input type="hidden" name="couponid" value="">
  214. <button class="mui-btn mui-btn-success mui-btn-block js-submit">确定</button>
  215. </div>
  216. </nav>
  217. <div class="mui-content">
  218. <div class="pay-select-coupon">
  219. <div class="js-coupon-show">
  220. {loop $coupon $li}
  221. <div class="mui-input-row mui-radio">
  222. <label>
  223. <div class="coupon-panel">
  224. <div class="mui-row">
  225. <div class="mui-col-xs-4 mui-text-center">
  226. <div class="coupon-panel-left">
  227. {$li['icon']}
  228. </div>
  229. </div>
  230. <div class="mui-col-xs-8">
  231. <div class="store-title mui-ellipsis">{$li['title']}</div>
  232. <div class="date">{$li['extra_date_info']}</div>
  233. </div>
  234. </div>
  235. </div>
  236. <input type="radio" name="coupon" value="{$li['id']}" />
  237. </label>
  238. <ol class="coupon-rules" style="display:none;">
  239. {if empty($li[description])}
  240. 暂无说明
  241. {else}
  242. {php echo htmlspecialchars_decode($li['description'])}
  243. {/if}
  244. </ol>
  245. <div class="scan-rules js-scan-rules">折扣券使用规则<span class="fa fa-angle-up"></span></div>
  246. </div>
  247. {/loop}
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. <div id="pay-select-token-modal" class="mui-modal">
  253. <header class="mui-bar mui-bar-nav">
  254. <a class="mui-icon mui-icon-close mui-pull-right" href="javascript:;"></a>
  255. <h1 class="mui-title">请选择卡券</h1>
  256. </header>
  257. <nav class="mui-bar mui-bar-footer">
  258. <div class="js-coupon-submit">
  259. <input type="hidden" name="couponid" value="">
  260. <button class="mui-btn mui-btn-success mui-btn-block js-submit">确定</button>
  261. </div>
  262. </nav>
  263. <div class="mui-content">
  264. <div class="pay-select-coupon">
  265. <div class="js-token-show">
  266. {loop $token $li}
  267. <div class="mui-input-row mui-radio">
  268. <label>
  269. <div class="coupon-panel">
  270. <div class="mui-row">
  271. <div class="mui-col-xs-4 mui-text-center">
  272. <div class="coupon-panel-left">
  273. {$li['icon']}
  274. </div>
  275. </div>
  276. <div class="mui-col-xs-8">
  277. <div class="store-title mui-ellipsis">{$li['title']}</div>
  278. <div class="date">{$li['extra_date_info']}</div>
  279. </div>
  280. </div>
  281. </div>
  282. <input type="radio" name="coupon" value="{$li['id']}" />
  283. </label>
  284. <ol class="coupon-rules" style="display:none;">
  285. {if empty($li[description])}
  286. 暂无说明
  287. {else}
  288. {php echo htmlspecialchars_decode($li['description'])}
  289. {/if}
  290. </ol>
  291. <div class="scan-rules js-scan-rules">代金券使用规则<span class="fa fa-angle-up"></span></div>
  292. </div>
  293. {/loop}
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. <script type="text/javascript">
  299. $(document).on('click', '.js-scan-rules', function() {
  300. $(this).prev().toggle();
  301. $(this).find('span').toggleClass('fa-angle-up');
  302. $(this).find('span').toggleClass('fa-angle-down');
  303. });
  304. $(document).on('click', 'input[type="radio"]', function() {
  305. hidden_couponid = $('input[name="couponid"]').val();
  306. var couponid = $(this).val();
  307. if (!hidden_couponid) {
  308. $('input[type="radio"]').prop('checked', false);
  309. $(this).prop('checked', true);
  310. $('input[name="couponid"]').val(couponid);
  311. } else {
  312. if (hidden_couponid == couponid) {
  313. $(this).prop('checked', false);
  314. $('input[name="couponid"]').val('');
  315. } else {
  316. $('input[type="radio"]').prop('checked', false);
  317. $(this).prop('checked', true);
  318. $('input[name="couponid"]').val(couponid);
  319. }
  320. }
  321. });
  322. var cards_str = '{$cards_str}';
  323. if (cards_str) {
  324. cards_str = $.parseJSON(cards_str);
  325. } else {
  326. cards_str = {};
  327. }
  328. $(document).on('click', '.js-coupon', function() {
  329. $('#pay-select-coupon-modal').addClass('mui-active');
  330. });
  331. $(document).on('click', '.js-token', function() {
  332. $('#pay-select-token-modal').addClass('mui-active');
  333. });
  334. $(document).on('click', '.mui-icon-close', function() {
  335. $('#pay-select-coupon-modal').removeClass('mui-active');
  336. $('#pay-select-token-modal').removeClass('mui-active');
  337. });
  338. $(document).on('click', '.js-submit', function() {
  339. var checked_card = $('input[name="couponid"]').val();
  340. var price = $('.js-need-pay').data('price');
  341. if(checked_card && cards_str[checked_card]) {
  342. need_pay = (price - cards_str[checked_card].discount_cn).toFixed(2);
  343. if (cards_str[checked_card].type == '1') {
  344. $('.js-coupon .js-card-info').html('已抵用'+cards_str[checked_card].discount_cn+'元');
  345. $('.js-token .js-card-info').html('未使用');
  346. };
  347. if (cards_str[checked_card].type == '2') {
  348. $('.js-token .js-card-info').html('已抵用'+cards_str[checked_card].discount_cn+'元');
  349. $('.js-coupon .js-card-info').html('未使用');
  350. };
  351. $('.js-need-pay').html(need_pay + ' 元');
  352. $('.js-pay input[name="coupon_id"]').val(checked_card);
  353. $('.js-pay input[name="code"]').val(cards_str[checked_card]['code']);
  354. } else {
  355. $('.js-need-pay').html(price + ' 元');
  356. $('.js-token .js-card-info').html('未使用');
  357. $('.js-coupon .js-card-info').html('未使用');
  358. $('.js-pay input[name="coupon_id"]').val(0);
  359. }
  360. $('#pay-select-coupon-modal').removeClass('mui-active');
  361. $('#pay-select-token-modal').removeClass('mui-active');
  362. $('.mui-backdrop').remove('.mui-backdrop');
  363. $('.pay-method').removeAttr('style');
  364. })
  365. </script>
  366. {/if}
  367. <script type="text/javascript">
  368. check_password = '';
  369. $('.credit-js-pay').click(function() {
  370. {if empty($credit_pay_setting)}
  371. $(this).find('form').submit();
  372. return true;
  373. {/if}
  374. mui.prompt('','','请输入6位数的密码',['<div id="submit_password">确定</div>'],function(){
  375. $.post("{php echo url('mc/cash/check_password');}", {'password' : $(".mui-popup-input input").val()}, function(data) {
  376. data = $.parseJSON(data);
  377. if (data.message == 0) {
  378. check_password = 'pass';
  379. $('#credit_pay').submit();
  380. return false;
  381. } else {
  382. alert('密码输入错误');
  383. return false;
  384. }
  385. });
  386. },'div')
  387. document.querySelector('.mui-popup-input input').type='password';
  388. return false;
  389. });
  390. {if $pay['mix']['switch'] && $credtis[$setting['creditbehaviors']['currency']] > 0 && $credtis[$setting['creditbehaviors']['currency']] < $params['fee']}
  391. var price = parseFloat($('.js-need-pay').data('price'));
  392. var currency = parseFloat("{$credtis[$setting['creditbehaviors']['currency']]}");
  393. $(function() {
  394. $('[name="mix_pay"]').val(true);
  395. $('.credit').hide();
  396. fee = (price * 100 - currency * 100)/100;
  397. $('.js-need-pay').data('price', fee);
  398. $('.js-need-pay').html(fee + '元');
  399. })
  400. {/if}
  401. $('[name="mix"]').click(function() {
  402. if ($(this).prop('checked') === true) {
  403. $('[name="mix_pay"]').val(true);
  404. fee = (price * 100 - currency * 100)/100;
  405. $('.credit').hide();
  406. } else {
  407. $('[name="mix_pay"]').val(false);
  408. fee = (price * 100 - currency * 100)/100;
  409. $('.credit').show();
  410. }
  411. $('.js-need-pay').data('price', fee);
  412. $('.js-need-pay').html(fee + '元');
  413. });
  414. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  415. var miniprogram_environment = false;
  416. if(wx && wx.miniProgram && wx.miniProgram.getEnv) {
  417. wx.miniProgram.getEnv(function(res) {
  418. if (res.miniprogram) {
  419. miniprogram_environment = true;
  420. }
  421. })
  422. }
  423. if(window.__wxjs_environment === 'miniprogram' || miniprogram_environment) {
  424. $('.pay-style li').hide();
  425. $('.js-webwxapp-pay').removeClass('hide');
  426. $('.pay-style .js-webwxapp-pay').show();
  427. $('.js-webwxapp-pay').click(function(){
  428. wx.miniProgram.navigateTo({
  429. url: "/wxapp_web/pages/view/pay?orderid={$params['tid']}&module_name={$params['module']}&title={$params['title']}"
  430. })
  431. });
  432. }
  433. $('.js-wechat-pay').removeClass('mui-disabled');
  434. $('.js-wechat-pay a').addClass('js-pay');
  435. $('#wetitle').html('微信支付');
  436. });
  437. $(document).on('click', '.js-pay', function() {
  438. $(this).prop('disabled', true);
  439. $(this).find('form').submit();
  440. })
  441. </script>