|
@@ -2,23 +2,23 @@
|
|
|
<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-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-input v-model="reportModel.code" placeholder="请输入验证码" />
|
|
|
+ <el-button type="primary" size="large" :disabled="isDisabled" @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"/>
|
|
|
+ <HcIcon name="close" />
|
|
|
<span>取消</span>
|
|
|
</el-button>
|
|
|
<el-button type="primary" hc-btn :loading="isLoading" @click="confirmClick">
|
|
|
- <HcIcon name="check"/>
|
|
|
+ <HcIcon name="check" />
|
|
|
<span>确认</span>
|
|
|
</el-button>
|
|
|
</div>
|
|
@@ -27,27 +27,29 @@
|
|
|
</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 { 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"
|
|
|
+import { formValidate } from 'js-fast-way'
|
|
|
//参数
|
|
|
const props = defineProps({
|
|
|
show: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
loading: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
})
|
|
|
|
|
|
+//事件
|
|
|
+const emit = defineEmits(['cancel', 'confirm'])
|
|
|
//变量
|
|
|
const userStore = useAppStore()
|
|
|
-const userInfo = ref(userStore.getUserInfo);
|
|
|
+const userInfo = ref(userStore.getUserInfo)
|
|
|
const phoneVal = ref(config.smsPhone + '' || userInfo.value.phone + '')
|
|
|
const showModal = ref(props.show)
|
|
|
const isLoading = ref(props.loading)
|
|
@@ -56,8 +58,8 @@ const isLoading = ref(props.loading)
|
|
|
watch(() => [
|
|
|
props.show,
|
|
|
props.loading,
|
|
|
- userStore.getUserInfo
|
|
|
-], ([show, loading, user]) => {
|
|
|
+ userStore.getUserInfo,
|
|
|
+], ([show, loading, user]) => {
|
|
|
userInfo.value = user
|
|
|
showModal.value = show
|
|
|
isLoading.value = loading
|
|
@@ -67,7 +69,7 @@ watch(() => [
|
|
|
const resCode = ref('')
|
|
|
//表单
|
|
|
const reportFormRef = ref(null)
|
|
|
-const reportModel = ref({code: null})
|
|
|
+const reportModel = ref({ code: null })
|
|
|
const reportRules = ref({
|
|
|
code: {
|
|
|
required: true,
|
|
@@ -83,21 +85,21 @@ const reportRules = ref({
|
|
|
callback()
|
|
|
}
|
|
|
},
|
|
|
- trigger: "blur",
|
|
|
+ trigger: 'blur',
|
|
|
},
|
|
|
})
|
|
|
|
|
|
//短信验证码
|
|
|
-const isDisabled = ref(false) //是否开启倒计时
|
|
|
-const totalTime = 60 //总时间,单位秒
|
|
|
-const recordingTime = ref(0) //记录时间变量
|
|
|
-const currentTime = ref(0) //显示时间变量
|
|
|
+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)
|
|
|
+ const { error, code, msg } = await sendNotice({
|
|
|
+ phone: phoneVal.value,
|
|
|
+ }, false)
|
|
|
//处理数据
|
|
|
if (!error && code === 200 && msg) {
|
|
|
resCode.value = msg
|
|
@@ -106,12 +108,12 @@ const getCodeClick = async () => {
|
|
|
//开始倒计时
|
|
|
isDisabled.value = true
|
|
|
//执行倒计时
|
|
|
- checkingTime();
|
|
|
+ checkingTime()
|
|
|
window?.$message?.success('发送成功')
|
|
|
} else {
|
|
|
resCode.value = ''
|
|
|
window?.$message?.error(msg || '请求异常')
|
|
|
- }*/
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//倒计时
|
|
@@ -121,30 +123,27 @@ const checkingTime = () => {
|
|
|
//判断显示时间是否已到0,判断记录时间是否已到总时间
|
|
|
if (currentTime.value > 0 && recordingTime.value <= totalTime) {
|
|
|
//记录时间增加 1
|
|
|
- recordingTime.value ++;
|
|
|
+ recordingTime.value ++
|
|
|
//显示时间,用总时间 - 记录时间
|
|
|
- currentTime.value = totalTime - recordingTime.value;
|
|
|
+ currentTime.value = totalTime - recordingTime.value
|
|
|
//1秒钟后,再次执行本方法
|
|
|
setTimeout(() => {
|
|
|
- checkingTime();
|
|
|
+ checkingTime()
|
|
|
}, 1000)
|
|
|
} else {
|
|
|
//时间已完成,还原相关变量
|
|
|
- isDisabled.value = false; //关闭倒计时
|
|
|
- recordingTime.value = 0; //记录时间为0
|
|
|
- currentTime.value = totalTime; //显示时间为总时间
|
|
|
+ isDisabled.value = false //关闭倒计时
|
|
|
+ recordingTime.value = 0 //记录时间为0
|
|
|
+ currentTime.value = totalTime //显示时间为总时间
|
|
|
}
|
|
|
} else {
|
|
|
//倒计时未开启,初始化默认变量
|
|
|
- isDisabled.value = false;
|
|
|
- recordingTime.value = 0;
|
|
|
- currentTime.value = totalTime;
|
|
|
+ isDisabled.value = false
|
|
|
+ recordingTime.value = 0
|
|
|
+ currentTime.value = totalTime
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-//事件
|
|
|
-const emit = defineEmits(['cancel', 'confirm'])
|
|
|
-
|
|
|
//取消
|
|
|
const cancelClick = () => {
|
|
|
emit('cancel')
|
|
@@ -161,8 +160,8 @@ const confirmClick = async () => {
|
|
|
|
|
|
//验证码过期时间
|
|
|
const saveSmsTimeoutApi = async () => {
|
|
|
- /*await saveSmsTimeout({
|
|
|
- code: resCode.value
|
|
|
- });*/
|
|
|
+ await saveSmsTimeout({
|
|
|
+ code: resCode.value,
|
|
|
+ })
|
|
|
}
|
|
|
</script>
|