bbs.hoolihome.com/components/login-register/LoginByPassword.vue

<template>
  <div>
    <p
      v-show="tipMsgStatus"
      :class="`form-msg ${tipMsg.type}`">
      <i :class="`iconfont ${tipMsg.type == 'error' ? 'icon-Shapex' : 'icon-all_tips'}`"/>{{ tipMsg.msg }}
    </p>
    <div class="form-item">
      <input
        v-model="account"
        :placeholder="$t('login_register.placeholder_account')"
        readonly="readonly"
        onfocus="javascript:this.removeAttribute('readonly');"
        type="text"
        class="hl-input"
        @input="handleListenAccountInput"
        @focus="handleListenAccountInput"
        @blur="handleBlurAccountInput"
        @keyup.enter="handleAccountInputKey('enter')"
        @keyup.up="handleAccountInputKey('up')"
        @keyup.down="handleAccountInputKey('down')">
      <ul
        v-if="emailArr.length"
        class="email-tip-list">
        <li
          v-for="(item,index) in emailArr"
          :key="index"
          :class="{'email-item':true,'active':item.isActive}"
          @mousedown="handleSelectEmail(index)">{{ item.email }}</li>
      </ul>
    </div>
    <div class="form-item">
      <input
        v-model="password"
        :type="showPassword ? 'text' : 'password'"
        :placeholder="$t('login_register.placeholder_password')"
        readonly="readonly"
        onfocus="javascript:this.removeAttribute('readonly');"
        class="hl-input">
      <i
        :class="`pwd-eye iconfont ${showPassword ? 'icon-zhengyan' : 'icon-biyan'}`"
        @click="showPassword = !showPassword"/>
    </div>
    <div class="form-item">
      <button
        :loading="isLoading"
        class="form-button"
        @click="goLogin">{{ btnLoginText }}</button>
    </div>
    <div class="skip-item">
      <span
        class="skip-button"
        @click="$emit('handleSkipView', 'LoginBySms')">{{ $t('login_register.login_by_sms') }}</span>
      <span
        class="skip-button"
        @click="$emit('handleSkipView', 'FindBySms')">{{ $t('login_register.forget_password') }}</span>
    </div>
  </div>
</template>

<script>
import { php_api_user_login } from '~/common/apis.js'
import { myValidator } from '~/common/utils.js'

export default {
  data() {
    return {
      emailSuffixArr: [
        '@qq.com',
        '@gmail.com',
        '@163.com',
        '@yahoo.com',
        '@hotmail.com'
      ],
      emailArr: [],
      account: '',
      password: '',
      showPassword: false,
      btnLoginText: this.$t('login_register.btn_login'),
      tipMsg: {
        type: 'error',
        msg: ''
      },
      tipMsgStatus: false,
      isLoading: false
    }
  },
  created() {},
  methods: {
    showTip(data) {
      this.tipMsg = { ...this.tipMsg, ...data }
      this.tipMsgStatus = true
    },
    handleListenAccountInput() {
      if (this.account.trim().length === 0) {
        this.emailArr = []
        return false
      }
      if (this.account.indexOf('@') !== -1) {
        let accountA = this.account.split('@')[0]
        if (accountA.length > 0) {
          let emailArr = []
          this.emailSuffixArr.forEach((val, i, arr) => {
            let tmp = {}
            tmp.email = `${accountA}${val}`
            if (this.account === tmp.email) {
              tmp.isActive = true
            } else {
              tmp.isActive = false
            }
            emailArr.push(tmp)
          })
          this.emailArr = emailArr
        } else {
          this.emailArr = []
        }
      } else {
        let reg = /^\d+$/
        if (reg.test(this.account.trim())) {
          this.emailArr = []
        } else {
          let emailArr = []
          this.emailSuffixArr.forEach((val, i, arr) => {
            let tmp = {
              email: `${this.account}${val}`,
              isActive: false
            }
            emailArr.push(tmp)
          })
          this.emailArr = emailArr
        }
      }
    },
    handleBlurAccountInput() {
      this.emailArr = []
    },
    handleAccountInputKey(which) {
      switch (which) {
        case 'enter':
          this.emailArr.some((val, i, arr) => {
            if (val.isActive) {
              this.account = val.email
              return true
            }
          })
          this.emailArr = []
          break
        case 'up':
          this.keySelectEmail(which)
          break
        case 'down':
          this.keySelectEmail(which)
          break
        default:
          break
      }
    },
    handleSelectEmail(index) {
      this.account = this.emailArr[index].email
      this.emailArr = []
    },
    keySelectEmail(which) {
      let count = this.emailArr.length
      if (count === 0) {
        return false
      }
      let last = count - 1
      let curIndex = -1
      this.emailArr.some((val, i, arr) => {
        if (val.isActive) {
          curIndex = i
          return true
        }
      })
      if (which === 'up') {
        if (curIndex === -1) {
          curIndex = 0
        } else if (curIndex === 0) {
          curIndex = last
        } else {
          --curIndex
        }
      } else if (which === 'down') {
        if (curIndex === -1) {
          curIndex = 0
        } else if (curIndex === last) {
          curIndex = 0
        } else {
          ++curIndex
        }
      }
      let emailArr = []
      this.emailArr.forEach((val, i, arr) => {
        if (curIndex === i) {
          val.isActive = true
        } else {
          val.isActive = false
        }
        emailArr.push({ ...val })
      })
      this.emailArr = emailArr
    },
    async goLogin() {
      if (
        !myValidator.checkMobile(this.account) &&
        !myValidator.checkEmail(this.account)
      ) {
        this.showTip({ msg: this.$t('login_register.check_account') })
        return false
      }
      if (this.password.trim().length < 3) {
        this.showTip({ msg: this.$t('login_register.check_pwd') })
        return false
      }

      this.tipMsgStatus = false

      const params = {
        string: this.account,
        password: this.password
      }
      this.isLoading = true
      try {
        const { code, data, msg } = await this.$axios.$post(
          php_api_user_login,
          params
        )
        if (!code) {
          if (data && data.status === 1) {
            // 密码异常
            this.$emit('handleSkipView', 'PasswordAbnormal')
            return false
          }
          this.btnLoginText = this.$t('login_register.btn_login_success')
          this.$Utils.MyCookie.setCookie(
            'loginUserInfo',
            encodeURIComponent(JSON.stringify(data.userInfo)),
            7,
            true
          )
          location.reload()
        } else {
          this.isLoading = false
          this.showTip({ msg: msg || this.$t('login_register.network_wrong') })
        }
      } catch (error) {
        this.isLoading = false
        this.showTip({ msg: this.$t('login_register.network_wrong') })
      }
    }
  }
}
</script>

<style lang="less">
.form-item {
  .pwd-eye {
    right: 15px;
    color: #999;
    font-size: 20px;
    padding: 5px;
    cursor: pointer;
  }
}
</style>