<template>
|
<div>
|
<a-form-model ref="form" :model="model" :rules="validatorRules" class="password-retrieval-form" @keyup.enter.native="nextStep">
|
<a-form-model-item label="手机" required prop="phone" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
|
<a-row :gutter="16">
|
<a-col class="gutter-row" :span="20">
|
<a-input v-model="model.phone" type="text" autocomplete="false" placeholder="请输入手机号">
|
<a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)'}"/>
|
</a-input>
|
</a-col>
|
</a-row>
|
</a-form-model-item>
|
<a-form-model-item v-if="show" required prop="captcha" label="验证码" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
|
<a-row :gutter="16">
|
<a-col class="gutter-row" :span="12">
|
<a-input v-model="model.captcha" type="text" placeholder="手机短信验证码">
|
<a-icon slot="prefix" type="code" :style="{ color: 'rgba(0,0,0,.25)'}"/>
|
</a-input>
|
</a-col>
|
<a-col class="gutter-row" :span="8">
|
<a-button
|
tabindex="-1"
|
size="default"
|
:disabled="state.smsSendBtn"
|
@click.stop.prevent="getCaptcha"
|
v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
|
</a-col>
|
</a-row>
|
</a-form-model-item>
|
<a-form-model-item :wrapperCol="{span: 19, offset: 5}">
|
<router-link style="float: left;line-height: 40px;" :to="{ name: 'login' }">使用已有账户登录</router-link>
|
<a-button type="primary" @click="nextStep" style="margin-left: 20px">下一步</a-button>
|
</a-form-model-item>
|
</a-form-model>
|
</div>
|
</template>
|
|
<script>
|
import {postAction} from '@/api/manage'
|
|
export default {
|
name: "Step2",
|
props: ['userList'],
|
data() {
|
return {
|
model: {},
|
loading: false,
|
// accountName: this.userList.username,
|
dropList: "0",
|
captcha: "",
|
show: true,
|
state: {
|
time: 60,
|
smsSendBtn: false,
|
},
|
formLogin: {
|
captcha: "",
|
mobile: "",
|
},
|
validatorRules: {
|
phone: [
|
{ required: true, message: '请输入手机号码!' },
|
{ validator: this.validatePhone }
|
],
|
captcha: [
|
{ required: true, message: '请输入短信验证码!' }
|
]
|
},
|
}
|
},
|
computed: {
|
},
|
methods: {
|
nextStep() {
|
let that = this
|
that.loading = true
|
this.$refs['form'].validate((success) => {
|
if(success==true){
|
let params = {
|
phone: this.model.phone,
|
smscode: this.model.captcha
|
}
|
postAction("/sys/user/phoneVerification", params).then((res) => {
|
if (res.success) {
|
console.log(res);
|
let userList = {
|
username: res.result.username,
|
phone: params.phone,
|
smscode: res.result.smscode
|
};
|
setTimeout(function () {
|
that.$emit('nextStep', userList)
|
}, 0)
|
} else {
|
this.cmsFailed(res.message);
|
}
|
});
|
}
|
|
})
|
},
|
getCaptcha(e) {
|
e.preventDefault();
|
const that = this
|
that.$refs['form'].validateField('phone', err=>{
|
if(!err){
|
that.state.smsSendBtn = true;
|
let interval = window.setInterval(() => {
|
if (that.state.time-- <= 0) {
|
that.state.time = 60;
|
that.state.smsSendBtn = false;
|
window.clearInterval(interval);
|
}
|
}, 1000);
|
const hide = that.$message.loading('验证码发送中..', 0);
|
let smsParams = {
|
mobile: that.model.phone,
|
smsmode: "2"
|
};
|
postAction("/sys/sms", smsParams).then(res => {
|
if (!res.success) {
|
setTimeout(hide, 1);
|
that.cmsFailed(res.message);
|
}
|
setTimeout(hide, 500);
|
})
|
}else{
|
that.cmsFailed(err);
|
}
|
})
|
},
|
cmsFailed(err) {
|
this.$notification['error']({
|
message: "验证错误",
|
description: err,
|
duration: 4,
|
});
|
},
|
handleChangeSelect(value) {
|
var that = this;
|
console.log(value);
|
if (value == 0) {
|
that.dropList = "0";
|
that.show = true;
|
} else {
|
that.dropList = "1";
|
that.show = false;
|
}
|
},
|
validatePhone(rule,value,callback){
|
if(value){
|
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
|
if(!myreg.test(value)){
|
callback("请输入正确的手机号")
|
}else{
|
callback();
|
}
|
}else{
|
callback()
|
}
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.stepFormText {
|
margin-bottom: 24px;
|
}
|
|
.ant-form-item-label,
|
.ant-form-item-control {
|
line-height: 22px;
|
}
|
|
.getCaptcha {
|
display: block;
|
width: 100%;
|
height: 40px;
|
}
|
</style>
|
