<!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>