xujiecloud-vue/src/views/common/login.vue

<template>
  <div class="site-wrapper site-page--login">
    <div style="display: flex;height: 100vh">
      <div class="login-bg"></div>
      <div style="width: 35%">
        <div style="height: 27vh;">
          <div style="text-align: right;padding: 0px 20px">
            <img width="60%" height="72" style="object-fit: contain" src="~@/assets/img/ckp.png">
          </div>
        </div>
        <div style="padding: 30px 130px">
          <h3 class="login-title">用户登陆</h3>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" placeholder="帐号" size="large"></el-input>
            </el-form-item>
            <el-form-item prop="password" style="margin-top: 20px">
              <el-input v-model="dataForm.password" type="password" placeholder="密码" size="large"></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 20px">
              <el-button style="width: 100%" type="primary" @click="dataFormSubmit()">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {getConfigParams} from '@/api/sysConfig.js'
import { getUUID } from '@/utils'
  export default {
    data () {
      return {
        src: 'http://127.0.0.1/upload/ifs.png',
        dataForm: {
          userName: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        dataRule: {
          userName: [
            { required: true, message: '帐号不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]
        },
        captchaPath: ''
      }
    },
    computed: {
      multiLanguage: {
        get() {
          return this.$store.state.user.multiLanguage
        },
        set(val) {
          this.$store.commit('user/updateMultiLanguage', val)
        }
      },
      authControl: {
        get() {
          return this.$store.state.user.authControl
        },
        set(val) {
          this.$store.commit('user/updateAuthControl', val)
        }
      }
    },
    mounted() {
      // 仅当 redirectPath 为空时设置
      const redirectPath = this.$route.query.redirect || '/home';
      if (!localStorage.getItem('redirectPath')) {
        localStorage.setItem('redirectPath', redirectPath);
      }
    },
    created () {
       this.userName();
      // 如果 redirectPath 已经存在，不要覆盖它
      const currentPath = localStorage.getItem('redirectPath');
      if (!currentPath) {
        localStorage.setItem('redirectPath', this.$route.fullPath);
      }
    },
    methods: {
      // 获取上次登陆的用户名
      userName(){
        this.dataForm.userName = localStorage.getItem('userName')
      },
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/sys/login'),
              method: 'post',
              data: this.$http.adornData({
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                console.log('跳转前路径:', localStorage.getItem('redirectPath')); // 检查路径是否正确
                this.$cookie.set('token', data.token)
                // 动态跳转逻辑
                const redirectPath = localStorage.getItem('redirectPath') || '';

                // 设置需要判断的路径
                const pathsToRedirect = ['/auth-authQuote', '/auth-authInquiry'];

                if (pathsToRedirect.some(path => redirectPath.indexOf(path) !== -1)) {
                  this.$router.replace(redirectPath);
                } else {
                  this.$router.replace({ name: 'home' });
                }
                console.log('Redirecting to:', redirectPath); // 调试输出
                this.$i18n.locale=data.language
                localStorage.setItem('locale', data.language)
                localStorage.setItem('refresh', "0")
                localStorage.setItem('userName', this.dataForm.userName)
                this.getConfigParams()
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },

      // 获取全局参数变量
      getConfigParams() {
        getConfigParams().then(({data}) => {
          if (data && data.code == 0) {
            localStorage.setItem('configParams', JSON.stringify(data.data))
            // this.multiLanguage = JSON.parse(localStorage.getItem('configParams')).multiLanguage
            // this.authControl = JSON.parse(localStorage.getItem('configParams')).authControl
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.site-wrapper.site-page--login {
  .login-title {
    font-size: 30px;
  }
  .login-main .el-input__inner{
    margin-top: 10px;
    height: 45px;
  }
  .el-button--medium {
    margin-top: 0px;
    padding: 5px 11px;
    font-size: 16px;
    border-radius: 4px;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
}
.login-bg{
  background-image: url(~@/assets/img/login_bg.jpg);
  background-size: cover;
  width: 65%;
}
</style>