mall4pc-bbc/pages/register.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('register.haveAnAccount')}}
          <nuxt-link to="/login" class="login-btn">{{$t('register.goToLogin')}}</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('register.verifyCellPhoneNumber')}}</div>
        </div>
        <div class="item">
          <div class="number">2</div>
          <div class="text">{{$t('register.fillInTheAccountInformation')}}</div>
        </div>
        <div class="item">
          <div class="number">3</div>
          <div class="text">{{$t('register.completeRegistration')}}</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('login.enterUserNumber')" maxlength="11"/>
          </div>
          <div class="error-text" v-if="errorTips==1">{{$t('register.enterValidPhone')}}</div>
        </div>
        <div :class="['item',errorTips==2? 'error':'']">
          <div class="input-box code">
            <input type="text" class="input" v-model="validCode" :placeholder="$t('login.enterCode')" />
            <a href="javascript:void(0)" class="send-code" v-show="show" @click="getCode">{{$t('login.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('login.enterCode')}}</div>
        </div>
        <div class="item agree">
          <!-- <input
            type="checkbox"
            @click="checkAgree"
            :class="['checkbox',isAgree?'checked': 'default']"
            class="checkbox default"
            style="margin-right:10px"
          /> -->
          <span class="text" v-if="serviceTermsSwitch || privacyPolicySwitch">
            {{$t('login.consentOfRegisteredRepresentative')}}
            <a href="javaScript:void(0)" class="agreement" @click="toTermsPage(0)" v-if="serviceTermsSwitch">{{$t('login.termsOfService')}}</a>
            <span v-if="privacyPolicySwitch && serviceTermsSwitch">{{$t('login.and')}}</span>
            <a href="javaScript:void(0)" class="agreement" @click="toTermsPage(1)" v-if="privacyPolicySwitch">{{$t('login.privacyPolicy')}}</a>
          </span>
        </div>
        <span class="next" @click="registerNext">{{$t('register.nextStep')}}</span>
      </div>
    </div>
    <!-- /第一步 -->
    <!-- 第二步 -->
    <div class="r-con" v-if="registerStep==2"
    :style="{margin:$t('language')=='en'?'80px auto':'100px auto'}"
    >
      <div class="steps">
        <div class="item active">
          <div class="number">1</div>
          <div class="text">{{$t('register.verifyCellPhoneNumber')}}</div>
        </div>
        <div :class="['item', registerStep==2?'active':'']">
          <div class="number">2</div>
          <div class="text">{{$t('register.fillInTheAccountInformation')}}</div>
        </div>
        <div class="item">
          <div class="number">3</div>
          <div class="text">{{$t('register.completeRegistration')}}</div>
        </div>
      </div>
      <div class="con-box">
        <div :class="['item',errorTips==8? 'error':'']">
          <div class="input-box">
            <input type="text" class="input" v-model="nickName" :placeholder="$t('register.pleaseSetNickName')" />
          </div>
          <div class="error-text" v-if="errorTips==8">{{$t('register.pleaseSetNickName')}}</div>
        </div>
        <div :class="['item',errorTips==3? 'error':'']">
          <div class="input-box">
            <input type="text" class="input" v-model="userName" :placeholder="$t('register.pleaseSetAccount')" />
          </div>
          <div class="error-text" v-if="errorTips==3">{{$t('register.setAccountNumberTips')}}</div>
        </div>
        <div :class="['item',errorTips==4 || errorTips==7? 'error':'']">
          <div class="input-box">
            <input type="password" class="input" v-model="password" :placeholder="$t('register.pleaseSetYourPassword')" />
          </div>
          <div class="error-text" v-if="errorTips==4">{{$t('login.enterPassword')}}</div>
          <div class="error-text" v-if="errorTips==7">{{$t('register.passwordVerification')}}</div>
        </div>
        <div :class="['item',errorTips==5? 'error':'']">
          <div class="input-box">
            <input type="password" class="input" v-model="confirmPwd" :placeholder="$t('register.enterThePasswordAgain')" />
          </div>
          <div class="error-text" v-if="errorTips==5">{{$t('ucPassword.enterNewPasswordTips5')}}</div>
        </div>
        <span class="next" @click="registerNext">{{$t('register.nextStep')}}</span>
      </div>
    </div>
    <!-- /第二步 -->
    <!-- 第三步 -->
    <div class="r-con" v-if="registerStep==3"
    :style="{margin:$t('language')=='en'?'80px auto':'100px auto'}"
    >
      <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('register.registrationSuccessful')}}</div>
            <div class="text-span">
              {{$t('register.autoJumpToHome')}} <span style="color:blue">{{loCount}} s</span>
            </div>
          </div>
        </div>
        <nuxt-link to="/" class="next suc-btn">{{$t('commonHead.home')}}</nuxt-link>
      </div>
    </div>
    <!-- /第三步 -->
    <div class="content r-footer">
      <!-- <div class="links">
        <nuxt-link to="/" class="item">{{$t('ucPassword.mallHome')}}</nuxt-link>
        <nuxt-link to="/user-center" class="item" v-show="!this.$route.name==='register'">{{$t('commonHead.personalCenter')}}</nuxt-link>
        <a href='https://www.gz-yami.com/' target="_blank" class="item">{{$t('commonFoot.officialWebsite')}}</a>
        <a href="https://www.mall4j.com/" target="_blank" class="item">{{$t('commonFoot.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: '',
      nickName: '',
      password: '',
      confirmPwd: '',
      checkRegisterSmsFlag: '', // 校验登录注册验证码成功的标识
      isAgree: true,
      // 验证码相关
      show: true,
      count: '',
      timer: null,
      hadGotCode: false,
      // 登录弹窗
      showLogin: false,

      // 完成跳转首页倒计时
      loTimer: null,
      loCount: 0,
      webConfigData: {},// 网站配置信息
      serviceTermsSwitch: true,
      privacyPolicySwitch: true
    }
  },
  methods: {
    /**
     * 获取验证码
     */
    getCode () {
      if (!util.checkPhoneNumber(this.mobile)) {
        this.errorTips = 1
        return
      }
      if (this.hadGotCode) {
        return
      }
      // 判断值
      this.hadGotCode = true
      this.errorTips = 0
      let sendSmsParam = {
        mobile: this.mobile,
      }

        this.$axios.put('/user/sendRegisterSms', 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)
        }
      })
      //判断值
      this.hadGotCode = false

    },

    /**
     * 同意条款
     */
    checkAgree () {
      this.isAgree = !this.isAgree
      if (this.errorTips == 6) {
        this.errorTips = 0
      }
    },


    /**
     * 跳转到《服务条款》或《隐私协议》
     */
    toTermsPage (sts) {
      this.$router.push({ path: '/termsPage?sts=' + sts })
    },

    /**
     * 注册-下一步按钮
     */
    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/checkRegisterSms', checkRegisterSmsParam)
            .then(({ data }) => {
              this.checkRegisterSmsFlag = data
              this.registerStep += 1;
            })
        }
        // if(!this.isAgree){
        //   this.$message.error('请同意服务条款和隐私策略')
        //   this.registerStep == 1;
        //   return
        // }
      } else if (this.registerStep == 2) {

        var reg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,20}$");
        let result = reg.test(this.password);
        if (!this.nickName || !this.nickName.trim()) {
          this.errorTips = 8
          return
        }
        if (!util.checkUserName(this.userName)) {
          this.errorTips = 3
          return
        } else if (!this.password.trim()) {
          this.errorTips = 4
          return
        } else if(!result){
          this.errorTips = 7
          return
        }
        else if (this.password != this.confirmPwd) {
          this.errorTips = 5
          return
        } else {
          this.errorTips = 0
          // 请求注册
          let userRegisterParam = {
            checkRegisterSmsFlag: this.checkRegisterSmsFlag, // 校验登录注册验证码成功的标识
            mobile: this.mobile,
            userName: this.userName,
            nickName: this.nickName,
            password: encrypt(this.password),
            tempUid: ''
          }
          this.$axios.post('/user/register', userRegisterParam)
            .then(({ data }) => {
              this.registerStep += 1;
              Cookie.set('token', data.accessToken)
              setTimeout(() => {
                // window.location.pathname == '/register' ? this.$router.push({ path: '/' }) : window.location.reload();
                this.$router.push('/')
              }, 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)
              }
            })
        }
      }
    },

    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.$t('register.registerAccount')
    this.$axios.get('/sys/config/info/getSysServiceSwitch').then(({ data }) => {
      this.serviceTermsSwitch = data.serviceTermsSwitch
      this.privacyPolicySwitch = data.privacyPolicySwitch
    })
  },
  watch: {
    mobile () {
      if (this.hadGotCode) {
        this.hadGotCode = false
      }
    }
  }
}
</script>

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