登录相关逻辑开发完成

components/LoginBar.vue

@@ -5,19 +5,43 @@ import { mapActions } from 'vuex'
 
 export default {
   data() {
+    const regPhone = /^1[3456789]\d{9}$/
+    const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
     return {
       form: {
         username:'',
         password:''
       },
+      forgetForm: {
+        account:'',
+        code: '',
+        key:''
+      },
+      resetForm: {
+        newPassword: '',
+        confirm_newPassword: '',
+        verifyCode: '',
+        type: '1'
+      },
+      receiver:'',
       checked:true,
       logging:false,
-      interfaceStatus: 'login'
+      interfaceStatus: 'login',
+      forgetPswErrTip: '',
+      codeImg:'',
+      sending: false,
+      clock: 60,
+      resetPswTip:'',
+      regEmail,
+      regPhone,
     }
   },
   computed: {
     loginBtnDisabled() {
       return !(this.form.username && this.form.password)
+    },
+    forgetDisabled() {
+      return !(this.forgetForm.account && this.forgetForm.code)
     }
   },
   mounted() {
@@ -48,7 +72,8 @@ export default {
             this.getUserInfo()
           })
         }
-      }).catch(()=> {this.logging = false})
+      })
+      .finally(()=> {this.logging = false})
     },
     getUserInfo()  {
       this.$axios.get('members/getMemberInfo').then((res)=> {
@@ -61,21 +86,123 @@ export default {
     },
     handlerForgetPsw() {
       this.interfaceStatus = 'forgetPsw'
+      this.handleGetVcodeImage()
+    },
+    // 手机号码发送验证码
+    handlePostCode() {
+      if(this.sending) return
+      const params = {
+        action: '1', // 找回密码
+        receiver: this.forgetForm.account
+      }
+      if(this.regPhone.test(this.form.username)) params.type = '1'
+      if(this.regEmail.test(this.form.username)) params.type = '0'
+      this.$axios.get('auth/getVerifyCode', {params}).then((res)=> {
+        if(res.code === 200) {
+          this.sending = true
+          let interval = setInterval(() => {
+            this.clock--
+            if(this.clock === 0) {
+              this.$once('hook:beforeDestroy',()=> {
+                clearInterval(interval)
+                interval = null
+              })
+              this.clock = 60
+              this.sending = false
+            }
+          }, 1000);
+        }
+      })
+    },
+    // 获取二维码图片
+    handleGetVcodeImage() {
+      const params = {
+        width: '140',
+        height: '46',
+        codeCount: '6',
+        lineCount: '1',
+        type: 'forget_password'
+      }
+      this.$axios.get('/auth/getImageCode',{params,responseType: 'arraybuffer'}).then((res)=> {
+        this.codeImg = 'data:image/png;base64,' + btoa(
+          new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
+        )
+        this.forgetForm.key = res.headers['x-auth-token']
+      })   
     },
     resetInterfaceStatus() {
+      this.forgetForm.account = ''
+      this.forgetForm.code = ''
+      this.forgetPswErrTip = ''
+      this.resetPswTip = ''
+      this.resetForm.newPassword = ''
+      this.resetForm.confirm_newPassword = ''
+      this.resetForm.verifyCode = ''
+      this.resetForm.forgetPswErrTip = ''
       setTimeout(() => {
         this.interfaceStatus = 'login'
       }, 500);
     },
-    // 输入账号和密码后才能登录
-    // const loginBtnDisabled = computed<boolean>(()=> !(form.username && form.password))
     // 切换注册页面
     handlerRegister() {
       this.$emit('register','register')
     },
     // 重置密码验证
     handlerResetPsw() {
-      this.interfaceStatus = 'resetPsw'
+      if(!this.regPhone.test(this.forgetForm.account) && !this.regEmail.test(this.forgetForm.account)) {
+        this.forgetPswErrTip = '请输入正确的邮箱或手机号码'
+        return
+      }
+      this.logging = true
+      this.$axios.post('auth/checkExist',qs.stringify(this.forgetForm)).then((res)=> {
+        if(res.code === 200) {
+          if(this.regPhone.test(this.forgetForm.account)) {
+            this.interfaceStatus = 'resetPhonePsw'
+          }
+          if(this.regEmail.test(this.forgetForm.account)) {
+            this.postEmail()
+          }
+        }else {
+          this.forgetPswErrTip = res.msg
+          this.handleGetVcodeImage()
+        }
+      }).finally(()=> {
+        this.logging = false
+      })
+    },
+    // 邮箱找回密码，发送邮箱
+    postEmail() {
+      const params = {
+        action: '1',
+        type: '0',
+        receiver: this.forgetForm.account
+      }
+      this.$axios.get('auth/getVerifyCode', {params}).then((res) => {
+        if(res.code === 200 ) {
+          this.interfaceStatus = 'resetEmailPsw'
+        }
+      })
+    },
+    handlerConfirmReset() {
+     if(this.resetForm.newPassword !== this.resetForm.confirm_newPassword) {
+        this.resetPswTip = '两次输入的密码不一致'
+      }else if(this.resetForm.newPassword.length < 6) {
+        this.resetPswTip = '密码位数不能少于6位'
+      }else if(this.resetForm.newPassword.charCodeAtlength> 16){
+        this.resetPswTip = '密码位数不能大于16位'
+      }else {
+        this.resetPswTip = ''
+        this.submitReset()
+      }
+    },
+    submitReset() {
+      this.resetForm.account = this.forgetForm.account
+      this.$axios.post('members/resetPassword', this.resetForm).then((res)=> {
+        if(res.code === 200) {
+          this.$message.success('修改成功')
+          this.handlerClose()
+        }
+      })
     },
     handlerClose() {
       this.$emit('close')
@@ -105,9 +232,9 @@ export default {
               <a class="forgotpwd cursor-pointer" @click="handlerForgetPsw">忘记密码？</a>
             </span>
           </div>
-          <div class="error-mess" >
+          <!-- <div class="error-mess" >
             <span id="error-message error-tip">账号或密码错误</span>
-          </div>
+          </div> -->
           <div class="tips">
             <span>只有QQ/微信账号，如何进行网页登录</span>
             <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -133,19 +260,44 @@ export default {
         <p>找回账号密码</p>
       </div>
       <div class="getbackpwd_content">
-        <input v-model="form.username" class="getbackpwd_input_user account" type="text" placeholder="邮箱/手机号">
+        <input v-model="forgetForm.account" class="getbackpwd_input_user account" type="text" placeholder="邮箱/手机号">
         <br />
-        <input class="getbackpwd_input_vcode" type="text" value="" placeholder="验证码">
+        <input v-model="forgetForm.code" class="getbackpwd_input_vcode" type="text" placeholder="验证码">
+        <img :src="codeImg" class="mt-10px cursor-pointer" @click="handleGetVcodeImage">
         <br />
-        <div class="error-mess">
-          <span id="error-message error-tip">验证码错误</span>
+        <div v-if="forgetPswErrTip !== ''" class="error-mess">
+          <span id="error-message error-tip">{{forgetPswErrTip}}</span>
         </div>
-        <button id="btn-validate" type="submit" class="validate now_validate" @click="handlerResetPsw">立即验证
+        <button id="btn-validate" type="submit" class="validate" :class="{'now_validate': forgetDisabled}" @click="handlerResetPsw">立即验证
         </button>
-        <div class="loading"></div>
+        <div v-show="logging" class="loading"></div>
+      </div>
+    </div>
+    <div v-if="interfaceStatus === 'resetPhonePsw'" class="phone-reset">
+      <div class="changepwd-tittle">
+        <p>手机验证</p>
+      </div>
+      <div class="getbackpwd_content setnewpwd">
+          <p class="phone_num">{{forgetForm.account}}</p>
+          <div class="mobilevali">
+            <input v-model="resetForm.verifyCode" class="getbackpwd_input_vcode input_vcode_conform" placeholder="验证码">
+            <span class="sent-vcode sent-vcode-getbackpwd" :class="{'sent-vcode-disabled': sending}" @click="handlePostCode"><a>{{sending ? clock+'秒' : '发送验证码'}}</a></span>
+          </div>
+          <br />
+          <p>设置新密码</p>
+          <input v-model="resetForm.newPassword" class="getbackpwd_input_pwd input_newpwd" type="password" value="" placeholder="新密码（6-16个字符，区分大小写）">
+          <br />
+          <input v-model="resetForm.confirm_newPassword" class="getbackpwd_input_pwd input_newpwd_conform" type="password" placeholder="确认新密码">
+          <br />
+          <div v-if="resetPswTip !== ''" class="error-mess">
+            <span id="error-message error-tip">{{resetPswTip}}</span>
+          </div>
+          <button id="btn-validate-conform" type="submit" class="validate" @click="handlerConfirmReset">确认
+          </button>
+          <div class="loading"></div>
       </div>
     </div>
-    <div v-if="interfaceStatus === 'resetPsw'" class="user-reset">
+    <div v-if="interfaceStatus === 'resetEmailPsw'" class="user-reset">
       <div class="changepwd-tittle">
           <p>邮箱验证</p>
         </div>
@@ -262,6 +414,7 @@ export default {
         border-radius: 3px;
         padding: 10px 20px;
         margin-left: 10px; 
+        cursor:pointer;
         margin-top: 10px;
         float: right;
         width: 120px;
@@ -482,6 +635,7 @@ export default {
       border: 1px solid rgb(255, 79, 79);
       border-radius: 3px;
       padding: 10px 20px;
+      cursor:pointer;
       margin-left: 10px; 
       margin-top: 10px;
       float: right;
@@ -517,7 +671,6 @@ export default {
       position: relative;
       clear: both;
       top: 15px;
-      display: none;
       span{
         background: #808080;
         color: rgb(255, 255, 255);
@@ -541,6 +694,128 @@ export default {
     }
   }
 }
+.phone-reset {
+  .changepwd-tittle {
+    color: rgb(255, 79, 79);
+    text-align: center;
+    p {
+      font-size: 20px;
+    }
+  }
+  .getbackpwd_content {
+    text-align: center;
+    font-size: 14px;
+    .mobilevali{
+      height: 85px;
+      padding: 0 36px;
+    }
+    &.setnewpwd p{
+      font-size: 18px;
+      text-align: left;
+      padding-left: 36px;
+      height: 20px;
+    }
+    p {
+      color: rgb(102, 102, 102);
+      font-size: 24px;
+    }
+    .getbackpwd_input_user {
+      height: 60px;
+      width: 360px;
+      border-width: 0 0 1px 0;
+      border-color: rgb(238, 238, 238);
+      padding-left: 42px;
+      padding-top: 16px;
+      line-height: 44px;
+      outline:none;
+      background: url(http://cn-file.17pdf.com/website/account/ic_login_inputuser.png) no-repeat 0px 28px;
+    }
+    .getbackpwd_input_pwd {
+      height: 60px;
+      width: 360px;
+      border-width: 0 0 1px 0;
+      border-color: rgb(238, 238, 238);
+      padding-left: 42px;
+      padding-top: 16px;
+      line-height: 44px;
+      outline:none;
+      background: url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat 0px 28px;
+    }
+    .getbackpwd_input_vcode {
+      height: 60px;
+      width: 220px;
+      border-width: 0 0 1px 0;
+      border-color: rgb(238, 238, 238);
+      padding-left: 42px;
+      padding-top: 16px;
+      line-height: 44px;
+      float: left;
+      outline:none;
+      background: url(http://cn-file.17pdf.com/website/account/ic_login_input_code.png) no-repeat 0px 28px;
+    }
+    .sent-vcode {
+      border: 1px solid rgb(255, 79, 79);
+      border-radius: 3px;
+      padding: 10px 20px;
+      margin-left: 10px; 
+      margin-top: 10px;
+      cursor:pointer;
+      float: right;
+      width: 120px;
+      a {
+        color: rgb(255, 79, 79);
+      }
+    }
+    .sent-vcode-disabled {
+      border: 1px solid rgb(153, 153, 153);
+      a {
+        color: rgb(153, 153, 153);
+      }
+    }
+    .vcode-content {
+      float: right;
+      padding: 15px 30px 15px 0px;
+      display: inline-block;
+      background: url(http://cn-file.17pdf.com/website/account/path.png) no-repeat 0px 28px;
+      a{
+        width: 90px;
+        color: rgb(148, 143, 141);
+        font-size: 20px;
+        transform: rotate(-6deg);
+        letter-spacing: 1px;
+        display: inline-block;
+        &:hover, &:active {
+          text-decoration: none;
+        }
+      } 
+    }
+    .error-mess {
+      position: relative;
+      clear: both;
+      top: 15px;
+      span{
+        background: #808080;
+        color: rgb(255, 255, 255);
+        padding: 5px 15px;
+        border-radius: 4px;
+      }
+    }
+    .validate {
+      width: 360px;
+      height: 48px;
+      font-size: 16px;
+      color: rgb(255, 255, 255);
+      border: none;
+      background-color: rgb(255,82,79);
+      margin: 31px 0 40px 0;
+      border-radius: 4px;
+      outline:none;
+    }
+    .now_validate{
+      background-color: rgb(204, 204, 204);
+    }
+  }
+}
 .user-reset {
   .changepwd-tittle {
       color: rgb(255, 79, 79);