bigSceneEdit/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">
          <div class="text_01">大场景上传自动化</div>
          <div class="text_02">内部人员使用，便捷管理</div>
          <div class="text_02">请勿泄露</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="phoneNum">
                <el-input
                  type="phoneNum"
                  placeholder="手机号码"
                  v-model="ruleForm2.phoneNum"
                  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>四维时代 Copyright © 2019 4DAGE Co., Ltd. All rights reserved.</div>
      <div class="sub">粤ICP备14078495号-2</div>
    </div>
  </div>
</template>

<script>
import vcenter from '@/components/vcenter'
import {encodeStr} from '@/util'
import { Base64 } from 'js-base64'
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 {
      fullscreenLoading: false,
      checked: true,
      ruleForm2: {
        phoneNum: '',
        pass: ''
      },
      rules2: {
        phoneNum: [
          {
            validator: validateUser,
            trigger: 'blur'
          }
        ],
        pass: [
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ]
      }
    }
  },

  mounted () {
    this.ruleForm2.phoneNum = window.localStorage.getItem('cjt_phoneNum') || ''
    this.ruleForm2.pass = window.localStorage.getItem('cjt_pass') || ''
  },
  methods: {
    async login () {
      let {phoneNum, pass} = this.ruleForm2
      this.fullscreenLoading = true
      let res = await this.$http.post('/api/sso/user/login', {
        phoneNum,
        password: encodeStr(Base64.encode(pass)),
      })
      this.fullscreenLoading = false
      if (res.code === 0) {
        let data = res.data
        window.localStorage.setItem('cjt_token', data.token)
        if (this.checked) {
          window.localStorage.setItem(
            'cjt_phoneNum',
            phoneNum
          )
          window.localStorage.setItem('cjt_pass', pass)
        } else {
          window.localStorage.setItem('cjt_phoneNum', '')
          window.localStorage.setItem('cjt_pass', '')
        }
        this.$router.push('/')
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg
        })
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.login()
        } else {
          this.$alert('请填写正确信息', '提示', {
            confirmButtonText: '确定',
            callback: action => {}
          })
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.l-con {
  width: 100%;
}
.l-top {
  color: #333;
  text-align: center;
  padding: 50px 0;
}
.lc-l {
  display: inline-block;
  color: #fff;
}
.lc-l img {
  width: 150px;
}

.text_01 {
  font-size: 60px;
  font-weight: bold;
  margin-top: 70px;
}
.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;
}
.lc-title span {
  color: #333;
  font-size: 16px;
}
.lc-form {
  margin-top: 40px;
}
.lc-btn {
  width: 100%;
}
.lc-btn .el-button--primary {
  width: 100%;
}
.l_center {
  height: 600px;
  width: 100%;
  padding: 0 10% 0 20%;
  background: url("~@/assets/images/img_login_banbg.jpg") center center
    no-repeat;
  box-sizing: border-box;
}
.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>