<!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/stylePhoneNumber.css" />
|
<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> -->
|
<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>
|
</head>
|
|
<body>
|
<div id="root">
|
<div style="color: #0E96FF;font-size: 0.34rem;line-height: 0.36rem;text-align: center;margin-top: 2rem;">
|
我们需要身份验证
|
</div>
|
<div style="color: #0E96FF;font-size: 0.34rem;line-height: 0.36rem;text-align: center;margin-top: 0.1rem;">
|
请使用绑定的手机号获取验证码
|
</div>
|
<div style="color: #333333;font-size: 0.48rem;margin-top: 0.1rem;margin-left: 0.72rem;margin-top: 1.09rem;">
|
注销账户
|
</div>
|
|
<div class="div_PhoneBG">
|
<div style="color: #000000;font-size: 0.28rem;margin-left: 0.72rem;height: 0.22rem; display: -webkit-flex;align-items: center;">
|
+86
|
</div>
|
<img src="img/arrow.png" style="width: 0.17rem;height: 0.25rem;margin-left: 0.2rem;margin-top: -0.03rem;">
|
<input type="tel" class="input" placeholder="请输入手机号" @input="onInput" maxlength="13" />
|
</div>
|
|
<div style="background-color: #0E96FF; height:1px;margin-left: 0.7rem;width: 5.8rem;margin-top: 0.05rem;"></div>
|
|
<div class="div_button" @click="fetchCode">
|
获取短信验证码
|
</div>
|
</div>
|
</body>
|
|
<script>
|
|
var host = "http://api.location.izzql.com:8090";
|
|
var phone = null;
|
|
$(function() {
|
|
var app = new Vue({
|
el: "#root",
|
data: {
|
|
},
|
methods: {
|
fetchCode: function() {
|
phone = $('.input').val().replace(/\s/g, '');
|
if (phone.length != 11) return;
|
app.sendMsg();
|
},
|
|
sendMsg: function() {
|
var params = {
|
phone: phone
|
};
|
|
ksbridge.call("getRequestBaseParams", params, function(res) {
|
params = JSON.parse(res);
|
ksbridge.call("showLoading");
|
$.ajax({
|
type: "POST",
|
data:params,
|
url: host + "/api/v1/sms/sendSMS",
|
dataType: "json",
|
async: false,
|
success: function(result) {
|
ksbridge.call("hideLoading");
|
if (result.code == 0) {
|
window.location.href = "fetchCode.html?phone=" + $('.input').val();
|
} else {
|
ksbridge.call("toast", {
|
msg: result.msg
|
});
|
}
|
},
|
error: function(XMLHttpRequest, textStatus, errorThrown) {
|
ksbridge.call("hideLoading");
|
if (textStatus === 'timeout') {
|
setTimeout(function() {}, 2000);
|
}
|
}
|
});
|
});
|
},
|
}
|
});
|
|
$('.input').on('keyup', function(e) {
|
var val = $(this).val();
|
if (val.length == 13) {
|
$('.div_button').css('background-color', '#0E96FF');
|
|
} else {
|
$('.div_button').css('background-color', '#7fc7ff');
|
}
|
// 按键为删除时要执行下面的判断，不然删除到第三位和第八位时又回加空格，一直循环。
|
if (e.keyCode === 8) {
|
$(this).val(val);
|
return;
|
}
|
if (val.length === 3 || val.length === 8) {
|
val += " ";
|
$(this).val(val);
|
}
|
})
|
});
|
</script>
|
|
</html>
|
