realtorEasier-webSite/pc/src/page/login/components/forget/emailForm.vue

<template>
  <div class="email-form">
    <div class="border-box" v-if="type === 'phone'">
      <div class="phone-area" @click.stop="showPhoneArea = !showPhoneArea">
        <p>{{selectArea[1]}}</p>
        <span class="sanjiao"></span>
        <phoneAddressSelect  v-show="showPhoneArea" @select="changeArea" />
      </div>
      <input type="text" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" :placeholder="$t('login.phonePlaceholder')" v-model="form.phone">
    </div>
    <input class="border-box"  v-model="form.phone" :placeholder="$t('login.emailPlaceholder')" type="text" v-else>
    <div class="send-code-w border-box">
      <input type="text" maxLength="6" oninput="value=value.replace(/[^\d]/g,'')" :placeholder="$t('login.codePlaceholder')"  v-model="form.authCode">
      <div class="send-btn" :class="{'is-disabled': time}" @click="sendCode">{{ time? $t('login.resendTime', { time }) : $t('login.sendCodeBtnText')}}</div>
    </div>
    <div class="password-w border-box" :class="{'show-tip': !form.password && passwordTip}" @mouseleave="passwordTip=false" @click="focusInput('emialInput')" >
        <input maxLength="16" class="" ref="emialInput" :placeholder="passwordTip ? '' : $t('login.setPassword')" autocomplete="new-password "  v-model="form.password" type="password" @mouseover="passwordTip=true" >
        <p>{{ $t('login.passwordTip') }}</p>
      </div>
      <div class="password-w border-box" :class="{'show-tip': !form.confirmPass && confirmPassWordTip}" @click="focusInput('emialConfirmInput')" @mouseleave="confirmPassWordTip=false">
        <input maxLength="16" class="" :placeholder="confirmPassWordTip ? '' : $t('login.rePassword')" ref="emialConfirmInput" autocomplete="new-password" v-model="form.confirmPass" type="password"  @mouseenter="confirmPassWordTip=true" >
        <p>{{ $t('login.passwordTip') }}</p>
      </div>
    <!-- <input class="border-box" placeholder="设置密码" type="password"  v-model="form.password">
    <input class="border-box" placeholder="重复密码" type="password"  v-model="form.confirmPass"> -->
    <p class="login-entry">{{$t('login.hasAccount')}}<span @click="$router.push('/login/login')">{{$t('login.zhijieLogin')}}</span></p>
    <div class="submit-btn" @click="submit">{{$t('common.submit')}}</div>
  </div>
</template>

<script>
import phoneAddressSelect from '@/components/common/phoneAddressSelect'
import { mapState } from 'vuex'
import { encodeStr } from '@/util'
import { Base64 } from 'js-base64'

export default {
  props: {
    type: {
      type: String,
      default: 'email'
    }
  },
  data () {
    return {
      form: {},
      interEmailTime: 0,
      interTime: 0,
      showPhoneArea: false,
      selectArea: ['中国', '+86', 'China'],
      confirmPassWordTip: false,
      passwordTip: false
    }
  },
  computed: {
    ...mapState({
      language: state => state.language.current,
      langToast: state => state.language.home.toast
    }),
    time () {
      return this.type === 'email' ? this.interEmailTime : this.interTime
    }
  },
  components: {
    phoneAddressSelect
  },
  methods: {
    sendCode () {
      this.type === 'phone' ? this.getAuthCode() : this.getEmailAuthCode()
    },
    changeArea (item) {
      this.showPhoneArea = false
      if (!item) {
        return
      }
      this.selectArea = item
    },
    focusInput (input = 'emialInput') {
      this.$refs[input].focus()
    },
    async getAuthCode () {
      if (this.interl) {
        return
      }
      let res = await this.$store.dispatch('getAuthCode', {
        phone: this.form.phone,
        code: Number(this.selectArea[0].substr(1))
      })
      if (res) {
        this.interl && clearInterval(this.interl)
        this.interl = null
        this.jishi = true
        this.interTime = 60
        this.interl = setInterval(() => {
          this.interTime--
          if (this.interTime <= 0) {
            this.jishi = false
            clearInterval(this.interl)
            this.interl = null
          }
        }, 1000)
      }
    },
    async getEmailAuthCode () {
      if (this.emailInterl) {
        return
      }
      if (!this.form.phone) {
        this.$toast.show('warn', (this.language === 'en' ? 'E-mail' : '邮箱') + this.langToast['7'])
        return
      }
      let res = await this.$store.dispatch('getAuthCode', {
        email: this.form.phone,
        qudao: 'email'
      })
      if (res) {
        this.emailInterl && clearInterval(this.emailInterl)
        this.emailInterl = null
        this.interEmailTime = 60
        this.emailInterl = setInterval(() => {
          this.interEmailTime--
          if (this.interEmailTime <= 0) {
            clearInterval(this.emailInterl)
            this.emailInterl = null
          }
        }, 1000)
      }
    },
    async submit () {
      let check = value => {
        for (let i = 0, len = value.length; i < len; i++) {
          if (!value[i].val) {
            this.$toast.show('warn', (this.language === 'en' ? value[i].En : value[i].name) + this.langToast['7'])
            return
          }
        }
        return true
      }
      let checkStr = [
        {
          name: this.type === 'email' ? '邮箱' : '手机',
          En: this.type === 'email' ? 'E-mail' : 'Phone number',
          val: this.form.phone
        },
        {
          name: '验证码',
          En: 'Verification code',
          val: this.form.authCode
        },
        {
          name: '密码',
          En: 'Password',
          val: this.form.password
        },
        {
          name: '确认密码',
          En: 'Password',
          val: this.form.confirmPass
        }
      ]
      if (!check(checkStr)) {
        return
      }
      if (this.form.password.length < 8 || this.form.confirmPass.length < 8) {
        return this.$toast.show('warn', this.langToast['31'])
      }

      let temp = encodeStr(Base64.encode(this.form.password), Base64.encode(this.form.confirmPass))
      let params = {
        password: temp[0],
        phoneNum: this.form.phone,
        confirmPwd: temp[1],
        msgAuthCode: this.form.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('/login/login')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.email-form  {
  padding-top: 35px;
  font-size: 16px;
  .border-box {
    border: 1px solid #909090;
    border-radius: 3px;
    height: 42px;
    line-height: 40px;
    width: 100%;
    margin-bottom: 20px;
    display: flex;
  }
  input {
    border: none;
    padding-left: 10px;
    flex: 1;
    min-width: 100px;
    font-size: 16px;
  }
  .send-btn {
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    text-align: right;
    background: #1FE4DC;
    &.is-disabled {
      color: #909090;
      background: #EBEBEB;
    }
  }
  .login-entry {
    margin: 80px 0 30px 0;
    text-align: center;
    font-size: 14px;
    span {
      font-weight: bold;
      display: inline-block;
      position: relative;
      cursor: pointer;
      &::after {
        content: '';
        display: block;
        height: 2px;
        width: 100%;
        background: #1FE4DC;
      }
    }
  }
  .submit-btn {
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background: #1FE4DC;
    border-radius: 3px;
    cursor: pointer;
  }
  .password-w {
    position: relative;
    margin: 0 0 20px;
    input {
      margin-bottom: 0;
    }
    p {
      font-size: 12px;
      color: #909090;
      position: absolute;
      line-height: 44px;
      z-index: 1;
      top: 0;
      width: 100%;
      text-align: center;
      display: none;
      white-space: nowrap;
      overflow: hidden;
    }
    &.show-tip {
      p {
        display: block;
      }
    }
  }
  .phone-area {
      padding: 0 35px 0 10px;
      position: relative;
      cursor: pointer;
      &>p {
        overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      }
      &::after {
        content: '';
        display: block;
        height: 28px;
        width: 1px;
        background: #707070;
        position: absolute;
        right: 0;
        top: 6px
      }
    }
    .sanjiao {
      display: inline-block;
      border: 7px solid #909090;
      border-bottom: none;
      border-left-color: transparent;
      border-right-color: transparent;
      position: absolute;
      right: 10px;
      top: 16px;
    }
}
</style>