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

<template>
  <div class="iforget-layout">
    <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 autocomplete="off" :placeholder="languagelAside.phone.placeholder" oninput="value=value.replace(/[^\d]/g,'')" maxlength='11' v-model="phone" type="text">
    </div>
    <div class="verification input">
      <input autocomplete="off" :placeholder="languagelAside.code.placeholder" v-model="authCode"  oninput="value=value.replace(/[^\d]/g,'')" maxlength='6'>
      <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')" maxlength='16' autocomplete="off" v-model="password" :placeholder="languagelAside.newpass.placeholder" type="password"></div>
    <div class="input"><input :style="{color:confirmpass&&confirmpass.length<8?'#ff0000':'#fff'}" readonly onfocus="this.removeAttribute('readonly')" maxlength='16' autocomplete="off" v-model="confirmpass" :placeholder="languagelAside.comfirmpass.placeholder" type="password"></div>
    <div class="login-dec">{{languagelAside.resigter1}}<span @click="$bus.$emit('changName', {
            name: '用户登录',
            enName: 'User login',
            id: 'ilogin'
          })">{{languagelAside.resigter2}}</span>
    </div>
    <div class="temp-btn submit" @click="submit">{{languagelAside.submit}}</div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import selectCall from '@/util/country.js'
import { reg, encodeStr } from '@/util'
import { Base64 } from 'js-base64'

export default {
  computed: {
    ...mapState({
      languagelAside: state => state.language.home.home.loginAside,
      langToast: state => state.language.home.toast,
      language: state => state.language.current,
      token: state => state.user.token
    })
  },
  data () {
    return {
      showSelect: false,
      selectCall,
      codeActive: ['中国', '+86', 'China'],
      phone: '',
      authCode: '',
      interTime: 60,
      jishi: false,
      password: '',
      confirmpass: ''
    }
  },
  mounted () {
    document.addEventListener('click', (e) => {
      if (this.$refs.quhaoMenu) {
        if (!this.$refs.quhaoMenu.contains(e.target)) {
          this.showSelect = false
        }
      }
    })
  },
  methods: {
    async getAuthCode () {
      if (!reg.phone.test(this.phone)) {
        return
      }
      let res = await this.$store.dispatch('getAuthCode', {
        phone: this.phone,
        code: 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)
      }
    },
    selectItem (item) {
      this.showSelect = false
      this.codeActive = item
    },
    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
        },
        {
          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 temp = encodeStr(Base64.encode(this.password), Base64.encode(this.confirmpass))
      let params = {
        password: temp[0],
        phoneNum: this.phone,
        confirmPwd: temp[1],
        msgAuthCode: this.authCode
      }
      let res = await this.$http({
        method: 'post',
        headers: {
          token: this.token
        },
        data: params,
        url: 'sso/user/changePassword'
      })
      let response = res.data
      if (response.code !== 0) {
        return this.$toast.show('warn', this.langToast[response.code])
      }
      this.$toast.show('warn', this.langToast['32'], () => {
        this.$bus.$emit('currentActive', 'ilogin')
      })
    }
  }
}
</script>

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