修改密码页面添加

2026-08-27 16:43:26 +08:00
parent f850774d65
commit 97a0465890
9 changed files with 132 additions and 26 deletions
@@ -0,0 +1,98 @@
+<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>