mall4pc-bbc/components/login-popup.vue

<template>
  <div class="login">
    <div class="popup-mask"></div>
    <div class="login-box">
      <div class="close" @click="$emit('hideLoginPop')"></div>
      <div class="login-header">
        <div
          :class="['item',loginType==0?'active':'']"
          @click="changeLoginType($event)"
          data-logintype="0"
          :style="{padding:$t('language')=='en'?'0 30px 0 0':'18px'}"
        >{{$t('login.accountLogin')}}</div>
        <div
          :class="['item',loginType==1?'active':'']"
          @click="changeLoginType($event)"
          data-logintype="1"
          :style="{padding:$t('language')=='en'?'0 0 0 30px':'18px'}"
        >{{$t('login.mobileLogin')}}</div>
      </div>

      <!-- 账号登录 -->
      <div class="login-con" v-if="loginType==0">
        <div :class="['item','account',errorTips==3?'msg-error':'']">
          <div class="icon"></div>
          <input
            type="text"
            class="input"
            v-model="userName"
            @keyup.enter="login"
            :placeholder="$t('login.enterUsername')"
          />
          <div class="cancel" @click="clearInput($event)" data-type="userName"></div>
        </div>
        <div class="error" v-show="errorTips == 3">{{$t('login.accountRestrictions')}}</div>
        <div :class="['item','password',errorTips==4?'msg-error':'']">
          <div class="icon"></div>
          <input
            type="password"
            class="input"
            v-model="password"
            @keyup.enter="login"
            :placeholder="$t('login.enterPassword')"
          />
          <div class="cancel" @click="clearInput($event)" data-type="password"></div>
        </div>
        <!-- <div class="error"
        v-show="errorTips">{{['','请输入正确的手机号','请输入验证码','账号为4~16位字母、数字或下划线','请输入密码','验证码有误','请同意下方条款'][errorTips]}}</div>-->
        <div class="error" v-show="errorTips == 4">{{$t('login.enterPassword')}}</div>
        <div class="error" v-show="errorTips == 6">{{$t('login.pleaseAgreefollowingTerms')}}</div>
        <a href="javascript:void(0)" class="login-button" @click="login">{{$t('login.login')}}</a>
        <div :class="['agree-box',this.$t('language') == 'en'?'agree-box-en':'']">
          <!-- <input
            type="checkbox"
            @click="checkAgree"
            :class="['checkbox',isAgree?'checked': 'default']"
            class="checkbox default"
          /> -->
          <span class="text" v-if="serviceTermsSwitch || privacyPolicySwitch">
            {{$t('login.consentOfLoginRepresentative')}}
            <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>
      </div>
      <!-- /账号登录 -->

      <!-- 手机登录 -->
      <div class="login-con" v-if="loginType==1">
        <div :class="['item','phone',errorTips==1?'msg-error':'']">
          <div class="icon"></div>
          <input
            type="text"
            class="input"
            v-model="mobile"
            @keyup.enter="login"
            :placeholder="$t('login.enterPhone')"
          />
          <div class="cancel" @click="clearInput($event)" data-type="mobile"></div>
        </div>
        <div class="error" v-show="errorTips == 1">{{$t('register.enterValidPhone')}}</div>
        <div :class="['item','code',errorTips==2?'msg-error':'']">
          <div class="icon"></div>
          <input

            type="text"
            class="input"
            v-model="validCode"
            @keyup.enter="login"
            :placeholder="$t('login.enterCode')"
             :style="{width:$t('language')=='en'?'100px':'150px'}"
          />
          <a href="javascript:void(0);" class="send-code" v-show="show" @click="getCode" :style="{width:$t('language')=='en'?'139px':'89px'}">{{$t('login.getCode')}}</a>
          <span v-show="!show" class="send-code"  :style="{width:$t('language')=='en'?'139px':'89px'}" style="cursor: not-allowed;">{{count}} s</span>
        </div>
        <!-- <div class="item img-code">
          <input type="text"
                 class="input"
                 v-model="imgValid"
                 placeholder="请输入验证码">
          <a href=""
             class="code-img"><img src="~/assets/img/adv1.jpg"
                 alt=""></a>
        </div>-->
        <!-- <div class="error"
        v-show="errorTips">{{['','请输入正确的手机号','请输入验证码','账号为4~16位字母、数字或下划线','请输入密码','验证码有误','请同意下方条款'][errorTips]}}</div>-->
        <div class="error" v-show="errorTips == 2">{{$t('login.enterCode')}}</div>
        <!-- <div class="error" v-show="errorTips == 5">验证码有误</div> -->
        <div class="error" v-show="errorTips == 6">{{$t('login.pleaseAgreefollowingTerms')}}</div>
        <a href="javascript:void(0)" @click="login" class="login-button" >{{$t('login.login')}}</a>
        <div :class="['agree-box',this.$t('language') == 'en'?'agree-box-en':'']"
        >
          <!-- <input
            type="checkbox"
            @click="checkAgree"
            :class="['checkbox',isAgree?'checked': 'default']"
            class="checkbox default"
          /> -->
          <span class="text" v-if="serviceTermsSwitch || privacyPolicySwitch">
            {{$t('login.consentOfLoginRepresentative')}}
            <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>
      </div>
      <!-- /手机登录 -->

      <div class="login-footer">
        <!-- <div class="other-login">
          <a href=""
             class="item qq-login">QQ</a>
          <a href=""
             class="item weixin-login">微信</a>
        </div>-->
        <nuxt-link class="footer-a" to="/register">{{$t('register.registerNow')}}</nuxt-link>
        <nuxt-link to="/forget-password" class="footer-a">{{$t('login.forgotYourPassword')}}</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import util from '../plugins/util'
import { encrypt } from '~/plugins/crypto.js'
export default {
  data () {
    return {
      loginType: 0, // 1手机登录 0账号登录
      mobile: '',
      validCode: '',
      userName: '',
      password: '',
      imgValid: '',
      errorTips: 0, // 输入错误提示:  1手机号输入错误  2验证码输入错误  3账号输入错误  4密码输入错误 5图形验证码错误 6未同意条款
      // 验证码相关
      show: true,
      count: '',
      timer: null,
      hadGotCode: false,
      isAgree: true, // 是否同意条款
      isLogging: false,
      serviceTermsSwitch: true,
      privacyPolicySwitch: true
    }
  },
  watch: {

  },
  mounted () {
    this.$axios.get('/sys/config/info/getSysServiceSwitch').then(({ data }) => {
      this.serviceTermsSwitch = data.serviceTermsSwitch
      this.privacyPolicySwitch = data.privacyPolicySwitch
    })
  },
  methods: {
    /**
     * 切换登录方式
     */
    changeLoginType (e) {
      this.loginType = e.target.dataset.logintype
      this.errorTips = 0
      this.mobile = ''
      this.validCode = ''
      this.userName = ''
      this.password = ''
      this.imgValid = ''
    },
    /**
     * 获取登录验证码
     */
    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.post('/sms/sendLoginCode', 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)
        }
      })
    },

    /**
     * 登录
     */
    login () {
      if (this.loginType == 1) {
        // 手机验证码登录
        if (!util.checkPhoneNumber(this.mobile)) {
          this.errorTips = 1
          return
        } else if (!this.validCode.trim()) {
          this.errorTips = 2
          return
        } else if (!this.isAgree) {
          this.errorTips = 6
          return
        }
      } else {
        // console.log(this.userName)
        // console.log(this.password)
        // 用户名密码
        if (!util.checkUserName(this.userName)) {
          this.errorTips = 3
          return
        } else if (!this.password.trim()) {
          this.errorTips = 4
          return
        } else if (!this.isAgree) {
          this.errorTips = 6
          return
        }
      }
      this.errorTips = 0
      const data = {
        userName: this.mobile ? this.mobile : this.userName,
        passWord: this.loginType == 0 ? encrypt(this.password) : this.validCode,
      }
      if (this.isLogging) {
        return
      } else {
        this.$axios.post( this.loginType == 0 ? '/login' : '/smsLogin', data)
          .then(({ data }) => {
            Cookie.set('token', data.accessToken)
            this.isLogging = true
            this.$emit('hideLoginPop')
            window.location.pathname == '/register' ? this.$router.push({ path: '/' }) : window.location.reload();
          })
      }
    },

    /**
     * 清除输入框内容
     */
    clearInput (e) {
      const type = e.target.dataset.type
      switch (type) {
        case 'mobile':
          this.mobile = ''
          break;
        case 'userName':
          this.userName = ''
          break;
        case 'password':
          this.password = ''
          break;
        default:
          break;
      }
    },
    /**
     * 同意条款
     */
    // checkAgree () {
    //   this.isAgree = !this.isAgree
    //   if (this.errorTips == 6) {
    //     this.errorTips = 0
    //   }
    // },

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

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