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.
110 lines
3.1 KiB
110 lines
3.1 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>
|
|
</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">更换邮箱</el-button>
|
|
</el-col>
|
|
<el-col :span="2"/>
|
|
<el-col :span="2">
|
|
<el-button type="info" class="btn-block">返回</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {computed, defineComponent, ref} from "vue";
|
|
|
|
import {changeEmail as _changeEmail, sendCode as _sendCode} from "../request";
|
|
import {useStore} from "vuex";
|
|
import {Message} from 'element3/src/components/Message'
|
|
|
|
export default defineComponent<{ userEmail: { require: boolean, type: StringConstructor }, second: { require: boolean, type: NumberConstructor } }>({
|
|
name: 'Email',
|
|
setup(props) {
|
|
const newEmail = ref<string>('')
|
|
const code = ref<string>('')
|
|
|
|
const second = ref<number>(0)
|
|
|
|
const store=useStore()
|
|
|
|
const sendCode = () => {
|
|
second.value=10
|
|
_sendCode(store.state.user.email).then(res=>res.json()).then(res=>{
|
|
if(res.result==='OK'){
|
|
console.info('发送验证码成功')
|
|
new Message({
|
|
showClose: true,
|
|
message: '发送验证码成功',
|
|
type: 'success'
|
|
})
|
|
|
|
const t=setInterval(function (){
|
|
if(second.value===0){
|
|
clearInterval(t)
|
|
}else {
|
|
second.value--
|
|
}
|
|
},1000)
|
|
}else{
|
|
second.value=0
|
|
new Message({
|
|
showClose: true,
|
|
message: '发送验证码失败',
|
|
type: 'error'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const changeEmail=()=> _changeEmail(store.state.user.email,newEmail.value,code.value)
|
|
|
|
const allowSendCode = computed<boolean>(() => second.value === 0 && props.userEmail !== newEmail.value && /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(newEmail.value))
|
|
|
|
const sendCodeTip = computed<string>(() => second.value > 0 ? second.value + '秒后重发' : '发送验证码')
|
|
|
|
const checkCode = computed<boolean>(() => /^\d{6}$/.test(code.value))
|
|
|
|
const userEmail= computed(() => store.state.user.email)
|
|
|
|
return {
|
|
newEmail,
|
|
code,
|
|
allowSendCode,
|
|
sendCodeTip,
|
|
checkCode,
|
|
second,
|
|
sendCode,
|
|
userEmail,
|
|
changeEmail
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |