gift_card_to_agent.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  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/style.css" />
  12. <style>
  13. .head {height: 60px;}
  14. #head {line-height: 60px;}
  15. h3{margin-top:5px;margin-bottom: 0;}
  16. .icon-fuxuankuang a{color: #24cae9;text-decoration:underline;font-size: 12px;}
  17. .icon-daifahuo,.icon-lease2,.icon-jiage,.icon-lipin,.icon-lease1{font-size: 15px;padding-left: 22px;}
  18. .icon-fuxuankuang{font-size: 14px;padding:5px 5px 5px 22px;}
  19. .icon-fuxuankuang:before{font-size: 15px;margin-top: 5px;margin-right: 3px;color:#e4004d;}
  20. .icon-daifahuo:before,.icon-lease2:before,.icon-jiage:before,.icon-lipin:before,.icon-lease1:before{font-size: 19px;color: #24cae9;position: absolute;left: 0;width: 20px;height: 18px;}
  21. .try_price{color: #f1436c;}
  22. .ul_radio{width: 100%;text-align: left;}
  23. .ul_radio li{width:21%;height: 55px;margin: 0 1%;border: 1px solid rgba(0,0,0,.1);border-radius: 5px; display: inline-block;position: relative;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;}
  24. .ul_radio .active:after{position: absolute;right: 0;bottom: 0;content: "\e66f";color: #f1436c;line-height: 1;font-size: 20px;}
  25. .radio1{background: url(//s.iamberry.com/watero/images/cp-1.jpg) center center /auto 85% no-repeat;}
  26. .radio2{background: url(//s.iamberry.com/watero/images/cp-2.jpg) center center /auto 85% no-repeat;}
  27. .radio3{background: url(//s.iamberry.com/watero/images/cp-3.jpg) center center /auto 85% no-repeat;}
  28. .radio4{background: url(//s.iamberry.com/watero/images/cp-4.jpg) center center /auto 85% no-repeat;}
  29. .head-img {position: absolute;bottom: 15px;right: 13px;width: 60px;height: 60px;border-radius: 30px;border: 3px solid #E5E5E5;}
  30. .mui-table-view .mui-media .mui-media-body{height: 41px;line-height: 41px;color: #333;}
  31. .mui-table-view .mui-media .mui-media-body>span{color: #f1436c;}
  32. .my-table-view-try{border-top: .6em solid #f0f0f0;border-bottom: .6em solid #f0f0f0;padding-bottom: 10px;}
  33. .my-table-view-try .mui-table-view-cell{padding:10px 13px 10px 30px !important;font-size: 12px;}
  34. .mui-table-view-cell:after,.mui-table-view:before,.mui-table-view:after,.mui-input-group .mui-input-row:after,.mui-input-group:before,.mui-input-group:after{display: none;}
  35. #open-wechat-addres-a{margin: -15px -15px -15px -28px !important;}
  36. .mui-table-view-cell>a .mui-pull-right{color: #999;font-size: 14px;}
  37. #btn_submit{color: #fff;font-size: 18px;background: #24cae9;margin-bottom: 0;border: 0;}
  38. .mui-btn-block.mui-active,.btn-pull-code.mui-active{background-color: #c8c8c8 !important;}
  39. .icon-fuxuankuang.mui-active:before{color: #c8c8c8;}
  40. .mui-content-padded{margin: 10px 13px;}
  41. .mui-input-group .mui-input-row {height: 50px;padding: 5px 0;border: 1px solid rgba(0,0,0,.1); margin:10px 0;}
  42. .mui-input-row label{color: #666;width:27%;font-size: 15px;}
  43. .mui-input-row label~input{width:73%;}
  44. .mui-input-row label~input::-webkit-input-placeholder{font-size: 15px;}
  45. .triangle-down {width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;}
  46. .my-arrowright{position: absolute;right: 18px;top: 28px;color: #666;pointer-events:none;}
  47. .mui-btn-red{background-color: #e9004c;}
  48. .tips{padding-bottom: 85px;}
  49. .gift-card-title{padding-top:60px;background:url(//s.iamberry.com/watero/images/shop/gift-card-tit-bg.jpg) top center /100% no-repeat #71d8ec;}
  50. .gift-card-title .mui-table-view-cell.mui-active{background:transparent;}
  51. .gift-card-title .mui-table-view-cell>a:not(.mui-btn){color: #fff;}
  52. .gift-card-title .mui-table-view-cell>a:not(.mui-btn).mui-active{background:transparent;}
  53. .gift-card-title .mui-navigate-right:after{color: #fff;font-size: 20px;right: 7px;}
  54. .gift-card-title .mui-table-view-cell{color: #fff;}
  55. .mui-table-view-cell.mui-collapse .mui-collapse-content{background: #71d8ec;}
  56. .accordion{float: right;margin:2px 15px 0 0;font-size: 12px;color: #fff;}
  57. .my-btn-hand{display:block;width: 100%;height: 55px;background-color: #c5c5c5;color: #fff;border: 0;border-radius: 0;}
  58. .my-btn-hand.active{background-color: #1cc9f4;}
  59. .my-div{padding: 5px 0;border-bottom: 1px solid rgba(0,0,0,.1);margin-bottom: 5px;}
  60. .mui-h5, h5 {margin-left: 30px;font-size: 12px;}
  61. .mui-h6, h6 {padding: 5px 0;}
  62. .my-btn-exchange{background: #ddf2f8 !important;text-align: center;border: 0 !important;font-size: 14px;}
  63. </style>
  64. <script>
  65. // 屏蔽分享
  66. window.hiddenAllWechatMenu = true;
  67. </script>
  68. </head>
  69. <body style="background: #fff;">
  70. <div class="loading-bg">
  71. <div class="mui-loading">
  72. <div class="mui-spinner">
  73. </div>
  74. &nbsp;&nbsp;加载中...
  75. </div>
  76. </div>
  77. <div class="mui-content" style="background: #fff;">
  78. <div class="tips">
  79. <ul class="mui-table-view gift-card-title">
  80. <li class="mui-table-view-cell mui-text-center">代理费用:10000元</li>
  81. <li class="mui-table-view-cell mui-text-left mui-collapse">
  82. <a class="mui-navigate-right" id="mui-navigate-right"><span class="iconfont icon-quanyizhanshi"></span> 尊享权益<span class="accordion">详情</span></a>
  83. <div class="mui-collapse-content">
  84. <ul class="ft-12">
  85. <li>1.将获赠价值3680元的美国watero净水机一台。</li>
  86. <li>2.将获得8张提货卡(每张可兑换一台美国watero净水机)</li>
  87. <li>3.成功推荐其他人成为代理商,可获赠一台美国watero净水机</li>
  88. <li>4.一年后,未使用的礼品卡每张可兑换成1250元现金。</li>
  89. </ul>
  90. </div>
  91. </li>
  92. </ul>
  93. <div class="mui-content-padded">
  94. <div>
  95. <span class="iconfont icon-lease1">代理商信息</span>
  96. </div>
  97. <form class="mui-input-group">
  98. <div class="mui-input-row">
  99. <label>您的姓名</label>
  100. <input type="text" maxlength="12" class="mui-input-clear" placeholder="请输入您的姓名" id="ipt-name">
  101. </div>
  102. <div class="mui-input-row">
  103. <label>手机号码</label>
  104. <input type="tel" maxlength="11" class="mui-input-clear" placeholder="请输入您的手机号" id="ipt-phone">
  105. </div>
  106. </form>
  107. <div class="my-div">
  108. <span class="iconfont icon-lipin">选择赠品</span>
  109. </div>
  110. <div class="mui-h6">
  111. 产品名称:美国watero净饮水一体机
  112. </div>
  113. <div class="mui-h6">
  114. 产品数量:1台
  115. </div>
  116. <form class="mui-input-group">
  117. <div style="display: table;width: 100%;padding: 10px 0;">
  118. <div style="display: table-cell;width: 20%;vertical-align: middle;font-size: 12px;font-weight: 400;color: #8f8f94;">选择颜色:</span></div><div style="display:table-cell;width:70%;text-align: right;">
  119. <ul class="ul_radio">
  120. <!-- <li class="radio1 active"></li>
  121. <li class="radio2"></li>
  122. <li class="radio3"></li>
  123. <li class="radio4"></li> -->
  124. </ul>
  125. </div>
  126. </div>
  127. <div class="my-div">
  128. <span class="iconfont icon-daifahuo">提货卡</span>
  129. </div>
  130. <div class="mui-h6">
  131. 美国watero净饮水一体机提货卡<span class="mui-pull-right cl-red">X8张</span>
  132. </div>
  133. </form>
  134. <!-- <div class="my-div">
  135. <span class="iconfont icon-lease2">收货信息</span>
  136. </div> -->
  137. <ul class="mui-table-view" style="padding-top: 15px;">
  138. <li class="mui-table-view-cell">
  139. <a class="mui-navigate-right" id="open-wechat-addres-a">
  140. <span class="iconfont icon-lease2">收货信息</span><span class="mui-h5">请选择收货地址</span>
  141. <!-- <ul class="ft-12" style="color: #333;">
  142. <li>收 货 人:林林</li>
  143. <li>手 机 号:15999999999</li>
  144. <li>详细地址:广东省深圳市福田区莲花街道特区报业大厦12B</li>
  145. </ul> -->
  146. </a>
  147. </li>
  148. </ul>
  149. <div style="padding:8px 0;margin-top:4px;border-top: 1px solid rgba(0,0,0,.1);">
  150. <span class="iconfont icon-jiage">抵扣密码</span>
  151. </div>
  152. <div>
  153. <input type="text" value="" placeholder="请输入抵扣密码" maxlength="12" class="mui-input-clear my-btn-exchange" id="ipt-exchange"/>
  154. <br/>
  155. <span class="mui-h5">说明:如你已经线下支付并已获得抵扣密码,输入即可!</span>
  156. </div>
  157. <ul class="mui-table-view">
  158. <li style="padding:20px 10px 0px 10px;text-align: center;">
  159. <span class="iconfont icon-fuxuankuang mui-active" id="btn-tongyi">我已经阅读并同意<a id="xieyi-dalog">《美国watero代理说明》</a></span>
  160. </li>
  161. </ul>
  162. </div>
  163. <div class="mui-text-center">
  164. 支付金额:<span class="cl-red" id="pay_price">¥10000</span>
  165. </div>
  166. </div>
  167. </div>
  168. <div class="buy-footer">
  169. <button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="提交中" class="mui-btn mui-btn-block mui-btn-outlined mui-active" id="btn_submit" disabled="disabled">确认支付</button>
  170. </div>
  171. <script src="/js/mui.min.js"></script>
  172. <script src="/js/jquery-2.1.1.min.js"></script>
  173. <script src="/js/shop/main.js"></script>
  174. <script src="/js/shop/wechat-utils-1.0.js"></script>
  175. <script type="text/javascript">
  176. //wechatAddr.status=true;
  177. var check = false,alert_msg='';
  178. var uname = /^[A-Za-z\-\u4e00-\u9fa5]{1,10}$/;//简体中文英文
  179. var mobile=/^(13|14|15|18|17)[0-9]{9}$/; //11位手机号码
  180. var dcode=/^[A-Z]{1}[0-9]{11}$/; //12位抵扣密码
  181. var isPay = true; // 是否在请求支付,false表示正在请求,true可以请求
  182. mui.ready(function(){
  183. mui.ajax(base_path + '/giftCard/card/product/details?dates=' + new Date().getTime(), {
  184. data: {},
  185. dataType: 'json',
  186. type: 'post',
  187. timeout: 15000,
  188. success: function(dt) {
  189. //console.log(dt);
  190. if(dt.isRedirect) {
  191. location.href = dt.redirectURL;
  192. } else {
  193. if(dt.returnCode=="200" && dt.resultCode=="200"){
  194. var table = document.body.querySelector('.ul_radio');
  195. mui(dt.returnMsg.colors).each(function(index) {
  196. var li = document.createElement('li');
  197. if(index==0){
  198. li.className ='radio'+this.colorId+' active';
  199. }else{
  200. li.className ='radio'+this.colorId;
  201. }
  202. li.setAttribute("id",this.colorId);
  203. li.setAttribute("name",this.colorProductId);
  204. table.appendChild(li);
  205. });
  206. $(".ul_radio li").each(function() {
  207. $(this).on("tap", function() {
  208. $(this).addClass("active");
  209. $(this).siblings().removeClass("active");
  210. });
  211. });
  212. document.querySelector('.loading-bg').style.display='none';
  213. }else{
  214. mui.alert(dt.resultMsg);
  215. }
  216. }
  217. },
  218. error: function(xhr, type, errorThrown) {
  219. console.log(xhr)
  220. }
  221. });
  222. });
  223. mui('body').on('tap', '#btn_submit', function() {
  224. change_input();
  225. var th=this;
  226. if(check){
  227. if(isPay) {
  228. isPay = false; // 锁定请求按钮
  229. mui(this).button('loading');
  230. var param = {
  231. "agentMachineColorId":$(".ul_radio .active").attr("id"),
  232. "agentMachineProductId": $(".ul_radio .active").attr("name"),
  233. "agentMachineAddressInfo": address,
  234. "agentMachineAddressName": nickname,
  235. "agentMachineAddressTel":ads_tel,
  236. "userName":encodeURI($("#ipt-name").val().trim()),
  237. "userTel":$("#ipt-phone").val().trim(),
  238. "payPassword":$("#ipt-exchange").val().trim(),
  239. };
  240. $.ajax({
  241. type: 'post',
  242. url: '/watero/pay/pay_agent?dates=' + new Date().getTime(),
  243. data: param,
  244. dataType: 'json',
  245. timeout: 15000,
  246. success: function(dt) {
  247. //console.log(dt);
  248. if($("#ipt-exchange").val().trim()!=''){
  249. if(dt.status && dt.data.success) {
  250. mui.openWindow({url:base_path+ '/giftCard/card/agencyUI'});
  251. }else{
  252. mui(th).button('reset');
  253. mui.alert(dt.data.info,'',function(){
  254. if(dt.data.info=='您已经是代理商,无须再次申请!'){
  255. mui.openWindow({url:base_path+ '/giftCard/card/agencyUI'});
  256. }
  257. });
  258. isPay = true;
  259. }
  260. }else{
  261. if(dt.status) {
  262. var obj = JSON.parse("{" + dt.data.info + "}");
  263. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  264. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  265. $.ajax({
  266. type: 'post',
  267. url: base_path+'/agent_pay/check_agent_pay_success',
  268. data: {"orderId":dt.data.orderId},
  269. dataType: 'json',
  270. timeout: 15000,
  271. success: function(data) {
  272. //console.log(data);
  273. if(data.status) {
  274. if(data.data==2){
  275. mui.openWindow({url:base_path+ '/giftCard/card/agencyUI'});
  276. }else{
  277. mui.alert('如果已支付,请等待同步支付状态!', '', function() {
  278. mui(th).button('reset');
  279. });
  280. }
  281. } else {
  282. mui(th).button('reset');
  283. mui.alert(data.message);
  284. }
  285. },
  286. error: function(xhr, type, errorThrown) {
  287. //异常处理;
  288. console.log(xhr);
  289. mui(th).button('reset');
  290. isPay = true;
  291. mui.alert("请检查网络或刷新页面重试!");
  292. }
  293. });
  294. } else {
  295. isPay = true;
  296. mui(th).button('reset');
  297. mui.alert("对不起,支付失败!请稍后重试!");
  298. }
  299. });
  300. } else {
  301. mui(th).button('reset');
  302. isPay = true;
  303. mui.alert(dt.returnMsg);
  304. }
  305. }
  306. },
  307. error: function(xhr, type, errorThrown) {
  308. //异常处理;
  309. console.log(xhr);
  310. isPay = true;
  311. mui.alert("请检查网络或刷新页面重试!");
  312. mui(th).button('reset');
  313. }
  314. });
  315. }else{
  316. mui.alert("正在请求支付中~~请稍后!");
  317. return;
  318. }
  319. }else{
  320. mui.alert(alert_msg);
  321. }
  322. });
  323. mui('body').on('tap', '#xieyi-dalog', function() {
  324. mui.openWindow({
  325. url: '/watero/view/gift_card_agent_explain.html'
  326. });
  327. });
  328. mui('body').on('tap', '#mui-navigate-right', function() {
  329. if(this.parentNode.classList.contains('mui-active')){
  330. this.lastChild.innerHTML='详情'
  331. }else{
  332. this.lastChild.innerHTML='收起'
  333. }
  334. });
  335. $(document).on('tap', '#btn-tongyi', function() {
  336. var btn_submit=$("#btn_submit");
  337. if($(this).hasClass("mui-active")){
  338. $(this).removeClass("mui-active");
  339. check=true;
  340. if(wechatAddr.status){
  341. btn_submit.removeClass("mui-active").removeAttr("disabled");
  342. }else{
  343. btn_submit.addClass("mui-active").prop("disabled","disabled");
  344. }
  345. }else{
  346. check=false;
  347. $(this).addClass("mui-active");
  348. btn_submit.addClass("mui-active").prop("disabled","disabled");
  349. }
  350. });
  351. var address='',nickname='',ads_tel='';
  352. // 获取微信共享地址
  353. mui('body').on('tap', '#open-wechat-addres-a', function() {
  354. editAddrV1(
  355. function(res) {
  356. // 用户成功拉出地址
  357. address = res.provinceName + "-" + res.cityName + "-" + res.countryName + "-" + res.detailInfo;
  358. nickname=res.userName;
  359. ads_tel= res.telNumber;
  360. wechatAddr.status = true;
  361. wechatAddr.detailInfo = address;
  362. wechatAddr.postalCode = res.postalCode;
  363. wechatAddr.userName = res.userName;
  364. wechatAddr.userTel = res.telNumber;
  365. wechatAddr.nationalCode = res.nationalCode;
  366. $("#open-wechat-addres-a").empty().append('<ul class="ft-12" style="color: #333;"><li>收 货 人:'+ wechatAddr.userName +'</li><li>手 机 号:' + wechatAddr.userTel + '</li><li>详细地址:'+ wechatAddr.detailInfo+'</li></ul>');
  367. if(check){
  368. $(this).removeClass("mui-active");
  369. $("#btn_submit").removeClass("mui-active").removeAttr("disabled");
  370. }
  371. },
  372. function() {
  373. if($('#open-wechat-addres-a').html() != null && $('#open-wechat-addres-a').html() != '') {
  374. wechatAddr.status = true;
  375. } else {
  376. wechatAddr.status = false;
  377. // 用户取消拉出地址
  378. $('#open-wechat-addres-a').html('收货地址<span class="mui-h5">请选择收货地址</span>');
  379. }
  380. }
  381. );
  382. });
  383. function change_input() {
  384. if($("#btn-tongyi").hasClass("mui-active")){
  385. alert_msg="请勾选同意《美国watero代理说明》";
  386. check=false;
  387. return false;
  388. }else{
  389. check=true;
  390. }
  391. if(dcode.test($("#ipt-exchange").val().trim()) || $("#ipt-exchange").val().trim()==''){
  392. check=true;
  393. $("#pay_price").text("¥0");
  394. }else{
  395. alert_msg="抵扣密码不正确,请重新填写";
  396. check=false;
  397. $("#pay_price").text("¥10000");
  398. return false;
  399. }
  400. if(wechatAddr.status){
  401. check=true;
  402. }else{
  403. alert_msg="请选择收货地址";
  404. check=false;
  405. return false;
  406. }
  407. $(".mui-input-group input").each(function(index) {
  408. switch ($(this).attr("id")){
  409. case "ipt-phone":
  410. if($(this).val().trim()==""){
  411. alert_msg="请填写手机号";
  412. check=false;
  413. return false;
  414. }else{
  415. if(mobile.test($(this).val().trim())) {
  416. check=true;
  417. }else{
  418. alert_msg="手机号码不正确,请重新填写";
  419. check=false;
  420. return false;
  421. }
  422. }
  423. break;
  424. case "ipt-name":
  425. if($(this).val().trim()==""){
  426. alert_msg="请填写姓名";
  427. check=false;
  428. return false;
  429. }else{
  430. if(uname.test($(this).val().trim())) {
  431. check=true;
  432. }else{
  433. alert_msg="姓名格式不正确,请重新填写";
  434. check=false;
  435. return false;
  436. }
  437. }
  438. break;
  439. default:
  440. break;
  441. }
  442. });
  443. if(check) {
  444. $("#btn_submit").removeClass("mui-active").removeAttr("disabled");
  445. }else{
  446. $("#btn_submit").addClass("mui-active").prop("disabled","disabled");
  447. }
  448. }
  449. mui.os.ios ? listener_ipt() : keyup_fn();
  450. function keyup_fn() {
  451. $(document).on('keyup', '#ipt-name', function(e) {
  452. change_input();
  453. if(check){
  454. $("#btn_submit").removeClass("my-active").removeAttr("disabled");
  455. }else{
  456. $("#btn_submit").addClass("my-active").prop("disabled","disabled");
  457. }
  458. });
  459. $(document).on('keyup', '#ipt-phone', function(e) {
  460. change_input();
  461. if(check){
  462. $("#btn_submit").removeClass("my-active").removeAttr("disabled");
  463. }else{
  464. $("#btn_submit").addClass("my-active").prop("disabled","disabled");
  465. }
  466. });
  467. }
  468. function listener_ipt() {
  469. document.getElementById('ipt-name').onblur = function() {
  470. change_input();
  471. if(check){
  472. $("#btn_submit").removeClass("my-active").removeAttr("disabled");
  473. }else{
  474. $("#btn_submit").addClass("my-active").prop("disabled","disabled");
  475. }
  476. }
  477. document.getElementById('ipt-phone').onblur = function() {
  478. change_input();
  479. if(check){
  480. $("#btn_submit").removeClass("my-active").removeAttr("disabled");
  481. }else{
  482. $("#btn_submit").addClass("my-active").prop("disabled","disabled");
  483. }
  484. }
  485. }
  486. </script>
  487. </body>
  488. </html>