checkout.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571
  1. <extend name="Public:base" />
  2. <block name="content">
  3. <link rel="stylesheet" href="__PUBLIC__/css/trade-426c0af3.css">
  4. <link rel="stylesheet" href="__PUBLIC__/css/address_2.css?v=11">
  5. <script>
  6. var pick_id = 0;
  7. var express_method = 1;
  8. </script>
  9. <section class="wrapper J_wrapper" id="wrapper">
  10. <?php
  11. if($is_ziti>0)
  12. {
  13. ?>
  14. <?php if($is_ziti == 1){ ?>
  15. <div class="meili-all-vue-base-tab tabs tabs-top tabs-line">
  16. <div class="tabs-bar">
  17. <div class="tabs-nav--container">
  18. <div class="tabs-nav--wrap">
  19. <div class="tabs-nav tabs-nav--animated">
  20. <div class="tabs-link-bar tabs-link-bar-animated">
  21. <div class="tabs-tab J-tabs-tab-key tabs-tab-active" data-index="1">
  22. 快递
  23. </div>
  24. <div class="tabs-tab J-tabs-tab-key" data-index="2">
  25. 门店自提
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <script>
  34. $(function(){
  35. $('.J-tabs-tab-key').click(function(){
  36. var s_index = $(this).attr('data-index');
  37. $(this).addClass('tabs-tab-active').siblings().removeClass('tabs-tab-active');
  38. //J_shippingFee
  39. if(s_index == 1)
  40. {
  41. if(express_method != s_index)
  42. {
  43. var total_free = parseFloat($('.order-zj-val').attr('data-total'));
  44. var yun_free = parseFloat($('.J_shippingFee').attr('data-free'));
  45. total_free = (total_free+yun_free).toFixed(2)
  46. yun_free = yun_free.toFixed(2);
  47. $('.J_shippingFee font').html(yun_free);
  48. $('.order-zj-val span').html(total_free);
  49. }
  50. $('.pd_btop').hide();
  51. $('.address_tab').show();
  52. }else{
  53. if(express_method != s_index)
  54. {
  55. var total_free = parseFloat($('.order-zj-val').attr('data-total'));
  56. total_free = (total_free).toFixed(2)
  57. $('.J_shippingFee font').html(0);
  58. $('.order-zj-val span').html(total_free);
  59. }
  60. $('.address_tab').hide();
  61. $('.pd_btop').show();
  62. }
  63. express_method = s_index;
  64. })
  65. $('#address_ziti').click(function(){
  66. $('#ziti_dialog').show();
  67. })
  68. $('.prop-rows').click(function(){
  69. var s_title = $(this).children('.prop-rows--title').html();
  70. $('.address-no').html('自提点:'+s_title);
  71. pick_id = $(this).attr('data-pick-id');
  72. $('#ziti_dialog').hide();
  73. })
  74. })
  75. </script>
  76. <?php } ?>
  77. <div style="">
  78. <?php if($is_ziti == 1){ ?>
  79. <div class="address2 address_tab" onclick="location.href='{:U('User/address', array('backcart' =>1,'buy_type' => $buy_type))}';">
  80. <div class="m-icon m-icon-location address-location">
  81. </div>
  82. <div class="address-yes">
  83. <?php if(!empty($address)){ ?>
  84. <div class="address-contacter">
  85. <span>收货人:{$address.name} {$address.telephone}</span>
  86. </div>
  87. <div class="address-addr">
  88. <span>收货地址:{$address.province_name}{$address.city_name}{$address.country_name}{$address.address} </span>
  89. </div>
  90. <?php }else{ ?>
  91. <div class="address-contacter">
  92. <span>暂无收货地址</span>
  93. </div>
  94. <?php } ?>
  95. </div>
  96. <div class="m-icon m-icon-arrow-right address-arrow"></div>
  97. </div>
  98. <?php } ?>
  99. <div class="pd_btop" <?php if($is_ziti !=2){ ?>style="display:none;" <?php } ?>>
  100. <div class="pd10">
  101. <span>联系人:</span>
  102. <input type="text" placeholder="请填写联系人" id="pick_name" value="{$pick_up_name}" />
  103. </div>
  104. <div class="pd10">
  105. <span>手机号:</span>
  106. <input type="text" placeholder="请填写手机号" id="pick_mobile" value="{$pick_up_mobile}" />
  107. </div>
  108. <div class="address2" id="address_ziti">
  109. <div class="m-icon m-icon-location address-location"></div>
  110. <div class="address-no">
  111. 自提点:请选择自提点
  112. </div>
  113. <div class="m-icon m-icon-arrow-right address-arrow">
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <div class="dialog is-bottom" id="ziti_dialog" style="display:none;">
  119. <div class="dialog-mask"></div>
  120. <div class="dialog-core">
  121. <div class="sku sku m-fixed">
  122. <div class="sku-content">
  123. <div class="sku-content--scroll">
  124. <div class="scroll">
  125. <div class="fuj_mend">
  126. <div class="m-icon m-icon-location address-location"></div>
  127. 附近自提门店
  128. </div>
  129. <div class="prop">
  130. <?php foreach($pick_up_arr as $vv){ ?>
  131. <div class="prop-rows" data-pick-id="<?php echo $vv['id']; ?>">
  132. <div class="prop-rows--title">
  133. <?php echo $vv['pick_name']; ?>
  134. </div>
  135. <div class="prop-rows--title-sumary">
  136. <?php echo $vv['pick_pos']; ?>
  137. </div>
  138. </div>
  139. <?php } ?>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. <?php }else{ ?>
  148. <div class="section-wrap address-box" onclick="location.href='{:U('User/address', array('backcart' =>1,'buy_type' => $buy_type))}';">
  149. <span class="location-icon"></span>
  150. <?php if(!empty($address)){ ?>
  151. <p class="address-main">
  152. <span>收货人:</span>
  153. <span class="name">{$address.name}</span>
  154. <span class="tel">{$address.telephone}</span>
  155. </p>
  156. <p class="address">{$address.province_name}{$address.city_name}{$address.country_name}{$address.address} </p>
  157. <?php }else{ ?>
  158. <p class="address-main">
  159. <span>暂无收货地址</span>
  160. </p>
  161. <?php } ?>
  162. <span class="arrow-icon iconfont"></span>
  163. </div>
  164. <?php } ?>
  165. <a href="javascript:;" class="hidden section-wrap card-box J_cardBox">
  166. <div class="tip-main">
  167. 海关叔叔提醒:
  168. </div>
  169. <div class="tip-summary">
  170. 请提供收货人的身份信息用于清关
  171. </div>
  172. <div class="tip-entry">
  173. 马上提交
  174. <span class="arrow-icon iconfont"></span>
  175. </div>
  176. </a>
  177. <div class="section-wrap pay-box" <?php if($is_integer == 1){ ?> style="display:none;" <?php } ?>>
  178. <h3 class="pay-box-hd">支付方式</h3>
  179. <div class="pay-box-bd">
  180. <div id="payment_alipay" class="row hidden">
  181. <div class="payment-icon alipay-icon"></div>
  182. <div class="payment-text">
  183. <h4>支付宝</h4>
  184. <p>安全快捷,可支持银行卡支付</p>
  185. </div>
  186. <div class="payment-method" data-method="alipay">
  187. <i class="selected iconfont"></i>
  188. </div>
  189. </div>
  190. <div id="payment_weixin" class="row J_payment_method_select">
  191. <div class="payment-icon weixin-icon"></div>
  192. <div class="payment-text">
  193. <h4>微信支付</h4>
  194. <p>推荐已在微信中绑定银行卡的用户使用</p>
  195. </div>
  196. <div class="payment-method" data-method="weixin">
  197. <i class="iconfont"></i>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. <div class="section-wrap cash-box" >
  203. <div class="row coupon-item">
  204. <div class="cash-icon coupon-icon"></div>
  205. <div class="cash-text">
  206. 优惠券
  207. </div>
  208. <div class="cash-op coupon-op">
  209. <i class="cancel-coupon iconfont"></i>
  210. <?php if($show_voucher){ ?>
  211. <p class="J_couponSelect">选择优惠券</p>
  212. <?php }else{ ?>
  213. <p class="J_couponSelect">暂无可用</p>
  214. <?php } ?>
  215. </div>
  216. </div>
  217. <div class="row point-item J_pointItem" style="display:none;">
  218. <div class="cash-icon point-icon"></div>
  219. <div class="cash-text">
  220. 可用
  221. <span class="J_pointFee">0</span>个贝壳抵扣 &yen;
  222. <span class="J_pointFeeCost">0</span>
  223. </div>
  224. <div class="cash-op switch-op point-op disabled J_switchOp" data-use="point">
  225. <i class="dot"></i>
  226. </div>
  227. </div>
  228. </div>
  229. <div class="order-box">
  230. <h3 class="order-box-hd">订单信息</h3>
  231. <div class="order-box-bd">
  232. <div class="row order-itemlist">
  233. <?php $total_money = 0; $quantity = 0; ?>
  234. <?php foreach($seller_goodss as $store_id => $store_val) { ?>
  235. <div class="order-from">
  236. <i class="circle-icon"></i>
  237. <span><?php echo $store_val['store_info']['s_true_name']; ?></span>
  238. </div>
  239. <?php
  240. foreach($store_val['goods'] as $val){
  241. ?>
  242. <div class="order-item">
  243. <div class="order-img">
  244. <img src="{$val.image}" alt="" />
  245. </div>
  246. <div class="order-info">
  247. <h4>
  248. <?php if($val['header_disc'] < 100){ ?>
  249. <?php if($val['header_disc'] ==0){ ?>
  250. <font color="#ff4965">[团长免单]</font>
  251. <?php }else{ ?>
  252. <font color="#ff4965">[<?php echo round($val['header_disc'] / 10,1); ?>折]</font>
  253. <?php } ?>
  254. <?php } ?>
  255. {$val.name}</h4>
  256. <p><?php foreach($val['option'] as $option){ ?>
  257. <?php echo $option['value']; ?> &nbsp;
  258. <?php } ?></p>
  259. </div>
  260. <div class="order-item-price">
  261. <span <?php if($is_integer == 1){ ?> style="display:none;" <?php } ?>>&yen;</span>
  262. <span <?php if($is_integer == 0){ ?> style="display:none;" <?php } ?>>积分</span>
  263. <em>{$val.price}</em>
  264. <span></span>
  265. </div>
  266. <div class="order-num">
  267. <p>&times;{$val.quantity}</p>
  268. </div>
  269. </div>
  270. <div class="order-sum">
  271. <div>
  272. <span class="u-sum-left">小计:</span>
  273. <span class="u-sum-right xj"><?php if($is_integer == 1){ ?> 积分 <?php }else{ ?> &yen;<?php } ?>{$val.total}</span>
  274. </div>
  275. </div>
  276. <div class="order-remark">
  277. <input name="order_msg[]" data-eventid="{$val.key}" type="text" value="" placeholder="买家留言(选填)" />
  278. </div>
  279. <?php $total_money += $val['total']; $quantity += $val['quantity']; } } ?>
  280. </div>
  281. </div>
  282. <div class="order-box-ft">
  283. <div class="order-ze">
  284. <p class="order-text order-ze-text">商品总额:</p>
  285. <p class="order-val order-ze-val">&yen;<span><?php echo $total_money; ?></span></p>
  286. </div>
  287. <div class="order-coupon J_couponValItemCont">
  288. <p class="order-text order-coupon-text">现金券优惠:</p>
  289. <p class="order-val order-coupon-val J_couponVal">&yen;-0.00</p>
  290. </div>
  291. <div class="order-point J_pointCont">
  292. <p class="order-text order-point-text">贝壳抵扣:</p>
  293. <p class="order-val order-point-val J_pointVal">&yen;-0.00</p>
  294. </div>
  295. <div class="order-shippingfee J_shippingFeeItemCont" style="">
  296. <p class="order-text order-shippingfee-text">运费:</p>
  297. <p class="order-val order-shippingfee-val J_shippingFee" data-free="{$trans_free_toal}">&yen;<font>{$trans_free_toal}</font></p>
  298. </div>
  299. <div class="order-zj">
  300. <p class="order-text order-zj-text">订单总计(共<span class="J_totalNum"><?php echo $quantity; ?></span>件商品):</p>
  301. <p class="order-val order-zj-val" data-total="{$total_money}"><?php if($is_integer == 1){ ?> 积分 <?php }else{ ?> &yen;<?php } ?> <span><?php echo $total_money + $trans_free_toal; ?></span></p>
  302. </div>
  303. </div>
  304. </div>
  305. <div class="gopay-bar">
  306. <div class="gopay">
  307. <div class="pay-info">
  308. <div class="pay-sum J_pay-sum">
  309. 总计:
  310. <span class="pay-num J_pay_num" data-money="<?php echo $total_money + $trans_free_toal; ?>"><?php if($is_integer == 1){ ?> 积分 <?php }else{ ?> &yen;<?php } ?><?php echo $total_money + $trans_free_toal; ?></span>
  311. </div>
  312. <div class="pay-tips J_pay-tips">
  313. <?php if($trans_free_toal == 0){ ?> (免运费)<?php } ?>
  314. </div>
  315. </div>
  316. <a class="gopay-new-btn J_gopay-btn" href="javascript:;"><?php if($is_integer == 1){ ?> 立即兑换 <?php }else{ ?> 支付订单<?php } ?></a>
  317. </div>
  318. </div>
  319. </section>
  320. <style>
  321. .coupon-item{position:relative;}
  322. .coupon-item .iconfont{display:none;}
  323. .cur .iconfont{display:block;}
  324. </style>
  325. <section id="coupon_list" class="coupon-list hidden">
  326. <div class="close">
  327. <a class="close-btn" ></a>
  328. <h1 class="title">使用优惠券</h1>
  329. </div>
  330. <div class="coupon-search" style="display:none;">
  331. <input id="" class="coupon-search-input" placeholder="输入现金券券号" />
  332. <button class="coupon-search-btn">使用</button>
  333. </div>
  334. <i class="coupon-img"></i>
  335. <p class="coupon-hint">您暂时还没有可用优惠券哦</p>
  336. <div class="coupon-list">
  337. <?php foreach($seller_goodss as $store_id => $seller_val){ ?>
  338. <p style="padding: .2rem .4rem .4rem;line-height: 1rem;"><?php echo $seller_val['store_info']['s_true_name']; ?></p>
  339. <div>
  340. <?php foreach($seller_val['voucher_list'] as $quan){ ?>
  341. <div class="coupon-item <?php if($quan['is_check'] == 1){ ?>cur <?php } ?>" data-money="<?php echo $quan['credit']; ?>" data-id="<?php echo $quan['store_id'].'_'.$quan['id']; ?>">
  342. <div class="coupon-detail ">
  343. <div class="coupon-condition">
  344. <?php if( $quan['limit_money'] >0.01 ){ ?>
  345. 满<?php echo $quan['limit_money']; ?>元减<?php echo $quan['credit']; ?>元
  346. <?php }else{ ?>
  347. 无限制
  348. <?php } ?>
  349. </div>
  350. <div class="coupon-category">
  351. <span><?php echo $seller_val['store_info']['s_true_name']; ?></span>
  352. </div>
  353. <div class="coupon-valid-period">
  354. </div>
  355. </div>
  356. <div class="coupon-stub">
  357. <div class="coupon-value">
  358. <span><?php echo $quan['credit']; ?>元</span>
  359. </div>
  360. </div>
  361. <i class="selected iconfont" style="font-size: 40px;color: #ff4965;position: absolute; top: .4rem;;width: .85333333rem;height: .85333333rem; left: 9rem;">&#xe668;</i>
  362. </div>
  363. <?php } ?>
  364. </div>
  365. <?php } ?>
  366. <div class="coupon-search" style="margin:.2rem .4rem .4rem;text-align:right;">
  367. <button class="coupon-search-btn">确认使用</button>
  368. </div>
  369. </div>
  370. </section>
  371. <section class="footer J_footer p-btm" style="">
  372. <p class="info"></p>
  373. <p class="tel"><span></span></p>
  374. <p class="icp"><span class="J_thisYear"></span></p>
  375. </section>
  376. <div class="popup-mask" style="display: none;position: fixed; width: 100%;height: auto;top: 50%;z-index: 999999999; background: rgba(0, 0, 0, 0);">
  377. <div class="popup-main" style=" max-width: 50%; height: auto;margin: auto;background-color: rgba(0,0,0,.8);color: #f0f0f0;font-size: 16px;padding: 10px;text-align: center;border-radius: 5px;box-shadow: 0 0 24px -1px #383838; background: rgba(41, 49, 61, 0.701961);">
  378. <div class="popup-content"><div style="color:#fff;font-size:0.6rem;margin:0"></div>
  379. </div>
  380. </div>
  381. </div>
  382. <div class="mui-loading-outer hidden" id="J_mui-loading"><div class="mui-loading-inner mui-loading-spin"></div></div>
  383. <div class="sk-fading-loading hidden" id="sk-fading-loading"><div class="sk-fading-circle"><div class="sk-circle1 sk-circle"></div><div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div><div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div></div></div>
  384. <script>
  385. var buy_type ="{$buy_type}";
  386. var can_sub =true;
  387. <?php if(!empty($address)){ ?>
  388. var has_address = true;
  389. <?php } else { ?>
  390. var has_address = false;
  391. <?php } ?>
  392. var quan_arr = [];
  393. var pop_load = '';
  394. function show_mask(title)
  395. {
  396. $('.popup-content div').html(title);
  397. $('.popup-mask').fadeIn(1500,function(){
  398. $('.popup-mask').fadeOut(1500);
  399. })
  400. }
  401. function load_conpon_flush()
  402. {
  403. var you_html = 0;
  404. quan_arr = [];
  405. $('.coupon-list .coupon-item.cur').each(function(){
  406. you_html += parseFloat( $(this).attr('data-money') );
  407. var tp_id = $(this).attr('data-id');
  408. quan_arr.push(tp_id)
  409. })
  410. var y_total_money = $('.J_pay_num').attr('data-money');
  411. var new_total_money = (parseFloat(y_total_money) - you_html).toFixed(2);
  412. if(new_total_money <0)
  413. {
  414. new_total_money = 0;
  415. }
  416. $('.J_pay_num').html('¥'+new_total_money );
  417. $('.J_couponSelect').html(you_html + '元');
  418. $('#coupon_list').addClass('hidden');
  419. }
  420. //order_msg[]
  421. $(function(){
  422. <?php if( !empty($check_voucher_info) ) ?>
  423. load_conpon_flush();
  424. <?php ?>
  425. $('.coupon-search-btn').click(function(){
  426. load_conpon_flush();
  427. })
  428. <?php if($show_voucher){ ?>
  429. $('.cash-box').click(function(){
  430. $('#coupon_list').removeClass('hidden');
  431. })
  432. <?php } ?>
  433. $('.coupon-item').click(function(){
  434. if( $(this).hasClass('cur'))
  435. {
  436. $(this).removeClass('cur');
  437. }else{
  438. $(this).addClass('cur').siblings().removeClass('cur');
  439. }
  440. })
  441. $('.J_gopay-btn').click(function(){
  442. var order_msg_arr = [];
  443. $("input[name='order_msg[]']").each(function(){
  444. var s_key = $(this).attr('data-eventid');
  445. var s_val = $(this).val();
  446. order_msg_arr.push( s_key + '@_@' +s_val);
  447. })
  448. var order_msg_str = order_msg_arr.join('@,@');
  449. var pay_method = $('.selected').parent().attr('data-method');
  450. var pick_name = '';
  451. var pick_mobile = '';
  452. var dispatching = 'express';
  453. //pick_name
  454. //pick_mobile
  455. if(express_method == 1)
  456. {
  457. if(!has_address){
  458. show_mask('请填写收货地址');
  459. return false;
  460. }
  461. }else{
  462. dispatching = 'pickup';
  463. if(pick_id == 0)
  464. {
  465. show_mask('请选择自提点');
  466. return false;
  467. }
  468. pick_name = $('#pick_name').val();
  469. pick_mobile = $('#pick_mobile').val();
  470. if(pick_name.length <=0)
  471. {
  472. show_mask('请填写提货人姓名');
  473. return false;
  474. }
  475. if(pick_mobile.length <=0)
  476. {
  477. show_mask('请填写提货人手机');
  478. return false;
  479. }
  480. }
  481. //pickup express dispatching
  482. if(!can_sub){
  483. return false;
  484. }
  485. can_sub = false;
  486. $('#sk-fading-loading').removeClass('hidden');
  487. $.ajax({
  488. url:"{:U('Payment/pay')}",
  489. type:'post',
  490. dataType:'json',
  491. data:{order_msg_str:order_msg_str,dispatching:dispatching,pick_mobile:pick_mobile,pick_id:pick_id,pick_name:pick_name,pay_method:pay_method,buy_type:buy_type,quan_arr:quan_arr},
  492. success:function(ret){
  493. $('#sk-fading-loading').addClass('hidden');
  494. if(ret.code ==1){
  495. location.href = ret.url;
  496. return false;
  497. }else {
  498. can_sub = true;
  499. show_mask(ret.msg);
  500. }
  501. }
  502. })
  503. console.log(order_msg_arr);
  504. })
  505. })
  506. </script>
  507. </block>