feat: 登录页添加修改密码功能

portal-manager-ui/admin/src/api/user.js

@@ -20,3 +20,7 @@ export function changePassword(params) {
 export function editPassword(params) {
   return http.post(`${baseURL}/zwfw/user/reset/password`, params);
 }
+// 密码过期修改密码
+export function changeForgotPassword(params) {
+  return http.post(`${baseURL}/zwfw/user/forgot/password`, params);
+}

portal-manager-ui/admin/src/request/request.js

@@ -59,7 +59,7 @@ axios.interceptors.response.use(
         message.error({
           content: msg,
           maxCount: 1,
-          duration: 1,
+          duration: 2,
         });
         store.commit("user/reset");
         router.push("/");

portal-manager-ui/admin/src/views/signIn/signIn.vue

@@ -5,8 +5,16 @@
         <p class="slogan-text slogan-text-1 mb-12">长江第一城</p>
         <p class="slogan-text slogan-text-2">巴蜀醉宜宾</p>
       </div>
+      <div class="w-[490px] h-[660px]">
+        <div class="swiper mySwiper">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <!-- 登录框 -->
               <div class="login-box">
-        <img class="w-[74px] mb-[20px]" src="@/assets/images/logo.png" />
+                <img
+                  class="w-[74px] mb-[20px]"
+                  src="@/assets/images/logo.png"
+                />
                 <p class="login-text text-[40px] mb-[20px]">欢迎登录!</p>
                 <p class="login-text text-[32px] mb-[30px]">
                   {{ sysName }}
@@ -37,7 +45,7 @@
                   <a-form-model-item prop="password">
                     <a-input
                       placeholder="请输入密码"
-              :type="iptType"
+                      :type="TypeForm.iptType"
                       v-model="form.password"
                       @pressEnter="handleSubmit"
                     >
@@ -51,14 +59,14 @@
                             src="@/assets/images/icon-close.png"
                           />
                           <i
-                    v-if="iptType == 'password'"
+                            v-if="TypeForm.iptType == 'password'"
                             class="iconfont icon-hidden cursor-pointer"
-                    @click="iptType = 'text'"
+                            @click="TypeForm.iptType = 'text'"
                           ></i>
                           <i
                             v-else
                             class="iconfont icon-show cursor-pointer"
-                    @click="iptType = 'password'"
+                            @click="TypeForm.iptType = 'password'"
                           ></i>
                         </a-space>
                       </template>
@@ -83,24 +91,176 @@
                     </div>
                   </a-form-model-item>
                   <a-form-model-item>
-            <a-button :loading="loading" class="login-btn" @click="handleSubmit"
+                    <a-button
+                      :loading="loading"
+                      class="login-btn"
+                      @click="handleSubmit"
                       >登录</a-button
                     >
                   </a-form-model-item>
                 </a-form-model>
               </div>
             </div>
+            <div class="swiper-slide">
+              <!-- 修改密码框 -->
+              <div class="revamp-box">
+                <img
+                  class="w-[74px] mb-[20px]"
+                  src="@/assets/images/logo.png"
+                />
+                <p class="login-text text-[40px] mb-[20px]">请修改密码</p>
+                <p class="login-text text-[32px] mb-[30px]">
+                  密码有效期为三个月
+                </p>
+                <a-form-model
+                  :model="changePwdForm"
+                  ref="changePwdForm"
+                  :rules="PwdFormRules"
+                  :label-col="labelCol"
+                  :wrapper-col="wrapperCol"
+                >
+                  <a-form-model-item prop="loginName">
+                    <a-input
+                      placeholder="请输入用户名"
+                      v-model="changePwdForm.loginName"
+                      @pressEnter="changePwd"
+                    >
+                      <img slot="prefix" src="@/assets/images/icon-user.png" />
+                      <img
+                        slot="suffix"
+                        v-show="changePwdForm.loginName"
+                        class="cursor-pointer"
+                        @click="changePwdForm.loginName = ''"
+                        src="@/assets/images/icon-close.png"
+                      />
+                    </a-input>
+                  </a-form-model-item>
+                  <a-form-model-item prop="oldPwd">
+                    <a-input
+                      placeholder="请输入原密码"
+                      :type="TypeForm.oldType"
+                      v-model="changePwdForm.oldPwd"
+                      @pressEnter="changePwd"
+                    >
+                      <img slot="prefix" src="@/assets/images/icon-user.png" />
+                      <template slot="suffix">
+                        <a-space>
+                          <img
+                            v-show="changePwdForm.oldPwd"
+                            class="cursor-pointer"
+                            @click="changePwdForm.oldPwd = ''"
+                            src="@/assets/images/icon-close.png"
+                          />
+                          <i
+                            v-if="TypeForm.oldType == 'password'"
+                            class="iconfont icon-hidden cursor-pointer"
+                            @click="TypeForm.oldType = 'text'"
+                          ></i>
+                          <i
+                            v-else
+                            class="iconfont icon-show cursor-pointer"
+                            @click="TypeForm.oldType = 'password'"
+                          ></i>
+                        </a-space>
+                      </template>
+                    </a-input>
+                  </a-form-model-item>
+                  <a-form-model-item prop="newPwd">
+                    <a-input
+                      placeholder="请输入新密码"
+                      :type="TypeForm.newType"
+                      v-model="changePwdForm.newPwd"
+                      @pressEnter="changePwd"
+                    >
+                      <img slot="prefix" src="@/assets/images/icon-user.png" />
+                      <template slot="suffix">
+                        <a-space>
+                          <img
+                            v-show="changePwdForm.newPwd"
+                            class="cursor-pointer"
+                            @click="changePwdForm.newPwd = ''"
+                            src="@/assets/images/icon-close.png"
+                          />
+                          <i
+                            v-if="TypeForm.newType == 'password'"
+                            class="iconfont icon-hidden cursor-pointer"
+                            @click="TypeForm.newType = 'text'"
+                          ></i>
+                          <i
+                            v-else
+                            class="iconfont icon-show cursor-pointer"
+                            @click="TypeForm.newType = 'password'"
+                          ></i>
+                        </a-space>
+                      </template>
+                    </a-input>
+                  </a-form-model-item>
+                  <a-form-model-item prop="newPwdAgain">
+                    <a-input
+                      placeholder="请再次输入新密码"
+                      :type="TypeForm.newAgainType"
+                      v-model="changePwdForm.newPwdAgain"
+                      @pressEnter="changePwd"
+                    >
+                      <img slot="prefix" src="@/assets/images/icon-user.png" />
+                      <template slot="suffix">
+                        <a-space>
+                          <img
+                            v-show="changePwdForm.newPwdAgain"
+                            class="cursor-pointer"
+                            @click="changePwdForm.newPwdAgain = ''"
+                            src="@/assets/images/icon-close.png"
+                          />
+                          <i
+                            v-if="TypeForm.newAgainType == 'password'"
+                            class="iconfont icon-hidden cursor-pointer"
+                            @click="TypeForm.newAgainType = 'text'"
+                          ></i>
+                          <i
+                            v-else
+                            class="iconfont icon-show cursor-pointer"
+                            @click="TypeForm.newAgainType = 'password'"
+                          ></i>
+                        </a-space>
+                      </template>
+                    </a-input>
+                  </a-form-model-item>
+                  <a-form-model-item>
+                    <a-button
+                      :loading="changeloading"
+                      class="login-btn"
+                      @click="changePwd"
+                      >确认</a-button
+                    >
+                  </a-form-model-item>
+                </a-form-model>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { LoginInterface } from "@/api/user.js";
+import Swiper from "swiper";
+import { LoginInterface, changeForgotPassword } from "@/api/user.js";
 import { mapMutations, mapState } from "vuex";
-import { changeAccount } from "@/utils/js/validate";
+import { changeAccount, changePassWord } from "@/utils/js/validate";
 import { encrypt } from "@/utils";
 import storage from "@/utils/js/Storage";
 export default {
   data() {
+    const changePwdAgain = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.changePwdForm.newPwd) {
+        callback(new Error("两次密码输入不一致"));
+      } else {
+        callback();
+      }
+    };
     return {
       sysName: process.env.VUE_APP_systemName,
       labelCol: { span: 0 },
@@ -108,7 +268,13 @@ export default {
       api: process.env.VUE_APP_API_BASE_URL,
       loading: false,
       imgCode: "",
-      iptType: "password",
+      changeloading: false,
+      TypeForm: {
+        iptType: "password", // 登录密码输入框切换
+        oldType: "password", // 原密码输入框切换
+        newType: "password", // 新密码输入框切换
+        newAgainType: "password", // 再次输入新密码输入框切换
+      },
       form: {
         loginName: "",
         password: "",
@@ -116,6 +282,12 @@ export default {
         mark: "",
         type: 2,
       },
+      changePwdForm: {
+        loginName: "",
+        oldPwd: "", // 原密码
+        newPwd: "", // 新密码
+        newPwdAgain: "", // 新密码
+      },
       rules: {
         loginName: [
           { required: true, validator: changeAccount, trigger: "blur" },
@@ -125,6 +297,20 @@ export default {
           { required: true, message: "请输入验证码", trigger: "blur" },
         ],
       },
+      PwdFormRules: {
+        loginName: [
+          { required: true, validator: changeAccount, trigger: "blur" },
+        ],
+        oldPwd: [
+          { required: true, validator: changePassWord, trigger: "blur" },
+        ],
+        newPwd: [
+          { required: true, validator: changePassWord, trigger: "blur" },
+        ],
+        newPwdAgain: [
+          { required: true, validator: changePwdAgain, trigger: "blur" },
+        ],
+      },
     };
   },
   computed: {
@@ -136,8 +322,38 @@ export default {
     }
     this.createCode();
   },
+  mounted() {
+    this.initSwiper();
+  },
   methods: {
     ...mapMutations("user", ["set_token", "SET_USERDATA", "set_siteList"]),
+    initSwiper() {
+      this.mySwiper = new Swiper(".mySwiper", {
+        effect: "cube", // 方块动画
+        speed: 1000, // 时长
+        simulateTouch: false, //禁止鼠标滑动切换
+        grabCursor: false, // 手形鼠标
+        cubeEffect: {
+          shadow: false, // 取消盒子阴影
+          slideShadows: false, // 取消子项拖动时候的阴影
+          // shadowOffset: 20,
+          // shadowScale: 0.94,
+        },
+        on: {
+          slideChange: () => {
+            // 初始化密码框类型
+            Object.assign(this.TypeForm, this.$options.data().TypeForm);
+            this.loading = false;
+            this.changeloading = false;
+            this.$refs.changePwdForm.resetFields();
+            this.$refs.form.resetFields();
+            this.createCode();
+          },
+        },
+      });
+      this.mySwiper.init();
+    },
+
     // 获取验证码
     createCode() {
       // 加时间戳印记用于刷新gif
@@ -155,7 +371,7 @@ export default {
             loginName: encrypt(this.form.loginName),
             password: encrypt(this.form.password),
           });
-          let { code, data } = res;
+          let { code, data, msg } = res;
           if (code == 1) {
             let { siteList, user, token } = data;
             this.set_token(token);
@@ -168,6 +384,11 @@ export default {
             setTimeout(() => {
               this.$router.push("/home");
             }, 20);
+          } else if (code == 99998) {
+            this.$message.error(msg);
+            setTimeout(() => {
+              this.mySwiper.slideTo(1);
+            }, 500);
           } else {
             this.createCode();
           }
@@ -175,6 +396,29 @@ export default {
         }
       });
     },
+
+    // 修改密码
+    changePwd() {
+      this.$refs.changePwdForm.validate(async (valid) => {
+        if (valid) {
+          this.changeloading = true;
+          let obj = {
+            loginName: this.changePwdForm.loginName,
+            oldPwd: encrypt(this.changePwdForm.oldPwd),
+            newPwd: encrypt(this.changePwdForm.newPwd),
+          };
+          let res = await changeForgotPassword(obj);
+          this.changeloading = false;
+          let { msg, code } = res;
+          if (code == 1) {
+            this.$message.success(msg);
+            setTimeout(() => {
+              this.mySwiper.slideTo(0);
+            }, 500);
+          }
+        }
+      });
+    },
   },
 };
 </script>
@@ -243,9 +487,14 @@ export default {
     margin-left: 1em;
     animation: var(--time) printText var(--time) steps(5) both;
   }
-  .login-box {
-    width: 490px;
-    height: 660px;
+  .swiper {
+    width: 100%;
+    height: 100%;
+  }
+  .login-box,
+  .revamp-box {
+    width: 100%;
+    height: 100%;
     padding: 60px 34px;
     background: url("@/assets/images/login_box_bg.png") center;
     background-size: 100% 100%;