<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8">
|
<title>验证手机号</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<link rel="stylesheet" type="text/css" href="./css/styleCode.css" />
|
<script>
|
window.onresize = function() {
|
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
|
};
|
window.onresize();
|
</script>
|
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
<script src="../js/app.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
<style type="text/css">
|
[v-cloak] {
|
display: none !important;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="root" v-cloak>
|
<div style="color: #333333;font-size: 0.5rem;height: 0.46rem;line-height: 0.46rem;margin-left: 0.75rem;margin-top: 3rem;">
|
请输入验证码
|
</div>
|
<div style="color: #444444;font-size: 0.26rem;height: 0.35rem;line-height: 0.25rem;margin-left: 0.74rem;margin-top: 0.3rem;">
|
验证码已发送至+86 {{phoneNumber}}
|
</div>
|
|
|
<div class="div_codeBG">
|
<input type="tel" class="input" style="margin-left: 0.75rem;" autofocus="autofocus" maxlength="1" />
|
<input type="tel" class="input" style="margin-left: 0.44rem;" maxlength="1" id="input_2" />
|
<input type="tel" class="input" style="margin-left: 0.44rem;" maxlength="1" id="input_3" />
|
<input type="tel" class="input" style="margin-left: 0.44rem;" maxlength="1" id="input_4" />
|
<input type="tel" class="input" style="margin-left: 0.44rem;" maxlength="1" id="input_5" />
|
<input type="tel" class="input" style="margin-left: 0.44rem;" maxlength="1" id="input_6" />
|
</div>
|
|
<div class="div_lineBG" style="display: -webkit-flex;margin-left: -1rem;">
|
<div style="height: 1px;width: 0.95rem;margin-left: 0.4rem;"></div>
|
<div style="height: 1px;width: 0.95rem;margin-left: 0.4rem;"></div>
|
<div style="height: 1px;width: 0.95rem;margin-left: 0.4rem;"></div>
|
<div style="height: 1px;width: 0.95rem;margin-left: 0.4rem;"></div>
|
<div style="height: 1px;width: 0.95rem;margin-left: 0.4rem;"></div>
|
<div style="height: 1px;width: 0.95rem;margin-left: 0.4rem;"></div>
|
</div>
|
|
<div style="color: #434343;font-size: 0.26rem;margin-left: 0.75rem;margin-top: 0.98rem;" @click="fetchCode">
|
<span style="color: #0E96FF;">{{time}}</span>{{desc}}
|
</div>
|
</div>
|
</body>
|
|
<script type="text/javascript">
|
function getQueryString(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
var r = window.location.search.substr(1).match(reg);
|
if (r != null) return unescape(r[2]);
|
return null;
|
};
|
</script>
|
<script>
|
var host = "http://api.location.izzql.com:8090";
|
|
var phone = getQueryString('phone');
|
var check = null;
|
var vcode = '';
|
var isTimerStart = true;
|
|
$(function() {
|
var app = new Vue({
|
el: "#root",
|
data: {
|
time: '60',
|
desc: '秒后重新发送验证码',
|
phoneNumber: ''
|
},
|
methods: {
|
fetchCode: function() {
|
if (isTimerStart) return;
|
sendMsg();
|
}
|
}
|
});
|
|
app.phoneNumber = phone;
|
var txts = $(".div_codeBG input");
|
for (var i = 0; i < txts.length; i++) {
|
var t = txts[i];
|
t.index = i;
|
//t.setAttribute("readonly", true);
|
t.onkeyup = function() {
|
if (event.keyCode == 8) { // 删除
|
vcode = '';
|
this.value = "";
|
var behand = this.index - 1;
|
if (behand < 0) return;
|
//txts[behand].removeAttribute("readonly");
|
txts[behand].focus();
|
|
} else {
|
this.value = this.value.replace(/^(.).*$/, '$1');
|
var next = this.index + 1;
|
|
if (next > txts.length - 1) {
|
txts[txts.length - 1].blur();
|
vcode = vcode + txts[0].value + +txts[1].value + txts[2].value + txts[3].value + txts[4].value + txts[5].value;
|
// yesApp.toast('ss')
|
checkCode();
|
return;
|
}
|
//txts[next].removeAttribute("readonly");
|
if (this.value) {
|
txts[next].focus();
|
}
|
}
|
}
|
}
|
//txts[0].removeAttribute("readonly");
|
function checkCode() {
|
|
|
ksbridge.call("getUid", function(res) {
|
ksbridge.call("showLoading");
|
var params = {
|
uid: res,
|
vcode: vcode,
|
phone: app.phoneNumber.replace(new RegExp(/( )/g),"")
|
};
|
|
ksbridge.call("getRequestBaseParams", params, function(res) {
|
params = JSON.parse(res);
|
$.ajax({
|
type: "POST",
|
data: params,
|
url: host + "/api/v1/user/unRegister",
|
dataType: "json",
|
async: false,
|
success: function(result) {
|
ksbridge.call("hideLoading");
|
if (result.code == 0) {
|
window.location.replace("result.html");
|
} else {
|
ksbridge.call("toast", {
|
msg: result.msg
|
});
|
}
|
},
|
error: function(XMLHttpRequest, textStatus, errorThrown) {
|
ksbridge.call("hideLoading");
|
if (textStatus === 'timeout') {
|
setTimeout(function() {}, 2000);
|
}
|
}
|
});
|
});
|
});
|
};
|
|
function sendMsg() {
|
yesApp.showLoading();
|
var uid = yesApp.getUid();
|
var params = {
|
uid: uid,
|
phone: phone
|
};
|
params = yesApp.getRequestBaseParams(params);
|
|
$.ajax({
|
type: "GET",
|
data: JSON.parse(params),
|
url: host + "/fanli/api/v1/sms/sendMSMRemove",
|
dataType: "jsonp",
|
async: false,
|
success: function(result) {
|
yesApp.hideLoading();
|
if (result.code == 0) {
|
isTimerStart = true;
|
app.time = '60';
|
app.desc = '秒后重新发送验证码';
|
setTimer();
|
yesApp.toast('' + result.data);
|
|
} else {
|
yesApp.toast(result.msg);
|
}
|
},
|
error: function(XMLHttpRequest, textStatus, errorThrown) {
|
yesApp.hideLoading();
|
if (textStatus === 'timeout') {
|
setTimeout(function() {}, 2000);
|
}
|
}
|
});
|
};
|
|
function setTime() {
|
app.time = app.time - 1;
|
};
|
|
function setTimer() {
|
var myVar = setInterval(function() {
|
setTime();
|
if (app.time == 0) {
|
stopTimer();
|
isTimerStart = false;
|
app.time = '';
|
app.desc = '发送验证码'
|
}
|
}, 1000);
|
check = myVar;
|
};
|
|
function stopTimer() {
|
clearInterval(check);
|
};
|
|
setTimer();
|
|
var platform = yesApp.getPlatform();
|
if (platform == 1) {
|
$('.input').css({
|
'width': '1rem',
|
})
|
|
$('#input_2').css({
|
'width': '1rem',
|
'margin-left': '0.44rem'
|
})
|
}
|
});
|
</script>
|
|
</html>
|
