faw-report-library-web/src/views/Login.vue

<template>
    <div class="login">
        <div class="login-main">
            <div class="login-box">
                <el-form :model="form" label-position="top" label-width="80px">
                    <el-form-item>
                        <h1>大众</h1>
                    </el-form-item>
                    <el-form-item label="用户名:">
                        <el-input v-model="form.username" prefix-icon="el-icon-user" size="small"
                                  placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input v-model="form.password" prefix-icon="el-icon-edit" type="password" size="small"
                                  placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码:">
                        <el-input v-model="form.verifyCode" prefix-icon="el-icon-edit-outline" size="small"
                                  @keyup.enter.native="login"
                                  placeholder="请输入验证码">
                            <div slot="append" style="width: 100px;height: 30px;">
                                <el-image style="width: 100%; height: 100%" @click="verifyCode" :src="verifyImg"
                                          fit="fill"></el-image>
                            </div>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="isChecked">记住密码</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" style="width: 100%;" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { Base64 } from 'js-base64'

export default {
  name: 'Login',
  data () {
    return {
      form: {
        username: '',
        password: '',
        verifyCode: ''
      },
      verifyImg: '',
      isChecked: false
    }
  },
  created () {
    this.init()
  },
  methods: {
    getQueryVariable (r, variable) {
      if (r) {
        const query = r.split('?')
        if (query && query.length == 2) {
          const vars = query[1].split('&')
          for (let i = 0; i < vars.length; i++) {
            const pair = vars[i].split('=')
            if (pair[0] == variable) {
              return pair[1]
            }
          }
        }
      }
    },
    init () {
      this.isChecked = !!this.$store.state.rememberData
      if (this.isChecked) {
        this.form.username = this.$store.state.rememberData.username
        this.form.password = this.$store.state.rememberData.password
      }
      this.verifyCode()
    },
    // 登录
    login () {
      if (!this.form.username) {
        return this.$message.warning('请输入用户名')
      }
      if (!this.form.password) {
        return this.$message.warning('请输入密码')
      }
      if (!this.form.verifyCode) {
        return this.$message.warning('请输入验证码')
      }
      if (this.form.verifyCode.length !== 4) {
        return this.$message.warning('请检查验证码')
      }
      this.$store.commit('saveRememberData', this.isChecked
        ? {
            username: this.form.username,
            password: this.form.password
          }
        : null)
      const data = JSON.parse(JSON.stringify(this.form))
      data.username = this.$JSEncrypt(data.username)
      data.password = this.$JSEncrypt(data.password)
      const jsonData = JSON.stringify(data)
      this.$api.login.login(Base64.encode(jsonData)).then(res => {
        if (res.respCode !== '0') {
          this.verifyCode()
          return this.$message.error(res.data.message)
        }
        res.data.roleIdList=res.data.roleEOList.map(item=>{
          return item.id
        })
        this.$message.success('登录成功')
        this.$store.commit('saveUserInfo', res.data)
        this.getMarket().then((resx)=>{
          this.$store.commit('setMarketpre', resx)
          this.$router.push({ path: '/report/list', query: { id: 'AEHJB8YNJ3' } })
        }).catch((resx)=>{
          this.$store.commit('setMarketpre', resx)
          this.$router.push({ path: '/report/list', query: { id: 'AEHJB8YNJ3' } })
        })

      }).catch(_ => {
        this.verifyCode()
      })
    },
    // 获取验证码
    verifyCode () {
      this.$api.login.verifyCode({})
        .then(res => {
          this.verifyImg = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
        })
    },
    // 调用获取水印的前缀接口 获取前缀
    getMarket () {
       return new Promise((resolve,reject)=>{
         this.$api.setting.getOneSetting("水印前缀").then(res=>{
           if(res.data){
             resolve(res.data.configValue)

           }else{
             resolve('')
           }
         })
       }).catch(()=>{
         reject('')
       })
    }
  }
}
</script>

<style lang="scss" scoped>
    .login {
        width: 100%;
        height: 100%;
        background-color: #1fc8db;
        background-image: linear-gradient(45deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
        position: relative;

        .login-main {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            .login-box {
                background-color: #fff;
                width: 400px;
                min-height: 200px;
                margin-top: 20px;
                border-radius: 5px;
                box-shadow: 0 0 20px 0 rgb(0 0 0 / .2);
                padding: 30px 20px;

                h1 {
                    text-align: center;
                    color: #2b2b2b;
                    font-size: 18px;
                }

                ::v-deep .el-form-item {
                    margin-bottom: 10px;

                    .el-form-item__label {
                        padding-bottom: 0;
                    }

                    .el-input-group__append {
                        padding: 0;
                    }
                }
            }
        }

    }

</style>