找回密码调整功能流程

src/views/forgotPwd.vue

@@ -43,6 +43,60 @@
           {{ verificationCodeShow ? time + "s" : "发送验证码" }}
         </el-button>
       </el-form-item>
+      <el-form-item label="新密码" prop="newPwd">
+        <el-input
+          v-model="loginCodeForm.newPwd"
+          :type="newPwdFlag ? 'text' : 'password'"
+          autocomplete="off"
+          placeholder="请输入密码"
+          @blur="handleTrim('loginCodeForm', 'newPwd')"
+          maxlength="20"
+          @input="handeleInput"
+        >
+          <i
+            slot="suffix"
+            class="el-icon-view show-icon"
+            @click="changeIcon('newPwdFlag')"
+            v-if="newPwdFlag"
+          ></i>
+          <i
+            slot="suffix"
+            class="show-icon"
+            @click="changeIcon('newPwdFlag')"
+            v-else
+          >
+            <svg-icon icon-class="eye-invisible"></svg-icon>
+          </i>
+        </el-input>
+        <p class="tips">不少于6位，且必须同时包含数字和大小写字母</p>
+      </el-form-item>
+      <el-form-item label="再次输入" prop="confirmPwd">
+        <el-input
+          v-model="loginCodeForm.confirmPwd"
+          :type="comfirmPwdFlag ? 'text' : 'password'"
+          autocomplete="off"
+          placeholder="请输入密码"
+          @blur="handleTrim('loginCodeForm', 'confirmPwd')"
+          maxlength="20"
+          @input="handeleInput"
+        >
+          <i
+            slot="suffix"
+            class="el-icon-view show-icon"
+            @click="changeIcon('comfirmPwdFlag')"
+            v-if="comfirmPwdFlag"
+          ></i>
+          <i
+            slot="suffix"
+            class="show-icon"
+            @click="changeIcon('comfirmPwdFlag')"
+            v-else
+          >
+            <svg-icon icon-class="eye-invisible"></svg-icon>
+          </i>
+        </el-input>
+        <p class="tips">再次输入密码，两次输入保持一致</p>
+      </el-form-item>
       <el-form-item class="btn-box">
         <el-button
           type="primary"
@@ -50,7 +104,7 @@
           size="small"
           :disabled="submitDis"
           :loading="loading"
-          >下一步</el-button
+          >确定</el-button
         >
         <el-button @click="onCancel('loginCodeForm')" size="small"
           >取消</el-button
@@ -93,15 +147,51 @@ export default {
         }
       }
     };
+    const validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,16}$/;
+        let result = reg.test(value);
+        if (result) {
+          callback();
+        } else {
+          callback(new Error("密码必须同时包含数字和大小写字母"));
+        }
+      }
+    };
+    const validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.loginCodeForm.newPwd) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
     return {
       loginCodeForm: {
         type: "USER",
         phone: "",
         code: "",
+        newPwd: "", // 密码
+        confirmPwd: "", // 确认密码
       },
       rulesCode: {
         phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
         code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+        newPwd: [
+          { required: true, validator: validatePass, trigger: "blur" },
+          {
+            min: 6,
+            max: 16,
+            message: "请输入 6-16 位密码，且必须同时包含数字和大小写字母",
+            trigger: "change",
+          },
+        ],
+        confirmPwd: [
+          { required: true, validator: validatePass2, trigger: "blur" },
+        ],
       },
       time: 60, //获取验证码的时间
       verificationCodeShow: false, //是否已经获取了验证码
@@ -109,6 +199,8 @@ export default {
       timer: null,
       submitDis: true,
       stepIndex: 0,
+      newPwdFlag: false, // 查看新密码
+      comfirmPwdFlag: false, // 查看确认密码
     };
   },
   watch: {},
@@ -118,18 +210,20 @@ export default {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.loading = true;
-          let MethodName = "/OrgServer/LoginControl/ResetRandomPassword";
+          let MethodName = "/OrgServer/LoginControl/ResetNewPassword";
           let data = {
             user_type: this.loginCodeForm.type,
             phone_or_email: this.loginCodeForm.phone,
             dynamic_verification_code: this.loginCodeForm.code,
             dynamic_verification_code_send_type: "SMS",
+            password: this.loginCodeForm.newPwd,
           };
           getLogin(MethodName, data)
             .then((res) => {
               this.loading = false;
               if (res.status === 1) {
-                this.stepIndex++;
+                this.$message.success("修改密码成功！");
+                this.onCancel();
               }
             })
             .catch(() => {
@@ -194,19 +288,32 @@ export default {
     // 去掉前后空格
     handleTrim(form, fild) {
       this[form][fild] = this[form][fild].trim();
-      if (this.loginCodeForm.phone && this.loginCodeForm.code) {
+      if (
+        this.loginCodeForm.phone &&
+        this.loginCodeForm.code &&
+        this.loginCodeForm.newPwd &&
+        this.loginCodeForm.confirmPwd
+      ) {
         this.submitDis = false;
       } else {
         this.submitDis = true;
       }
     },
     handeleInput() {
-      if (this.loginCodeForm.phone && this.loginCodeForm.code) {
+      if (
+        this.loginCodeForm.phone &&
+        this.loginCodeForm.code &&
+        this.loginCodeForm.newPwd &&
+        this.loginCodeForm.confirmPwd
+      ) {
         this.submitDis = false;
       } else {
         this.submitDis = true;
       }
     },
+    changeIcon(flag) {
+      this[flag] = !this[flag];
+    },
   },
   mounted() {},
 };
@@ -279,6 +386,12 @@ export default {
     width: 100%;
   }
 }
+.tips {
+  margin: 0;
+  color: #86909c;
+  font-size: 12px;
+  line-height: 20px;
+}
 </style>
 <style lang="scss">
 .forgot-container {