apt15e/src/pages/modules/login/index.vue

<template>
  <div class="zbox relative body-container" :class="{'enClass': $i18n.locale === 'en-us'}">
    <div class="absolute login-header">
      <div class="zbox relative login_logo"></div>
    </div>
    <div class="absolute login-bottom"></div>
    <el-row type="flex" class="zbox" justify="center" align="middle">
      <el-col :span="12">
        <div class="login-wraper">
          <el-row type="flex" class="navs-wraper" justify="start" align="start">
            <button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="tab = 0">登录</button>
            <button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="tab = 1">配置</button>
          </el-row>
          <div v-show="tab === 0" class="login-content_wraper">
            <el-row type="flex" class="login-item" justify="space-between">
              <el-col :span="5" class="login-label" >用户名</el-col>
              <el-col :span="19">
                <input type="text" class="login-input" v-model="username">
              </el-col>
            </el-row>
            <el-row class="login-item">
              <el-col :span="5" class="login-label">密码</el-col>
              <el-col :span="19">
                <input type="password" class="login-input" v-model="password">
              </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: .3rem">
              <el-col :span="8">
                <button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
              </el-col>
            </el-row>
          </div>
          <div v-show="tab === 1" class="login-content_wraper">
            <el-row class="login-item">
              <el-col :span="5" class="login-label">域名</el-col>
              <el-col :span="19">
                <input type="text" class="login-input" v-model.trim="baseUrl">
              </el-col>
            </el-row>
            <el-row class="login-item" style="visibility: hidden">
              <el-col  :span="8" class="login-label">刷新时间</el-col>
              <el-col  :span="16">
                <input type="number" class="login-input" v-model="setTime">
              </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: .3rem">
              <el-col :span="8">
                <button class="button_control" @click="saveSetup"><p>配置</p></button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import JSEncrypt from 'jsencrypt'
import {authlogin} from '@/config/getData'
import { mapGetters, mapActions } from 'vuex'
const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
  '2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
export default {
  name: 'ModuleLogin',
  data () {
    return {
      tab: 0,
      username: null,
      password: null,
      baseUrl: this.$store.getters.baseUrl,
      setTime: 1000,
      disabled: false
    }
  },
  computed: {
    ...mapGetters(['serverUrl'])
  },
  mounted () {
    this.baseUrl = this.serverUrl
  },
  methods: {
    ...mapActions(['setServerUrl']),
    saveSetup () {
      this.setServerUrl(this.baseUrl)
      this.tab = 0
    },
    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, this.encryptData(this.password))
        if (res.code === '1') {
          let obj = {}
          obj = Object.assign({}, res.result)
          this.$store.dispatch('userInfo', JSON.stringify(obj))
          this.$store.dispatch('setLoginInfo', {username: this.username, password: this.password})
          this.$router.push('/hub')
        } else {
          this.Dialog(res.desc)
        }
        this.disabled = false
      } catch (err) {
        this.disabled = false
      }
    },
    encryptData(txt) {
      const encryptor = new JSEncrypt()
      encryptor.setPublicKey(publicKey) // 设置公钥
      return encryptor.encrypt(txt) // 对需要加密的数据进行加密
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '@/style/mixin'
.login-header
  top 0
  _wh(100%, 10vh)
  background center / 92% 100% url(@/images/new/login_header_bg.png) no-repeat
.login_logo
  top -14%
  background center / 33% auto url(@/images/new/logo.png) no-repeat
.login-bottom
  bottom 0
  left 25%
  _wh(50%, 1.75rem)
  background center / 9rem 100% url(@/images/new/login_dy.png) no-repeat
.login-wraper
  padding 8% 8.8% 6% 8%
  background center / 100% 100% url(@/images/new/login_w_bg.png) no-repeat
.navs-wraper
  height 0.5rem
  background center / 100% 100% url(@/images/new/login_nav_bg.png) no-repeat
  padding-left 2%
.nav_item
  _wh(32%, 64%)
  padding-left 9%
  _font(.18rem, 1, #99B1DD,,)
  font-family 'YouSheBiaoTiHei'
  background-color transparent
  &:first-child
    background center / 100% 100% url(@/images/new/login_tab.png) no-repeat
.nav_item_active
  color #fff
.login-content_wraper
  padding 5% 5% 5%
.login-item
  margin-bottom .15rem
.login-label
  _font(.16rem, .4rem, #AFBED8,,)
.login-input
  width 100%
  _font(.15rem, .4rem, #fff,,)
  background rgba(45,88,184,0.1)
  border 2px solid #4980BD
  padding 0 .1rem
  &:focus
    background rgba(45,88,184,0.25);
    border-color #21D0F2
</style>