99 lines
3.8 KiB
Vue
99 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useAppStore } from '@/store/modules/app';
|
|
import { Icon } from '@iconify/vue'
|
|
import { useThemeStore } from '@/store/modules/theme';
|
|
import { useRouterPush } from '@/hooks/common/router';
|
|
import { changePasswordApi } from '@/service/api/user';
|
|
|
|
const appStore = useAppStore();
|
|
const themeStore = useThemeStore();
|
|
const { toLogin } = useRouterPush();
|
|
const gap = computed(() => (appStore.isMobile ? 0 : 16));
|
|
|
|
const formModel = ref<{oldPassword: string;password: string;confirmPassword: string;}>({
|
|
oldPassword: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
});
|
|
const rules = {
|
|
oldPassword: [{ required: true, message: '请输入旧密码', trigger: ['blur'] }],
|
|
password: [{ required: true, message: '请输入新密码', trigger: ['blur'] }],
|
|
confirmPassword: [{ validator: (rule: any, value: string, callback: any) => {
|
|
if (value !== formModel.value.password) {
|
|
callback(new Error('两次输入密码不一致'));
|
|
} else {
|
|
callback();
|
|
}
|
|
}, required: true, message: '两次输入密码不一致', trigger: ['blur'] }],
|
|
}
|
|
|
|
const formRef = ref<any>(null);
|
|
const btnLoading = ref<boolean>(false);
|
|
|
|
const submitForm = async (e: MouseEvent) => {
|
|
e.preventDefault()
|
|
formRef.value?.validate(async (errors: any) => {
|
|
if (!errors) {
|
|
btnLoading.value = true;
|
|
const {error} = await changePasswordApi({
|
|
oldPassword: formModel.value.oldPassword,
|
|
password: formModel.value.password,
|
|
});
|
|
if(!error){
|
|
window.$message?.success('修改成功')
|
|
toLogin();
|
|
}
|
|
btnLoading.value = false;
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NSpace vertical :size="16">
|
|
<!-- 修改密码 -->
|
|
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
|
<div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
|
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
|
<NGi span="24 s:24 m:24">
|
|
<div class="h-100% flex items-center gap-2">
|
|
<Icon icon="boxicons:lock-open" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
|
<p class="text-[16px] font-600">修改密码</p>
|
|
</div>
|
|
</NGi>
|
|
</NGrid>
|
|
</div>
|
|
<div class="scroll">
|
|
<div class="mt-5 max-w-[800px] mx-auto">
|
|
<NForm ref="formRef" :model="formModel" :rules="rules">
|
|
<NFormItem path="oldPassword" label="旧密码">
|
|
<NInput v-model:value="formModel.oldPassword" type="password" clearable show-password-on="click" placeholder="请输入旧密码" />
|
|
</NFormItem>
|
|
<NFormItem path="password" label="新密码">
|
|
<NInput v-model:value="formModel.password" type="password" clearable show-password-on="click" placeholder="请输入新密码" />
|
|
</NFormItem>
|
|
<NFormItem path="confirmPassword" label="确认密码">
|
|
<NInput v-model:value="formModel.confirmPassword" type="password" clearable show-password-on="click" placeholder="请确认新密码" />
|
|
</NFormItem>
|
|
</NForm>
|
|
<NButton type="primary" block :loading="btnLoading" @click="submitForm">修改密码</NButton>
|
|
</div>
|
|
</div>
|
|
</NCard>
|
|
</NSpace>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.scroll {
|
|
height: calc(100vh - 205px);
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|