admin/src/pages/login/index.vue

<template>
  <div class="mainPage">
    <div class="centerLabel">
      <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, // 记住账号密码
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.initLogin()
    })
  },
  methods: {
    // 登录
    toLogin () {
      if (this.remberAccount) {
        var aData = { account: this.account, password: this.password, remberAccount: true }
        this.$cookie.set('accountInfo', JSON.stringify(aData))
      } else {
        this.$cookie.delete('accountInfo')
      }
    },

    // 初始化登陆逻辑
    initLogin () {
      var aData = {}
      if (this.$cookie.get('accountInfo') === undefined || this.$cookie.get('accountInfo') === null) {
        aData = { account: '', password: '', remberAccount: true }
        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
    },
  },
}
</script>

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