admin/src/pages/login/index.vue

<template>
  <div class="mainPage">
    <img src="../../../static/images/bg.jpg" class="centerLabel cover" alt="">
    <div class="centerLabel">
      <img src="../../../static/images/loginName.png" class="title" width="260" alt="">
      <ul>
        <li class="flex-h">
          <div>
            <i class="iconfont icon-yonghuming centerLabel"></i>
          </div>
          <div class="flex-item">
            <input type="text" v-model="account" placeholder="用户名">
          </div>
        </li>
        <li class="flex-h">
          <div>
            <i class="iconfont icon-mima1 centerLabel"></i>
          </div>
          <div class="flex-item">
            <input type="password" v-model="password" placeholder="请输入密码">
          </div>
        </li>
      </ul>
      <div class="remberAccount">
        <span>记住用户名和密码</span>
        <i class="iconfont" :class="{'icon-ic_check_box_outline_blank': !remberAccount, 'icon-md-checkbox-outline': remberAccount, 'active': remberAccount}" @click="triggerRember"></i>
      </div>
      <a class="btn" @click="toLogin">登 录</a>
      <!-- <div class="top">
        <i class="iconfont icon-yinchenglogo"></i>
        <span>城的空间 · 登录</span>
      </div>
      <div class="login">
        <input type="text" v-model="account" placeholder="请输入账号">
        <input type="password" v-model="password" placeholder="请输入密码">
        <div>
          <label :class="{'active':remberAccount}" @click="triggerRember">
            <i class="iconfont icon-gouxuan"></i>
            <span onselectstart="return false">记住账号密码</span>
          </label>
        </div>
        <a class="btn" @click="toLogin">登 录</a>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      account: '', // 账号
      password: '', // 密码
      remberAccount: true, // 记住账号密码
      token: ''
    }
  },
  mounted () {
    this.$nextTick(function () {
      var _that = this
      this.initLogin()
      document.onkeydown = function (event) {
        var e = event || window.event
        var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode
        if (keyCode === 13) {
          _that.toLogin()
        }
      }
    })
  },
  methods: {
    // 登录
    toLogin () {
      if (!this.account) {
        this.$message({
          message: '请输入用户名',
          type: 'error'
        })
        return
      } else if (!this.password) {
        this.$message({
          message: '请输入密码',
          type: 'error'
        })
        return
      }
      let userName = this.account
      let passWord = this.md5(this.password)
      let token = this.token
      this.$ajax(this.$api.login.signin.url, {
        method: this.$api.login.signin.method,
        data: {
          username: userName,
          password: passWord,
          token: token
        }
      }).then(res => {
        console.log(res)
        this.saveToken(res.token)
        this.$message({
          message: '登陆成功',
          type: 'success',
          duration: 1000
        })
        setTimeout(() => {
          this.$router.push({ name: 'dashboard' })
        }, 1000)
      }).catch(msg => {

      })
    },

    // 初始化登陆逻辑
    initLogin () {
      var aData = {}
      if (this.$cookie.get('accountInfo') === undefined || this.$cookie.get('accountInfo') === null) {
        aData = { account: '', password: '', remberAccount: true, token: '' }
        this.$cookie.set('accountInfo', JSON.stringify(aData))
      } else {
        aData = this.$cookie.get('accountInfo')
        aData = JSON.parse(aData)
        for (var n in aData) {
          this[n] = aData[n]
        }
      }
    },

    // 切换记住账号密码状态
    triggerRember () {
      this.remberAccount = !this.remberAccount
    },

    saveToken (token) {
      if (this.remberAccount) {
        var aData = { account: this.account, password: this.password, remberAccount: true, token: token }
        this.$cookie.set('accountInfo', JSON.stringify(aData))
      } else {
        this.$cookie.delete('accountInfo')
      }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>