realtorEasier-webSite/pc/src/page/layout/aside/temp/ltemp/register.vue

<template>
  <div class="iregister-layout">
    <div class="input"><input autocomplete="off" v-model="nickname" :placeholder="languagelAside.userName.placeholder" type="text"></div>
    <div class="input phone-select" ref="quhaoMenu" >
      <div @click="showSelect=!showSelect">
        <span>{{codeActive[1]}}</span>
        <img :src="`${$cdn}images/quhao-jiantou.png`" >
      </div>
      <ul v-show="showSelect" >
        <li @click="selectItem(item)" v-for="(item,i) in selectCall" :key="i">
          {{language==='en'?item[2]:item[0]}}{{item[1]}}
        </li>
      </ul>
      <input readonly onfocus="this.removeAttribute('readonly')"  autocomplete="off" v-model="phone" oninput="value=value.replace(/[^\d]/g,'')" maxlength='11' :placeholder="languagelAside.phone.placeholder" type="text">
    </div>
    <div class="verification input">
      <input v-model="authCode" :placeholder="languagelAside.code.placeholder" type="text">
      <span v-if="!jishi" @click="getAuthCode">{{languagelAside.code.txt}}</span>
      <span v-else>{{language==='en'?`Resend after ${interTime}s`:`${interTime}s后重新发送`}}</span>
    </div>
    <div class="input"><input :style="{color:password&&password.length<8?'#ff0000':'#fff'}" readonly onfocus="this.removeAttribute('readonly')"  autocomplete="off" v-model="password" maxlength='16' type="password" :placeholder="languagelAside.newpass.placeholder" ></div>
    <div class="input"><input :style="{color:confirmPass&&confirmPass.length<8?'#ff0000':'#fff'}" readonly onfocus="this.removeAttribute('readonly')"  autocomplete="off" v-model="confirmPass" maxlength='16' type="password" :placeholder="languagelAside.comfirmpass.placeholder" ></div>
    <div class="login-dec">{{languagelAside.resigter1}}<span @click="$bus.$emit('changName', {
            name: '用户登录',
            enName: 'User login',
            id: 'ilogin'
          })">{{languagelAside.resigter2}}</span>
    </div>
    <div class="sub-con agree">
      <div class="remember" @click="handleCluse">
        <span>
          <img v-if="showCluse" :src="`${$cdn}images/icon-click.png`" alt="">
        </span>
        <span>{{languagelAside.cluse}}</span>
      </div>
    </div>
    <div class="temp-btn submit" :style="{backgroundColor:showCluse?'#1fe4dc':'#e2e2e2'}" @click="submit">{{languagelAside.submit}}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import selectCall from '@/util/country.js'

export default {
  data () {
    return {
      showSelect: false,
      codeActive: ['中国', '+86', 'China'],
      nickname: '',
      phone: '',
      selectCall,
      authCode: '',
      password: '',
      confirmPass: '',
      interTime: 60,
      jishi: false,
      interl: null,
      showCluse: true
    }
  },
  computed: {
    ...mapState({
      language: state => state.language.current,
      langToast: state => state.language.home.toast,
      languagelAside: state => state.language.home.home.loginAside,
      token: state => state.user.token
    })
  },
  mounted () {
    this.$bus.$on('isAgree', data => {
      this.showCluse = data
    })

    document.addEventListener('click', (e) => {
      if (this.$refs.quhaoMenu) {
        if (!this.$refs.quhaoMenu.contains(e.target)) {
          this.showSelect = false
        }
      }
    })
  },
  methods: {
    handleCluse () {
      this.showCluse = !this.showCluse
      this.$bus.$emit('openClause', {
        show: this.showCluse,
        type: 'register'
      })
    },
    selectItem (item) {
      this.showSelect = false
      this.codeActive = item
    },
    async getAuthCode () {
      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 () {
      if (!this.showCluse) {
        return
      }
      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: 'User name',
          val: this.nickname
        },
        {
          name: '手机',
          En: 'Phone number',
          val: this.phone
        },
        {
          name: '验证码',
          En: 'Verification code',
          val: this.authCode
        },
        {
          name: '密码',
          En: 'Password',
          val: this.password
        },
        {
          name: '确认密码',
          En: 'Password',
          val: this.confirmPass
        }
      ]
      if (!check(checkStr)) {
        return
      }

      if (this.password.length < 8 || this.confirmPass.length < 8) {
        return this.$toast.show('warn', this.langToast['31'])
      }

      let country = Number(this.codeActive[1].substr(1))
      let params = {
        password: this.password,
        phoneNum: this.phone,
        msgAuthCode: this.authCode,
        nickName: this.nickname,
        country,
        confirmPwd: this.confirmPass
      }
      let res = await this.$http({
        method: 'post',
        data: params,
        url: '/sso/user/register'
      })
      let response = res.data
      if (response.code !== 0) {
        return this.$toast.show('warn', this.langToast[response.code])
      }
      this.$toast.showConfirm('success', this.langToast['23'], async () => {
        let params1 = {
          phoneNum: this.phone,
          password: this.password,
          randomcode: '1234',
          rememberMe: false
        }
        await this.$store.dispatch('login', params1)
        if (this.token) {
          this.$bus.$emit('hasLogin')
          this.$router.push({name: 'information'})
          this.$bus.$emit('hideAside')
        }
      }, async () => {
        this.$bus.$emit('currentActive', 'ilogin')
        this.$bus.$emit('hideAside')
      })
    }
  }
}
</script>

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