mall4pc-bbc/pages/login.vue

<template>
  <div class="login-container">
    <!-- 跳转页面登录 -->
    <div class="login-page">
      <div class="l-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-register">
            {{$t('login.notRegisteredYet')}}
            <nuxt-link to="/register" class="register-btn">{{$t('login.registeredUsername')}}</nuxt-link>
          </div>
        </div>
      </div>
      <div class="l-content" :style="webConfigData.pcLoginBgImg ? {background:'url('+webConfigData.pcLoginBgImg+') no-repeat'} : ''">
        <div class="login">
          <div class="login-box">
            <div class="login-header">
              <div
                :class="['item',loginType==1?'active':'']"
                @click="changeLoginType($event)"
                data-logintype="1"
              >{{$t('login.mobileLogin')}}</div>
              <div
                :class="['item',loginType==0?'active':'']"
                @click="changeLoginType($event)"
                data-logintype="0"
              >{{$t('login.accountLogin')}}</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"
                  @keyup.enter="login"
                  class="input"
                  v-model="userName"
                  :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" @keyup="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"
                  @keyup.enter="login"
                  class="input"
                  v-model="mobile"
                  :placeholder="$t('login.enterUserNumber')"
                />
                <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="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 == 6">{{$t('login.pleaseAgreefollowingTerms')}}</div>
              <a href="javascript:void(0)" @click="login" class="login-button" @keyup="login">{{$t('login.login')}}</a>
              <div :class="['agree-box',this.$t('language') == 'en'?'agree-box-en':'']" >
                <!-- <input
                  type="checkbox"
                  @keyup.enter="login"
                  @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 to="/register" class="footer-a">{{$t('register.registerNow')}}</nuxt-link>
              <nuxt-link to="/forget-password" class="footer-a">{{$t('login.forgotYourPassword')}}</nuxt-link>
            </div>
          </div>
        </div>
      </div>
      <div class="l-footer content">
        <!-- <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==='login'">{{$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>
    </div>
    <!-- /跳转页面登录 -->
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import util from '~/plugins/util'
import { encrypt } from '~/plugins/crypto.js'
export default {
  layout: 'empty',
  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,  //是否正在登录
      webConfigData: {}, // 网站配置信息
      serviceTermsSwitch: true,
      privacyPolicySwitch: true
    }
  },
  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.errorTips = 0
      let sendSmsParam = {
        mobile: this.mobile,
      }
      this.$axios.post('/sms/sendLoginCode', sendSmsParam)
        .then(({ data }) => {
          this.hadGotCode = true
          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 {
        // 用户名密码
        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 }) => {
            this.isLogging = true
            // var expire = new Date(new Date().getTime() + 1 * 60 * 1000)  // token 过期时间
            // Cookie.set('token', data.access_token,{ expires: expire })
            Cookie.set('token', data.accessToken)
            const user = {
              nickName: data.nickName==null?'用户名':data.nickName,
              userAvatar: data.pic
            }
            this.$store.commit('SET_USER', user)
            this.$router.push({ path: '/' })
          })
        this.$axios.onError(error => {
          const code = parseInt(error.response.status)
          if (code == 500) {
            Message.error(error.response.message)
              this.mobile = '',
              this.validCode = ''
          }
        })
      }
    },

    /**
     * 清除输入框内容
     */
    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;
      }
    },

    /**
     * 跳转到《服务条款》或《隐私协议》
     */
    toTermsPage (sts) {
      this.$router.push({ path: '/termsPage?sts=' + sts })
    },
    /**
     * 同意条款
     */
    // checkAgree () {
    //   this.isAgree = !this.isAgree
    //   if (this.errorTips == 6) {
    //     this.errorTips = 0
    //   }
    // }
  },
  mounted () {
    this.$axios.get('/webConfig/getPcWebConfig').then(({ data }) => {
      this.webConfigData = data
      localStorage.setItem('webConfig', JSON.stringify(data))
    })
    document.title = this.$t('login.login')
    this.$axios.get('/sys/config/info/getSysServiceSwitch').then(({ data }) => {
      this.serviceTermsSwitch = data.serviceTermsSwitch
      this.privacyPolicySwitch = data.privacyPolicySwitch
    })
  }
}
</script>
<style scoped src='~/assets/css/login.css'>
</style>