From 0a167891e323c630741072a6c6d8a430b2f698b5 Mon Sep 17 00:00:00 2001
From: 647556386 <647556386@qq.com>
Date: 星期四, 19 三月 2026 18:20:53 +0800
Subject: [PATCH] 1
---
项目代码/WIDESEA_WMSClient/src/views/ChangePassword.vue | 334 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 334 insertions(+), 0 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/ChangePassword.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/ChangePassword.vue"
new file mode 100644
index 0000000..bcff40f
--- /dev/null
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/views/ChangePassword.vue"
@@ -0,0 +1,334 @@
+<template>
+ <div class="login-container">
+ <div class="project-name">WMS</div>
+ <div class="login-form">
+ <div class="form-user" @keypress="changePwdPress">
+ <div class="login-text">
+ <div>淇敼瀵嗙爜</div>
+ </div>
+ <div class="login-text-small">CHANGE PASSWORD</div>
+
+ <!-- 鏂板锛氱敤鎴峰悕杈撳叆妗� -->
+ <div class="item">
+ <div class="input-icon el-icon-user"></div>
+ <input
+ type="text"
+ v-focus
+ v-model="pwdForm.userName"
+ placeholder="璇疯緭鍏ョ敤鎴峰悕"
+ />
+ </div>
+
+ <!-- 鏃у瘑鐮� -->
+ <div class="item">
+ <div class="input-icon el-icon-lock"></div>
+ <input
+ type="password"
+ v-model="pwdForm.oldPwd"
+ placeholder="璇疯緭鍏ユ棫瀵嗙爜"
+ />
+ </div>
+
+ <!-- 鏂板瘑鐮� -->
+ <div class="item">
+ <div class="input-icon el-icon-key"></div>
+ <input
+ type="password"
+ v-model="pwdForm.newPwd"
+ placeholder="璇疯緭鍏ユ柊瀵嗙爜"
+ />
+ </div>
+
+ <!-- 纭鏂板瘑鐮� -->
+ <div class="item">
+ <div class="input-icon el-icon-key"></div>
+ <input
+ type="password"
+ v-model="pwdForm.confirmPassword"
+ placeholder="璇风‘璁ゆ柊瀵嗙爜"
+ />
+ </div>
+ </div>
+
+ <!-- 鎻愪氦鎸夐挳 -->
+ <div class="loging-btn">
+ <el-button
+ size="large"
+ :loading="loading"
+ color="#3a6cd1"
+ :dark="true"
+ @click="changePassword"
+ long
+ >
+ <span v-if="!loading">纭淇敼</span>
+ <span v-else>姝ｅ湪淇敼...</span>
+ </el-button>
+ </div>
+
+ <!-- 杩斿洖鎸夐挳 -->
+ <div class="back-login-btn">
+ <el-button
+ size="large"
+ type="text"
+ @click="goBack"
+ >
+ 杩斿洖
+ </el-button>
+ </div>
+ </div>
+
+ <img class="login-bg" src="/static/login_bg.png" />
+ </div>
+</template>
+
+<script>
+import {
+ defineComponent,
+ ref,
+ reactive,
+ getCurrentInstance,
+} from "vue";
+import { useRouter, useRoute } from "vue-router";
+import store from "../store/index";
+import http from "@/../src/api/http.js";
+
+export default defineComponent({
+ setup(props, context) {
+ const loading = ref(false);
+ const router = useRouter();
+
+ // 瀵嗙爜琛ㄥ崟锛堜繚鐣欏師鏈夐粯璁ゅ�硷紝鏂板鐢ㄦ埛鍚嶅弻鍚戠粦瀹氾級
+ const pwdForm = reactive({
+ userName: store.state.userInfo?.userName || "", // 浠嶄繚鐣欎粠store鍙栧�硷紝鍙墜鍔ㄤ慨鏀�
+ oldPwd: "",
+ newPwd: "",
+ confirmPassword: "",
+ });
+
+ // 鍏ㄥ眬鎻愮ず
+ let appContext = getCurrentInstance().appContext;
+ let $message = appContext.config.globalProperties.$message;
+
+ // 鍥炶溅瑙﹀彂
+ const changePwdPress = (e) => {
+ if (e.keyCode === 13) {
+ changePassword();
+ }
+ };
+
+ // 杩斿洖涓婁竴椤�
+ const goBack = () => {
+ router.go(-1);
+ };
+
+ // 琛ㄥ崟鏍￠獙锛堟柊澧烇細鐢ㄦ埛鍚嶉潪绌烘牎楠岋級
+ const validateForm = () => {
+ if (!pwdForm.userName) return $message.error("璇疯緭鍏ョ敤鎴峰悕"); // 鏂板
+ if (!pwdForm.oldPwd) return $message.error("璇疯緭鍏ユ棫瀵嗙爜");
+ if (!pwdForm.newPwd) return $message.error("璇疯緭鍏ユ柊瀵嗙爜");
+ if (pwdForm.newPwd.length < 6) {
+ $message.error("鏂板瘑鐮侀暱搴︿笉鑳藉皬浜�6浣�");
+ return false;
+ }
+ if (pwdForm.newPwd !== pwdForm.confirmPassword) {
+ $message.error("涓ゆ杈撳叆鐨勬柊瀵嗙爜涓嶄竴鑷�");
+ return false;
+ }
+ if (pwdForm.oldPwd === pwdForm.newPwd) {
+ $message.error("鏂板瘑鐮佷笉鑳戒笌鏃у瘑鐮佺浉鍚�");
+ return false;
+ }
+ return true;
+ };
+
+ // 淇敼瀵嗙爜锛堥�昏緫涓嶅彉锛寀serName宸插湪琛ㄥ崟涓級
+ const changePassword = () => {
+ if (!validateForm()) return;
+
+ loading.value = true;
+ http.post("/api/User/ModifyUserNamePwd", {
+ userName: pwdForm.userName,
+ newPwd: pwdForm.newPwd,
+ oldPwd: pwdForm.oldPwd
+ }, "姝ｅ湪淇敼瀵嗙爜....").then((result) => {
+ loading.value = false;
+ if (!result.status) return $message.error(result.message);
+
+ $message.success("瀵嗙爜淇敼鎴愬姛锛岃閲嶆柊鐧诲綍");
+ store.commit("clearUserInfo", "");
+ setTimeout(() => router.push("/login"), 1500);
+ }).catch((err) => {
+ loading.value = false;
+ $message.error("淇敼瀵嗙爜澶辫触锛岃鑱旂郴绠＄悊鍛�");
+ });
+ };
+
+ return {
+ loading,
+ pwdForm,
+ changePassword,
+ changePwdPress,
+ goBack,
+ };
+ },
+ directives: {
+ focus: {
+ inserted: function (el) {
+ el.focus();
+ },
+ },
+ },
+});
+</script>
+
+<style lang="less" scoped>
+// 瀹屽叏澶嶇敤浣犵櫥褰曢〉鐨勬牱寮忥紝鍙柊澧炲皯閲忔寜閽牱寮�
+.login-container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ background: rgb(246, 247, 252);
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.login-form {
+ align-items: center;
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ z-index: 999;
+
+ .form-user {
+ .item {
+ border-radius: 5px;
+ border: 1px solid #ececec;
+ display: flex;
+ margin-bottom: 30px;
+ background: #ffff;
+ height: 45px;
+ padding-left: 20px;
+ align-items: center;
+
+ .input-icon {
+ color: #7a7a7a;
+ padding-right: 20px;
+ display: flex;
+ align-items: center;
+ }
+ }
+ }
+
+ input:-webkit-autofill {
+ box-shadow: 0 0 0px 1000px white inset;
+ -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+ }
+
+ input {
+ background: white;
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ min-width: 0;
+ margin: 0;
+ padding: 0;
+ color: #323233;
+ text-align: left;
+ border: 0;
+ outline: none;
+ font-size: 16px;
+ height: 100%;
+ line-height: normal;
+ }
+}
+
+.form-user,
+.loging-btn {
+ width: 400px;
+}
+
+.loging-btn {
+ box-shadow: 2px 4px 11px #a4c2ff;
+ margin-top: 10px;
+
+ button {
+ padding: 21px;
+ font-size: 14px !important;
+ width: 100%;
+ }
+}
+
+// 浠呮柊澧烇細杩斿洖鎸夐挳鏍峰紡
+.back-login-btn {
+ width: 400px;
+ margin-top: 15px;
+ text-align: center;
+
+ button {
+ font-size: 13px;
+ color: #3a6cd1;
+ padding: 0;
+
+ &:hover {
+ color: #1850c1;
+ }
+ }
+}
+
+.login-text {
+ font-weight: bolder;
+ font-size: 20px;
+ letter-spacing: 2px;
+ position: relative;
+ display: flex;
+}
+
+.login-text-small {
+ margin-bottom: 20px;
+ font-size: 13px;
+ color: #7d7c7c;
+}
+
+.login-bg {
+ left: 0;
+ position: absolute;
+ height: 100%;
+ width: 50%;
+ z-index: 0;
+}
+
+.project-name {
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ z-index: 9999;
+ font-weight: bolder;
+ background-image: linear-gradient(to right, #1850c1, #9c009c);
+ -webkit-background-clip: text;
+ color: transparent;
+ font-size: 25px;
+}
+
+// 鍝嶅簲寮忛�傞厤锛堝鐢ㄤ綘鐨勯�昏緫锛�
+@media screen and (max-width: 700px) {
+ .login-bg,
+ .project-name {
+ display: none;
+ }
+
+ .login-container {
+ padding: 2rem;
+ justify-content: center;
+ }
+
+ .login-form {
+ width: 100%;
+ }
+
+ .form-user,
+ .loging-btn,
+ .back-login-btn {
+ width: 100%;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3