fix: 忘记密码接口联调

src/views/login.vue

@@ -69,7 +69,7 @@
           <el-form-item
           <el-form-item
             prop="email"
             prop="email"
             label=""
             label=""
-            :rules="[{ required: true, message: '请输入邮箱' }]">
+            :rules="[{ required: true, message: '请输入邮箱', type: 'email' }]">
             <el-input
             <el-input
               v-model="forgetForm.email"
               v-model="forgetForm.email"
               prefix-icon="el-icon-postcard"
               prefix-icon="el-icon-postcard"
@@ -102,27 +102,53 @@
             </div>
             </div>
           </el-form-item>
           </el-form-item>
           <el-form-item
           <el-form-item
-            prop="newPassword"
+            prop="password"
             :rules="[{ required: true, message: '请输入新密码' }]">
             :rules="[{ required: true, message: '请输入新密码' }]">
             <el-input
             <el-input
-              v-model="forgetForm.newPassword"
+              v-model="forgetForm.password"
               placeholder="请输入新密码"
               placeholder="请输入新密码"
-              clearable
+              :type="showNewPwd ? 'text' : 'password'"
               prefix-icon="el-icon-lock"
               prefix-icon="el-icon-lock"
-              style="background-color: #fff" />
+              style="background-color: #fff">
+              <i
+                @click="showNewPwd = !showNewPwd"
+                slot="suffix"
+                :class="{
+                  eyes: true,
+                  open: !showNewPwd,
+                  close: showNewPwd,
+                }"></i>
+            </el-input>
           </el-form-item>
           </el-form-item>
           <el-form-item
           <el-form-item
             prop="confirmNewPassword"
             prop="confirmNewPassword"
-            :rules="[{ required: true, message: '请再次输入新密码' }]">
+            :rules="[
+              {
+                validator: validatePass,
+                trigger: 'blur',
+              },
+            ]">
             <el-input
             <el-input
               v-model="forgetForm.confirmNewPassword"
               v-model="forgetForm.confirmNewPassword"
               placeholder="请再次输入新密码"
               placeholder="请再次输入新密码"
               clearable
               clearable
+              :type="showAgNewPwd ? 'text' : 'password'"
               prefix-icon="el-icon-lock"
               prefix-icon="el-icon-lock"
-              style="background-color: #fff" />
+              style="background-color: #fff">
+              <i
+                @click="showAgNewPwd = !showAgNewPwd"
+                slot="suffix"
+                :class="{
+                  eyes: true,
+                  open: !showAgNewPwd,
+                  close: showAgNewPwd,
+                }"></i>
+            </el-input>
           </el-form-item>
           </el-form-item>
           <el-form-item style="margin-bottom: 10px">
           <el-form-item style="margin-bottom: 10px">
-            <el-button class="reset-password" round @click="resetPassword">重置密码</el-button>
+            <el-button class="reset-password" round @click="resetPassword">
+              重置密码
+            </el-button>
           </el-form-item>
           </el-form-item>
           <div style="font-size: 14px">
           <div style="font-size: 14px">
             <span>无需重置</span>
             <span>无需重置</span>
@@ -133,7 +159,9 @@
             </span>
             </span>
           </div>
           </div>
         </el-form>
         </el-form>
-        <i class="el-icon-circle-close" @click="isShowModal = false"></i>
+        <i
+          class="el-icon-circle-close close-icon"
+          @click="isShowModal = false"></i>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -147,6 +175,15 @@ export default {
   components: {},
   components: {},
   data() {
   data() {
     return {
     return {
+      validatePass: (rule, value, callback) => {
+        if (!value) {
+          callback(new Error('请再次输入密码'))
+        } else if (value !== this.forgetForm.password) {
+          callback(new Error('两次输入密码不一致'))
+        } else {
+          callback()
+        }
+      },
       isShowModal: false,
       isShowModal: false,
       ruleForm: {
       ruleForm: {
         password: '',
         password: '',
@@ -167,6 +204,8 @@ export default {
         password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
         password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
       },
       },
       showPwd: false,
       showPwd: false,
+      showNewPwd: false,
+      showAgNewPwd: false,
     }
     }
   },
   },
   computed: {
   computed: {
@@ -204,6 +243,7 @@ export default {
     forgetPassword() {
     forgetPassword() {
       this.isShowModal = true
       this.isShowModal = true
       this.forgetForm = {}
       this.forgetForm = {}
+      this.codeCountDown = 0
       this.$nextTick(() => {
       this.$nextTick(() => {
         this.$refs.forgetForm.clearValidate()
         this.$refs.forgetForm.clearValidate()
       })
       })
@@ -215,6 +255,24 @@ export default {
       } catch {
       } catch {
         return
         return
       }
       }
+      try {
+        const hash = md5.create()
+        hash.update(this.forgetForm.password)
+
+        const passwordHash = hash.hex()
+        post('business/user/restPassword', {
+          password: passwordHash,
+          email: this.forgetForm.email,
+          code: this.forgetForm.code,
+        }).then((res) => {
+          if (res.code === 200) {
+            this.$message.success('密码修改成功')
+            this.isShowModal = false
+          }
+        })
+      } catch (e) {
+        console.error(e)
+      }
     },
     },
     submitForm(e) {
     submitForm(e) {
       e.preventDefault()
       e.preventDefault()
@@ -297,7 +355,7 @@ export default {
   transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
 }
 
 
-.forget-form i {
+.forget-form .close-icon {
   position: fixed;
   position: fixed;
   top: -30px;
   top: -30px;
   right: -28px;
   right: -28px;