realtorEasier-webSite/mobile/src/pages/account/codeLogin/index.vue

<template>
  <div class="register-layout">
    <div class="login-con">
      <h1 class="common-title">{{ $t('login.codeLogin') }}</h1>
      <div class="input-con" :class="{inputActive:inputActive==='phone'}">
        <div class="phone-select" ref="quhaoMenu">
          <div class="phone-select-div" @click="showSelect=!showSelect">
            <span>{{codeActive[1]}}</span>
            <!-- (<span>{{codeActive[0]}}</span>) -->
            <div class="sanjiao"></div>
          </div>
          <phoneSelect v-show="showSelect" @selectItem="selectItem" />
        </div>
        <input class="guding" oninput="value=value.replace(/[^\d]/g,'')" v-model="phone" @focus="inputActive='phone'" @blur="inputActive=''" type="text" :placeholder="langLogin.phone.placeholder">
      </div>
      <div class="code-con">
        <div class="input-con" :class="{inputActive:inputActive==='code'}">
          <input v-model="authCode" @focus="inputActive='code'" @blur="inputActive=''" style="padding-left:6px;" type="text" oninput="value=value.replace(/[^\d]/g,'')" maxlength='6' :placeholder="langLogin.code.placeholder">
          <div class="send-btn" v-if="!jishi"  @click="getAuthCode">{{langLogin.code.txt}}</div>
          <span class="send-btn"  v-else>{{language==='en'?`Resend after ${interTime}s`:`${interTime}s后重新发送`}}</span>
        </div>
      </div>
      <div class="forget">
        <router-link :to="{path:'/login'}">{{langLogin.defaultLogin}}</router-link>
      </div>
      <div class="btns" @click="submit">{{langLogin.login}}</div>
      <div class="to-login">
        <div class="lo-con">
          <router-link :to="{path:'/forget'}">{{ $t('login.forgetPassword') }}</router-link><router-link :to="{path:'/register'}">{{langLogin.loginsub2}}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import phoneSelect from '@/components/common/phoneSelect'
import {mapState} from 'vuex'

export default {
  data () {
    return {
      showSelect: false,
      codeActive: ['中国', '+86', 'China'],
      nickname: '',
      phone: '',
      authCode: '',
      inputActive: '',
      interTime: 60,
      jishi: false,
      interl: null
    }
  },
  computed: {
    ...mapState({
      language: state => state.language.current,
      langToast: state => state.language.home.toast,
      langLogin: state => state.language.home.home.loginAside,
      token: state => state.user.token
    })
  },
  components: {
    phoneSelect
  },
  mounted () {
    document.addEventListener('click', (e) => {
      if (this.$refs.quhaoMenu) {
        if (!this.$refs.quhaoMenu.contains(e.target)) {
          this.showSelect = false
        }
      }
    })
  },
  methods: {

    selectItem (item) {
      this.showSelect = false
      this.codeActive = item
    },
    async getAuthCode () {
      // if (!reg.phone.test(this.phone)) {
      //   return
      // }

      let res = await this.$store.dispatch('getAuthCode', {
        phone: this.phone,
        code: Number(this.codeActive[1].substr(1))
      })
      if (res) {
        this.interl && clearInterval(this.interl)
        this.interl = null
        this.jishi = true
        this.interl = setInterval(() => {
          this.interTime--
          if (this.interTime <= 0) {
            this.jishi = false
            this.interTime = 60
            clearInterval(this.interl)
            this.interl = null
          }
        }, 1000)
      }
    },
    async submit () {
      let check = value => {
        for (let i = 0, len = value.length; i < len; i++) {
          if (!value[i].val) {
            return this.$toast.show('warn', (this.language === 'en' ? value[i].En : value[i].name) + this.langToast['7'])
          }
        }
        return true
      }

      let checkStr = [
        {
          name: '手机',
          En: 'Phone number',
          val: this.phone
        },
        {
          name: '验证码',
          En: 'Verification code',
          val: this.authCode
        }
      ]
      if (!check(checkStr)) {
        return
      }

      // let country = Number(this.codeActive[1].substr(1))

      let params = {
        phoneNum: this.phone,
        msgAuthCode: this.authCode
      }
      await this.$store.dispatch('codeLogin', params)
      if (this.token) {
        this.$router.replace({path: '/information'})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>