register-vip.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
  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/main.css" />
  12. <link rel="stylesheet" type="text/css" href="css/mui.picker.min.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="margin: 20px 0;text-align: center;">
  24. <div style="padding: 10px 0;">
  25. <span class="iconfont icon-chenggong" style="color: #3bbf64;font-size: 40px;"></span>
  26. </div>
  27. <h4> 已成功扫描唯一码 </h4>
  28. <p id="barCodeId"></p>
  29. <p>别忘了完善下方的会员信息</p>
  30. <p style="width: 60%;margin-left: 20%;">成功注册会员,您将获得延保服务,以及免费积分和刷头福利</p>
  31. <p style="width: 60%;margin-left: 20%;">“刷头兑换券”请移至上朵公众号【朵粉特供】→【福利社】领取</p>
  32. </div>
  33. <img width="100%" src="images/youhuiquan.jpg" />
  34. <div style="padding: 15px 10px;font-weight: bold;font-size: 15px;">
  35. 完善信息
  36. </div>
  37. <form class="mui-input-group">
  38. <div class="mui-input-row line-bottom">
  39. <label>您的姓名</label>
  40. <input type="text" maxlength="10" id="ipt-name" placeholder="填写您的姓名">
  41. </div>
  42. <div class="mui-input-row line-bottom" id="js-userBirthDate">
  43. <label>出生日期</label>
  44. <input type="text" id="newDate" readonly="readonly" placeholder="选择您的出生日期">
  45. </div>
  46. <div class="mui-input-row line-bottom">
  47. <label>手机号码</label>
  48. <input type="tel" id="ipt-phone" maxlength="11" placeholder="填写您的手机号码">
  49. </div>
  50. <div class="mui-input-row line-bottom" id="js-phone" style="display:none;">
  51. <label>验&nbsp;&nbsp;证&nbsp;&nbsp;码</label>
  52. <input style="width: 50% !important;float: left;" type="tel" placeholder="请输入验证码" maxlength="4" id="code"><button type="button" class="pull-code" disabled="disabled">获取验证码</button>
  53. </div>
  54. <div class="mui-table my-table" style="padding:15px 10px 0px 10px;">
  55. <div class="mui-table-cell mui-col-xs-2">
  56. <label>您的性别</label>
  57. </div>
  58. <div class="mui-table-cell mui-col-xs-3">
  59. <div class="mui-input-row mui-radio mui-left">
  60. <label>男</label>
  61. <input id="maleId" class="iconfont icon-boy" name="radio0" type="radio" checked="" value="1">
  62. </div>
  63. </div>
  64. <div class="mui-table-cell mui-col-xs-5">
  65. <div class="mui-input-row mui-radio mui-left">
  66. <label>女</label>
  67. <input id="femaleId" class="iconfont icon-girl" name="radio0" type="radio" value="2">
  68. </div>
  69. </div>
  70. </div>
  71. <!--<div class="mui-table my-table">
  72. <div class="mui-table-cell mui-col-xs-2">
  73. <label style="display: block;width: 60px;">您的年龄</label>
  74. </div>
  75. <div class="mui-table-cell mui-col-xs-3">
  76. <div class="mui-input-row mui-radio mui-left">
  77. <label class="my-label">80后</label>
  78. <input name="radio1" class="radio1" type="radio" checked="" value="1">
  79. </div>
  80. </div>
  81. <div class="mui-table-cell mui-col-xs-3">
  82. <div class="mui-input-row mui-radio mui-left">
  83. <label class="my-label">85后</label>
  84. <input name="radio1" class="radio1" type="radio" value="2">
  85. </div>
  86. </div>
  87. <div class="mui-table-cell mui-col-xs-3">
  88. <div class="mui-input-row mui-radio mui-left">
  89. <label class="my-label">90后</label>
  90. <input name="radio1" class="radio1" type="radio" value="3">
  91. </div>
  92. </div>
  93. </div>
  94. <div class="mui-table my-table" style="padding-bottom: 12px;">
  95. <div class="mui-table-cell mui-col-xs-2">
  96. <label></label>
  97. </div>
  98. <div class="mui-table-cell mui-col-xs-3">
  99. <div class="mui-input-row mui-radio mui-left">
  100. <label class="my-label">95后</label>
  101. <input name="radio1" class="radio1" type="radio" value="4">
  102. </div>
  103. </div>
  104. <div class="mui-table-cell mui-col-xs-3">
  105. <div class="mui-input-row mui-radio mui-left">
  106. <label class="my-label">00后</label>
  107. <input name="radio1" class="radio1" type="radio" value="5">
  108. </div>
  109. </div>
  110. <div class="mui-table-cell mui-col-xs-3">
  111. <div class="mui-input-row mui-radio mui-left">
  112. <label class="my-label">其他</label>
  113. <input name="radio1" class="radio1" type="radio" value="6">
  114. </div>
  115. </div>
  116. </div>-->
  117. <div class="mui-table my-table">
  118. <div class="mui-table-cell mui-col-xs-2">
  119. <label style="display: block;width: 60px;">购买渠道</label>
  120. </div>
  121. <div class="mui-table-cell mui-col-xs-3">
  122. <div class="mui-input-row mui-radio mui-left">
  123. <label class="my-label">天猫</label>
  124. <input name="radio2" class="radio2" type="radio" checked="" value="1">
  125. </div>
  126. </div>
  127. <div class="mui-table-cell mui-col-xs-3">
  128. <div class="mui-input-row mui-radio mui-left">
  129. <label class="my-label">微信</label>
  130. <input name="radio2" class="radio2" type="radio" value="4">
  131. </div>
  132. </div>
  133. <div class="mui-table-cell mui-col-xs-3">
  134. <div class="mui-input-row mui-radio mui-left">
  135. <label class="my-label">京东</label>
  136. <input name="radio2" class="radio2" type="radio" value="3">
  137. </div>
  138. </div>
  139. </div>
  140. <div class="mui-table my-table">
  141. <div class="mui-table-cell mui-col-xs-2">
  142. <label style="display: block;width: 60px;">&nbsp;</label>
  143. </div>
  144. <div class="mui-table-cell mui-col-xs-3">
  145. <div class="mui-input-row mui-radio mui-left">
  146. <label class="my-label">一条</label>
  147. <input name="radio2" class="radio2" type="radio" value="6">
  148. </div>
  149. </div>
  150. <div class="mui-table-cell mui-col-xs-3">
  151. <div class="mui-input-row mui-radio mui-left">
  152. <label class="my-label">小红书</label>
  153. <input name="radio2" class="radio2" type="radio" value="7">
  154. </div>
  155. </div>
  156. <div class="mui-table-cell mui-col-xs-3">
  157. <div class="mui-input-row mui-radio mui-left">
  158. <label class="my-label">其他</label>
  159. <input name="radio2" class="radio2" type="radio" value="5">
  160. </div>
  161. </div>
  162. </div>
  163. <div class="mui-input-row line-top">
  164. <label>购买日期</label>
  165. <input type="text" id="buyDate" readonly="readonly" placeholder="选择您的购买日期">
  166. </div>
  167. </form>
  168. <br />
  169. <div class="mui-content-padded mui-text-center">
  170. <button type="button" class="my-btn-black" id="my-btn-submit" style="width: 50%;">提交注册</button>
  171. </div>
  172. </div>
  173. <!-- 加载ing begin-->
  174. <div class="loading covers">
  175. <div class="loading-bj"></div>
  176. <p>正在加载...</p>
  177. </div>
  178. <!-- 加载ing end -->
  179. <script type="text/javascript" src="js/mui.min.js"></script>
  180. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  181. <script type="text/javascript" src="js/main.js"></script>
  182. <script src="js/mui.picker.min.js"></script>
  183. <script type="text/javascript">
  184. /*以前的电话号码*/
  185. var oldPhone;
  186. /*是否需要填写验证码 1:需要 2:不需要*/
  187. var isNeedPhone = 1;
  188. /*1需要填写,2不需要*/
  189. var isNeedBirthday = 1;
  190. window.addEventListener('pageshow', function(e) {
  191. // 通过persisted属性判断是否存在 BF Cache
  192. if(e.persisted) {
  193. location.reload();
  194. }
  195. });
  196. //实时监听文本框字数
  197. document.getElementById("ipt-phone").addEventListener("input", function() {
  198. var phone = this.value;
  199. if(phone == oldPhone){
  200. $("#js-phone").hide();
  201. isNeedPhone = 2;
  202. return false;
  203. }else{
  204. isNeedPhone = 1;
  205. $("#js-phone").show();
  206. }
  207. var mobile = /^(13|14|15|17|18)[0-9]{9}$/; //手机号码
  208. if(phone.length == 11) {
  209. if(mobile.test(phone) && countdown == 60) {
  210. $(".pull-code").removeAttr("disabled").addClass("active");
  211. } else {
  212. $(".pull-code").attr("disabled", "disabled").removeClass("active");
  213. }
  214. } else {
  215. $(".pull-code").attr("disabled", "disabled").removeClass("active");
  216. }
  217. });
  218. //发送验证码
  219. var validate_flag = false,
  220. show_msg = '';
  221. $(document).on('tap', '.pull-code', function() {
  222. var th = $(this);
  223. var mobile = /^(13|14|15|17|18)[0-9]{9}$/; //手机号码
  224. var phone = $("#ipt-phone").val();
  225. if(mobile.test(phone)) {
  226. settime(th);
  227. if(!window.sessionStorage) {
  228. mui.alert("您的浏览器不支持sessionStorage");
  229. } else {
  230. //自定义json数据
  231. var obj = {};
  232. obj["phone"] = phone;
  233. obj["codetime"] = new Date().getTime();
  234. //json格式化插入
  235. sessionStorage.setItem('code_data', JSON.stringify(obj));
  236. }
  237. //ajax
  238. $.ajax(base_path + '/wechat/apparatus/send_phone?dates=' + new Date().getTime(), {
  239. data: {
  240. "phone": phone
  241. },
  242. dataType: 'json',
  243. xhrFields: {
  244. withCredentials: true
  245. },
  246. crossDomain: true,
  247. type: 'get',
  248. timeout: 15000,
  249. success: function(dt) {
  250. //console.log(dt);
  251. if(dt.isRedirect) {
  252. location.href = dt.redirectURL;
  253. } else {
  254. if(dt.status) {
  255. console.log("获取短信成功!");
  256. } else {
  257. mui.alert("获取短信失败!请稍后重试");
  258. }
  259. }
  260. },
  261. error: function(xhr, type, errorThrown) {
  262. console.log(xhr);
  263. mui.alert("获取短信失败!网络错误");
  264. }
  265. });
  266. } else {
  267. if(phone != '') {
  268. show_msg = '手机号码格式不正确';
  269. } else {
  270. show_msg = '请填写手机号码';
  271. }
  272. mui.alert(show_msg);
  273. }
  274. });
  275. var countdown = 60;
  276. function settime(obj) {
  277. if(countdown <= 0) {
  278. obj.addClass("active").removeAttr("disabled");
  279. obj.text("获取验证码");
  280. countdown = 60;
  281. return;
  282. } else {
  283. obj.attr("disabled", true).removeClass("active");
  284. obj.text("重新发送" + countdown + "");
  285. countdown--;
  286. }
  287. setTimeout(function() {
  288. settime(obj)
  289. }, 1000)
  290. }
  291. //选择购买日期
  292. mui('body').on('tap', '#buyDate', function(event) {
  293. var date = new Date();
  294. var y = date.getFullYear();
  295. var m = date.getMonth(); //获取当前月份的日期
  296. var d = date.getDate();
  297. var picker = new mui.DtPicker({
  298. type: "date", //设置日历初始视图模式
  299. beginDate: new Date(2018, 00, 08), //设置开始日期
  300. endDate: new Date(y, m, d) //设置结束日期
  301. });
  302. picker.show(function(rs) {
  303. $("#buyDate").val(rs.text);
  304. picker.dispose();
  305. picker = null;
  306. });
  307. });
  308. //选择出生日期
  309. mui('body').on('tap', '#newDate', function(event) {
  310. var date = new Date();
  311. var y = date.getFullYear();
  312. var m = date.getMonth(); //获取当前月份的日期
  313. var d = date.getDate();
  314. var picker = new mui.DtPicker({
  315. type: "date", //设置日历初始视图模式
  316. beginDate: new Date(1949, 9, 01), //设置开始日期
  317. endDate: new Date((y - 8), 00, 01) //设置结束日期
  318. });
  319. picker.show(function(rs) {
  320. $("#newDate").val(rs.text);
  321. picker.dispose();
  322. picker = null;
  323. });
  324. });
  325. var qrCode = null;
  326. var isFocusOn = null;
  327. var userIdentity = null;
  328. mui.ready(function() {
  329. console.log("页面加载完毕");
  330. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  331. //获取机器条码 barcode
  332. qrCode = getParam("qrCode");
  333. var code_data = JSON.parse(sessionStorage.getItem('code_data'));
  334. if(code_data != null) {
  335. $("#ipt-phone").val(code_data.phone);
  336. if((new Date().getTime() - code_data.codetime) > 59000) {
  337. $(".pull-code").addClass("active").removeAttr("disabled");
  338. } else {
  339. countdown = parseInt(60 - ((new Date().getTime() - code_data.codetime) / 1000));
  340. console.log(countdown)
  341. settime($(".pull-code"));
  342. }
  343. }
  344. if(qrCode != null) {
  345. $("#barCodeId").html("(" + qrCode + ")");
  346. $.ajax(base_path + '/wechat/getActivationAndMember?dates=' + new Date().getTime(), {
  347. data: {
  348. "qrCode": qrCode //产品类型id
  349. },
  350. dataType: 'json',
  351. xhrFields: {
  352. withCredentials: true
  353. },
  354. crossDomain: true,
  355. type: 'get',
  356. timeout: 15000,
  357. success: function(dt) {
  358. if(dt.isRedirect) {
  359. location.href = dt.redirectURL;
  360. } else {
  361. if(dt.status) { //判断接口返回状态status
  362. if(dt.data.isActivation) {
  363. //已激活
  364. mui.alert('该产品已被激活!', '提醒', function() {
  365. location.href = "my-center.html";
  366. });
  367. }
  368. if(dt.data.memberInfo.userStatus != 2) {
  369. //未关注
  370. mui.alert('请先关注公众号再激活!', '提醒', function() {
  371. location.href = "follow-me-tooth.html";
  372. });
  373. }
  374. //填充用户数据
  375. $("#ipt-name").val(dt.data.memberInfo.userName);
  376. if(dt.data.memberInfo.userSex != null) {
  377. if(dt.data.memberInfo.userSex == 1) {
  378. $("#maleId").attr("checked", true);
  379. }
  380. if(dt.data.memberInfo.userSex == 2) {
  381. $("#femaleId").attr("checked", true);
  382. }
  383. }
  384. if(dt.data.memberInfo.userIdentity == 1 && dt.data.memberInfo.userBirthDate != null){
  385. $("#js-userBirthDate").hide();
  386. isNeedBirthday = 2;
  387. }else{
  388. isNeedBirthday = 1;
  389. }
  390. oldPhone = dt.data.memberInfo.userTel;
  391. if(oldPhone != null && oldPhone != "" && typeof(oldPhone) != "undefined"){
  392. $("#ipt-phone").val(oldPhone);
  393. isNeedPhone = 2;
  394. }else{
  395. $("#js-phone").show();
  396. isNeedPhone = 1;
  397. }
  398. var radios = $(".radio1");
  399. switch(dt.data.memberInfo.userAgeStage) {
  400. case(1):
  401. radios.eq(0).attr("checked", true);
  402. break;
  403. case(2):
  404. radios.eq(1).attr("checked", true);
  405. break;
  406. case(3):
  407. radios.eq(2).attr("checked", true);
  408. break;
  409. case(4):
  410. radios.eq(3).attr("checked", true);
  411. break;
  412. case(5):
  413. radios.eq(4).attr("checked", true);
  414. break;
  415. case(6):
  416. radios.eq(5).attr("checked", true);
  417. }
  418. isFocusOn = dt.data.memberInfo.userStatus;
  419. userIdentity = dt.data.memberInfo.userIdentity;
  420. } else {
  421. mui.alert("查询失败!");
  422. } }
  423. },
  424. error: function(xhr, type, errorThrown) {
  425. console.log(xhr);
  426. mui.alert("网络错误!");
  427. }
  428. });
  429. }
  430. });
  431. $(document).on('tap', '#my-btn-submit', function() {
  432. validate(); //验证文本框
  433. var userName = $("#ipt-name").val();
  434. var userSex = $('input[name="radio0"]:checked ').val();
  435. var userBirthDate = $('#newDate').val();
  436. var apparatusStore = $('input[name="radio2"]:checked').val();
  437. var buyDate = $("#buyDate").val();
  438. var tel = $("#ipt-phone").val();
  439. var code = $("#code").val();
  440. var  selectDate =  new  Date(Date.parse(buyDate));
  441. var  nowDate =  new  Date(Date.parse(new Date().toLocaleDateString()));
  442. //if(selectDate>nowDate){
  443. //mui.alert("购买日期不能大于当前日期");
  444. //return false;
  445. //}
  446. if(validate_flag) {
  447. //验证通过
  448. $.ajax(base_path + '/wechat/apparatus/add_apparatus?dates=' + new Date().getTime(), {
  449. data: {
  450. "barCode": qrCode, //条码
  451. "userName": userName, //用户姓名
  452. "userSex": userSex, //用户姓名
  453. "userTel": tel, //手机
  454. "code": code, //验证码
  455. "userBirthDate": userBirthDate, //出生日期
  456. "apparatusStore": apparatusStore, //渠道id 1:天猫 2:淘宝 3:京东 4:微信 5:其他 6:一条 7:小红书
  457. "buyDate": buyDate //购买日期
  458. },
  459. dataType: 'json',
  460. xhrFields: {
  461. withCredentials: true
  462. },
  463. crossDomain: true,
  464. type: 'get',
  465. timeout: 15000,
  466. success: function(dt) {
  467. if(dt.isRedirect) {
  468. location.href = dt.redirectURL;
  469. } else {
  470. if(dt.status) { //判断接口返回状态status
  471. mui.alert('注册成功!', '温馨提示', function() {
  472. if(userIdentity == 1) { //会员
  473. if(isFocusOn == 1 || isFocusOn == 0) { //未关注
  474. location.href = "member-follow-me.html";
  475. } else { //已关注
  476. $.ajax(base_path + '/wechat/coupon/getIsReceive?dates=' + new Date().getTime(), {
  477. data: {},
  478. dataType: 'json',
  479. xhrFields: {
  480. withCredentials: true
  481. },
  482. crossDomain: true,
  483. type: 'get',
  484. timeout: 15000,
  485. success: function(dt) {
  486. //console.log(dt);
  487. if(dt.isRedirect) {
  488. location.href = dt.redirectURL;
  489. } else {
  490. if(dt.status) {
  491. console.log("未领取!");
  492. location.href = "welfare-service.html";
  493. } else {
  494. console.log("已领取!");
  495. location.href = "my-center.html";
  496. }
  497. }
  498. },
  499. error: function(xhr, type, errorThrown) {
  500. console.log(xhr);
  501. }
  502. });
  503. }
  504. } else { //非会员
  505. if(isFocusOn == 1 || isFocusOn == 0) { //未关注
  506. location.href = "follow-me.html";
  507. } else { //已关注
  508. location.href = "welfare-service.html";
  509. }
  510. }
  511. });
  512. } else {
  513. mui.alert(dt.message, '温馨提示', function() {
  514. location.href = "my-center.html";
  515. });
  516. }
  517. }
  518. },
  519. error: function(xhr, type, errorThrown) {
  520. console.log(xhr);
  521. mui.alert("网络错误");
  522. }
  523. });
  524. } else {
  525. mui.alert(dalog_msg); //弹窗提示
  526. }
  527. });
  528. //正则表达式示例
  529. var dalog_msg = '',
  530. validate_flag = false;
  531. function validate() {
  532. var ch_en_num = /^[A-Za-z_\-\u4e00-\u9fa5]{2,10}$/; //简体中文英文(2-10位)
  533. var positive_int = /^[0-9]\d*$/; //正整数0-9
  534. var code_int = /^[0-9]{4}$/; //正整数0-9,4位数字
  535. var mobile = /^(13|14|15|17|18)[0-9]{9}$/; //手机号码
  536. var full_date = /^\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}$/; //日期格式 (2016\12\12,2016-12-12,2016.12.12)
  537. var name = $("#ipt-name").val().trim(),
  538. tel = $("#ipt-phone").val(),
  539. code = $("#code").val();
  540. validate_flag = false;
  541. if(!ch_en_num.test(name)) {
  542. //未通过验证
  543. if(name != '') {
  544. dalog_msg = '名字格式不正确';
  545. } else {
  546. dalog_msg = '请填写名字';
  547. }
  548. return dalog_msg;
  549. }
  550. //验证通过
  551. if($("#newDate").val() == null || $("#newDate").val() == "" ) {
  552. if(isNeedBirthday == 1){
  553. dalog_msg = '请选择出生日期';
  554. return dalog_msg;
  555. }
  556. }
  557. if(!mobile.test(tel)) {
  558. if(tel != '') {
  559. dalog_msg = '手机格式不正确';
  560. } else {
  561. dalog_msg = '请填写手机号码';
  562. }
  563. return dalog_msg;
  564. }
  565. if(isNeedPhone == 1){ //需要验证手机号码
  566. if(!code_int.test(code)) {
  567. if(code != '') {
  568. dalog_msg = '验证码格式不正确';
  569. } else {
  570. dalog_msg = '请填写验证码';
  571. }
  572. return dalog_msg;
  573. }
  574. }
  575. if($("#buyDate").val() == null || $("#buyDate").val() == "") {
  576. dalog_msg = '请选择购买日期';
  577. return dalog_msg;
  578. }
  579. validate_flag = true;
  580. return dalog_msg; //返回提示信息
  581. }
  582. </script>
  583. </body>
  584. </html>