<view class="apply-form">
<view class="apply-lt"> 手机号 </view>
<view class="apply-phone">
<input type="text" :value="info.telephone" name="telephone" placeholder="请输入手机号" placeholder-style="color:#bebebe" @input="formphone" maxlength="11" />
</view>
</view>
<view class="apply-form">
<view class="apply-lt"> 验证码 </view>
<view class="apply-code">
<input type="number" value="" name="sms_code" placeholder="请输入验证码" placeholder-style="color:#bebebe" maxlength="6" />
<view class="apply-code-btn">
<button type="default" v-if="getCode" @tap="sendMobileCode">获取</button>
<button style="color: #969696;background-color: #eee;" type="default acv-code-btn" v-else disabled="true">{{ sec + \'s\' }}</button>
</view>
</view>
</view>
<script>
var tools = require(\'utils/tools.js\');
export default {
data() {
return {
// 验证码
sec: \'60\',
getCode: true,
mobileNum:\'\'
}
},
methods: {
// 获取手机号
formphone(e) {
this.mobileNum = e.detail.value;
console.log(this.mobileNum)
},
//发送短信验证码
sendMobileCode() {
var mobileNum = this.mobileNum;
if (mobileNum.length == 0) {
uni.showToast({
title: \'请输入手机号\',
icon: \'none\'
});
return;
}
var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
if (!myreg.test(mobileNum) || mobileNum.length !== 11) {
uni.showToast({
title: \'请输入正确格式的手机号\',
icon: \'none\'
});
return;
}
tools.ajax.post(
\'\', {
mobile: mobileNum,
},
(err, res) => {
if (err) {
uni.showToast({
title: \'接口异常\',
icon: \'none\'
});
return;
}
if (res.data.code == 1) {
uni.showToast({
title: res.data.msg
});
this.get_code_time();
} else {
uni.showToast({
title: res.data.msg,
icon: \'none\'
});
}
}
);
},
// 发送短信验证码60秒倒计时
get_code_time() {
this.getCode = false;
this.get_code_interval = setInterval(() => {
--this.sec;
}, 1000);
setTimeout(() => {
clearInterval(this.get_code_interval);
this.getCode = true;
this.sec = \'60\';
}, 60000);
},
},
}
</script>
.apply-form {
display: flex;
justify-content: space-between;
width: calc(100% - 60rpx);
margin: auto;
padding: 25rpx 30rpx;
border-bottom: solid 0.5px #dfdfdf;
align-items: center;
}
.apply-lt {
font-size: 30rpx;
}
.apply-phone input {
text-align: right;
color: #333333;
font-size: 30rpx;
}
.apply-code {
display: flex;
justify-content: flex-end;
align-items: center;
}
.apply-code input {
text-align: right;
color: #333333;
font-size: 30rpx;
margin-right: 30rpx;
}
.apply-code-btn button {
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
background: #FF7E30;
color: #FFFFFF;
font-size: 24rpx;
}