for_client/src/global/components/hc-sms-auth/index.vue

<template>
    <hc-new-dialog v-model="showModal" title="短信认证" widths="26rem" @close="cancelClick">
        <el-form ref="reportFormRef" :model="reportModel" :rules="reportRules" label-width="auto" size="large">
            <el-form-item label="手机号码">
                <el-input v-model="phoneVal" disabled placeholder="手机号码" />
            </el-form-item>
            <el-form-item class="hc-input-button-group" label="验证码" prop="code">
                <el-input v-model="reportModel.code" placeholder="请输入验证码" />
                <el-button :disabled="isDisabled" size="large" type="primary" @click="getCodeClick">
                    {{ isDisabled ? `倒计时${currentTime}s` : '获取验证码' }}
                </el-button>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="cancelClick">
                    <HcIcon name="close" />
                    <span>取消</span>
                </el-button>
                <el-button :loading="isLoading" hc-btn type="primary" @click="confirmClick">
                    <HcIcon name="check" />
                    <span>确认</span>
                </el-button>
            </div>
        </template>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { saveSmsTimeout, sendNotice } from '~api/other'
import config from '~src/config/index'
import { formValidate } from 'js-fast-way'
//参数
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    loading: {
        type: Boolean,
        default: false,
    },
})

//事件
const emit = defineEmits(['cancel', 'confirm'])
//变量
const userStore = useAppStore()
const userInfo = ref(userStore.getUserInfo)
const phoneVal = ref(config.smsPhone + '' || userInfo.value.phone + '')
const showModal = ref(props.show)
const isLoading = ref(props.loading)

//监听
watch(() => [
    props.show,
    props.loading,
    userStore.getUserInfo,
], ([show, loading, user]) => {
    userInfo.value = user
    showModal.value = show
    isLoading.value = loading
})

//返回的验证码
const resCode = ref('')
//表单
const reportFormRef = ref(null)
const reportModel = ref({ code: null })
const reportRules = ref({
    code: {
        required: true,
        validator: (rule, value, callback) => {
            const code = resCode.value ?? ''
            if (!code) {
                callback(new Error('请先获取验证码'))
            } else if (!value) {
                callback(new Error('请输入验证码'))
            } else if (code !== value) {
                callback(new Error('验证码错误'))
            } else {
                callback()
            }
        },
        trigger: 'blur',
    },
})

//短信验证码
const isDisabled = ref(false) //是否开启倒计时
const totalTime = 60 //总时间，单位秒
const recordingTime = ref(0) //记录时间变量
const currentTime = ref(0) //显示时间变量

//获取短信验证码
const getCodeClick = async () => {
    const { error, code, msg } = await sendNotice({
        phone: phoneVal.value,
    }, false)
    //处理数据
    if (!error && code === 200 && msg) {
        resCode.value = msg
        //把显示时间设为总时间
        currentTime.value = totalTime
        //开始倒计时
        isDisabled.value = true
        //执行倒计时
        checkingTime()
        window?.$message?.success('发送成功')
    } else {
        resCode.value = ''
        window?.$message?.error(msg || '请求异常')
    }
}

//倒计时
const checkingTime = () => {
    //判断是否开启
    if (isDisabled.value) {
        //判断显示时间是否已到0，判断记录时间是否已到总时间
        if (currentTime.value > 0 && recordingTime.value <= totalTime) {
            //记录时间增加 1
            recordingTime.value++
            //显示时间，用总时间 - 记录时间
            currentTime.value = totalTime - recordingTime.value
            //1秒钟后，再次执行本方法
            setTimeout(() => {
                checkingTime()
            }, 1000)
        } else {
            //时间已完成，还原相关变量
            isDisabled.value = false		//关闭倒计时
            recordingTime.value = 0	//记录时间为0
            currentTime.value = totalTime	//显示时间为总时间
        }
    } else {
        //倒计时未开启，初始化默认变量
        isDisabled.value = false
        recordingTime.value = 0
        currentTime.value = totalTime
    }
}

//取消
const cancelClick = () => {
    emit('cancel')
}

//确认
const confirmClick = async () => {
    const validate = await formValidate(reportFormRef.value)
    if (validate) {
        saveSmsTimeoutApi().then()
        emit('confirm')
    }
}

//验证码过期时间
const saveSmsTimeoutApi = async () => {
    await saveSmsTimeout({
        code: resCode.value,
    })
}
</script>