hht-yzja/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">
        <i class="icon-name-check" :class="{'icon-name-checked': memberName === 'true'}" @click="Remember"></i>
        <span class="fxcol">记住用户名</span>
        <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>
      <!-- <div @click="jumpQRCode">
        <div class="login-ewm"></div>
        <p class="login-ewm-p">扫码登录</p>
      </div> -->
      <!-- <button @click="handleTest">切换打印机</button>
      <printest v-if="test" :printType="testNumber" /> -->
    </section>
  </section>
</template>

<script>
// import printest from './../../components/printest.vue'
import {loginApi} from '@config/getData01'
import {encrypt} from '../../main.js'
export default {
  name: 'Login',
  components: {
    // printest
  },
  data () {
    return {
      loginname: this.$store.getters.memberName === 'true' ? this.$store.getters.loginname : '',
      password: '',
      type: 'password',
      memberName: this.$store.getters.memberName,
      jobnum: '',
      qrcode: '',
      // test: false,
      // testNumber: 1,
      disabled: false // 防止重复点击
    }
  },
  mounted () {
    document.getElementsByTagName('body')[0].className = 'login-bg'
    // window.getSystemInfoCallback = this.getSystemInfoCallback
    // window.location.href = 'getSystemInfo'
  },
  methods: {
    // getSystemInfoCallback (result) {
    //   window.localStorage.setItem('hhtId', result)
    // },
    // handleTest () {
    //   this.test = false
    //   setTimeout(() => {
    //     this.test = true
    //     this.testNumber = this.testNumber === 1 ? 2 : 1
    //   }, 200)
    // },
    changeType () {
      this.type = this.type === 'password' ? 'text' : 'password'
    },
    Remember () {
      this.memberName = this.memberName === 'true' ? 'false' : 'true'
    },
    async loginApi () {
      try {
        let res = await loginApi(this.loginname, encrypt(this.password))
        // let res = await loginApi(this.loginname, this.password)
        if (res.code === '1') {
          this.$store.dispatch('setUserInfo', res.result)
          this.$router.push('/home')
        } else {
          this.Dialog(res.desc)
        }
        this.disabled = false
      } catch (err) {
        this.disabled = false
        this.Dialog(err)
      }
    },
    _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()
    },
    // _Login () {
    //   if (!this.loginname || !this.password) {
    //     this.toast('请填写完整')
    //     return
    //   }
    //   this.disabled = true
    //   let data = {
    //     '_SRVNAME': 'service.ifs.wmshandle',
    //     '_SRVMETHOD': 'verifyAccount',
    //     '_DATA': JSON.stringify({
    //       form: {
    //         loginname: this.loginname,
    //         password: this.password,
    //         job_num: '',
    //         type: '01'
    //       }
    //     })
    //   }
    //   this.$post(data).then(res => {
    //     if (res.code === '1') {
    //       // if (Array.isArray(res.result)) {
    //       //   this.testNumber = 1
    //       //   this.handleTest()
    //       // } else {
    //       //   this.testNumber = 2
    //       //   this.handleTest()
    //       // }
    //       //
    //       this.disabled = false
    //       let resObj = Object.assign({}, res.result, {member_name: this.memberName, loginname: this.loginname})
    //       this.$store.dispatch('setUserInfo', resObj)
    //       this.$router.replace('/home')
    //     } else {
    //       this.Dialog(res.desc)
    //       this.disabled = false
    //     }
    //   }).catch((error) => {
    //     console.log(error)
    //     this.disabled = false
    //   })
    // },
    jumpQRCode () {
      let passData = (event) => {
        let qrcode = event.data.lxqrcode
        if (qrcode) {
          qrcode = qrcode.split('#')
          if (qrcode[0] === '06') {
            this.cellLogin(qrcode[1])
          } else {
            this.toast('请扫描正确的二维码')
          }
        }
        window.removeEventListener('qrcodeEvent', passData)
      }
      window.addEventListener('qrcodeEvent', passData)
      window.location.href = 'loadQRCode'
    },
    cellLogin (jobnum) {
      let data = {
        '_SRVNAME': 'server.app.loginAPI',
        '_SRVMETHOD': 'verifyAccount',
        '_DATA': JSON.stringify({
          form: {
            job_num: jobnum,
            type: '02',
            id: JSON.parse(window.localStorage.getItem('hhtId')).ID
          }
        })
      }
      this.$post(data).then(res => {
        if (res.code === '1') {
          let resObj = Object.assign({}, res.result, {member_name: this.memberName, loginname: this.loginname})
          this.$store.dispatch('setUserInfo', resObj)
          this.$router.replace('/home')
        } else {
          this.Dialog(res.desc)
        }
      })
    }
  }
}
</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>