add-warranty_card.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  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/mui.picker.min.css" />
  11. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  12. <link rel="stylesheet" type="text/css" href="css/main.css" />
  13. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  14. <script>
  15. //屏蔽分享
  16. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  17. WeixinJSBridge.call('hideOptionMenu');
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <div class="mui-content">
  23. <div style="position: relative;">
  24. <img width="100%" src="images/top-1.png" />
  25. <div style="position: absolute;left: 0; top: 45%;-webkit-transform: translateY(-50%);width: 100%;text-align: center;">
  26. <h4>现在完善产品信息</h4>
  27. <p>享受优质售后服务</p>
  28. </div>
  29. </div>
  30. <div class="mui-content-padded"><span class="iconfont icon-dingwei" style="font-size: 16px;color: #d78b82;"></span> 地址:<span id="wx-ads"></span></div>
  31. <form class="mui-input-group card-input-group">
  32. <div class="mui-input-row">
  33. <label>姓 名</label>
  34. <input type="text" class="mui-input-clear" placeholder="请填写您的收货姓名" id="ipt-name">
  35. </div>
  36. <div class="mui-input-row">
  37. <label>邮 箱</label>
  38. <input type="text" class="mui-input-clear" placeholder="请填写您的邮箱信息" id="ipt-email">
  39. </div>
  40. <div class="mui-input-row">
  41. <label>水 质</label>
  42. <input type="text" readonly="readonly" placeholder="请选择您的水质范围" id="ipt-water">
  43. <span class="mui-icon mui-icon-arrowdown" style="position: absolute;right: 7px;top:6px;color: #bbb;"></span>
  44. </div>
  45. <div class="mui-input-row">
  46. <label>手机号</label>
  47. <input type="tel" class="mui-input-clear" maxlength="11" placeholder="请填写您的手机号" id="ipt-phone">
  48. </div>
  49. <div class="mui-input-row">
  50. <label>验证码</label>
  51. <input style="width: 30%;float: left;" type="tel" maxlength="4" placeholder="填写验证码" id="ipt-code">
  52. <button class="btn-pull-code" disabled="disabled" type="button" id="pull-code">获取验证码</button>
  53. </div>
  54. </form>
  55. </div>
  56. <footer class="mui-bar mui-bar-tab">
  57. <button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="提交中" class="my-btn-submit" disabled="disabled" id="btn_submit">提交</button>
  58. </footer>
  59. <!-- 加载ing -->
  60. <div class="loading covers">
  61. <div class="loading-bj"></div>
  62. <p>加载中...</p>
  63. </div>
  64. <!-- 加载ing END -->
  65. <script src="js/mui.min.js"></script>
  66. <script src="js/mui.picker.min.js"></script>
  67. <script src="js/jquery-2.1.1.min.js"></script>
  68. <script src="js/main.js"></script>
  69. <script>
  70. var check = false,alert_msg='';
  71. var mobile=/^(13|14|15|18)[0-9]{9}$/; //手机号码
  72. var uname = /^[\u4e00-\u9fa5a-zA-Z]{1,12}$/; //中文英文
  73. var email=/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,18}$/;
  74. var code = /^[0-9]{4}$/; //数字
  75. var numberProvince = null;
  76. var numberCity = null;
  77. var numberDistrict = null;
  78. var countdown=60;
  79. var num = getParam("num");
  80. mui.ready(function(){
  81. if(!window.localStorage) {
  82. alert("浏览器不支持localStorage");
  83. } else {
  84. var codedata = JSON.parse(localStorage.getItem('pull-code-data'));
  85. if(codedata!=null){
  86. var dates=new Date();
  87. $("#ipt-phone").val(codedata.phone);
  88. if(codedata.codeTime>0){
  89. if(((dates.getTime()/1000)-codedata.updateTime)<codedata.codeTime){
  90. countdown=(codedata.codeTime-(parseInt(dates.getTime()/1000)-codedata.updateTime))+1;
  91. settime("pull-code");
  92. }else{
  93. $("#pull-code").removeAttr("disabled");
  94. }
  95. $('#btn_submit').removeAttr("disabled");
  96. }else{
  97. $("#pull-code").removeAttr("disabled");
  98. }
  99. }
  100. }
  101. //check_warranty();
  102. //选择示例
  103. var userPicker = new mui.PopPicker();
  104. userPicker.setData([{
  105. value: '1',
  106. text: '0-100 TDS'
  107. }, {
  108. value: '2',
  109. text: '101-250 TDS'
  110. }, {
  111. value: '3',
  112. text: '251-500 TDS'
  113. }, {
  114. value: '4',
  115. text: '501 TDS 以上 '
  116. }]);
  117. var showUserPickerButton = document.getElementById('ipt-water');
  118. showUserPickerButton.addEventListener('tap', function(event) {
  119. userPicker.show(function(items) {
  120. document.getElementById('ipt-water').value = items[0].text;
  121. $('#ipt-water').attr('txtvalue',items[0].value);
  122. var txt_message = '';
  123. switch (items[0].value) {
  124. case '1':
  125. txt_message = '您家水质良好。';
  126. break;
  127. case '2':
  128. txt_message = '您家水质偏差,WaterO可彻底净化,请使用柠檬酸每3个月清洗。';
  129. break;
  130. case '3':
  131. txt_message = '您家水质较差,WaterO可彻底净化,请使用柠檬酸每2个月清洗。';
  132. break;
  133. case '4':
  134. txt_message = '您家水质很差,WaterO可彻底净化,请使用柠檬酸每1个月清洗。';
  135. break;
  136. }
  137. $('#txt_message').html(txt_message);
  138. $('#div_message').show();
  139. });
  140. }, false);
  141. $(".loading").hide().css("opacity", "0");
  142. console.log(generateMixed(99));
  143. });
  144. function check_warranty() {
  145. if (num != 1) {
  146. window.location.href = base_path + '/qrcode/_add_warranty';
  147. }
  148. /*$.ajax({
  149. type: 'get',
  150. url: base_path + '/qrcode/check_warranty',
  151. dataType: 'json',
  152. timeout: 15000,
  153. success: function(dt) {
  154. if(dt.status){
  155. if (!dt.data) {
  156. mui.openWindow({
  157. url: '/wateroPF/view/guanzhu.html'
  158. })
  159. }
  160. } else {
  161. mui.openWindow({
  162. url: '/wateroPF/view/guanzhu.html'
  163. })
  164. }
  165. },
  166. error: function(xhr, type, errorThrown) {
  167. mui.openWindow({
  168. url: '/wateroPF/view/guanzhu.html'
  169. })
  170. console.log("请检查网络或刷新页面重试!");
  171. }
  172. });*/
  173. }
  174. /** wx.ready(function () {
  175. // 7.2 获取当前地理位置
  176. wx.getLocation({
  177. success: function (res) {
  178. var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
  179. var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
  180. var speed = res.speed; // 速度,以米/每秒计
  181. var accuracy = res.accuracy; // 位置精度
  182. getlocation(latitude,longitude);
  183. },
  184. cancel: function (res) {
  185. $("#wx-ads").text('定位失败');
  186. }
  187. });
  188. }); **/
  189. function getlocation(latitude,longitude){
  190. var data_array = {
  191. "latitude":latitude,
  192. "longitude":longitude
  193. };
  194. $.ajax({
  195. type: 'get',
  196. url: base_path + '/qrcode/get_location_by_qq',
  197. data:data_array,
  198. dataType: 'json',
  199. xhrFields: {
  200. withCredentials: true
  201. },
  202. crossDomain: true,
  203. timeout: 15000,
  204. success: function(dt) {
  205. if(dt.status){
  206. numberProvince = dt.data.numberProvince;
  207. numberCity = dt.data.numberCity;
  208. numberDistrict = dt.data.numberDistrict;
  209. $("#wx-ads").text(numberProvince+"-"+numberCity+"-"+numberDistrict);
  210. }
  211. },
  212. error: function(xhr, type, errorThrown) {
  213. console.log("请检查网络或刷新页面重试!");
  214. }
  215. });
  216. }
  217. mui('body').on('tap', '#btn_submit', function() {
  218. change_input();
  219. if(check){
  220. console.log("提交");
  221. mui(this).button('loading');
  222. setTimeout(function() {
  223. mui(this).button('reset');
  224. }.bind(this), 2000);
  225. //mui.alert("本批watero试用机为新机,请您在试用过程中足够爱惜,切勿刮划机身及损坏包装,感谢您的配合!");
  226. var data_array = {
  227. "userTel":$('#ipt-phone').val()
  228. };
  229. $.ajax({
  230. type: 'post',
  231. url: base_path + '/qrcode/select_efast_order_num',
  232. data:data_array,
  233. dataType: 'json',
  234. xhrFields: {
  235. withCredentials: true
  236. },
  237. crossDomain: true,
  238. timeout: 15000,
  239. success: function(dt) {
  240. if (dt.status) {
  241. var num = dt.data.num;
  242. var txtTime = dt.data.txtTime;
  243. var text = '';
  244. if (dt.data.num > 0) {
  245. text = '您有'+ dt.data.num + '个订单,是否确认领取质保卡?';
  246. } else {
  247. mui.alert('未搜索到订单,请确认后提交,如有疑问,请联系公众号客服!');
  248. return;
  249. }
  250. var btnArray = ['否', '是'];
  251. mui.confirm(text, '提示', btnArray, function(e) {
  252. if (e.index == 1) {
  253. var data_all = {
  254. "phoneCode":$('#ipt-code').val(),
  255. "userName":$('#ipt-name').val(),
  256. "userTel":$('#ipt-phone').val(),
  257. "userEmail":$('#ipt-email').val(),
  258. "numberWatero":$('#ipt-water').attr('txtvalue'),
  259. "numberProvince":numberProvince,
  260. "numberCity":numberCity,
  261. "numberDistrict":numberDistrict,
  262. "txtTime":txtTime
  263. };
  264. $.ajax({
  265. type: 'post',
  266. url: base_path + '/qrcode/add_warranty_card',
  267. data:data_all,
  268. dataType: 'json',
  269. xhrFields: {
  270. withCredentials: true
  271. },
  272. crossDomain: true,
  273. timeout: 15000,
  274. success: function(dt) {
  275. if (dt.status) {
  276. mui.openWindow({
  277. url: '/wateroPF/view/warranty_card.html'
  278. })
  279. } else {
  280. mui.alert(dt.message);
  281. }
  282. },
  283. error: function(xhr, type, errorThrown) {
  284. mui.alert("请检查网络或刷新页面重试!");
  285. }
  286. });
  287. }
  288. });
  289. } else {
  290. mui.alert(dt.message);
  291. }
  292. },
  293. error: function(xhr, type, errorThrown) {
  294. mui.alert("请检查网络或刷新页面重试!");
  295. }
  296. });
  297. }else{
  298. console.log("未通过");
  299. mui.alert(alert_msg);
  300. }
  301. });
  302. $(document).on('tap', '#pull-code', function() {
  303. if($("#ipt-phone").val().trim()=="" &&(!$("#pull-code").hasClass("mui-active"))){
  304. mui.alert("请填写手机号码");
  305. return;
  306. }else{
  307. if(!mobile.test($("#ipt-phone").val().trim())){
  308. mui.alert("手机号码不正确,请重新填写");
  309. return;
  310. }else{
  311. if($(this).hasClass("mui-active")){
  312. mui.alert();
  313. return;
  314. }else{
  315. $(this).addClass("mui-active");
  316. $('#btn_submit').removeAttr("disabled");
  317. settime("pull-code");
  318. if(!window.localStorage) {
  319. alert("浏览器不支持localStorage");
  320. } else {
  321. var dates=new Date();
  322. //自定义json数据
  323. var obj = {
  324. "phone": $("#ipt-phone").val().trim(),
  325. "codeTime": countdown,
  326. "updateTime":parseInt(dates.getTime()/1000)
  327. };
  328. //json格式化插入
  329. localStorage.setItem('pull-code-data', JSON.stringify(obj));
  330. }
  331. // $.ajax({
  332. // type: 'post',
  333. // url: base_path + '/qrcode/send_phone_code',
  334. // data:{
  335. // "phone" : $("#ipt-phone").val()
  336. // },
  337. // dataType: 'json',
  338. // timeout: 15000,
  339. // success: function(dt) {
  340. // },
  341. // error: function(xhr, type, errorThrown) {
  342. // mui.alert("请检查网络或刷新页面重试!");
  343. // }
  344. // });
  345. }
  346. }
  347. }
  348. });
  349. function settime(val) {
  350. pullid=dc(val);
  351. if (countdown == 0) {
  352. pullid.removeAttribute("disabled");
  353. pullid.className='btn-pull-code';
  354. pullid.innerText="获取验证码";
  355. countdown = 60;
  356. return false;
  357. } else {
  358. countdown--;
  359. pullid.setAttribute("disabled","disabled");
  360. pullid.className='btn-pull-code mui-active';
  361. pullid.innerText="重新发送(" + countdown + ")";
  362. }
  363. setTimeout(function() {
  364. settime(val)
  365. },1000);
  366. if(!window.localStorage) {
  367. alert("浏览器不支持localStorage");
  368. } else {
  369. //检查值是否存在
  370. if(localStorage.getItem("pull-code-data") != null) {
  371. var dates=new Date();
  372. var codedata=JSON.parse(localStorage.getItem('pull-code-data'));
  373. var edit = JSON.stringify({
  374. "phone": codedata.phone,
  375. "codeTime": countdown,
  376. "updateTime":parseInt(dates.getTime()/1000)
  377. });
  378. //改,即重新给变量赋值
  379. localStorage.setItem("pull-code-data", edit);
  380. }
  381. }
  382. }
  383. function change_input() {
  384. //活动暂时结束 下次开启时注释这段代码就好了
  385. /*alert_msg="活动已暂停,开始时间请联系客服";
  386. check=false;
  387. return false;*/
  388. $(".mui-input-group input").each(function(index) {
  389. switch ($(this).attr("id")){
  390. case "ipt-name":
  391. if($(this).val().trim()==""){
  392. alert_msg="请填写姓名";
  393. check=false;
  394. return false;
  395. }else{
  396. if(uname.test($(this).val())) {
  397. check=true;
  398. }else{
  399. alert_msg="姓名格式不正确,请重新填写";
  400. check=false;
  401. return false;
  402. }
  403. }
  404. break;
  405. case "ipt-email":
  406. if($(this).val().trim()==""){
  407. alert_msg="请填写您的邮箱";
  408. check=false;
  409. return false;
  410. }else{
  411. if(email.test($(this).val())) {
  412. check=true;
  413. }else{
  414. alert_msg="邮箱格式不正确,请重新填写";
  415. check=false;
  416. return false;
  417. }
  418. }
  419. break;
  420. case "ipt-phone":
  421. if($(this).val().trim()==""){
  422. alert_msg="请填写手机号";
  423. check=false;
  424. return false;
  425. }else{
  426. if(mobile.test($(this).val().trim())) {
  427. check=true;
  428. }else{
  429. alert_msg="手机号码不正确,请重新填写";
  430. check=false;
  431. return false;
  432. }
  433. }
  434. break;
  435. case "ipt-code":
  436. if($(this).val().trim()==""){
  437. alert_msg="请填写验证码";
  438. check=false;
  439. return false;
  440. }else{
  441. if(code.test($(this).val().trim())) {
  442. check=true;
  443. }else{
  444. alert_msg="验证码格式不正确,请重新填写";
  445. check=false;
  446. return false;
  447. }
  448. }
  449. break;
  450. default:
  451. break;
  452. }
  453. });
  454. if(check) {
  455. console.log("通过")
  456. } else {
  457. console.log(alert_msg);
  458. }
  459. }
  460. //实时监听文本框字数
  461. document.getElementById("ipt-phone").addEventListener("input", function() {
  462. var phone = this.value;
  463. var mobile = /^(13|14|15|17|18)[0-9]{9}$/; //手机号码
  464. if(phone.length == 11) {
  465. if(mobile.test(phone) && countdown==60) {
  466. $("#pull-code").removeAttr("disabled");
  467. } else {
  468. $("#pull-code").attr("disabled", "disabled");
  469. }
  470. } else {
  471. $("#pull-code").attr("disabled", "disabled");
  472. $("#btn_submit").attr("disabled", "disabled");
  473. }
  474. });
  475. </script>
  476. </body>
  477. </html>