apt-nl-new/src/pages/modules/login/login.vue

<template>
  <div class="login-container">
    <div class="login-header">
      <div class="login_logo"></div>
    </div>
    <div class="login-bottom"></div>
    <div class="login-wraper">
      <div class="navs-wraper">
        <button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">密码登录</button>
        <button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">配置</button>
      </div>
      <div v-show="tab === 0" class="login-content_wraper">
        <div class="login-items-wraper">
          <div class="login-item">
            <div class="login-label" @click="toFocus(1)">用户名</div>
            <input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal">
          </div>
          <div class="login-item">
            <div class="login-label" @click="toFocus(2)">密码</div>
            <input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
          </div>
        </div>
        <div class="login-buttons-wraper">
          <button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
        </div>
      </div>
      <div v-show="tab === 1" class="login-content_wraper">
        <div class="login-items-wraper">
          <div class="login-item">
            <div class="login-label login-label_1" @click="toFocus(3)">域名地址</div>
            <input type="text" class="login-input login-input_1" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
          </div>
          <div class="login-item">
            <div class="login-label login-label_1" @click="toFocus(4)">刷新时间（秒）</div>
            <input type="number" class="login-input login-input_1" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
          </div>
        </div>
        <div class="login-buttons-wraper">
          <button class="button_control" @click="saveSetup"><p>配置</p></button>
        </div>
      </div>
    </div>
    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
  </div>
</template>

<script>
import {authlogin} from '@config/getData2.js'
import {encrypt} from '../../../main.js'
export default {
  data () {
    return {
      tab: 0,
      username: '',
      password: '',
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000,
      disabled: false,
      visible: false,
      layout: 'normal',
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      }
    }
  },
  mounted () {
    // 点对点项目分辨率 1024 * 768
    // alert(document.body.clientWidth, 'a')
    // alert(document.body.clientHeight, 'b')
    // alert(window.screen.width, 'c')
    // alert(window.screen.height, 'd')
  },
  methods: {
    toFocus (i) {
      switch (i) {
        case 1:
          this.$refs.input1.focus()
          break
        case 2:
          this.$refs.input2.focus()
          break
        case 3:
          this.$refs.input3.focus()
          break
        case 4:
          this.$refs.input4.focus()
          break
      }
    },
    toSetup () {
      this.tab = 1
      this.hide()
    },
    toLogin () {
      this.tab = 0
      this.hide()
    },
    saveSetup () {
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime * 1000
      }
      this.$store.dispatch('setConfig', obj)
      this.toLogin()
    },
    saveLogin () {
      this.disabled = true
      if (!this.username) {
        this.toast('请输入用户名')
        this.disabled = false
        return
      }
      if (!this.password) {
        this.toast('请输入密码')
        this.disabled = false
        return
      }
      this._authlogin()
    },
    async _authlogin () {
      try {
        let res = await authlogin(this.username, encrypt(this.password))
        let obj = {}
        obj = Object.assign({}, res)
        this.$store.dispatch('userInfo', JSON.stringify(obj))
        this.hide()
        this.$router.push('/index/home')
      } catch (err) {
        this.disabled = false
        this.toast(err)
      }
    },
    show (e) {
      this.input = e.target
      this.layout = e.target.dataset.layout
      if (!this.visible) {
        this.visible = true
      }
    },
    hide () {
      this.visible = false
    },
    accept () {
      this.hide()
    },
    next () {
      let inputs = document.querySelectorAll('input')
      let found = false;
      [].forEach.call(inputs, (item, i) => {
        if (!found && item === this.input && i < inputs.length - 1) {
          found = true
          this.$nextTick(() => {
            inputs[i + 1].focus()
          })
        }
      })
      if (!found) {
        this.input.blur()
        this.hide()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.login-container
  position relative
  _wh(100%, 100%)
  background center / 100% 100% url(../../../images/new/login_bg.png) no-repeat
  _fj(center)
.login-header
  position absolute
  top 0
  _wh(100%, 181px)
  background center / 1682px 100% url(../../../images/new/login_header_bg.png) no-repeat
.login_logo
  _wh(100%, 100%)
  background center / 532px 127px url(../../../images/new/logo.png) no-repeat
.login-bottom
  position absolute
  bottom 0
  _wh(100%, 175px)
  background center / 900px 100% url(../../../images/new/login_dy.png) no-repeat
.login-wraper
  _wh(900px, 702px)
  padding 87px 85px 50px 70px
  background center / 100% url(../../../images/new/login_w_bg.png) no-repeat
.login-content_wraper
  width 100%
  padding 51px 45px 51px
  margin 0 auto
  _fj(center,,column)
.navs-wraper
  _wh(100%, 107px)
  _fj(flex-start)
  background center / 100% url(../../../images/new/login_nav_bg.png) no-repeat
  padding 1px 0 35px 28px
.nav_item
  _wh(270px, 73px)
  padding 10px 0 0 52px
  _font(40px, 40px, #99B1DD,,)
  font-family: YouSheBiaoTiHei;
  background none
  &:first-child
    background center / 100% url(../../../images/new/login_tab.png) no-repeat
.nav_item_active
  color #fff
.login-items-wraper
  width 100%
.login-item
  _fj()
  width 100%
  margin-bottom 40px
.login-label
  width 115px
  _font(30px, 80px, #AFBED8,,right)
.login-label_1
  width 215px
.login-input
  width calc(100% - 140px)
  _font(30px, 78px, #fff,,)
  background: rgba(45,88,184,0.1);
  border: 1px solid #4980BD;
  padding 0 22px
  &:focus
    background: rgba(45,88,184,0.25);
    border: 2px solid #21D0F2;
    line-height 76px
.login-input_1
  width calc(100% - 240px)
.login-buttons-wraper
  width 100%
  margin-top 12px
  padding-left 180px
.button-login
  width 100%
  border-radius 20px
  letter-spacing 5px
.footer_wraper
  position absolute
  width 70%
  bottom 20px
  left 50%
  transform translateX(-50%)
.footer_p1
  _font(14px, 24px, #fff,,center)
.footer_p2
  _font(15px, 24px, #fff,,center)
#keyboard
    position fixed
    left 0
    right 0
    bottom 0
    z-index 1000
    width 100%
    // max-width 1366px
    margin 0 auto
    padding 1em
    background-color #EEE
    box-shadow 0px -3px 10px rgba(black, 0.3)
    border-radius 10px
</style>