调整修改密码弹框样式，完成修改密码功能

src/services/user/userManager.ts

@@ -28,3 +28,7 @@ export function createUser(params: { username: string; nickname: string; passwor
 export function deleteUser(userIds: string) {
 	return httpRequest<BaseResponse>({ url: `/api/user/${userIds}`, method: "DELETE" });
 }
+
+export function updateUser(params: { id: number; password: string }) {
+	return httpRequest<BaseResponse>({ url: `/api/user/${params.id}`, method: "PUT", params });
+}

src/views/components/Header.vue

@@ -31,9 +31,11 @@
 				</template>
 			</el-dropdown>
 		</div>
-		<OverlayModal :visible="updatePwdVisible">
-			<UpdatePwd @cancel="onCancelUpdate"></UpdatePwd>
-		</OverlayModal>
+		<van-overlay v-if="updatePwdVisible" :show="true">
+			<div class="flex justify-center items-center h-full">
+				<UpdatePwd @cancel="onCancelUpdate" @confirm="onChangePwd"></UpdatePwd>
+			</div>
+		</van-overlay>
 	</div>
 </template>
 <script lang="ts" setup>
@@ -49,6 +51,8 @@ import { useRouter } from "vue-router";
 import { getFormattedDateTime } from "@/utils";
 import Time from "./Time.vue";
 import { useUserStore } from "@/stores/user";
+import { updateUser } from "@/services/user/userManager";
+import { ElMessage } from "element-plus";
 const router = useRouter();
 const userStore = useUserStore();
 const menuId = ref(0);
@@ -80,6 +84,15 @@ const onShowMenu = () => {
 const onCancelUpdate = () => {
 	updatePwdVisible.value = false;
 };
+const onChangePwd = (password: string) => {
+	updatePwdVisible.value = false;
+	updateUser({ id: userStore.currUser.id, password }).then(res => {
+		if (res.success) {
+		} else {
+			ElMessage.error(res.msg);
+		}
+	});
+};
 </script>
 <style lang="scss" scoped>
 @use "@/assets/style/mixin.scss" as *;

src/views/components/UpdatePwd.vue

@@ -1,113 +1,38 @@
 <template>
-    <div class="update_pwd">
-        <p class="title">修改密码</p>
-        <section class="update_pwd_main">
-            <div class="newpassword">
-                <div>新密码：</div>
-                <div><input type="text" placeholder="新密码" v-model="new_pwd" class="newpwd_input"/></div>
-            </div>
-            <div class="confirmpassword">
-                <div>确认密码：</div>
-                <div><input type="text" placeholder="确认新密码" v-model="confirm_pwd" class="confirmpwd_input"/></div>
-            </div>
-        </section>
-        <footer class="footer_opt">
-            <button class="ok" @click="onSubmit">确认</button>
-            <button class="cancel" @click="onCancel">取消</button>
-        </footer>
-    </div>
+	<div class="w-[440px] bg-white px-5 py-[30px] rounded-lg text-text">
+		<p class="text-xl font-medium">修改密码</p>
+		<section class="update_pwd_main">
+			<div class="text-xl flex items-center h-16">
+				<div class="min-w-[100px] text-right">新密码</div>
+				<el-input type="password" placeholder="新密码" v-model="new_pwd" style="width: 200px" class="ml-5" />
+			</div>
+			<div class="text-xl flex items-center h-16">
+				<div class="min-w-[100px] text-right">确认密码</div>
+				<el-input type="password" placeholder="确认新密码" v-model="confirm_pwd" style="width: 200px" class="ml-5" />
+			</div>
+		</section>
+		<footer class="mt-4 flex justify-center items-center text-sm font-medium gap-x-8">
+			<button class="btn-dark px-10 py-2 text-xl" @click="onSubmit">确认</button>
+			<button class="btn-light px-10 py-2 text-xl" @click="onCancel">取消</button>
+		</footer>
+	</div>
 </template>
 <script lang="ts" setup>
-    import { ref } from 'vue'
-    const new_pwd = ref('')
-    const confirm_pwd = ref('')
-    const emits = defineEmits(['cancel'])
-    const onSubmit = () => {
-
-    }
-
-    const onCancel = () => {
-        emits('cancel')
-    }
+import { ElMessage } from "element-plus";
+import { ref } from "vue";
+const new_pwd = ref("");
+const confirm_pwd = ref("");
+const emits = defineEmits(["confirm", "cancel"]);
+const onSubmit = () => {
+	if (new_pwd.value !== confirm_pwd.value) {
+		ElMessage.warning("两次密码不一致");
+		return;
+	} else {
+		emits("confirm", new_pwd.value);
+	}
+};
+
+const onCancel = () => {
+	emits("cancel");
+};
 </script>
-<style lang="scss" scoped>
-    @use "@/assets/style/mixin.scss" as *;
-    .update_pwd{
-        width: 27.5rem;
-        height: 17.125rem;
-        background: #FFFFFF;
-
-        .title{
-            color: #40474E;
-            font-size: 1.25rem;
-            font-weight: 500;
-            margin-top:1.25rem;
-            margin-left: 1.25rem;
-            height: 1.25rem;
-        }
-
-        .update_pwd_main{
-            height: 6.3rem;
-            width: 20rem;
-            margin-top: 2.5rem;
-            margin-left: 2.625rem;
-            font-size: 1.25rem;
-
-            .newpassword{
-                display: flex;
-                margin-left: 1.25rem;
-                align-items: center;
-            }
-
-            .newpwd_input{
-                width: 13rem;
-                border: 2px solid rgb(236, 236, 236);
-                height: 3rem;
-                padding-left: 10px;
-                border-radius: 10px;
-            }
-
-            .confirmpassword{
-                display: flex;
-                margin-top: 1rem;
-                align-items: center;
-            }
-
-            .confirmpwd_input{
-                width: 13rem;
-                border: 2px solid rgb(236, 236, 236);
-                height: 3rem;
-                padding-left: 10px;
-                border-radius: 10px;
-            }
-        }
-
-        .footer_opt{
-            height: 4rem;
-            display: flex;
-            align-items: center;
-            margin-left: 8rem;
-            margin-top: 1rem;
-            .ok{
-                background: #1989FA;
-                font-size: 1.25rem;
-                height: 2.875rem;
-                width: 6.875rem;
-                color: #FFFFFF;
-                align-items: center;
-                border-radius: 10px;
-            }
-
-            .cancel{
-                font-size: 1.25rem;
-                height: 2.875rem;
-                width: 6.875rem;
-                align-items: center;
-                border-radius: 10px;
-                margin-left: 0.5rem;
-                border: 1px solid #1989FA;
-                color: #1989FA;
-            }
-        }
-    }
-</style>

src/views/login/index.vue

@@ -85,9 +85,9 @@ const loginHandle = () => {
       sessionStorage.setItem("token", res.data);
       const response = await getCurrentUser();
       if (response.success) {
-        const { username, nickname, role } = response.data;
-        userStore.setUser({ username, nickname, role } as User);
-        sessionStorage.setItem("user", JSON.stringify({ username, nickname, role }))
+        const { id, username, nickname, role } = response.data;
+        userStore.setUser({ id, username, nickname, role } as User);
+        sessionStorage.setItem("user", JSON.stringify({ id, username, nickname, role }))
       }
       await router.push("/home");
       loading.value = false;