realtorEasier-webSite/mobile/src/pages/account/forget/components/phoneForget.vue

<template>
  <div>
    <div class="login-con">
      <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"
          v-model="phone"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
          @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="input-con" :class="{inputActive:inputActive==='password'}">
        <input
          v-model="password"
          @focus="inputActive='password'"
          @blur="inputActive=''"
          maxlength="16"
          type="password"
          :placeholder="langLogin.newpass.placeholder"
        />
      </div>
      <div class="input-con" :class="{inputActive:inputActive==='confirm'}">
        <input
          v-model="confirmpass"
          @focus="inputActive='confirm'"
          @blur="inputActive=''"
          maxlength="16"
          type="password"
          :placeholder="langLogin.comfirmpass.placeholder"
        />
      </div>
      <div class="btns" @click="submit">{{langLogin.submit}}</div>
      <div class="to-login">
        <div class="lo-con">
          {{langLogin.resigter1}}
          <router-link :to="{path:'/login'}">{{langLogin.resigter2}}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import phoneSelect from '@/components/common/phoneSelect'
import { encodeStr } from '@/util'
import { Base64 } from 'js-base64'
export default {
  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
    })
  },
  data () {
    return {
      showSelect: false,
      codeActive: ['中国', '+86', 'China'],
      phone: '',
      authCode: '',
      interTime: 60,
      jishi: false,
      password: '',
      confirmpass: '',
      inputActive: ''
    }
  },
  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 () {
      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
        }
      ]
      if (!check(checkStr)) {
        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
        },
        {
          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('success', this.langToast['32'], () => {
        this.$router.push({path: '/login'})
      })
    }
  }
}
</script>

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