完成h5注册页面
This commit is contained in:
Dragon
45
view/peko/modules/register/index.html
Normal file
45
view/peko/modules/register/index.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>注册</title>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="phone">
|
||||
<div class="num">+86 </div>
|
||||
<input type="number">
|
||||
</div>
|
||||
<div class="code">
|
||||
<div class="num" id="count">獲取驗證碼</div>
|
||||
<input type="number">
|
||||
</div>
|
||||
<div class="but">提交</div>
|
||||
</div>
|
||||
<div class="pop_up">
|
||||
<div class="pop_up_in">
|
||||
<img src="./images/close.png" alt="">
|
||||
<p class="title">提交成功</p>
|
||||
<p class="content">申請結果會通過短信通知，請耐心等候</p>
|
||||
<div class="but">我知道了</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/pingpp.js"></script>
|
||||
<script src="../../common/js/common2.js?v=8.0"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/crypto-js.js"></script>
|
||||
<script src="./js/des.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
|
||||
</html>
|
||||
9
view/peko/modules/register/js/des.js
Normal file
9
view/peko/modules/register/js/des.js
Normal file
@@ -0,0 +1,9 @@
|
||||
//DES加密
|
||||
const encryptDes = (message, key) => {
|
||||
var keyHex = CryptoJS.enc.Utf8.parse(key);
|
||||
var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
});
|
||||
return encrypted.toString();
|
||||
}
|
||||
161
view/peko/modules/register/js/index.js
Normal file
161
view/peko/modules/register/js/index.js
Normal file
@@ -0,0 +1,161 @@
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加载中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
var browser = checkVersion();
|
||||
const urlPrefix = getUrlPrefix();
|
||||
var getUrl = getQueryString();
|
||||
var time = 59;
|
||||
var isClick = true;
|
||||
if (EnvCheck() == 'test') {//degBug
|
||||
new VConsole();
|
||||
}
|
||||
$(function () {
|
||||
getInfoFromClient();//请求依赖
|
||||
})
|
||||
function request (phone, num) {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/phone/auth/apply',
|
||||
data: {
|
||||
phone: `${phone}`,
|
||||
phoneAreaCode: num
|
||||
},
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$('.box .phone input').val('');
|
||||
$('.box .code input').val('');
|
||||
$('.pop_up').show();
|
||||
hideLoading(layerIndex)
|
||||
} else {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error () {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('網絡錯誤');
|
||||
}
|
||||
});
|
||||
}
|
||||
function getCode (num, phone, code) {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/sms/getCode',
|
||||
data: {
|
||||
mobile: encryptDes(`${num}${phone}`, "1ea53d260ecf11e7b56e00163e046a26"),
|
||||
type: 15,
|
||||
phoneAreaCode: num
|
||||
},
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
timerFun()
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(res.message)
|
||||
} else {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error () {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('網絡錯誤');
|
||||
}
|
||||
});
|
||||
}
|
||||
function verify (num, phone, code) {
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/sms/verify',
|
||||
data: {
|
||||
mobile: `${num}${phone}`,
|
||||
phoneAreaCode: num,
|
||||
code,
|
||||
},
|
||||
beforeSend: function (request) {
|
||||
},
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
request(phone, num)
|
||||
} else {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('網絡錯誤');
|
||||
}
|
||||
})
|
||||
}
|
||||
// 提交按钮
|
||||
$('.box .but').click(function () {
|
||||
var num = Number($('.box .phone .num').text().match(/\d+/)[0]);
|
||||
var phone = Number($('.box .phone input').val());
|
||||
var code = Number($('.box .code input').val());
|
||||
if (code == '') {
|
||||
toastMsg('請輸入驗證碼');
|
||||
} else {
|
||||
verify(num, phone, code)
|
||||
}
|
||||
})
|
||||
// 获取验证码按钮
|
||||
$('.box .code .num').click(function () {
|
||||
var num = Number($('.box .phone .num').text().match(/\d+/)[0]);
|
||||
var phone = Number($('.box .phone input').val());
|
||||
var code = Number($('.box .code input').val());
|
||||
if (isClick) {
|
||||
if (phone == '') {
|
||||
toastMsg('請輸入手機號');
|
||||
} else {
|
||||
getCode(num, phone, code);
|
||||
}
|
||||
} else {
|
||||
console.log('倒计时中');
|
||||
}
|
||||
})
|
||||
// 关闭弹窗
|
||||
$('.pop_up .pop_up_in img').click(function () {
|
||||
$('.pop_up').hide();
|
||||
})
|
||||
// 关闭弹窗
|
||||
$('.pop_up .pop_up_in .but').click(function () {
|
||||
$('.pop_up').hide();
|
||||
})
|
||||
|
||||
function timerFun () {
|
||||
// 开启定时器
|
||||
var timer = setInterval(function () {
|
||||
// 判断剩余秒数
|
||||
if (time == 0) {
|
||||
// 清除定时器和复原按钮
|
||||
clearInterval(timer);
|
||||
$('.box .code .num').text('獲取驗證碼');
|
||||
isClick = true;
|
||||
} else {
|
||||
$('.box .code .num').text(`${time}秒後重新獲取`);
|
||||
time--;
|
||||
isClick = false;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
Reference in New Issue
Block a user