<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-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-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 @change="captchaChange" 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() } }, //手机号改变事件 captchaChange(val) { this.$refs['form'].validateField("captcha") } } } </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>