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

<template>
  <div class="login_bg">
    <div class="login_wrap">
      <div class="login-form-logo">
        <div class="login-logo-text login-logo-text1">欢迎来到</div>
        <div class="login-logo-text login-logo-text2">辽宁奥美手持系统！</div>
      </div>
      <div class="login_cnt">
        <div class="login_card">
          <div class="card_wrap">
            <div class="inputOuter">
              <input type="text" placeholder="用户名" v-model="loginname" class="inputStyle">
            </div>
            <div class="inputOuter">
              <input placeholder="密码" :type="type" v-model="password" class="inputStyle">
              <i class="icon-eye" :class="type === 'password' ? 'icon-eye-close' : 'icon-eye-open'" @click="changeType"></i>
            </div>
          </div>
          <div class="fxrow check-setup-box">
            <!-- <div class="check-box">
              <i class="icon-name-check" :class="{'icon-name-checked': memberName === 'true'}" @click="Remember"></i>
              <span class="meber-desc">记住用户名</span>
            </div> -->
            <div class="setup-box" @click="toSetup">配置</div>
          </div>
          <div class="submit">
            <button class="btn submit-button" @click="_Login" :disabled="disabled">登&nbsp;&nbsp;录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</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'
  },
  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()
    },
    toSetup () {
      this.$router.push('/setup')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.icon-eye
  position absolute
  right 0
  width 35px
  height 40px
.icon-eye-close
  _bis('../../images/eyeclose.png',20px)
.icon-eye-open
  _bis('../../images/eyeopen.png',20px)
.check-setup-box
  display flex
  align-items center
  justify-content center
  margin-top 24px
.setup-box
  line-height 40px
  font-size 16px
  color #4A54FF
.check-box
  display flex
  align-items center
  justify-content flex-start
.icon-name-check
  width 22px
  height 22px
  margin-right 6px
  border 1px solid #e2e2e2
  border-radius 50%
.icon-name-checked
  border none
  background center / 100% auto url(../../images/select.png) no-repeat
  background-size 22px 22px
  border 1px solid #e2e2e2
.meber-desc
  line-height 40px
  font-size 16px
  color #4A54FF
.login_bg
  width 100%
  height 100%
  // background center bottom / 100% auto url(../../images/bg_01.png) no-repeat
.login_wrap
  position fixed
  left 50%
  top 50%
  width 472px
  min-height 460px
  transform translate3d(-50%, -50%, 0)
  border-radius 12px
  overflow hidden
  box-shadow 0 0 6px 0 rgb(0 0 0 / 20%)
  background #fff center bottom / 100% auto url(../../images/bg.png) no-repeat
.login-form-logo
  width 100%
  height 180px
  display flex
  flex-direction column
  align-items center
  justify-content center
  background-color #e74f1a
  background-image linear-gradient(180deg, #f77130 0, #c64602 100%), linear-gradient(126deg, #f7874e 15%, #c04103 100%)
  border-radius 12px 12px 0 0
  box-shadow 0 2px 7px 0 #e84f1a
.login-logo-text
  font-size 20px
  line-height 30px
  color #fff
.login-logo-text2
  font-sise 22px
  font-weight bold
.login_cnt
  position relative
  width 100%
  overflow hidden
.login_card
  width 323px
  margin 0 auto
.card_wrap
  overflow hidden
.inputOuter
  position relative
  width 100%
  margin-top 24px
label
  display block
  font-size .16rem
  line-height .3rem
  color #333
.inputStyle, select
  width 100%
  line-height 40px
  height 40px
  color #595959
  padding 0 12px
  font-size 16px
  border 1px solid #dfdfdf
  box-sizing border-box
  border-radius 4px
select
  appearance auto
  outline none
.submit
  width 100%
  margin 24px auto
  text-align center
.btn
  background-color #2778f3
  font-size 16px
  line-height 40px
  color #fff
  width 100%
  border-radius 999px
  margin 0
  padding 0
.submit-button
  background center center #e74f1a
  background-image linear-gradient(315deg,#D7592F 0,#E2663C 100%)
.scan_icon
  width .4rem
  font-size .3rem
  line-height .4rem
  color #D7592F
  text-align center
  border 1px solid #D7592F
  border-radius 100%
  margin .1rem auto
  &::before
    content: '\e607'
.san_text
  font-size .16rem
  color #D7592F
  text-align center
</style>