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.
119 lines
3.2 KiB
119 lines
3.2 KiB
<!--修改邮箱-->
|
|
<template>
|
|
<el-row type="flex" justify="center">
|
|
<el-col :span="8">
|
|
<el-input v-model="userEmail" :disabled="true">
|
|
<template v-slot:prepend>当前邮箱</template>
|
|
</el-input>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row type="flex" justify="center" class="mt-1">
|
|
<el-col :span="8">
|
|
<el-input v-model="newEmail" :disabled="second>0">
|
|
<template v-slot:prepend>新邮箱</template>
|
|
</el-input>
|
|
<span v-if="userEmail === newEmail">新邮箱不能和当前邮箱一致</span>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row type="flex" justify="center" class="mt-1">
|
|
<el-col :span="6">
|
|
<el-input v-model="code">
|
|
<template v-slot:prepend>验证码</template>
|
|
</el-input>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<el-button type="primary" :disabled="!allowSendCode" @click="sendCode">{{ sendCodeTip }}</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row type="flex" justify="center" class="mt-1">
|
|
<el-col :span="2">
|
|
<el-button type="primary" class="btn-block" :disabled="!checkCode" @click="changeEmail">更换邮箱</el-button>
|
|
</el-col>
|
|
<el-col :span="2"/>
|
|
<el-col :span="2">
|
|
<el-button type="info" class="btn-block" @click="$router.replace('/config')">返回</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {computed, defineComponent, ref} from "vue";
|
|
|
|
import {changeEmail as _changeEmail, JSONResponse, message, sendCode as _sendCode} from "../request";
|
|
import {updateRoute} from "../router";
|
|
import {useRouter} from "vue-router";
|
|
import {emailRegexp} from "../validate";
|
|
// @ts-ignore
|
|
import crumbs from 'crumbsjs';
|
|
import {email_cookie_key} from "../global";
|
|
|
|
export default defineComponent({
|
|
name: 'Email',
|
|
setup(props) {
|
|
const newEmail = ref<string>('')
|
|
const code = ref<string>('')
|
|
|
|
const second = ref<number>(0)
|
|
|
|
const router = useRouter()
|
|
|
|
const userEmail = crumbs.get(email_cookie_key)
|
|
|
|
const sendCode = () => {
|
|
second.value = 10
|
|
|
|
|
|
_sendCode(userEmail).then(res => res.json()).then((res: JSONResponse) => {
|
|
message(res)
|
|
if (res.result === 'OK') {
|
|
console.info('发送验证码成功')
|
|
|
|
const t = setInterval(function () {
|
|
if (second.value === 0) {
|
|
clearInterval(t)
|
|
} else {
|
|
second.value--
|
|
}
|
|
}, 1000)
|
|
} else {
|
|
second.value = 0
|
|
}
|
|
})
|
|
}
|
|
|
|
const changeEmail = () => _changeEmail(userEmail, newEmail.value, code.value).then(res => res.json()).then(
|
|
res => {
|
|
message(res)
|
|
if (res.result === 'OK') {
|
|
router.replace('/config')
|
|
}
|
|
}
|
|
)
|
|
|
|
|
|
const allowSendCode = computed<boolean>(() => second.value === 0 && userEmail !== newEmail.value && emailRegexp.test(newEmail.value))
|
|
|
|
const sendCodeTip = computed<string>(() => second.value > 0 ? second.value + '秒后重发' : '发送验证码')
|
|
|
|
const checkCode = computed<boolean>(() => /^\d{6}$/.test(code.value))
|
|
|
|
updateRoute()
|
|
|
|
return {
|
|
newEmail,
|
|
code,
|
|
allowSendCode,
|
|
sendCodeTip,
|
|
checkCode,
|
|
second,
|
|
sendCode,
|
|
userEmail,
|
|
changeEmail
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |