384 lines
12 KiB
PHTML
384 lines
12 KiB
PHTML
<style>
|
|
.weui-form {
|
|
padding: 56px 0 0;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
line-height: 1.4;
|
|
min-height: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.weui-cell {
|
|
padding: 16px;
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
line-height: 1.41176471;
|
|
font-size: 17px;
|
|
color: rgba(0,0,0,0.9);
|
|
}
|
|
|
|
.weui-form__text-area {
|
|
padding: 0 32px;
|
|
color: #000000;
|
|
text-align: center;
|
|
}
|
|
|
|
.weui-form__control-area {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
margin: 48px 0;
|
|
}
|
|
|
|
.weui-cells__group_form .weui-cells {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.weui-cells__group_form .weui-cell {
|
|
padding: 16px 16px;
|
|
}
|
|
|
|
[class*=" weui-icon-"] {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-size: 10px;
|
|
width: 2.4em;
|
|
height: 2.4em;
|
|
-webkit-mask-position: 50% 50%;
|
|
mask-position: 50% 50%;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100%;
|
|
mask-size: 100%;
|
|
background-color: currentColor;
|
|
}
|
|
|
|
.weui-cells__group_form .weui-cell_vcode.weui-cell_wrap .weui-input {
|
|
font-size: 17px;
|
|
min-height: 1.88235294em;
|
|
}
|
|
|
|
.weui-cells__group_form input, .weui-cells__group_form textarea, .weui-cells__group_form label[for] {
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
}
|
|
.weui-input {
|
|
width: 100%;
|
|
border: 0;
|
|
outline: 0;
|
|
-webkit-appearance: none;
|
|
background-color: transparent;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
height: 1.41176471em;
|
|
line-height: 1.41176471;
|
|
}
|
|
|
|
.weui-cells__group_form .weui-vcode-btn {
|
|
font-size: 16px;
|
|
padding: 0 12px;
|
|
height: auto;
|
|
width: auto;
|
|
line-height: 2;
|
|
border-radius: 6px;
|
|
color: #06ae56;
|
|
background-color: #f2f2f2;
|
|
}
|
|
button.weui-vcode-btn {
|
|
background-color: transparent;
|
|
border: 0;
|
|
outline: 0;
|
|
}
|
|
button.weui-btn, input.weui-btn {
|
|
border-width: 0;
|
|
outline: 0;
|
|
-webkit-appearance: none;
|
|
}
|
|
.weui-vcode-btn {
|
|
display: inline-block;
|
|
height: 56px;
|
|
margin-left: 5px;
|
|
padding: 0 0.6em 0 0.7em;
|
|
line-height: 56px;
|
|
vertical-align: middle;
|
|
font-size: 17px;
|
|
color: #576b95;
|
|
position: relative;
|
|
}
|
|
.weui-btn_default {
|
|
color: #06ae56;
|
|
background-color: #f2f2f2;
|
|
}
|
|
.weui-btn {
|
|
position: relative;
|
|
display: block;
|
|
width: 184px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 8px 24px;
|
|
box-sizing: border-box;
|
|
font-weight: 700;
|
|
font-size: 17px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
line-height: 1.88235294;
|
|
border-radius: 8px;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.form_vcode {
|
|
height: 85vh;
|
|
}
|
|
|
|
.weui-cells__group_form .weui-cell_vcode.weui-cell_wrap .weui-label {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.page.form_input_status .weui-label, .page.form_vcode .weui-label {
|
|
width: 3.14em;
|
|
}
|
|
.weui-cells__group_form .weui-cell_wrap .weui-label {
|
|
margin-top: 8px;
|
|
}
|
|
.weui-cells__group_form input, .weui-cells__group_form textarea, .weui-cells__group_form label[for] {
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
}
|
|
.weui-cells__group_form .weui-label {
|
|
max-width: 5em;
|
|
margin-right: 8px;
|
|
}
|
|
.weui-cells__group_form .weui-cell__control {
|
|
margin: 8px 0 8px 16px;
|
|
}
|
|
|
|
.weui-btn {
|
|
position: relative;
|
|
display: block;
|
|
width: 184px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 8px 24px;
|
|
box-sizing: border-box;
|
|
font-weight: 700;
|
|
font-size: 17px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
line-height: 1.88235294;
|
|
border-radius: 8px;
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.weui-toast {
|
|
position: fixed;
|
|
z-index: 5500;
|
|
font-size: 10px;
|
|
width: 13.6em;
|
|
height: 13.6em;
|
|
top: 40%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
text-align: center;
|
|
border-radius: 12px;
|
|
color: rgba(255,255,255,0.9);
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
background-color: #4c4c4c;
|
|
box-sizing: border-box;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.weui-toast_text {
|
|
width: auto;
|
|
height: auto;
|
|
min-width: 152px;
|
|
max-width: 216px;
|
|
padding: 12px 0;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.weui-toast_text .weui-toast__content {
|
|
font-size: 14px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.weui-btn[disabled] {
|
|
color: rgba(0,0,0,0.2);
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
</style>
|
|
<div class="page form_vcode js_show" tabindex="-1">
|
|
<input type="hidden" value="<?= $openid ?>" id="input-openid">
|
|
<div class="weui-form">
|
|
<div class="weui-form__text-area">
|
|
<h2 class="weui-form__title">手机号绑定</h2>
|
|
<!-- <div class="weui-form__desc" id="">--><?//= $openid ?><!--</div>-->
|
|
</div>
|
|
<div class="weui-form__control-area">
|
|
<div class="weui-cells__group weui-cells__group_form">
|
|
<div class="weui-cells">
|
|
<div class="weui-cell weui-cell_active">
|
|
<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
|
|
<span class="weui-cell__control">+86</span>
|
|
<div class="weui-cell__bd">
|
|
<input id="input-mobile" class="weui-input weui-cell__control" type="number" placeholder="请输入手机号" value="">
|
|
</div>
|
|
</div>
|
|
<div class="weui-cell weui-cell_active">
|
|
<div class="weui-cell__hd"><label for="js_input1" class="weui-label">验证码</label></div>
|
|
<div class="weui-cell__bd">
|
|
<input id="input-captcha" class="weui-input weui-cell__control" type="number" pattern="[0-9]*" placeholder="请输入验证码" value="">
|
|
</div>
|
|
<div class="weui-cell__ft">
|
|
<button id="captchaBtn" role="button" onclick="getCaptcha()" class="js_target weui-cell__control weui-btn weui-btn_default weui-vcode-btn weui-btn_loading">获取验证码</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="weui-form__opr-area">
|
|
<!-- <button class="weui-btn weui-btn_primary" type="button" style="width: 184px" id="submitBtn" onclick="submit()"><i class="weui_icon_msg weui_icon_success"></i>确定</button>-->
|
|
<button disabled class="weui-btn weui-btn_primary" type="button" style="width: 184px" id="submitBtn" onclick="submit()"><i class="weui_icon_msg weui_icon_success"></i>确定</button>
|
|
</div>
|
|
</div>
|
|
<div role="alert" id="textToast" style="opacity:0;display: none;">
|
|
<div class="weui-mask_transparent"></div>
|
|
<div class="weui-toast weui-toast_text">
|
|
<p class="weui-toast__content">文字提示</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
//ajax post请求获取接口数据
|
|
var ajaxPost = function (reqUrl, params, callback, async) {
|
|
var xhr = null;
|
|
if(window.XMLHttpRequest) {
|
|
xhr = new XMLHttpRequest();
|
|
} else if(window.ActiveXObject) {
|
|
xhr = new ActiveXObject("Microsoft.XMLHTTP");
|
|
}
|
|
if(!xhr) { return false;}
|
|
if (async && callback) {
|
|
xhr.addEventListener('readystatechange', function () {
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
callback(JSON.parse(xhr.responseText));
|
|
}
|
|
});
|
|
}
|
|
xhr.open('post', reqUrl, async);
|
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
|
var strArr = [];
|
|
for(var k in params) {
|
|
strArr.push(k + "=" + params[k]);
|
|
}
|
|
var data = strArr.join("&");
|
|
xhr.send(data);
|
|
if (!async) {
|
|
return xhr.responseText;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 获取手机号验证码
|
|
*/
|
|
function getCaptcha() {
|
|
let mobile = document.getElementById('input-mobile').value;
|
|
|
|
if (!mobile || !/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(mobile)) {
|
|
topTips('请输入正确的手机号')
|
|
return
|
|
}
|
|
|
|
ajaxPost('<?= $host ?>' + '/wechat/bind-captcha', {
|
|
'mobile': document.getElementById('input-mobile').value,
|
|
'openid': document.getElementById('input-openid').value,
|
|
}, (e) => {
|
|
if (e.code === 200) {
|
|
topTips('验证码发送成功', 'success')
|
|
setTimer();
|
|
// 让确定按键可以点
|
|
document.getElementById('submitBtn').attributes.removeNamedItem('disabled')
|
|
// 发验证码了就不让改手机号
|
|
document.getElementById('input-mobile').attributes.setNamedItem(document.createAttribute('disabled'))
|
|
} else {
|
|
topTips(e.msg)
|
|
}
|
|
}, true)
|
|
}
|
|
|
|
// 计时器句柄
|
|
let timerHandler = 0;
|
|
|
|
// 发送验证码速率
|
|
let totalTimer = 60;
|
|
|
|
function setTimer() {
|
|
const el = document.getElementById('captchaBtn');
|
|
let attr = document.createAttribute('disabled')
|
|
el.attributes.setNamedItem(attr)
|
|
|
|
if (timerHandler) {
|
|
clearInterval(timerHandler)
|
|
totalTimer = 60
|
|
}
|
|
|
|
el.textContent = `获取验证码(${totalTimer}S)`;
|
|
timerHandler = setInterval(() => {
|
|
totalTimer--;
|
|
el.textContent = `获取验证码(${totalTimer}S)`;
|
|
if (totalTimer === 0) {
|
|
clearInterval(timerHandler)
|
|
el.textContent = `获取验证码`;
|
|
el.attributes.removeNamedItem('disabled')
|
|
}
|
|
}, 1000)
|
|
}
|
|
|
|
function submit() {
|
|
document.getElementById('submitBtn').attributes.setNamedItem(document.createAttribute('disabled'))
|
|
ajaxPost('<?= $host ?>' + '/wechat/bind-submit', {
|
|
'mobile': document.getElementById('input-mobile').value,
|
|
'captcha': document.getElementById('input-captcha').value,
|
|
'openid': document.getElementById('input-openid').value,
|
|
}, (e) => {
|
|
if (e.code === 200) {
|
|
alert('绑定成功');
|
|
WeixinJSBridge.call('closeWindow');
|
|
} else {
|
|
topTips(e.msg)
|
|
}
|
|
document.getElementById('submitBtn').attributes.removeNamedItem('disabled')
|
|
}, true)
|
|
}
|
|
|
|
</script>
|