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.
71 lines
2.2 KiB
71 lines
2.2 KiB
<template>
|
|
<el-row type="flex" justify="center">
|
|
<el-col :span="8">
|
|
<span>密码只能由数字和英文字母组成,长度最小{{ min }}最大{{ max }}</span>
|
|
<el-input v-model="password" show-password>
|
|
<template v-slot:prepend>新密码</template>
|
|
</el-input>
|
|
<span v-if="password!==''&&!checkPwd">新密码不合法</span>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row type="flex" justify="center" class="mt-1">
|
|
<el-col :span="8">
|
|
<el-input v-model="newPassword" show-password>
|
|
<template v-slot:prepend>确认新密码</template>
|
|
</el-input>
|
|
<span v-if="password!==''&&newPassword!==''&&password!==newPassword">两次密码输入不一致!</span>
|
|
</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="!(password!==''&&password===newPassword)"
|
|
@click="requestChangePwd">修改密码
|
|
</el-button>
|
|
</el-col>
|
|
<el-col :span="2"/>
|
|
<el-col :span="2">
|
|
<el-button type="info" class="btn-block" @click="$router.replace('/home')">返回</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {computed, defineComponent, ref} from "vue"
|
|
import {updateRoute} from "../router";
|
|
import {changePwd, message} from "../request";
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import {useStore} from "vuex";
|
|
|
|
const min = 5
|
|
const max = 10
|
|
const pwdRegExp = new RegExp(`^[0-9a-zA-Z]{5,10}$`)
|
|
|
|
export default defineComponent({
|
|
name: "Password",
|
|
setup(props) {
|
|
const password = ref<string>('')
|
|
const newPassword = ref<string>('')
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const store = useStore()
|
|
|
|
const checkPwd = computed<boolean>(() => pwdRegExp.test(password.value))
|
|
|
|
const requestChangePwd = () => changePwd(store.state.user.email, password.value).then(res => res.json())
|
|
.then(res => {
|
|
message(res)
|
|
if (res.result === 'OK') {
|
|
router.replace('/home')
|
|
}
|
|
})
|
|
|
|
updateRoute()
|
|
|
|
return {password, newPassword, checkPwd, min, max, requestChangePwd}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |