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('')">用户登录</div><div class="login-tab" :class="{'is-active': type==='camera'}" @click="toOtherLogin('camera')">相机登录</div>
    </div>
    <div class="account-login" v-if="!type">
      <input type="text" class="input" placeholder="请输入手机号码/邮箱" v-model="form.phone">
      <input type="password" class="input password" placeholder="请输入密码" v-model="form.password">
      <div class="toCodeLogin tips-tap" >
        <a @click="$router.push({name: 'login', query: {type: 'codeLogin'}})">验证码登录</a>
      </div>
      <div class="checkbox"><input type="checkbox" v-model="rememberMe" />记住密码</div>
      <div class="login-btn" @click="login" @keyup.enter="login">登录</div>
      <div class="others">
        <a class="other-actions" @click="$router.push('/login/forget')">忘记密码</a>
        <a class="other-actions" @click="$router.push('/login/register')">账号注册</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'

export default {
  data () {
    return {
      rememberMe: false,
      form: {
        phone: '',
        password: ''
      }
    }
  },
  computed: {
    type () {
      return this.$route.query.type
    }
  },
  components: {
    cameraLogin,
    codeLogin
  },
  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) {
              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.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)
        }
        await this.$store.dispatch('login', params)
        const from = this.$route.query.from
        if (from) {
          this.$router.push(from)
        } else {
          this.$router.push('/')
        }
    }
  }  
}

</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 {
  margin: 29px 0 13px;
}
.toCodeLogin {
  text-align: right;
  a {
    cursor: pointer;
  }
}
.checkbox {
  // padding-left: 27px;
  position: relative;
  font-size: 16px;
  color: #202020;
  
  display: inline-block;
  input {
    margin-right: 7px;
    cursor: pointer;
  }
  * {
    vertical-align: middle;
  }
}
.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>