mall4pc-bbc/pages/forget-password.vue

<template>
  <div class="register">
    <div class="r-header">
      <div class="content">
        <nuxt-link to="/" class="logo">
          <!--<span class="img"></span>-->
          <img class="img" v-if="webConfigData.pcLogoImgText" :src="webConfigData.pcLogoImgText"/>
          <!--<span class="text">蓝海创新科技</span>-->
        </nuxt-link>
        <div class="go-login">{{$t('ucPassword.thinkingPassword')}}
          <nuxt-link to="/login"
                class="login-btn">{{$t('ucPassword.goLogin')}}</nuxt-link>
        </div>
      </div>
    </div>
    <!-- 第一步 -->
    <div class="r-con"
         v-if="registerStep==1"
         :style="{margin:$t('language')=='en'?'80px auto':'100px auto'}"
         >
      <div class="steps">
        <div :class="['item', registerStep==1?'active':'']">
          <div class="number">1</div>
          <div class="text">{{$t('ucPassword.verifyMobileNumber')}}</div>
        </div>
        <div class="item">
          <div class="number">2</div>
          <div class="text">{{$t('ucPassword.fillInPassword')}}</div>
        </div>
        <div class="item">
          <div class="number">3</div>
          <div class="text">{{$t('ucPassword.completion')}}</div>
        </div>
      </div>
      <div class="con-box">
        <div :class="['item',errorTips==1? 'error':'']">
          <div class="input-box phone">
            <span class="ic">+86</span>
            <input type="text"
                   class="input"
                   v-model="mobile"
                   :placeholder="$t('ucPassword.enterCellNumber')">
          </div>
          <div class="error-text"
               v-if="errorTips==1">{{$t('ucPassword.enterCorrectNumber')}}</div>
        </div>
        <div :class="['item',errorTips==2? 'error':'']">
          <div class="input-box code">
            <input type="text"
                   class="input"
                   v-model="validCode"
                   :placeholder="$t('ucPassword.pleaseEnter')">
            <a href="javascript:void(0)"
               class="send-code"
               v-show="show"
               @click="getCode">{{$t('ucPassword.getCode')}}</a>
            <a href="javascript:void(0)"
               v-show="!show"
               class="send-code"
               style="cursor: not-allowed;">{{count}} s</a>
          </div>
          <div class="error-text"
               v-if="errorTips==2">{{$t('ucPassword.pleaseEnter')}}</div>
        </div>
        <span class="next"
              @click="registerNext">{{$t('ucPassword.nextStep')}}</span>
      </div>
    </div>
    <!-- /第一步 -->
    <!-- 第二步 -->
    <div class="r-con"
             :style="{margin:$t('language')=='en'?'80px auto':'100px auto'}"
         v-if="registerStep==2">
      <div class="steps">
        <div class="item active">
          <div class="number">1</div>
          <div class="text">{{$t('ucPassword.verifyMobileNumber')}}</div>
        </div>
        <div :class="['item', registerStep==2?'active':'']">
          <div class="number">2</div>
          <div class="text">{{$t('ucPassword.fillInPassword')}}</div>
        </div>
        <div class="item">
          <div class="number">3</div>
          <div class="text">{{$t('ucPassword.completion')}}</div>
        </div>
      </div>
      <div class="con-box">
        <!-- <div :class="['item',errorTips==3? 'error':'']">
          <div class="input-box">
            <input type="text"
                   class="input"
                   v-model="userName"
                   placeholder="请您设置账号">
          </div>
          <div class="error-text"
               v-if="errorTips==3">账号为4~16位字母、数字或下划线</div>
        </div> -->
        <div :class="['item',errorTips==4? 'error':'']">
          <div class="input-box">
            <input type="password"
                   class="input"
                   v-model="password"
                   :placeholder="$t('ucPassword.setYourPassword')">
          </div>
          <div class="error-text"
               v-if="errorTips==4">{{$t('ucPassword.enterNewPasswordTips1')}}</div>
        </div>
        <div :class="['item',errorTips==5? 'error':'']">
          <div class="input-box">
            <input type="password"
                   class="input"
                   v-model="confirmPwd"
                   :placeholder="$t('ucPassword.enterPasswordAgain')">
          </div>
          <div class="error-text"
               v-if="errorTips==5">{{$t('ucPassword.enterNewPasswordTips5')}}</div>
        </div>
        <span class="next"
              @click="registerNext">{{$t('ucPassword.nextStep')}}</span>
      </div>
    </div>
    <!-- /第二步 -->
    <!-- 第三步 -->
    <div class="r-con"
             :style="{margin:$t('language')=='en'?'80px auto':'100px auto'}"
         v-if="registerStep==3">
      <div class="con-box">
        <div class="register-success">
          <div class="img">
            <!-- <img src="~/assets/images/success.png" alt=""> -->
          </div>
          <div class="text">
            <div class="text-div">{{$t('ucPassword.passwordChangeSuccessful')}}</div>
            <div class="text-span"><span style="color:blue">{{loCount}}</span>{{$t('ucPassword.jumpPage')}}</div>
          </div>
        </div>
        <nuxt-link to="/login"
           class="next suc-btn">{{$t('ucPassword.goLogin')}}</nuxt-link>
      </div>
    </div>
    <!-- /第三步 -->
    <div class="content r-footer">
      <!-- <div class="links">
        <nuxt-link to="/"
           class="item">{{$t('ucPassword.mallHome')}}</nuxt-link>
        <a href="https://www.mall4j.com/" target="_blank"
           class="item">{{$t('ucPassword.officialWebsite')}}</a>
        <a href=""
           class="item">{{$t('ucPassword.openSourceWebsite')}}</a>
      </div> -->
      <div class="copyright">{{$t('language')=='zh'?webConfigData.pcCopyrightCn:webConfigData.pcCopyrightEn}}</div>
      <!--<div class="copyright">©Copyright 2018 广州市蓝海创新科技有限公司 版权所有 | 粤ICP备18115813号-1</div>-->
    </div>
    <!-- 登录弹窗组件 -->
    <LoginPopup v-if="showLogin"
                v-on:hideLoginPop='hideLoginPop' />
    <!-- /登录弹窗组件 -->
  </div>
</template>

<script>
import util from '../plugins/util'
import Cookie from 'js-cookie'
import LoginPopup from '~/components/login-popup'
import { encrypt } from '~/plugins/crypto.js'
export default {
  components: {
    LoginPopup
  },
  layout: 'empty',
  data () {
    return {
      registerStep: 1, // 注册步骤
      errorTips: 0, // 输入错误提示:  1手机号输入错误  2验证码输入错误  3账号输入错误  4密码输入错误  5验证密码输入错误
      mobile: '',
      validCode: '',
      userName: '',
      password: '',
      confirmPwd: '',
      checkRegisterSmsFlag: '', // 校验登录注册验证码成功的标识

      // 验证码相关
      show: true,
      count: '',
      timer: null,
      hadGotCode: false,
      // 登录弹窗
      showLogin: false,

      // 完成跳转登录页倒计时
      loTimer: null,
      loCount: 0,
      webConfigData: {} // 网站配置信息
    }
  },
  methods: {
    /**
     * 获取验证码
     */
    getCode () {
      if (!util.checkPhoneNumber(this.mobile)) {
        this.errorTips = 1
        return
      }
      if(this.hadGotCode){
        return
      }
      this.hadGotCode = true
      let sendSmsParam = {
        mobile: this.mobile,
      }
      this.$axios.post('/sms/sendUpdatePwdCode', sendSmsParam).then(({ data }) => {
        const timeCount = 60;
        if (!this.timer) {
          this.count = timeCount;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= timeCount) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
              this.hadGotCode = false
            }
          }, 1000)
        }
      })
    },

    /**
     * 注册-下一步按钮
     */
    registerNext () {
      if (this.registerStep == 1) {
        if(!util.checkPhoneNumber(this.mobile)){
          this.errorTips = 1
          return
        }
        else if (!this.validCode.trim()) {
          this.errorTips = 2
          return
        } else {
          this.errorTips = 0
          // 校验验证码
          let checkRegisterSmsParam = {
            mobile: this.mobile,
            validCode: this.validCode
          }
          this.$axios.put('/user/checkUpdatePwdSms', checkRegisterSmsParam)
            .then(({ data }) => {
              this.checkRegisterSmsFlag = data
              this.registerStep += 1;
            })
        }
      } else if (this.registerStep == 2) {
        if (!this.password.trim()) {
          this.errorTips = 4
          return
        } else if (this.password != this.confirmPwd) {
          this.errorTips = 5
          return
        } else {
          this.errorTips = 0
          // 请求注册
          let userRegisterParam = {
            appType: 3, // 应用类型 1小程序 2微信公众号 3 PC
            checkRegisterSmsFlag: this.checkRegisterSmsFlag, // 校验登录注册验证码成功的标识
            mobile: this.mobile,
            userName: this.userName,
            password: encrypt(this.password),
          }
          this.$axios.put('/user/updatePwd', userRegisterParam)
            .then(({ data }) => {
              this.registerStep += 1;
              this.loginOut()
              setTimeout(() => {
                // window.location.pathname == '/register' ? this.$router.push({ path: '/' }) : window.location.reload();
                this.$router.push('/login')
              }, 3000)
              const loTimeCount = 3;
              if (!this.loTimer) {
                this.loCount = loTimeCount;
                this.loTimer = setInterval(() => {
                  if (this.loCount > 0 && this.loCount <= loTimeCount) {
                    this.loCount--;
                  } else {
                    clearInterval(this.loTimer);
                    this.loTimer = null;
                  }
                }, 1000)
              }
            })
        }
      }
    },

    /**
     * 退出登录
     */
    loginOut () {
      Cookie.remove('token')
      window.localStorage.clear()
      // this.$route.path == '/' ? location.reload() : this.$router.push({ path: '/' })
    },

    showLoginPopup () {
      this.showLogin = true
    },
    hideLoginPop () {
      this.showLogin = false
    },
  },
  mounted () {
    this.$axios.get('/webConfig/getPcWebConfig').then(({ data }) => {
      this.webConfigData = data
      localStorage.setItem('webConfig', JSON.stringify(data))
    })
    document.title = this.$i18n.t('ucPassword.forgotPassword')
  },
}
</script>

<style scoped src='~/assets/css/register.css'></style>