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

<template>
    <el-dialog v-model="showModal" title="短信认证" width="26rem" class="hc-modal-border" draggable destroy-on-close @closed="cancelClick">
        <el-form ref="reportFormRef" :model="reportModel" :rules="reportRules" label-width="auto" size="large">
            <el-form-item label="手机号码">
                <el-input v-model="phoneVal" placeholder="手机号码" disabled/>
            </el-form-item>
            <el-form-item class="hc-input-button-group" label="验证码" prop="code">
                <el-input v-model="reportModel.code" placeholder="请输入验证码"/>
                <el-button type="primary" size="large" @click="getCodeClick" :disabled="isDisabled">
                    {{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 type="primary" hc-btn :loading="isLoading" @click="confirmClick">
                    <HcIcon name="check"/>
                    <span>确认</span>
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {ref, watch} from "vue"
import {useAppStore} from "~src/store";
//import {sendNotice, saveSmsTimeout} 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 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 emit = defineEmits(['cancel', 'confirm'])

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

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

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