99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<template>
|
|
<div class="password-page">
|
|
<t-form class="form" label-align="left">
|
|
<t-form-item label="旧密码">
|
|
<t-input v-model.trim="formModel.oldPassword" type="password" placeholder="旧密码" borderless />
|
|
</t-form-item>
|
|
<t-form-item label="新密码">
|
|
<t-input v-model.trim="formModel.newPassword" type="password" placeholder="新密码" borderless />
|
|
</t-form-item>
|
|
<t-form-item label="确认密码">
|
|
<t-input v-model.trim="formModel.confirmPassword" type="password" placeholder="确认密码" borderless />
|
|
</t-form-item>
|
|
</t-form>
|
|
<t-button class="save" theme="primary" :loading="isSaving" @click="savePassword">保存</t-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Toast } from "tdesign-mobile-vue";
|
|
import { UserAPI, useUserStore } from "timi-web";
|
|
|
|
defineOptions({
|
|
name: "ManagementPassword"
|
|
});
|
|
|
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
|
const isSaving = ref(false);
|
|
const formModel = reactive({
|
|
oldPassword: "",
|
|
newPassword: "",
|
|
confirmPassword: ""
|
|
});
|
|
|
|
async function savePassword(): Promise<void> {
|
|
if (!formModel.oldPassword || !formModel.newPassword) {
|
|
Toast({
|
|
theme: "warning",
|
|
direction: "row",
|
|
message: "请填写旧密码和新密码"
|
|
});
|
|
return;
|
|
}
|
|
if (formModel.newPassword !== formModel.confirmPassword) {
|
|
Toast({
|
|
theme: "warning",
|
|
direction: "row",
|
|
message: "两次输入的新密码不一致"
|
|
});
|
|
return;
|
|
}
|
|
isSaving.value = true;
|
|
try {
|
|
await UserAPI.updatePassword({
|
|
oldValue: formModel.oldPassword,
|
|
newValue: formModel.newPassword
|
|
});
|
|
userStore.clearLoginUser();
|
|
Toast({
|
|
theme: "success",
|
|
direction: "row",
|
|
message: "密码已更新，请重新登录"
|
|
});
|
|
await router.replace("/login");
|
|
} finally {
|
|
isSaving.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.password-page {
|
|
padding: calc(var(--app-nav-height) + 1rem) 0 4rem 0;
|
|
|
|
.form {
|
|
padding: .5rem 0;
|
|
background: rgba(255, 255, 255, .92);
|
|
box-shadow: var(--td-shadow-1);
|
|
border-radius: 1.4rem;
|
|
}
|
|
|
|
.save {
|
|
left: 1rem;
|
|
right: 1rem;
|
|
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
:global(html.theme-dark) {
|
|
.password-page {
|
|
.form {
|
|
background: rgba(15, 23, 42, .88);
|
|
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
|
}
|
|
}
|
|
}
|
|
</style>
|