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

<template>
  <div class="login-box">
    <div class="login-tabs">
      <div class="login-tab" :class="{'is-active': !type || type === 'codeLogin'}" @click="toOtherLogin('')">{{$t('login.userLogin')}}</div><div class="login-tab" :class="{'is-active': type==='camera'}" @click="toOtherLogin('camera')">{{$t('login.cameraLogin')}}</div>
    </div>
    <div class="account-login" v-if="!type">
      <input type="text" v-if="!isInternational" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" class="input" :placeholder="isInternational? $t('login.emailPlaceholder') : $t('login.phonePlaceholder')" v-model="form.phone">
      <input type="text" v-else class="input" :placeholder="isInternational? $t('login.emailPlaceholder') : $t('login.phonePlaceholder')" v-model="form.phone">
      <div class="password-w">
        <input maxLength="16" :type="showPassword ? 'test' : 'password'" class="input password" :placeholder="$t('login.passwordPlaceholder')" v-model="form.password" @keyup.enter="login">
        <h-icon :type="showPassword ? 'mimakejian' : 'mimabukejian'" class="password-visible" @click="showPassword=!showPassword" />
      </div>
      
      <div class="toCodeLogin tips-tap" >
        <!-- <a @click="$router.push({name: 'login', query: {type: 'codeLogin'}})">{{$t('login.codeLogin')}}</a> -->
      </div>
      <div class="checkbox"><input type="checkbox" v-model="rememberMe" id="rember" /><label for="rember">{{$t('login.rememberPassword')}}</label></div>
      <div class="login-btn"  @click="login" >{{$t('login.login')}}</div>
      <div class="others">
        <a class="other-actions" @click="$router.push('/login/forget')">{{ $t('login.forgetPassword') }}</a>
        <a class="other-actions" @click="$router.push(isInternational ? '/login/register?type=email' : '/login/register')">{{ $t('login.registerAccount') }}</a>
      </div>
    </div>
    <cameraLogin v-if="type === 'camera'" />
    <codeLogin v-if="type === 'codeLogin'" />
  </div>
</template>

<script>
import cameraLogin from './cameraLogin'
import codeLogin from './codeLogin'
import { encodeStr } from '@/util'
import { Base64 } from 'js-base64'
import { mapState } from 'vuex'
export default {
  data () {
    let remember = localStorage.getItem('remember') || false
    let username = localStorage.getItem('username')
    let password = localStorage.getItem('password')
    return {
      showPassword: false,
      rememberMe: remember,
      form: {
        phone: username,
        password: password
      }
    }
  },
  computed: {
    ...mapState({
      language: state => state.language.current,
      langToast: state => state.language.home.toast,
      isInternational: state => state.isInternational
    }),
    type () {
      return this.$route.query.type
    }
  },
  components: {
    cameraLogin,
    codeLogin
  },
  mounted () {
    this.rememberMe = eval(localStorage.getItem('remember')) || ''
  },
  methods: {
    toOtherLogin (type) {
      this.$router.push({
        url: '/login',
        query: {
          type: type
        }
      })
    },
    async login () {
      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.isInternational ? '邮箱' : '手机',
            En: this.isInternational ? 'E-mail' :'Phone number',
            val: this.form.phone
          },
          {
            name: '密码',
            En: 'Password',
            val: this.form.password
          }
        ]
        if (!check(checkStr)) {
          return
        }
        localStorage.setItem('remember', this.rememberMe)
        if (this.rememberMe) {
          localStorage.setItem('username', this.form.phone)
          localStorage.setItem('password', this.form.password)
        } else {
          localStorage.setItem('username', '')
          localStorage.setItem('password', '')
        }

        let params = {
          phoneNum: this.form.phone,
          password: encodeStr(Base64.encode(this.form.password)),
          randomcode: '1234',
          rememberMe: Boolean(this.rememberMe)
        }
        try {
          let res = await this.$store.dispatch('login', params)
          if (!res) {
            return
          }
          const from = this.$route.query.from
          // if (from) {
          //   this.$router.push(from)
          // } else {
          //   this.$router.push('/information')
          // }
          this.$router.push('/information')
        } catch (err) {

        }
        
    }
  }  
}

</script>
<style lang="scss" >
.login-box {
  width: 398px;
  padding: 38px 0;
  input[type=text] {
    height: 60px;
    line-height: 60px;
    padding-left: 8px;
    border: 1px solid #909090;
    border-radius: 3px;
  }
}
.login-tabs {
  padding: 0 38px;
}
.login-tab {
  display: inline-block;
  width: 50%;
  font-size: 20px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #707070;
  margin-bottom: 38px;
  cursor: pointer;
  &.is-active {
    border-bottom: 2px solid #1FE4DC;
    padding-bottom: 9px;
  }
}
.account-login {
  padding: 0 38px;
}
.password-w {
  position: relative;
  margin: 29px 0 13px;
  .password-visible {
    position: absolute;
    right: 20px;
    font-size: 30px;
    line-height: 60px;
    cursor: pointer;
    top: 0;
  }
}
.password {
  
}
.toCodeLogin {
  text-align: right;
  a {
    cursor: pointer;
  }
}
.checkbox {
  // padding-left: 27px;
  position: relative;
  font-size: 16px;
  color: #202020;
  
  display: flex;
  align-items: center;
  line-height: 18px;
  input {
    margin-right: 7px;
    cursor: pointer;
  }
}
.login-btn {
  margin: 36px 0 18px;
  background: #1FE4DC;
  width: 100%;
  text-align: center;
  line-height: 60px;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
}
.others {
  text-align: center;
}
.other-actions {
  color: #202020;
  font-size: 16px;
  &:first-child {
    margin-right: 34px;
    position: relative;
    &::after {
      content: '';
      height: 14px;
      width: 1px;
      background: #909090;
      position: absolute;
      right: -18px;
      top: 50%;
      margin-top: -7px;
    }
  }
}
</style>