You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.5 KiB
64 lines
1.5 KiB
<template>
|
|
<el-row type="flex" justify="center" class="mt-1">
|
|
<el-col :span="6">
|
|
<el-input v-model="code" ref="headline">
|
|
<template v-slot:prepend>验证码</template>
|
|
</el-input>
|
|
<span v-if="allowInput">请先发送验证码</span>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<el-button type="primary" :disabled="allowSendCode!==undefined&&!allowSendCode" @click="sendCode">{{
|
|
sendCodeTip
|
|
}}
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {computed, defineComponent, inject, Ref, ref} from "vue";
|
|
import {sendCode as _sendCode} from "../request";
|
|
import {email_cookie_key} from "../global";
|
|
// @ts-ignore
|
|
import crumbs from 'crumbsjs';
|
|
|
|
export default defineComponent({
|
|
name: "EmailCode",
|
|
props: {
|
|
allowSendCode: {
|
|
type: Boolean,
|
|
require: false
|
|
}
|
|
},
|
|
setup(props) {
|
|
|
|
const code = inject<Ref<string>>('code')
|
|
|
|
const second = inject<Ref<number>>('second')
|
|
|
|
const allowInput = ref<boolean>(true)
|
|
|
|
const sendCodeTip = computed<string>(() => second && second.value > 0 ? `${second.value}秒后重发` : `发送验证码`)
|
|
|
|
const userEmail = crumbs.get(email_cookie_key)
|
|
|
|
const headline = ref(null);
|
|
|
|
const sendCode = () => {
|
|
_sendCode(userEmail, _second => {
|
|
if (second) {
|
|
second.value = _second
|
|
}
|
|
}, () => {
|
|
allowInput.value = false
|
|
})
|
|
}
|
|
|
|
return {sendCodeTip, sendCode, code, allowInput, headline}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |