找回密码功能

src/api/auth/LoginService.js

@@ -28,4 +28,18 @@ export default class LoginService {
       params: {userName: userName}
     })
   }
+  getPhoneCode (mobile) {
+    return request({
+      url: '/sys/getPhoneCode',
+      method: 'get',
+      params: {mobile: mobile}
+    })
+  }
+  saveNewPassword (inputForm) {
+    return request({
+      url: '/sys/saveNewPassword',
+      method: 'get',
+      params: {mobile: inputForm.phoneNumber, code: inputForm.phoneCode, newPassword: inputForm.newPassword}
+    })
+  }
 }

src/assets/scss/login.scss

@@ -149,9 +149,9 @@ html, body{
 }
 .login-submit {
   width: 100%;
-  height: 45px;
-  border: 1px solid #1d64da !important;
-  background: #1d64da !important;
+  height: 40px;
+  border: 1px solid #1f8dff !important;
+  background: #1f8dff !important;
   color: #ffffffcc !important;
   font-size: 18px;
   letter-spacing: 2px;

src/views/modules/sys/login/login.vue

@@ -10,12 +10,9 @@
         </div>
         <p class="title">{{productName}}</p>
 
-        <el-image src="/static/img/login.png">
-    </el-image>
-
-
+        <el-image src="/static/img/login.png"></el-image>
       </div>
-      <div class="login-border">
+      <div v-if="whichPage === '1'" class="login-border">
         <div class="login-main">
 
           <h4 class="login-title">
@@ -46,15 +43,14 @@
                   </el-col>
                 </el-row>
               </el-form-item>
-              <div style ="margin-left: 20px;margin-bottom: 20px; float: left;height: 40px;line-height:40px;">
+              <div style ="margin-left: 5px;margin-bottom: 20px; float: left;height: 40px;line-height:40px;">
                 <!-- 记住我 -->
                 <el-checkbox v-model="checked" class="rememberMe">记住我</el-checkbox>
               </div>
-              <!--<div style ="margin-right: 20px;margin-bottom: 20px; float: right; position: relative; z-index:99">
-                &lt;!&ndash; 找回密码 &ndash;&gt;
-                <el-button type="text" @click="open()">忘记密码？</el-button>
-                &lt;!&ndash;<el-button type="text" @click="open()" class="forgetPw">忘记密码？</el-button>&ndash;&gt;
-              </div>-->
+              <!-- 找回密码 -->
+              <div style="float: right;position: relative;z-index:99">
+                <el-button type="text" @click="openForgetPassword()" class="forgetPw">忘记密码</el-button>
+              </div>
               <el-form-item>
                 <el-button type="primary" :loading="loading" class="login-submit" @click="login">登录</el-button>
               </el-form-item>
@@ -81,6 +77,45 @@
 
 
       </div>
+      <div v-else-if="whichPage === '2'" class="login-border">
+        <div class="login-main">
+
+          <h4 class="login-title">
+            找回密码
+          </h4>
+          <h3 class="login-sub-title">
+            使用账号绑定的手机号找回密码
+          </h3>
+          <el-form size="small" ref="inputForm2" :model="inputForm" :loading="loading" :rules="rules" class="login-form"  @keyup.enter.native="saveNewPass()" @submit.native.prevent>
+
+            <el-form-item  prop="phoneNumber">
+              <el-input type="text" placeholder="请输入绑定手机号" v-model="inputForm.phoneNumber"></el-input>
+            </el-form-item>
+            <el-form-item  prop="phoneCode">
+              <el-input type="text" placeholder="请输入验证码" v-model="inputForm.phoneCode" >
+                <el-button slot="append" type="primary" @click="pushPhoneCode()" :loading="!showPhoneCode" style="background-color: #3595f9">
+                  <span v-if="showPhoneCode" style="color: white">获取验证码</span>
+                  <span v-else class="count" style="color: white">请等待 {{count}} s</span>
+                </el-button>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="newPassword">
+              <el-input type="password" placeholder="请输入新密码" v-model="inputForm.newPassword"></el-input>
+            </el-form-item>
+            <el-form-item prop="newPasswordAgain">
+              <el-input type="password" placeholder="请再次输入新密码" v-model="inputForm.newPasswordAgain"></el-input>
+            </el-form-item>
+            <!-- 返回登录页面 -->
+            <div style="float: right;position: relative;z-index:99;height: 40px;line-height:40px;">
+              <el-button type="text" @click="backLogin()" class="forgetPw">前往登录页面</el-button>
+            </div>
+            <el-form-item>
+              <el-button type="primary" :loading="loading" class="login-submit" @click="saveNewPass()">保存</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <el-image class="right" src="/static/img/right.png"></el-image>
+      </div>
     </div>
   </div>
 </template>
@@ -103,7 +138,11 @@
           username: '',
           password: '',
           uuid: '',
-          code: ''
+          code: '',
+          phoneNumber: '',
+          phoneCode: '',
+          newPassword: '',
+          newPasswordAgain: ''
         },
         rules: {
           username: [
@@ -114,9 +153,25 @@
           ],
           code: [
             {required: true, message: '验证码不能为空', trigger: 'blur'}
+          ],
+          phoneNumber: [
+            {required: true, message: '绑定手机号不能为空', trigger: 'blur'}
+          ],
+          phoneCode: [
+            {required: true, message: '验证码不能为空', trigger: 'blur'}
+          ],
+          newPassword: [
+            {required: true, message: '新的密码不能为空', trigger: 'blur'}
+          ],
+          newPasswordAgain: [
+            {required: true, message: '再次输入的新密码不能为空', trigger: 'blur'}
           ]
         },
-        captchaPath: ''
+        captchaPath: '',
+        whichPage: '1', // 1为登录页面，2为忘记密码页面
+        showPhoneCode: true,
+        count: '', // 初始化次数
+        timer: null
       }
     },
     configService: null,
@@ -231,8 +286,87 @@
           }
         }
       },
-      open () {
-        console.log(321312)
+      openForgetPassword () {
+        this.inputForm.username = ''
+        this.inputForm.password = ''
+        this.inputForm.code = ''
+        this.$refs.inputForm.resetFields()
+        this.$nextTick(() => {
+          this.whichPage = '2' // 打开忘记密码页面
+        })
+      },
+      backLogin () {
+        this.inputForm.phoneNumber = ''
+        this.inputForm.phoneCode = ''
+        this.inputForm.newPassword = ''
+        this.inputForm.newPasswordAgain = ''
+        this.$refs.inputForm2.resetFields()
+        this.whichPage = '1' // 打开登录页面
+      },
+      saveNewPass () {
+        this.loading = true
+        this.$refs['inputForm2'].validate((valid) => {
+          if (valid) {
+            if (this.inputForm.newPassword !== this.inputForm.newPasswordAgain) {
+              this.loading = false
+              this.$message.error('两次输入的密码不相同，请重新输入!')
+              throw new Error('两次输入的密码不相同，请重新输入!')
+            }
+            this.loginService.saveNewPassword(this.inputForm).then(({data}) => {
+              if (data.success) {
+                this.$message.success(data.message)
+                this.inputForm.username = this.inputForm.phoneNumber
+                this.inputForm.password = this.inputForm.newPassword
+                this.backLogin() // 修改密码成功后返回登录页面
+                this.loading = false
+              } else {
+                this.$message.error(data.message)
+                this.loading = false
+              }
+            }).catch(() => {
+              this.loading = false
+            })
+          } else {
+            this.loading = false
+          }
+        })
+      },
+      pushPhoneCode () {
+        // 验证手机号码格式是否正确
+        if (this.checkPhoneNumber()) {
+          // 向手机号发送验证码
+          this.loginService.getPhoneCode(this.inputForm.phoneNumber).then(({data}) => {
+            if (data.success) {
+              this.$message.success(data.message)
+              // ‘发送验证码’按钮倒计时
+              const TIME_COUNT = 60 // 更改倒计时时间
+              if (!this.timer) {
+                this.count = TIME_COUNT
+                this.showPhoneCode = false
+                this.timer = setInterval(() => {
+                  if (this.count > 0 && this.count <= TIME_COUNT) {
+                    this.count--
+                  } else {
+                    this.showPhoneCode = true
+                    clearInterval(this.timer) // 清除定时器
+                    this.timer = null
+                  }
+                }, 1000)
+              }
+            } else {
+              this.$message.error(data.message)
+            }
+          })
+        }
+      },
+      // 验证手机号码
+      checkPhoneNumber () {
+        let phone = this.inputForm.phoneNumber
+        if (!/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$/.test(phone)) {
+          this.$message.error('请填写正确的手机号')
+          return false
+        }
+        return true
       }
     }
   }