<template>
<div class="login-phone">
<el-form :model="form" :rules="formRules" ref="formRef">
<el-form-item prop="phone" v-if="isShowPhone">
<el-input
v-model="form.phone"
class="input-height"
clearable
:prefix-icon="hasIcon && icon.phone"
placeholder="请输入手机号"
type="text"
/>
</el-form-item>
<el-form-item prop="code" class="form-item">
<el-input
v-model="form.code"
:prefix-icon="hasIcon && icon.code"
type="text"
clearable
class="input-height"
placeholder="请输入验证码"
max="6"
/>
<el-button
@click="sendCodeFunc"
:loading="buttonLoading"
:disabled="form.codeTime !== 0 && sendButtonIsDisabled"
>
{{ getButtonTxt() }}
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { ElMessage } from 'element-plus'
import { defineComponent, reactive, ref, toRefs, watch } from 'vue'
const phoneRegular = /^1[0-9]{8}$/
export default defineComponent({
components: {},
props: {
//是否显示icon
hasIcon: {
type: Boolean,
default: false,
},
//图标
icon: {
type: Object,
default: () => ({
phone: 'el-icon-phone-outline',
code: 'el-icon-message',
}),
},
tips: {
type: Object,
default: () => ({
// 成功
success: '验证码发送成功！',
// 失败
fail: '验证码发送失败！',
// 冷却
coolingTime: '请耐心等待验证码！',
}),
},
//发送验证码期间是否禁用
sendButtonIsDisabled: {
type: Boolean,
default: false,
},
//是否显示手机号
isShowPhone: {
type: Boolean,
default: false,
},
//发送验证码方法
sendCode: {
type: Function,
default: () => {
// 默认方法
},
},
//手机号
phone: {
type: String,
default: '',
},
},
emit: ['sendFail'],
setup(props, { emit }) {
//表单数据
const form = reactive({
phone: '',
code: '',
isSendCode: false,
codeTime: 0,
})
//表单ref
const formRef = ref(null)
// 表单校验
const formRules = {
phone: [
{
required: true,
message: '请输入手机号',
},
{
pattern: phoneRegular,
message: '请输入正确的手机号',
},
],
code: [
{
validator: (rule, value, callback) => {
rule
const { isSendCode } = form
if (value === '') {
callback(new Error('请输入验证码'))
} else if (!isSendCode) {
callback(new Error('请先发送验证码'))
} else {
callback()
}
},
},
],
}
//监听
const { code, phone } = toRefs(form)
watch(
[code, phone],
newData => {
emit('update:modelValue', {
code: newData[0],
phone: props.isShowPhone ? newData[1] : props.phone,
})
},
{
deep: true,
}
)
//校验是否发送成功
const formValidateField = id => {
return new Promise(resolve => {
formRef.value.validateField(id, check => {
if (check === '') {
resolve(true)
} else {
resolve(false)
}
})
})
}
//按钮加载中
const buttonLoading = ref(false)
// 发送验证码
const sendCodeFunc = async () => {
const { fail, success, coolingTime } = props.tips
//如果时间还没到
if (form.codeTime !== 0) {
ElMessage.info(coolingTime)
return false
}
//手机号
let phoneNumber = ''
buttonLoading.value = true
//显示手机号
if (props.isShowPhone) {
const formValuidateValue = await formValidateField('phone')
if (formValuidateValue) {
phoneNumber = form.phone
// 校验成功
} else {
// 校验未成功
buttonLoading.value = false
return false
}
}
try {
//发送验证码
await props.sendCode(phoneNumber || props.phone)
//发送成功
ElMessage.success(success)
//发送验证码
form.isSendCode = true
//时间开始
form.codeTime = 60
//定时器
const time = () =>
setTimeout(() => {
form.codeTime -= 1
if (form.codeTime !== 0) {
time()
}
}, 1000)
//执行定时器
time()
//发送完毕
buttonLoading.value = false
//刷新code的校验
if (form.code) {
formRef.value.validateField('code')
}
} catch (error) {
emit('sendFail')
ElMessage.error(fail)
buttonLoading.value = false
}
}
//获取button的txt
const getButtonTxt = () => {
if (form.codeTime) {
return form.codeTime
} else if (buttonLoading.value) {
return '发送中'
} else if (form.isSendCode) {
return '重新发送'
} else {
return '发送验证码'
}
}
//校验
const formValidate = key => {
if (key) {
return formRef.value.validateField(key)
} else {
return formRef.value.validate()
}
}
return { form, formRules, sendCodeFunc, formRef, buttonLoading, getButtonTxt, formValidate }
},
})
</script>
<style lang="scss" scoped>
.login-phone {
width: 100%;
height: auto;
flex-shrink: 0;
}
</style>
<style lang="scss">
.login-phone {
.form-item .el-form-item__content {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
> .el-button {
width: 110px;
margin-left: 10px;
flex-shrink: 0;
}
}
.el-form-item {
margin-bottom: 22px;
}
}
</style>
