<template>
|
<div class="loan-info-box">
|
<x-header slot="header"
|
style="width:100%;height:46px;background-color: #ec6758"
|
title="短信验证码"
|
:left-options="{backText: ''}"></x-header>
|
<div class="Code_ls">
|
<h4>为了您的账户安全，需要进行短信验证</h4>
|
<span>手机号码</span><span>{{userPhone}}</span>
|
</div>
|
<div id="code" class="code_input">
|
<x-input placeholder="请输入短信验证码"
|
:max="6"
|
:min="6"
|
type="tel"
|
v-model.trim="code"
|
@input.native="inputChange">
|
</x-input>
|
<span v-if="codeSecond===-1" @click="getCode">获取验证码</span>
|
<span v-else class="count">{{codeSecond}}秒后重发</span>
|
</div>
|
<div style="height: 20px"></div>
|
<box class="btn" gap="0 15px">
|
<x-button type="primary" link="BACK">上一步</x-button>
|
<x-button :type="code.length===6?'primary':''" :disabled="code.length!==6" @click.native="checkCode">确认贷款
|
</x-button>
|
</box>
|
<div style="height: 20px"></div>
|
</div>
|
</template>
|
|
<script>
|
import {XHeader, XInput, XButton, Box} from 'vux';
|
import validate from '../../../tool/validator';
|
import fToast from '../../../tool/fToast';
|
import SysApi from '../../../api/api'
|
import statusCodeManage from '../../../api/statusCodeManage';
|
|
export default {
|
name: 'loanMessage',
|
components: {XHeader, XInput, XButton, Box},
|
data() {
|
return {
|
code: '',//输入的验证码
|
codeSecond: -1,//验证码倒计时秒数
|
};
|
},
|
computed: {
|
userPhone() {
|
return validate.formatPhone(sessionStorage.newPhoneNum)
|
}
|
},
|
methods: {
|
//验证码输入框input事件，过滤非数字
|
inputChange() {
|
setTimeout(() => {
|
if (this.code) this.code = this.code.replace(/[^\d]/g, '');
|
}, 1);
|
},
|
//确认贷款按钮事件
|
checkCode() {
|
if (validate.checkValEmpty(this.code)) {
|
fToast.toast('请输入验证码');
|
return;
|
}
|
//调用校验验证码接口
|
SysApi.checkCode({
|
prodId: sessionStorage.prodId,
|
code: this.code,
|
codeType: 3
|
}).then(res => {
|
this.$router.push({path: '/bnd/loan/subSuccess'});
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
})
|
},
|
//发送验证码、验证码倒计时
|
getCode() {
|
this.codeSecond = 60;
|
let timer = setInterval(() => this.codeSecond === -1 ? clearInterval(timer) : this.codeSecond--, 1000);
|
//调用发送验证码接口
|
SysApi.resendCode({
|
prodId: sessionStorage.prodId,
|
codeType: 3
|
}).then(res => {
|
}, err => {
|
statusCodeManage.showTipOfStatusCode(err);
|
this.codeSecond = -1
|
})
|
},
|
},
|
activated() {
|
this.codeSecond = 60;
|
let timer = setInterval(() => this.codeSecond === -1 ? clearInterval(timer) : this.codeSecond--, 1000);
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import "../../../style/mixin.less";
|
|
.loan-info-box {
|
background-color: @color-background-default;
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
}
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.loan-info-box .weui-btn_primary:not(.weui-btn_disabled):active {
|
color: rgba(255, 255, 255, 0.6);
|
background-color: rgb(241, 95, 79);;
|
}
|
|
/*------------------------------*/
|
.Code_ls {
|
padding: 0.25rem 1.25rem;
|
h4 {
|
padding-bottom: 1.2rem;
|
padding-top: 1rem;
|
font-size: @font-size-medium;
|
font-weight: normal;
|
color: @color-text-primary;
|
}
|
span {
|
color: @color-text-third;
|
display: inline-block;
|
}
|
span:last-child {
|
margin-left: 0.5rem;
|
}
|
}
|
|
#code.code_input {
|
padding: 1rem 1.25rem;
|
background-color: @color-white !important;
|
font-size: @font-size-medium;
|
overflow: hidden;
|
.weui-cell {
|
margin: 0px;
|
padding: 0px;
|
width: 69%;
|
float: left;
|
.weui-cell__bd {
|
width: 70%;
|
display: inline-block;
|
}
|
.weui-cell__ft {
|
display: inline-block;
|
}
|
}
|
input {
|
border: none;
|
width: 100%;
|
text-align: left !important;
|
outline: none;
|
font-size: @font-size-medium;
|
}
|
span {
|
display: inline-block;
|
font-size: @font-size-medium;
|
color: @color-text-third;
|
padding: 0.25rem 0;
|
border-left: 1px solid @color-text-third;
|
text-align: center;
|
width: 30%;
|
float: left;
|
}
|
|
}
|
|
.weui-cell__ft button {
|
background-color: @color-white !important;
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
</style>
|
