zfb_cms/src/pages/login/index.vue

<template>
<div class="l-con">
  <div class="l-top">
    <h1>四维指房宝</h1>
  </div>
  <div class="l_center">
    <vcenter>
      <div class="lc-l">
        <img :src="logoImg" alt="">
        <div class="text_01">10分钟搞定实景VR</div>
        <div class="text_02">自助720度实景VR发布管理</div>
        <div class="text_03">自助、简单、安全、高效</div>
      </div>
      <div class="lc-r">
        <div class="lc-title">
          <span>后台登录</span>
        </div>
        <div class="lc-form">
           <el-form label-position="top" :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
              <el-form-item prop="username">
                <el-input type="username" placeholder="账号" v-model="ruleForm2.username" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="pass" id='no-bottom'>
                <el-input type="password" placeholder="密码" @keyup.enter.native="submitForm('ruleForm2')" v-model="ruleForm2.pass" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-checkbox  v-model="checked">记住密码（在公共场所电脑请勿勾选）</el-checkbox>
              </el-form-item>
            </el-form>
            <div class="lc-btn">
              <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="submitForm('ruleForm2')">登录</el-button>
            </div>
        </div>
      </div>
    </vcenter>
  </div>
  <div class="l_footer">
    <div>杭州天门科技有限公司  版权所有 © 2018 Inc.  浙ICP备18054719号-1</div>
    <div class="sub">Design by TianMen Technology Co.Ltd.</div>
  </div>
</div>
</template>

<script>
import vcenter from '@/components/vcenter'
import {serverName} from '@/utils/http'
export default {
  name: 'login',
  components: {
    vcenter
  },
  data () {
    var validateUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      } else if (value.length < 3) {
        callback(new Error('用户名不合法'))
      } else {
        callback()
      }
    }

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入密码'))
      } else if (value.length < 4) {
        callback(new Error('密码不能小于4位'))
      } else {
        callback()
      }
    }

    return {
      serverName,
      fullscreenLoading: false,
      checked: true,
      logoImg: require('@/assets/images/4d_zfb_logo.png'),
      ruleForm2: {
        username: '',
        pass: ''
      },
      rules2: {
        username: [{
          validator: validateUser,
          trigger: 'blur'
        }],
        pass: [{
          validator: validatePass,
          trigger: 'blur'
        }]
      }
    }
  },

  mounted () {
    this.ruleForm2.username = window.localStorage.getItem('zfb_username') || ''
    this.ruleForm2.pass = window.localStorage.getItem('zfb_pass') || ''
  },
  methods: {
    login () {
      this.$http.post('loginBackground', {
        userName: this.ruleForm2.username,
        userPassword: this.ruleForm2.pass
      }).then(res => {
        this.fullscreenLoading = true
        if (res.code === 200) {
          window.localStorage.setItem('zfb_token', String(res.message.token))
          window.localStorage.setItem('token', String(res.message.token))
          window.localStorage.setItem('zfb_roleType', res.message.type)
          if (this.checked) {
            window.localStorage.setItem('zfb_username', this.ruleForm2.username)
            window.localStorage.setItem('zfb_pass', this.ruleForm2.pass)
          } else {
            window.localStorage.setItem('zfb_username', '')
            window.localStorage.setItem('zfb_pass', '')
          }
          this.$router.push('/scene')
        } else {
          this.fullscreenLoading = false
          this.$notify.error({
            title: '错误',
            message: res.message
          })
        }
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login()
        } else {
          this.$alert('请填写正确信息', '提示', {
            confirmButtonText: '确定',
            callback: action => {}
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.l-con{
  width: 100%;
  .l-top{
    color: #333;
    text-align: center;
    padding: 50px 0;
  }
  .l_center {
    height: 600px;
    width: 100%;
    padding: 0 10% 0 20%;
    background: url('~@/assets/images/img_login_banbg.jpg') center center no-repeat;
    .lc-l{
      display: inline-block;
      color: #fff;
      img{
        width: 120px;
      }

      .text_01{
        font-size: 60px;
        font-weight: bold;
        margin-top: 20px;
      }
      .text_02{
        font-size: 40px;
        margin: 30px 0;
      }
      .text_03{
        font-size: 20px;
      }

    }
    .lc-r{
      float: right;
      width: 345px;
      height: 370px;
      background-color: #fff;
      padding: 28px 30px;
      .lc-title{
        text-align: center;
        border-bottom: 2px solid #0175dc;
        padding-bottom: 20px;
        span{
          color: #333;
          font-size: 16px;
        }
      }
      .lc-form{
        margin-top: 40px;
        .lc-btn{
          width: 100%;
          .el-button--primary{
            width: 100%;
          }
        }
      }
    }
  }
  .l_footer{
    font-size: 14px;
    text-align: center;
    margin-top: 45px;
    line-height: 1.5;
    .sub{
      font-size: 12px;
      color: #999;
      margin-top: 10px;
    }
  }
}
</style>