parent
c143deb551
commit
f3a09a0cde
@ -0,0 +1,71 @@ |
|||||||
|
<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> |
@ -1 +1,3 @@ |
|||||||
export const sendCodeApi='/api/change/email' |
export const sendCodeApi = '/api/change/email/code' |
||||||
|
export const changeEmailApi = '/api/change/email' |
||||||
|
export const changePwdApi = '/api/change/pwd' |
@ -1,22 +1,28 @@ |
|||||||
// 1. 定义路由组件.
|
import {createRouter, createWebHashHistory, useRoute} from "vue-router"; |
||||||
// 也可以从其他文件导入
|
|
||||||
import {createRouter, createWebHashHistory} from "vue-router"; |
|
||||||
import Email from "./components/Email.vue"; |
import Email from "./components/Email.vue"; |
||||||
import Home from "./components/Home.vue"; |
import Home from "./components/Home.vue"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import {onMounted} from "vue"; |
||||||
|
import Password from "./components/Password.vue"; |
||||||
|
|
||||||
|
|
||||||
// 2. 定义一些路由
|
|
||||||
// 每个路由都需要映射到一个组件。
|
|
||||||
// 我们后面再讨论嵌套路由。
|
|
||||||
const routes = [ |
const routes = [ |
||||||
{path:'/',component: Home}, |
{path: '/home', component: Home}, |
||||||
{path: '/email', component: Email}, |
{path: '/email', component: Email}, |
||||||
|
{path: '/password', component: Password} |
||||||
] |
] |
||||||
|
|
||||||
// 3. 创建路由实例并传递 `routes` 配置
|
|
||||||
// 你可以在这里输入更多的配置,但我们在这里
|
|
||||||
// 暂时保持简单
|
|
||||||
export const router = createRouter({ |
export const router = createRouter({ |
||||||
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
|
|
||||||
history: createWebHashHistory(), |
history: createWebHashHistory(), |
||||||
routes, // `routes: routes` 的缩写
|
routes |
||||||
|
}) |
||||||
|
|
||||||
|
export function updateRoute() { |
||||||
|
const store = useStore() |
||||||
|
const route = useRoute() |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
store.commit('updateRoute', route.fullPath) |
||||||
}) |
}) |
||||||
|
} |
||||||
|
Loading…
Reference in new issue