free-receive-charger.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>免费领取充电器</title>
  9. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="css/main.css" />
  12. <script type="text/javascript">
  13. // 屏蔽分享
  14. window.hiddenAllWechatMenu = true;
  15. </script>
  16. </head>
  17. <body>
  18. <div class="mui-content" style="padding-bottom: 56px;">
  19. <div class="address-cantainner">
  20. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed">
  21. <li class="mui-table-view-cell">
  22. <div class="mui-table">
  23. <!--没有选地址时显示的div-->
  24. <div class="mui-table-cell mui-col-xs-12 table-middle btn-add-address">
  25. <div class="add-address"><span class="iconfont icon-jia"></span>添加收货地址</div>
  26. </div>
  27. <!--选择微信地址后显示的div-->
  28. <div id="user-address-div" style="display: none;">
  29. <!--<div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle">
  30. <p><span class="iconfont icon-dingwei"></span></p>
  31. </div>
  32. <div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle">
  33. <div>收货人:林笑笑 <span class="mui-pull-right">16899996678</span></div>
  34. <p>收货地址:广东省深圳市福田区莲花街道深圳特区 报业大厦12b</p>
  35. </div>
  36. <div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle">
  37. <p><span class="mui-icon mui-icon-arrowright"></span></p>
  38. </div>-->
  39. </div>
  40. </div>
  41. </li>
  42. </ul>
  43. </div>
  44. <br />
  45. <div class="mui-content-padded">
  46. 选择充电器颜色
  47. </div>
  48. <div class="mui-content-padded">
  49. <div class="mui-table">
  50. <div class="mui-table-cell mui-col-xs-12" id="my-pull">
  51. <!--<span class="pro-select-color active" name="42" src="https://s.iamberry.com/soodo/wechat/images/pro-bai.png" colorpresent="上朵柔性声波牙刷,柔和清洁牙龈沟,用温柔的力量守护你的笑容" price="39900">极光白</span><span class="pro-select-color " name="43" src="https://s.iamberry.com/soodo/wechat/images/pro-hei.png" colorpresent="上朵柔性声波牙刷,柔和清洁牙龈沟,用温柔的力量守护你的笑容" price="39900">晶石黑</span><span class="pro-select-color " name="44" src="https://s.iamberry.com/soodo/wechat/images/pro-fen.png" colorpresent="上朵柔性声波牙刷,柔和清洁牙龈沟,用温柔的力量守护你的笑容" price="39900">樱花粉</span><span class="pro-select-color " name="45" src="https://s.iamberry.com/soodo/wechat/images/pro-lan.png" colorpresent="上朵柔性声波牙刷,柔和清洁牙龈沟,用温柔的力量守护你的笑容" price="39900">冰川蓝</span><span class="pro-select-color " name="46" src="https://s.iamberry.com/soodo/wechat/images/pro-huang.png" colorpresent="上朵柔性声波牙刷,柔和清洁牙龈沟,用温柔的力量守护你的笑容" price="39900">奶油黄</span>-->
  52. </div>
  53. </div>
  54. </div>
  55. <div class="mui-content-padded">
  56. <p>提示:</p>
  57. <p>1、每位会员每一支已注册产品,每年可免费领取一次充电器(每次只限领取一个充电器)</p>
  58. <p>2、同一年内,首次领取只需支付10元邮费,充电器无需支付任何费用</p>
  59. <p>3、同一年内,第二次领用充电器需支付充电器费用10元,以及10元的邮费</p>
  60. <p>4、领取过程如有疑问,请联系客服咨询</p>
  61. </div>
  62. <div class="buy-footer1">
  63. <table class="tb-clearing">
  64. <tr>
  65. <td class="quanxuan">
  66. 共<span id="pro-count" class="cl-red">0</span>件
  67. </td>
  68. <td class="mui-text-center">合计:<span class="count_price_box">¥<span class="pay_price">10.0</span></span>
  69. </td>
  70. <td>
  71. <a id="go-pay" class="mui-btn mui-pull-right add_gwc go-clearing">立即领取</a>
  72. </td>
  73. </tr>
  74. </table>
  75. </div>
  76. </div>
  77. <!-- 加载ing begin-->
  78. <div class="loading covers">
  79. <div class="loading-bj"></div>
  80. <p>正在加载...</p>
  81. </div>
  82. <!-- 加载ing end -->
  83. <script src="js/mui.min.js"></script>
  84. <script src="js/jquery-2.1.1.min.js"></script>
  85. <script src="js/main.js"></script>
  86. <script src="js/wechat-utils-1.0.js"></script>
  87. <script>
  88. window.addEventListener('pageshow', function(e) {
  89. // 通过persisted属性判断是否存在 BF Cache
  90. if(e.persisted) {
  91. location.reload();
  92. }
  93. });
  94. mui.ready(function() {
  95. /* 查询价格,一年内的购买次数 */
  96. $.ajax(base_path + '/wechat/receive/select_charg_price?dates=' + new Date().getTime(), {
  97. data: {},
  98. dataType: 'json',
  99. xhrFields: {
  100. withCredentials: true
  101. },
  102. crossDomain: true,
  103. type: 'post',
  104. timeout: 15000,
  105. success: function(dt) {
  106. if(dt.isRedirect) {
  107. location.href = dt.redirectURL;
  108. } else {
  109. console.log(dt)
  110. if(dt.status) {
  111. $(".pay_price").text(accDiv(dt.data.price,100));
  112. }else{
  113. mui.alert(dt.message, function() {
  114. location.href = "index.html?dates=" + new Date().getTime(); // 前往首页
  115. });
  116. }
  117. }
  118. },
  119. error: function(xhr, type, errorThrown) {
  120. console.log(xhr);
  121. }
  122. });
  123. $.ajax(base_path + '/wechat/receive/select_color?dates=' + new Date().getTime(), {
  124. data: {},
  125. dataType: 'json',
  126. xhrFields: {
  127. withCredentials: true
  128. },
  129. crossDomain: true,
  130. type: 'post',
  131. timeout: 15000,
  132. success: function(dt) {
  133. if(dt.isRedirect) {
  134. location.href = dt.redirectURL;
  135. } else {
  136. console.log(dt)
  137. if(dt.status) {
  138. var colorList = '';
  139. mui.each(dt.data, function(index) { //遍历产品颜色集合
  140. var active = '';
  141. if(index == 0) {
  142. active = 'active'; //弹窗选中当前颜色
  143. }
  144. colorList += '<span class="pro-select-color ' + active + '" name="' + this.colorId + '" price="' + this.colorDiscount + '">' + this.colorName + '</span>';
  145. });
  146. if(colorList!=''){
  147. $('#pro-count').text("1");
  148. }
  149. $("#my-pull").html(colorList);
  150. }
  151. }
  152. },
  153. error: function(xhr, type, errorThrown) {
  154. console.log(xhr);
  155. }
  156. });
  157. //默认自己拉出地址
  158. // if(dt.data.addressInfo != undefined && dt.data.addressInfo != null) {
  159. // $(".btn-add-address").hide();
  160. // $("#user-address-div").html('<div class="mui-table"><div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle"><p><span class="iconfont icon-dingwei"></span></p></div><div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle"><div>收货人:' + dt.data.addressInfo.salesAddressName + ' <span class="mui-pull-right">' + dt.data.addressInfo.salesAddressTel + '</span></div><p>收货地址:' + dt.data.addressInfo.salesAddressInfo + '</p></div><div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle"><p><span class="mui-icon mui-icon-arrowright"></span></p></div></div>').show();
  161. // //给微信参数赋值
  162. // wechatAddr.status = true;
  163. // wechatAddr.detailInfo = dt.data.addressInfo.salesAddressInfo;
  164. // wechatAddr.userName = dt.data.addressInfo.salesAddressName;
  165. // wechatAddr.userTel = dt.data.addressInfo.salesAddressTel;
  166. // wechatAddr.postalCode = dt.data.addressInfo.salesAddressPostnum;
  167. // }else{
  168. // wechatAddr.status = false;
  169. // }
  170. wechatAddr.status = false;
  171. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  172. });
  173. // 获取微信共享地址
  174. $(document).on('tap', '.btn-add-address,#user-address-div', function() {
  175. editAddrV1(
  176. function(res) {
  177. // 用户成功拉出地址
  178. var address = res.provinceName + "-" + res.cityName + "-" + res.countryName + "-" + res.detailInfo;
  179. wechatAddr.status = true;
  180. wechatAddr.detailInfo = address;
  181. wechatAddr.postalCode = res.postalCode;
  182. wechatAddr.userName = res.userName;
  183. wechatAddr.userTel = res.telNumber;
  184. wechatAddr.nationalCode = res.nationalCode;
  185. $(".btn-add-address").hide();
  186. $("#user-address-div").html('<div class="mui-table"><div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle"><p><span class="iconfont icon-dingwei"></span></p></div><div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle"><div>收货人:' + wechatAddr.userName + ' <span class="mui-pull-right">' + wechatAddr.userTel + '</span></div><p>收货地址:' + wechatAddr.detailInfo + '</p></div><div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle"><p><span class="mui-icon mui-icon-arrowright"></span></p></div></div>').show();
  187. },
  188. function() {
  189. if($('#user-address-div').html() != null && $('#user-address-div').html() != '') {
  190. wechatAddr.status = true;
  191. } else {
  192. wechatAddr.status = false;
  193. // 用户取消拉出地址
  194. mui.alert("您没有选择收货地址!");
  195. }
  196. }
  197. );
  198. });
  199. //马上领取
  200. var isPay = true; // 是否在请求支付,false表示正在请求,true可以请求
  201. $(document).on('tap', '#go-pay', function() {
  202. if(wechatAddr.status) {
  203. if($('#user-address-div').html() == null || $('#user-address-div').html() == '') {
  204. wechatAddr.status = false;
  205. mui.toast("请选择收货地址!");
  206. return ;
  207. }
  208. if(isPay) {
  209. isPay = false; // 锁定请求按钮
  210. $.ajax(base_path + '/wechat/receive/charger_receive?dates=' + new Date().getTime(), {
  211. data: {
  212. colorId:$("#my-pull>.active").attr("name"),
  213. colorName:$("#my-pull>.active").text(),
  214. receiveAddressInfo:wechatAddr.detailInfo,
  215. receiveAddressPostnum:wechatAddr.postalCode,
  216. receiveAddressName:wechatAddr.userName,
  217. receiveAddressTel:wechatAddr.userTel
  218. },
  219. dataType: 'json',
  220. xhrFields: {
  221. withCredentials: true
  222. },
  223. crossDomain: true,
  224. type: 'get',
  225. timeout: 15000,
  226. success: function(dt) {
  227. if(dt.isRedirect) {
  228. location.href = dt.redirectURL;
  229. } else {
  230. if(dt.data.info == "isOK") {
  231. mui.alert("领取成功!",function(){
  232. location.href="receive-charger.html";
  233. });
  234. return;
  235. };
  236. if(dt.status) {
  237. var str = dt.data.info;
  238. var obj = JSON.parse("{" + str + "}");
  239. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  240. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  241. $.ajax(base_path + '/wechat/receive/select_pay?dates=' + new Date().getTime(), {
  242. data: {
  243. "orderId": dt.data.orderId
  244. },
  245. dataType: 'json',
  246. xhrFields: {
  247. withCredentials: true
  248. },
  249. crossDomain: true,
  250. type: 'get',
  251. timeout: 15000,
  252. success: function(dataobj) {
  253. if(dataobj.isRedirect) {
  254. location.href = dataobj.redirectURL;
  255. } else {
  256. if(dataobj.status == true) { // 支付成功
  257. mui.alert("支付成功!",function(){
  258. location.href="receive-charger.html";
  259. });
  260. } else {
  261. isPay = true;
  262. mui.alert("支付失败!请稍后重试");
  263. }
  264. }
  265. },
  266. error: function(xhr, type, errorThrown) {
  267. console.log(xhr);
  268. isPay = true;
  269. mui.alert("支付失败!网络错误!");
  270. }
  271. });
  272. } else {
  273. isPay = true;
  274. mui.alert("支付失败!请稍后重试!");
  275. }
  276. });
  277. } else {
  278. isPay = true;
  279. mui.alert("领取失败!");
  280. }
  281. }
  282. },
  283. error: function(xhr, type, errorThrown) {
  284. console.log(xhr);
  285. isPay = true;
  286. mui.alert("领取失败!网络错误");
  287. }
  288. });
  289. }else{
  290. mui.toast("正在请求支付中~~!");
  291. return;
  292. }
  293. }else{
  294. mui.toast("请选择收货地址!");
  295. return;
  296. }
  297. });
  298. //切换颜色
  299. $(document).on('tap', '.pro-select-color', function() {
  300. var th = $(this);
  301. th.addClass("active").siblings().removeClass("active");//选中自己再把前后的兄弟元素取消选中
  302. });
  303. </script>
  304. </body>
  305. </html>