realtorEasier-webSite/mobile/src/pages/account/login/index.vue

<template>
  <div class="account-layout">
    <h1 class="common-title">{{ $t('login.userLogin') }}</h1>
    <div class="login-con">
      <div class="input-con" :class="{inputActive:inputActive==='text'}">
        <!-- <img :src="`${$cdn}images/icon/icon-phone@2x.png`" alt=""> -->
        <input v-model="phone" oninput="value=value" @blur="inputActive=''" @focus="inputActive='text'" type="text" :placeholder="$t(isInternational ? 'login.emailPlaceholder' : 'login.phonePlaceholder')">
      </div>
      <div class="input-con"  :class="{inputActive:inputActive==='password'}">
        <!-- <img :src="`${$cdn}images/icon/icon-password@2x.png`" alt=""> -->
        <input v-model="password" @focus="inputActive='password'" @blur="inputActive=''" maxlength='16' type="password" :placeholder="$t('login.passwordPlaceholder')">
      </div>
      <div class="forget" v-if="!isInternational">
        <!-- <router-link :to="{path:'/forget'}">{{langLogin.forget}}</router-link> -->
        <span></span>
        <router-link :to="{path:'/codeLogin'}">{{langLogin.codeLogin}}</router-link>
      </div>
      <div class="btns" @click="login">{{langLogin.login}}</div>
      <div class="to-register">
        <div class="re-con">
          <router-link :to="{path:'/forget'}">{{$t('login.forgetPassword')}}</router-link><router-link :to="{path: isInternational ? '/mailRegister' : '/register'}">{{$t('login.registerAccount')}}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import { Base64 } from 'js-base64'
import {encodeStr} from '@/util/index.js'

export default {
  computed: {
    ...mapState({
      token: state => state.user.token,
      langToast: state => state.language.home.toast,
      language: state => state.language.current,
      langLogin: state => state.language.home.home.loginAside,
      isInternational: state => state.isInternational
    })
  },
  data () {
    return {
      inputActive: '',
      phone: '',
      password: ''
    }
  },
  methods: {
    async login () {
      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: this.isInternational ? '邮箱地址' : '手机号码',
          En: this.isInternational ? 'E-mail' : 'Phone number',
          val: this.phone
        },
        {
          name: '密码',
          En: 'Password',
          val: this.password
        }
      ]
      if (!check(checkStr)) {
        return
      }
      let params = {
        phoneNum: this.phone,
        password: encodeStr(Base64.encode(this.password))
      }
      await this.$store.dispatch('login', params)
      if (this.token) {
        this.$router.replace({path: '/information'})
      }
    }

  }
}
</script>

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