fire_control/src/view/system/login.vue

<template>
  <div class="login-layer">
    <!-- <div class="top-text">
      <img src="@/assets/image/top-text.png" alt="">
    </div> -->
    <div class="content">
    <div class="info">
        <h1>消防火调三维远程勘验平台</h1>
        <p>Three-dimensional remote prospecting platform of fire scene of Fire Resue</p>
    </div>
    <el-form class="panel login" :model="form" @submit.stop>
      <h2>欢迎登录</h2>
      <el-form-item class="panel-form-item">
        <p class="err-info">{{verification.phone}}</p>
        <el-input v-model="form.phone" placeholder="手机号" @keydown.enter="submitClick"></el-input>
      </el-form-item>
      <el-form-item class="panel-form-item">
        <p class="err-info">{{verification.psw}}</p>
        <el-input v-model="form.psw" placeholder="密码" type="password" @keydown.enter="submitClick"></el-input>
      </el-form-item>

      <el-form-item class="panel-form-item code-form-item">
        <p class="err-info">{{verification.code}}</p>
        <el-input v-model="form.code" placeholder="验证码" @keydown.enter="submitClick" class="code-input">
          <template v-slot:append>
            <img :src="codeImg" class="code-img"  @click="refer">
          </template>
        </el-input>
      </el-form-item>

      <el-form-item class="panel-form-item">
        <el-button type="primary" class="fill" @click="submitClick">登录</el-button>
      </el-form-item>

      <div class="more">
        <a @click="$router.push({name: 'forget'})">忘记密码</a>
<!--        <a @click="$router.push({name: 'register'})">账号注册</a>-->
      </div>
    </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, watch } from 'vue'
import axios from 'axios'
import { setToken, setPermission, setInfo, setRoleKey } from '@/state/user'
import { userLogin, getCode } from '@/request/config'
import {PHONE} from '@/constant/REG'
import { openErrorMsg } from '@/request/errorMsg.js'
import { encryption, guid } from '@/util'

export default {
  name: 'login',
  setup() {
    const form = reactive({
      phone: localStorage.getItem('userName') || '',
      psw: localStorage.getItem('password') || '',
      code: '',
      remember: localStorage.getItem('remember') === '1'
    })
    const verification = reactive({ phone: '', psw: '', code: '' })



    watch(form, () => {
      console.log('form',form)
      if (!form.phone) {
        verification.phone = '请输入手机号'
      } else {
        verification.phone = PHONE.REG.test(form.phone) ? '': PHONE.tip
      }
      if (!form.psw) {
        verification.psw = '请输入密码'
      } else {
        verification.psw = ''
      }
      if (!form.code.trim()) {
        verification.code = '请输入验证码'
      } else {
        verification.code = ''
      }
    }, {immediate: true})

    return {
      form,
      verification
    }
  },
  methods: {
    async submitClick(ev) {
      ev.stopPropagation()

      if (this.verification.phone) return openErrorMsg(this.verification.phone, '提示')
      if (this.verification.psw) return openErrorMsg(this.verification.psw, '提示')
      if (this.verification.code) return openErrorMsg(this.verification.code, '提示')

      try {
        // await axios.get(checkCode, {params: { code: this.form.code, key: this.imgKey }})
        let res = await axios.post(userLogin, {
          userName: this.form.phone,
          key: this.imgKey,
          code: this.form.code,
          password: encryption(this.form.psw)
        })

        if (this.form.remember) {
          localStorage.setItem('userName', this.form.phone)
          localStorage.setItem('password', this.form.psw)
          localStorage.setItem('remember', '1')
        } else {
          localStorage.setItem('userName', '')
          localStorage.setItem('password', '')
          localStorage.setItem('remember', '0')
        }

        if (!res.data.roles.length) {
          setToken('')
          setRoleKey('')
          setPermission([])
          setInfo({})
          openErrorMsg('当前账号无权限，请联系总队管理员处理。', '提示')
        } else {
          res.data.user.department = res.data.department
          console.log('info', res.data.permissions)
          setInfo(res.data.user)
          setToken(res.data.token)
          setRoleKey(res.data.roles[0].roleKey)
          setPermission(res.data.roles[0].roleKey,res.data.permissions)
          this.$router.replace({ name: 'home' })
        }
      } catch (e) {
        console.error(e)
        return this.refer()
      }


    },
    refer() {
      this.imgKey = guid()
    }
  },
  data() {
    let url = process.env.VUE_APP_PREFIX + getCode

    return {
      baseImg: url,
      imgKey: guid()
    }
  },
  computed: {
    codeImg() {
      return this.baseImg + '?key=' + this.imgKey
    }
  }
}
</script>

<style lang="sass">
@import "./style.scss"
</style>

<style lang="scss" scoped>
.login-layer {
  text-align: right;
}
.content{
      display: flex;
    justify-content: center;
    align-items: flex-start;
}
.info {
  color: #fff;
  margin-right: 143px;
  padding-top: 80px;
  padding-bottom: 80px;
  flex: none;
  text-align: left;
  img {
    width: 76px;
    height: 76px;
  }
  h1 {
    font-size: 2.8rem;
    line-height: 3.7rem;
    margin-bottom: 0.7rem;
  }
  p {
    font-size: 2rem;
    line-height: 2.2rem;

  }
}

.top-text {
  margin-bottom: 50px;
  pointer-events: none;
  height: 153px;
  min-width: 1200px;
  img {
    position: absolute;
    right: 0;
  }
}
.login {
  width: 320px;
  padding: 40px 40px 30px;
  position: relative;
  display: inline-block;



  h2 {
    padding-left: 0;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 2.14rem;

    span {
      color: #646566;
      font-size: 1.33rem;
      margin-top: 0.71rem;
      display: block;
    }
  }


  .panel-form-item {
    padding-left: 0;
    padding-right: 0;
  }

  .more a:first-child::after {
    content: '';
    position: absolute;
    right: -5px;
    width: 1px;
    height: 8px;
    background: #DCDEE0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.code-img {
  width: 100%;
  height: 100%;
  // object-fit: cover;
}

</style>

<style>
.login .code-form-item .el-input {
  display: flex;
}

.login .code-form-item .el-input-group__append {
  flex: none;
  margin-left: 10px;
  width: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

}

.login .code-form-item .el-input__inner {
  flex: 1;
}
.login .code-form-item .el-input-group__append,
.login .code-form-item .el-input__inner {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
}

</style>