try_apply.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  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. .btn-pull-code{position: absolute;right: 10px;top:7px;height:34px;padding:0 6px;border-radius: 5px; line-height: 34px;font-size: 12px; color: #fff; background: #24cae9;}
  17. .btn-pull-code .active{background: #c8c8c8;}
  18. .icon-fuxuankuang a{color: #24cae9;}
  19. .icon-yanse,.icon-youhui,.icon-fuxuankuang,.icon-jiage,.icon-songhuo{font-size: 15px;padding-left: 22px;}
  20. .icon-yanse:before,.icon-fuxuankuang:before,.icon-youhui:before,.icon-jiage:before,.icon-songhuo:before{font-size: 18px;color: #24cae9;position: absolute;left: 0;width: 20px;height: 18px;}
  21. .try_price{color: #f1436c;}
  22. .ul_radio{width: 100%;}
  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(images/cp-1.jpg) center center /auto 85% no-repeat;}
  26. .radio2{background: url(images/cp-2.jpg) center center /auto 85% no-repeat;}
  27. .radio3{background: url(images/cp-3.jpg) center center /auto 85% no-repeat;}
  28. .radio4{background: url(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:1px solid rgba(0,0,0,.1);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. .mui-table-view-cell>a .mui-pull-right{color: #999;font-size: 14px;}
  36. #btn_submit{color: #fff;padding: 10px 0;font-size: 18px;background: #24cae9;border:0;}
  37. .mui-btn-block.mui-active,.btn-pull-code.mui-active{background-color: #c8c8c8 !important;}
  38. .icon-fuxuankuang.mui-active:before{color: #c8c8c8;}
  39. .mui-content-padded{margin: 10px 13px;}
  40. .tips{padding: 20px 10px;background: #24cae9;text-align: center;color: #fff;}
  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. .ul-addres{padding-left: 24px;color: #333;font-size:12px;}
  49. </style>
  50. <script>
  51. // 屏蔽分享
  52. window.hiddenAllWechatMenu = true;
  53. </script>
  54. </head>
  55. <body style="background: #fff;">
  56. <div class="loading-bg">
  57. <div class="mui-loading">
  58. <div class="mui-spinner">
  59. </div>
  60. &nbsp;&nbsp;加载中...
  61. </div>
  62. </div>
  63. <div class="mui-content" style="background: #fff;">
  64. <div class="tips more">
  65. <h3>申请试用</h3>
  66. <span>(仅限山西省)</span>
  67. </div>
  68. <div class="mui-content-padded">
  69. <form class="mui-input-group">
  70. <div class="mui-input-row">
  71. <label>姓 名</label>
  72. <input type="text" maxlength="12" class="mui-input-clear" placeholder="请输入姓名" id="ipt-name">
  73. </div>
  74. <div class="mui-input-row">
  75. <label>手机号</label>
  76. <input type="tel" maxlength="11" class="mui-input-clear" placeholder="请输入手机号" id="ipt-phone">
  77. </div>
  78. <div class="mui-input-row">
  79. <label>验证码</label>
  80. <input type="text" maxlength="4" placeholder="请输入验证码" id="ipt-code">
  81. <span class="btn-pull-code" id="pull-code">获取验证码</span>
  82. </div>
  83. <div style="display: table;width: 100%;padding: 10px 0;">
  84. <div style="display: table-cell;width: 30%;vertical-align: top;"><span class="iconfont icon-yanse">选择颜色</span></div><div style="display:table-cell;width:70%;text-align: right;">
  85. <ul class="ul_radio">
  86. <!-- <li class="radio1 active"></li>
  87. <li class="radio2"></li>
  88. <li class="radio3"></li>
  89. <li class="radio4"></li> -->
  90. </ul>
  91. </div>
  92. </div>
  93. <div>
  94. <span class="iconfont icon-jiage">商品价格</span><span class="mui-pull-right ft-12"><!-- <s class="mui-h6">原价:¥<span id="productPrice">0</span></s> --><span>试用期内体验价:<span class="try_price">0元</span></span>&nbsp;&nbsp;<span>,<span id="productDiscount" class="try_price">0</span></span></span>
  95. </div>
  96. </form>
  97. </div>
  98. <ul class="mui-table-view" style="border-top:1px solid rgba(0,0,0,.1);">
  99. <li class="mui-table-view-cell" style="padding:12px 15px;">
  100. <a class="mui-navigate-right" id="open-wechat-addres-a">
  101. <span class="iconfont icon-songhuo">收货信息</span>
  102. <ul class="ul-addres">
  103. <!-- <li>收 货 人:林林</li>
  104. <li>手 机 号:15999999999</li>
  105. <li>详细地址:广东省深圳市福田区莲花街道特区报业大厦12B</li> -->
  106. </ul>
  107. </a>
  108. </li>
  109. </ul>
  110. <ul class="mui-table-view my-table-view-try">
  111. <li style="padding: 10px 0 0 10px;" style="display:none">
  112. <span class="iconfont icon-youhui" style="display:none">支付优惠</span>
  113. </li>
  114. <li class="mui-table-view-cell" style="display:none">
  115. <img width="100%" src="images/cp-zeng.jpg" />
  116. </li>
  117. <li style="padding: 20px 10px;text-align: center;">
  118. <span class="iconfont icon-fuxuankuang mui-active" id="btn-tongyi">已阅,并同意<a id="xieyi-dalog">《用户试用协议》</a></span>
  119. <br /><span>请务必阅读</span>
  120. </li>
  121. </ul>
  122. <div class="mui-content-padded">
  123. <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" >申请试用</button>
  124. </div>
  125. </div>
  126. <script src="js/mui.min.js"></script>
  127. <script src="js/jquery-2.1.1.min.js"></script>
  128. <script src="js/main.js"></script>
  129. <script src="js/page/wechat-utils-1.0.js"></script>
  130. <script type="text/javascript">
  131. var check = false,alert_msg='';
  132. var mobile=/^(13|14|15|18)[0-9]{9}$/; //手机号码
  133. var uname = /^[\u4e00-\u9fa5]{1,12}$/; //中文英文
  134. var code = /^[0-9]{4}$/; //数字
  135. mui.ready(function(){
  136. $.ajax({
  137. type: 'post',
  138. url: base_path+'/probation/getUserInfo',
  139. data: {},
  140. dataType: 'json',
  141. timeout: 15000,
  142. xhrFields: {
  143. withCredentials: true
  144. },
  145. crossDomain: true,
  146. success: function(dt) {
  147. //console.log(dt);
  148. if(dt==2){
  149. $.ajax({
  150. type: 'post',
  151. url: base_path+'/probation/getProductList',
  152. data: {},
  153. dataType: 'json',
  154. timeout: 15000,
  155. xhrFields: {
  156. withCredentials: true
  157. },
  158. crossDomain: true,
  159. success: function(dt) {
  160. if (dt.isRedirect) {
  161. location.href = dt.redirectURL;
  162. } else {
  163. if(dt.status) {
  164. //console.log(dt.data[0]);
  165. var str='';
  166. mui(dt.data[0].colorList).each(function(index) {
  167. if(index==0){
  168. //$("#productPrice").text(accDiv(this.productPrice, 100));
  169. //console.log(this.colorList[0].colorDiscount)
  170. $("#productDiscount").text("试用价¥"+accDiv(this.colorDiscount, 100));
  171. str+='<li id="'+this.colorProductId+'" productPrice="'+accDiv(this.colorPrice, 100)+'" productDiscount="'+accDiv(this.colorDiscount, 100)+'" class="radio'+(index+1)+' active" colorid="'+(index+1)+'"></li>'
  172. }else{
  173. str+='<li id="'+this.colorProductId+'" productPrice="'+accDiv(this.colorPrice, 100)+'" productDiscount="'+accDiv(this.colorDiscount, 100)+'" class="radio'+(index+1)+'" colorid="'+(index+1)+'"></li>'
  174. }
  175. });
  176. $(".ul_radio").html(str);
  177. $(".ul_radio li").each(function() {
  178. $(this).on("click", function() {
  179. $(this).addClass("active");
  180. //$("#productPrice").text($(this).attr("productPrice"));
  181. $("#productDiscount").text("试用价¥"+$(this).attr("productDiscount"));
  182. $(this).siblings().removeClass("active");
  183. });
  184. });
  185. //console.log("页面加载完毕")
  186. document.querySelector('.loading-bg').style.display='none';
  187. } else {
  188. mui.alert(dt.message);
  189. }
  190. }
  191. },
  192. error: function(xhr, type, errorThrown) {
  193. //异常处理;
  194. console.log(xhr);
  195. mui.alert("请检查网络或刷新页面重试!");
  196. }
  197. });
  198. }else if(dt==0){
  199. mui.alert("请先关注\"watero\"水时代", '', function() {
  200. mui.openWindow({url:'/index.html'});
  201. });
  202. }else{
  203. mui.alert("您暂时还不能参与本次活动,详情请咨询watero微信商城客服", '', function() {
  204. mui.openWindow({url:'/index.html'});
  205. });
  206. }
  207. },
  208. error: function(xhr, type, errorThrown) {
  209. //异常处理;
  210. console.log(xhr);
  211. mui.alert("请检查网络或刷新页面重试!");
  212. }
  213. });
  214. });
  215. mui('body').on('tap', '#btn_submit', function() {
  216. //console.log($(".ul_radio .active").attr("colorid"));
  217. var th=this;
  218. change_input();
  219. if(check){
  220. mui(th).button('loading');
  221. var param = {
  222. "puserName": $("#ipt-name").val(),
  223. "puserTel": $("#ipt-phone").val(),
  224. "puserProductid": $(".ul_radio .active").attr("id"),
  225. "puserNickName":nickname ,
  226. "puser": ads_tel,
  227. "puserAddress": address,
  228. "colorId":$(".ul_radio .active").attr("colorid"),
  229. };
  230. $.ajax({
  231. type: 'get',
  232. url: base_path+'/probationOrder/validation_code',
  233. data: {"phone":$("#ipt-phone").val().trim(),"code":$("#ipt-code").val().trim(),"colorId":$(".ul_radio .active").attr("colorid")},
  234. dataType: 'json',
  235. timeout: 15000,
  236. success: function(dt) {
  237. //console.log(dt);
  238. if(dt.returnCode==200) {
  239. $.ajax({
  240. type: 'post',
  241. url: base_path+'/probationOrder/addProbationOrder',
  242. data: param,
  243. dataType: 'json',
  244. timeout: 15000,
  245. xhrFields: {
  246. withCredentials: true
  247. },
  248. crossDomain: true,
  249. success: function(dt) {
  250. if (dt.isRedirect) {
  251. location.href = dt.redirectURL;
  252. } else {
  253. //console.log(dt);
  254. if(dt.status) {
  255. mui.alert("本批watero试用机为新机,请您在试用过程中足够爱惜,切勿刮划机身及损坏包装,感谢您的配合!", '', function() {
  256. mui.openWindow({url:'vip_center.html'})
  257. });
  258. } else {
  259. mui(th).button('reset');
  260. mui.alert(dt.message);
  261. }
  262. }
  263. },
  264. error: function(xhr, type, errorThrown) {
  265. //异常处理;
  266. console.log(xhr);
  267. mui.alert("请检查网络或刷新页面重试!");
  268. mui(th).button('reset');
  269. }
  270. });
  271. }else{
  272. mui(th).button('reset');
  273. mui.alert(dt.returnMsg.returnMsg);
  274. }
  275. },
  276. error: function(xhr, type, errorThrown) {
  277. //异常处理;
  278. mui(th).button('reset');
  279. console.log(xhr);
  280. mui.alert("请检查网络或刷新页面重试!");
  281. }
  282. });
  283. }else{
  284. //console.log("未通过");
  285. mui.alert(alert_msg);
  286. }
  287. });
  288. mui('body').on('tap', '#xieyi-dalog', function() {
  289. mui.openWindow({
  290. url:base_path+ '/probation/try_agreement'
  291. });
  292. });
  293. $(document).on('tap', '#btn-tongyi', function() {
  294. var btn_submit=$("#btn_submit");
  295. //console.log($(this).hasClass("mui-active"));
  296. if($(this).hasClass("mui-active")){
  297. $(this).removeClass("mui-active");
  298. btn_submit.removeClass("mui-active");
  299. }else{
  300. $(this).addClass("mui-active");
  301. btn_submit.addClass("mui-active");
  302. }
  303. });
  304. $(document).on('tap', '#pull-code', function() {
  305. if($("#ipt-phone").val().trim()=="" &&(!$("#pull-code").hasClass("mui-active"))){
  306. mui.alert("请填写手机号码");
  307. return;
  308. }else{
  309. if(!mobile.test($("#ipt-phone").val().trim())){
  310. mui.alert("手机号码不正确,请重新填写");
  311. return;
  312. }else{
  313. if($(this).hasClass("mui-active")){
  314. return;
  315. }else{
  316. $(this).addClass("mui-active");
  317. settime("pull-code");
  318. getConfig();
  319. $.ajax({
  320. type: 'get',
  321. url: base_path+'/probationOrder/send_code',
  322. data: {"phone":$("#ipt-phone").val().trim()},
  323. dataType: 'json',
  324. timeout: 15000,
  325. xhrFields: {
  326. withCredentials: true
  327. },
  328. crossDomain: true,
  329. success: function(dt) {
  330. if (dt.isRedirect) {
  331. location.href = dt.redirectURL;
  332. } else {
  333. //console.log(dt);
  334. if(dt.returnCode==1) {
  335. countdown=1;
  336. mui.alert("该手机号码已经申请过,请勿重复提交!");
  337. }else if(dt.returnCode==2){
  338. countdown=1;
  339. mui.alert("您使用的手机号码是空号");
  340. }else if(dt.returnCode==500){
  341. mui.alert(dt.returnMsg.returnMsg);
  342. }
  343. }
  344. },
  345. error: function(xhr, type, errorThrown) {
  346. //异常处理;
  347. console.log(xhr);
  348. mui.alert("请检查网络或刷新页面重试!");
  349. }
  350. });
  351. }
  352. }
  353. }
  354. });
  355. var countdown=60;
  356. function settime(val) {
  357. pullid=dc(val);
  358. if (countdown == 0) {
  359. pullid.removeAttribute("disabled");
  360. pullid.className='btn-pull-code';
  361. pullid.innerText="获取验证码";
  362. countdown = 60;
  363. return false;
  364. } else {
  365. pullid.setAttribute("disabled", true);
  366. pullid.className='btn-pull-code mui-active';
  367. pullid.innerText="重新发送(" + countdown + ")";
  368. countdown--;
  369. }
  370. setTimeout(function() {
  371. settime(val)
  372. },1000)
  373. }
  374. function change_input() {
  375. $(".mui-input-group input").each(function(index) {
  376. switch ($(this).attr("id")){
  377. case "ipt-name":
  378. if($(this).val().trim()==""){
  379. alert_msg="请填写姓名";
  380. check=false;
  381. return false;
  382. }else{
  383. if(uname.test($(this).val())) {
  384. check=true;
  385. }else{
  386. alert_msg="姓名格式不正确,请重新填写";
  387. check=false;
  388. return false;
  389. }
  390. }
  391. break;
  392. case "ipt-phone":
  393. if($(this).val().trim()==""){
  394. alert_msg="请填写手机号";
  395. check=false;
  396. return false;
  397. }else{
  398. if(mobile.test($(this).val().trim())) {
  399. check=true;
  400. }else{
  401. alert_msg="手机号码不正确,请重新填写";
  402. check=false;
  403. return false;
  404. }
  405. }
  406. break;
  407. case "ipt-code":
  408. if($(this).val().trim()==""){
  409. alert_msg="请填写验证码";
  410. check=false;
  411. return false;
  412. }else{
  413. if(code.test($(this).val().trim())) {
  414. check=true;
  415. }else{
  416. alert_msg="验证码格式不正确,请重新填写";
  417. check=false;
  418. return false;
  419. }
  420. }
  421. break;
  422. default:
  423. break;
  424. }
  425. });
  426. if(check) {
  427. if(address==''){
  428. alert_msg="请选择送货信息";
  429. check=false;
  430. return false;
  431. }else{
  432. check=true;
  433. }
  434. if($("#btn-tongyi").hasClass("mui-active")){
  435. alert_msg="请勾选同意试用协议";
  436. check=false;
  437. return false;
  438. }else{
  439. check=true;
  440. }
  441. }
  442. /* if(check) {
  443. console.log("通过")
  444. } else {
  445. console.log(alert_msg);
  446. } */
  447. }
  448. var address='',nickname='',ads_tel='';
  449. // 获取微信共享地址
  450. mui('body').on('tap', '#open-wechat-addres-a', function() {
  451. editAddrV1(
  452. function(res) {
  453. if(res.provinceName!="山西省"){
  454. address='';
  455. $(".ul-addres").empty();
  456. mui.alert("本活动仅限山西省用户");
  457. }else{
  458. // 用户成功拉出地址
  459. address = res.provinceName + "-" + res.cityName + "-" + res.countryName + "-" + res.detailInfo;
  460. wechatAddr.status = true;
  461. wechatAddr.detailInfo = address;
  462. wechatAddr.postalCode = res.postalCode;
  463. wechatAddr.userName = res.userName;
  464. wechatAddr.userTel = res.telNumber;
  465. wechatAddr.nationalCode = res.nationalCode;
  466. nickname=res.userName;
  467. ads_tel=res.telNumber;
  468. $(".ul-addres").empty().append("<li>收货人:" + wechatAddr.userName + "</li><li>手 机 号:" + wechatAddr.userTel + "</li>" +"<li>详细地址:" + address + "</li>");
  469. }
  470. },
  471. function() {
  472. if(address != '') {
  473. wechatAddr.status = true;
  474. } else {
  475. wechatAddr.status = false;
  476. // 用户取消拉出地址
  477. mui.alert("您没有选择收货地址!");
  478. }
  479. }
  480. );
  481. });
  482. </script>
  483. </body>
  484. </html>