hht-aomei/src/pages/login/Login.vue

<template>
  <section>
    <section class="content">
      <p class="p1">欢迎来到</p>
      <p class="p2">辽宁奥美手持系统！</p>
      <div class="input-box">
        <input type="text" class="allwidth" placeholder="请输入用户名" v-model="loginname">
      </div>
      <div class="fxrow input-box">
        <input class="fxcol" :type="type" placeholder="请输入密码" v-model="password">
        <i class="icon-eye" :class="type === 'password' ? 'icon-eye-close' : 'icon-eye-open'" @click="changeType"></i>
      </div>
      <div class="fxrow check-box">
        <router-link :to="{path: '/setup'}" class="fxcol" style="text-align:right;color:#6798ef">设置</router-link>
      </div>
      <button class="login-btn" :disabled="disabled" @click="_Login">确认登录</button>
    </section>
  </section>
</template>

<script>
import {loginApi} from '@config/getData2'
import {encrypt} from '../../main.js'
export default {
  name: 'Login',
  data () {
    return {
      loginname: '',
      password: '',
      type: 'password',
      jobnum: '',
      qrcode: '',
      disabled: false
    }
  },
  mounted () {
    document.getElementsByTagName('body')[0].className = 'login-bg'
    alert(document.body.clientWidth + ',' + document.body.clientHeight + ',' + window.screen.width + ',' + window.screen.height)
  },
  methods: {
    changeType () {
      this.type = this.type === 'password' ? 'text' : 'password'
    },
    async loginApi () {
      try {
        let res = await loginApi(this.loginname, encrypt(this.password))
        let obj = {}
        obj = Object.assign({}, res.user.user, {token: res.token})
        this.$store.dispatch('userInfo', JSON.stringify(obj))
        this.$router.push('/home')
        this.disabled = false
      } catch (err) {
        this.disabled = false
      }
    },
    _Login () {
      this.disabled = true
      if (this.loginname === '') {
        this.toast('用户名不能为空')
        this.disabled = false
        return
      }
      if (this.password === '') {
        this.toast('密码不能为空')
        this.disabled = false
        return
      }
      this.logintype = '01'
      this.loginApi()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.p1
  _font(.6rem,1,#444)
  padding-top: 0.9rem
.p2
  _font(.5rem,1,#444)
  padding: 0.4rem 0 0.25rem
.input-box
  margin-top .68rem
  border-bottom 1px solid #e2e2e2
  input
    _font(.32rem,.74rem,#999)
    padding-left .1rem
.icon-eye
  flex 0 0 .35rem
  height .74rem
.icon-eye-close
  _bis('../../images/eyeclose.png',.35rem)
.icon-eye-open
  _bis('../../images/eyeopen.png',.35rem)
.check-box
  margin .25rem 0 .7rem
  height .34rem
  _font(.26rem,.34rem,#999)
.icon-name-check
  flex 0 0 .26rem
  height .26rem
  margin-right 6px
  border 1px solid #e2e2e2
  border-radius 50%
.icon-name-checked
  border none
  _bis('../../images/select.png',.26rem)
.login-btn
  width 100%
  border-radius .46rem
  _font(.36rem,.92rem,#fff,,center)
  background-color $red
.login-ewm
  margin 1.2rem auto .2rem
  _wh(.82rem,.82rem)
  border 1px solid #e74f1a
  border-radius 50%
  _bis('../../images/ewm.png',58%)
.login-ewm-p
  _font(.26rem,1,$red,,center)
</style>