123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <title>添加质保卡</title>
- <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
- <link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
- <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
- <link rel="stylesheet" type="text/css" href="css/main.css" />
- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
- <script>
- //屏蔽分享
- document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
- WeixinJSBridge.call('hideOptionMenu');
- });
- </script>
- </head>
- <body>
- <div class="mui-content">
- <div style="position: relative;">
- <img width="100%" src="images/top-1.png" />
- <div style="position: absolute;left: 0; top: 45%;-webkit-transform: translateY(-50%);width: 100%;text-align: center;">
- <h4>现在完善产品信息</h4>
- <p>享受优质售后服务</p>
- </div>
- </div>
- <div class="mui-content-padded"><span class="iconfont icon-dingwei" style="font-size: 16px;color: #d78b82;"></span> 地址:<span id="wx-ads"></span></div>
- <form class="mui-input-group card-input-group">
- <div class="mui-input-row">
- <label>姓 名</label>
- <input type="text" class="mui-input-clear" placeholder="请填写您的收货姓名" id="ipt-name">
- </div>
- <div class="mui-input-row">
- <label>邮 箱</label>
- <input type="text" class="mui-input-clear" placeholder="请填写您的邮箱信息" id="ipt-email">
- </div>
- <div class="mui-input-row">
- <label>水 质</label>
- <input type="text" readonly="readonly" placeholder="请选择您的水质范围" id="ipt-water">
- <span class="mui-icon mui-icon-arrowdown" style="position: absolute;right: 7px;top:6px;color: #bbb;"></span>
- </div>
- <div class="mui-input-row">
- <label>手机号</label>
- <input type="tel" class="mui-input-clear" maxlength="11" placeholder="请填写您的手机号" id="ipt-phone">
- </div>
- <div class="mui-input-row">
- <label>验证码</label>
- <input style="width: 30%;float: left;" type="tel" maxlength="4" placeholder="填写验证码" id="ipt-code">
- <button class="btn-pull-code" disabled="disabled" type="button" id="pull-code">获取验证码</button>
- </div>
- </form>
- </div>
- <footer class="mui-bar mui-bar-tab">
- <button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="提交中" class="my-btn-submit" disabled="disabled" id="btn_submit">提交</button>
- </footer>
- <!-- 加载ing -->
- <div class="loading covers">
- <div class="loading-bj"></div>
- <p>加载中...</p>
- </div>
- <!-- 加载ing END -->
- <script src="js/mui.min.js"></script>
- <script src="js/mui.picker.min.js"></script>
- <script src="js/jquery-2.1.1.min.js"></script>
- <script src="js/main.js"></script>
- <script>
- var check = false,alert_msg='';
- var mobile=/^(13|14|15|18)[0-9]{9}$/; //手机号码
- var uname = /^[\u4e00-\u9fa5a-zA-Z]{1,12}$/; //中文英文
- var email=/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,18}$/;
- var code = /^[0-9]{4}$/; //数字
- var numberProvince = null;
- var numberCity = null;
- var numberDistrict = null;
- var countdown=60;
- var num = getParam("num");
- mui.ready(function(){
- if(!window.localStorage) {
- alert("浏览器不支持localStorage");
- } else {
- var codedata = JSON.parse(localStorage.getItem('pull-code-data'));
- if(codedata!=null){
- var dates=new Date();
- $("#ipt-phone").val(codedata.phone);
- if(codedata.codeTime>0){
- if(((dates.getTime()/1000)-codedata.updateTime)<codedata.codeTime){
- countdown=(codedata.codeTime-(parseInt(dates.getTime()/1000)-codedata.updateTime))+1;
- settime("pull-code");
- }else{
- $("#pull-code").removeAttr("disabled");
- }
- $('#btn_submit').removeAttr("disabled");
- }else{
- $("#pull-code").removeAttr("disabled");
- }
- }
- }
-
- //check_warranty();
- //选择示例
- var userPicker = new mui.PopPicker();
- userPicker.setData([{
- value: '1',
- text: '0-100 TDS'
- }, {
- value: '2',
- text: '101-250 TDS'
- }, {
- value: '3',
- text: '251-500 TDS'
- }, {
- value: '4',
- text: '501 TDS 以上 '
- }]);
- var showUserPickerButton = document.getElementById('ipt-water');
- showUserPickerButton.addEventListener('tap', function(event) {
- userPicker.show(function(items) {
- document.getElementById('ipt-water').value = items[0].text;
- $('#ipt-water').attr('txtvalue',items[0].value);
- var txt_message = '';
- switch (items[0].value) {
- case '1':
- txt_message = '您家水质良好。';
- break;
- case '2':
- txt_message = '您家水质偏差,WaterO可彻底净化,请使用柠檬酸每3个月清洗。';
- break;
- case '3':
- txt_message = '您家水质较差,WaterO可彻底净化,请使用柠檬酸每2个月清洗。';
- break;
- case '4':
- txt_message = '您家水质很差,WaterO可彻底净化,请使用柠檬酸每1个月清洗。';
- break;
- }
- $('#txt_message').html(txt_message);
- $('#div_message').show();
- });
- }, false);
- $(".loading").hide().css("opacity", "0");
- console.log(generateMixed(99));
- });
- function check_warranty() {
- if (num != 1) {
- window.location.href = base_path + '/qrcode/_add_warranty';
- }
- /*$.ajax({
- type: 'get',
- url: base_path + '/qrcode/check_warranty',
- dataType: 'json',
- timeout: 15000,
- success: function(dt) {
- if(dt.status){
- if (!dt.data) {
- mui.openWindow({
- url: '/wateroPF/view/guanzhu.html'
- })
- }
- } else {
- mui.openWindow({
- url: '/wateroPF/view/guanzhu.html'
- })
- }
- },
- error: function(xhr, type, errorThrown) {
- mui.openWindow({
- url: '/wateroPF/view/guanzhu.html'
- })
- console.log("请检查网络或刷新页面重试!");
- }
- });*/
- }
- /** wx.ready(function () {
- // 7.2 获取当前地理位置
- wx.getLocation({
- success: function (res) {
- var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
- var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
- var speed = res.speed; // 速度,以米/每秒计
- var accuracy = res.accuracy; // 位置精度
- getlocation(latitude,longitude);
- },
- cancel: function (res) {
- $("#wx-ads").text('定位失败');
- }
- });
- }); **/
- function getlocation(latitude,longitude){
- var data_array = {
- "latitude":latitude,
- "longitude":longitude
- };
- $.ajax({
- type: 'get',
- url: base_path + '/qrcode/get_location_by_qq',
- data:data_array,
- dataType: 'json',
- xhrFields: {
- withCredentials: true
- },
- crossDomain: true,
- timeout: 15000,
- success: function(dt) {
- if(dt.status){
- numberProvince = dt.data.numberProvince;
- numberCity = dt.data.numberCity;
- numberDistrict = dt.data.numberDistrict;
- $("#wx-ads").text(numberProvince+"-"+numberCity+"-"+numberDistrict);
- }
- },
- error: function(xhr, type, errorThrown) {
- console.log("请检查网络或刷新页面重试!");
- }
- });
- }
- mui('body').on('tap', '#btn_submit', function() {
- change_input();
- if(check){
- console.log("提交");
- mui(this).button('loading');
- setTimeout(function() {
- mui(this).button('reset');
- }.bind(this), 2000);
- //mui.alert("本批watero试用机为新机,请您在试用过程中足够爱惜,切勿刮划机身及损坏包装,感谢您的配合!");
- var data_array = {
- "userTel":$('#ipt-phone').val()
- };
- $.ajax({
- type: 'post',
- url: base_path + '/qrcode/select_efast_order_num',
- data:data_array,
- dataType: 'json',
- xhrFields: {
- withCredentials: true
- },
- crossDomain: true,
- timeout: 15000,
- success: function(dt) {
- if (dt.status) {
- var num = dt.data.num;
- var txtTime = dt.data.txtTime;
- var text = '';
- if (dt.data.num > 0) {
- text = '您有'+ dt.data.num + '个订单,是否确认领取质保卡?';
- } else {
- mui.alert('未搜索到订单,请确认后提交,如有疑问,请联系公众号客服!');
- return;
- }
- var btnArray = ['否', '是'];
- mui.confirm(text, '提示', btnArray, function(e) {
- if (e.index == 1) {
- var data_all = {
- "phoneCode":$('#ipt-code').val(),
- "userName":$('#ipt-name').val(),
- "userTel":$('#ipt-phone').val(),
- "userEmail":$('#ipt-email').val(),
- "numberWatero":$('#ipt-water').attr('txtvalue'),
- "numberProvince":numberProvince,
- "numberCity":numberCity,
- "numberDistrict":numberDistrict,
- "txtTime":txtTime
- };
- $.ajax({
- type: 'post',
- url: base_path + '/qrcode/add_warranty_card',
- data:data_all,
- dataType: 'json',
- xhrFields: {
- withCredentials: true
- },
- crossDomain: true,
- timeout: 15000,
- success: function(dt) {
- if (dt.status) {
- mui.openWindow({
- url: '/wateroPF/view/warranty_card.html'
- })
- } else {
- mui.alert(dt.message);
- }
- },
- error: function(xhr, type, errorThrown) {
- mui.alert("请检查网络或刷新页面重试!");
- }
- });
- }
- });
- } else {
- mui.alert(dt.message);
- }
- },
- error: function(xhr, type, errorThrown) {
- mui.alert("请检查网络或刷新页面重试!");
- }
- });
- }else{
- console.log("未通过");
- mui.alert(alert_msg);
- }
- });
- $(document).on('tap', '#pull-code', function() {
- if($("#ipt-phone").val().trim()=="" &&(!$("#pull-code").hasClass("mui-active"))){
- mui.alert("请填写手机号码");
- return;
- }else{
- if(!mobile.test($("#ipt-phone").val().trim())){
- mui.alert("手机号码不正确,请重新填写");
- return;
- }else{
- if($(this).hasClass("mui-active")){
- mui.alert();
- return;
- }else{
- $(this).addClass("mui-active");
- $('#btn_submit').removeAttr("disabled");
- settime("pull-code");
- if(!window.localStorage) {
- alert("浏览器不支持localStorage");
- } else {
- var dates=new Date();
- //自定义json数据
- var obj = {
- "phone": $("#ipt-phone").val().trim(),
- "codeTime": countdown,
- "updateTime":parseInt(dates.getTime()/1000)
- };
- //json格式化插入
- localStorage.setItem('pull-code-data', JSON.stringify(obj));
- }
- // $.ajax({
- // type: 'post',
- // url: base_path + '/qrcode/send_phone_code',
- // data:{
- // "phone" : $("#ipt-phone").val()
- // },
- // dataType: 'json',
- // timeout: 15000,
- // success: function(dt) {
- // },
- // error: function(xhr, type, errorThrown) {
- // mui.alert("请检查网络或刷新页面重试!");
- // }
- // });
- }
- }
- }
- });
-
- function settime(val) {
- pullid=dc(val);
- if (countdown == 0) {
- pullid.removeAttribute("disabled");
- pullid.className='btn-pull-code';
- pullid.innerText="获取验证码";
- countdown = 60;
- return false;
- } else {
- countdown--;
- pullid.setAttribute("disabled","disabled");
- pullid.className='btn-pull-code mui-active';
- pullid.innerText="重新发送(" + countdown + ")";
- }
- setTimeout(function() {
- settime(val)
- },1000);
-
- if(!window.localStorage) {
- alert("浏览器不支持localStorage");
- } else {
- //检查值是否存在
- if(localStorage.getItem("pull-code-data") != null) {
- var dates=new Date();
- var codedata=JSON.parse(localStorage.getItem('pull-code-data'));
- var edit = JSON.stringify({
- "phone": codedata.phone,
- "codeTime": countdown,
- "updateTime":parseInt(dates.getTime()/1000)
- });
- //改,即重新给变量赋值
- localStorage.setItem("pull-code-data", edit);
- }
- }
- }
- function change_input() {
- //活动暂时结束 下次开启时注释这段代码就好了
- /*alert_msg="活动已暂停,开始时间请联系客服";
- check=false;
- return false;*/
- $(".mui-input-group input").each(function(index) {
- switch ($(this).attr("id")){
- case "ipt-name":
- if($(this).val().trim()==""){
- alert_msg="请填写姓名";
- check=false;
- return false;
- }else{
- if(uname.test($(this).val())) {
- check=true;
- }else{
- alert_msg="姓名格式不正确,请重新填写";
- check=false;
- return false;
- }
- }
- break;
- case "ipt-email":
- if($(this).val().trim()==""){
- alert_msg="请填写您的邮箱";
- check=false;
- return false;
- }else{
- if(email.test($(this).val())) {
- check=true;
- }else{
- alert_msg="邮箱格式不正确,请重新填写";
- check=false;
- return false;
- }
- }
- break;
- case "ipt-phone":
- if($(this).val().trim()==""){
- alert_msg="请填写手机号";
- check=false;
- return false;
- }else{
- if(mobile.test($(this).val().trim())) {
- check=true;
- }else{
- alert_msg="手机号码不正确,请重新填写";
- check=false;
- return false;
- }
- }
- break;
- case "ipt-code":
- if($(this).val().trim()==""){
- alert_msg="请填写验证码";
- check=false;
- return false;
- }else{
- if(code.test($(this).val().trim())) {
- check=true;
- }else{
- alert_msg="验证码格式不正确,请重新填写";
- check=false;
- return false;
- }
- }
- break;
- default:
- break;
- }
- });
- if(check) {
- console.log("通过")
- } else {
- console.log(alert_msg);
- }
- }
-
- //实时监听文本框字数
- document.getElementById("ipt-phone").addEventListener("input", function() {
- var phone = this.value;
- var mobile = /^(13|14|15|17|18)[0-9]{9}$/; //手机号码
- if(phone.length == 11) {
- if(mobile.test(phone) && countdown==60) {
- $("#pull-code").removeAttr("disabled");
- } else {
- $("#pull-code").attr("disabled", "disabled");
- }
- } else {
- $("#pull-code").attr("disabled", "disabled");
- $("#btn_submit").attr("disabled", "disabled");
- }
- });
- </script>
- </body>
- </html>
|