|
|
@@ -0,0 +1,168 @@
|
|
|
+<template>
|
|
|
+ <!-- 登录页面 -->
|
|
|
+ <div class="login-content">
|
|
|
+ <!-- 登录输入框 -->
|
|
|
+ <div class="login-input">
|
|
|
+ <div class="input-item">
|
|
|
+ <el-input v-model="loginData.loginForm.tenantName" :prefix-icon="HomeFilled" placeholder="租户" />
|
|
|
+ <el-input v-model="loginData.loginForm.username" :prefix-icon="Avatar" placeholder="账号" />
|
|
|
+ <el-input
|
|
|
+ v-model="loginData.loginForm.password"
|
|
|
+ type="password"
|
|
|
+ :prefix-icon="Lock"
|
|
|
+ placeholder="密码"
|
|
|
+ show-password
|
|
|
+ />
|
|
|
+ <!-- 多选框 -->
|
|
|
+ <div class="check-box">
|
|
|
+ <el-checkbox v-model="loginData.loginForm.rememberMe" label="记住我" size="large" />
|
|
|
+ <a href="javascript:;" class="forgot-password">忘记密码?</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 登录按钮 -->
|
|
|
+ <el-button type="primary"
|
|
|
+ @click="handleLogin">登录</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted, computed } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import { HomeFilled, Avatar, Lock } from '@element-plus/icons-vue'
|
|
|
+import { ElLoading } from 'element-plus'
|
|
|
+import {getTenantIdByName, login} from "@/api/login/login.js";
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+const loginData = ref({
|
|
|
+ tenantEnable: true,
|
|
|
+ loginForm: {
|
|
|
+ tenantName: '博雅智算',
|
|
|
+ username: 'admin',
|
|
|
+ password: '',
|
|
|
+ captchaVerification: '',
|
|
|
+ rememberMe: true // 默认记录我。如果不需要，可手动修改
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const loginLoading = ref(false)
|
|
|
+
|
|
|
+const loading = ref() // ElLoading.service 返回的实例
|
|
|
+
|
|
|
+const tenantId = ref('')
|
|
|
+
|
|
|
+// 获取租户 ID
|
|
|
+const getTenantId = async () => {
|
|
|
+ if (loginData.value.tenantEnable === true) {
|
|
|
+ const res = await getTenantIdByName(loginData.value.loginForm.tenantName)
|
|
|
+ //记录租户id
|
|
|
+ tenantId.value = res.data
|
|
|
+ }
|
|
|
+}
|
|
|
+// 登录
|
|
|
+const handleLogin = async (params) => {
|
|
|
+ loginLoading.value = true
|
|
|
+ try {
|
|
|
+
|
|
|
+ await getTenantId()
|
|
|
+
|
|
|
+ //【补充】缺少form表单校验（登录框要改成form表单，并加入必填项，用什么div啊？？？换掉）
|
|
|
+
|
|
|
+ const loginDataLoginForm = { ...loginData.value.loginForm }
|
|
|
+ loginDataLoginForm.captchaVerification = params.captchaVerification
|
|
|
+ // 构建包含 headers 的请求参数
|
|
|
+ const res = await login({
|
|
|
+ 'Tenant-Id': tenantId.value
|
|
|
+ },loginDataLoginForm);
|
|
|
+ if (!res) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ //【补充】校验登录状态
|
|
|
+ //成功-失败-提示文字
|
|
|
+
|
|
|
+ loading.value = ElLoading.service({
|
|
|
+ lock: true,
|
|
|
+ text: '正在加载系统中...',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
+
|
|
|
+ //登录成功后，跳转到指定的页面
|
|
|
+ router.push('/home')
|
|
|
+
|
|
|
+ } finally {
|
|
|
+ loginLoading.value = false
|
|
|
+ loading.value.close()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+@use 'sass:math';
|
|
|
+// 定义rpx转换函数
|
|
|
+@function rpx($px) {
|
|
|
+ @return math.div($px, 750) * 100vw;
|
|
|
+}
|
|
|
+.login-content {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: linear-gradient(to bottom, #001169, #8a78d0);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: rpx(0);
|
|
|
+}
|
|
|
+.login-input {
|
|
|
+ width: rpx(210);
|
|
|
+ height: rpx(240);
|
|
|
+ margin: auto;
|
|
|
+ display: flex;
|
|
|
+ border-radius: rpx(10);
|
|
|
+ background-color: rgb(255, 255, 255, 0.3);
|
|
|
+ border: 1px white solid;
|
|
|
+ box-shadow: 0 8px 8px rgb(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
+.input-item {
|
|
|
+ margin: auto;
|
|
|
+ // margin-top: rpx(20);
|
|
|
+ // color: white;
|
|
|
+ // letter-spacing: rpx(5);
|
|
|
+}
|
|
|
+.input-item .el-input {
|
|
|
+ width: rpx(180);
|
|
|
+ height: rpx(18);
|
|
|
+ margin-bottom: rpx(15);
|
|
|
+}
|
|
|
+.input-item .el-button {
|
|
|
+ width: rpx(180);
|
|
|
+ height: rpx(18);
|
|
|
+ color: black;
|
|
|
+ font-size: rpx(8);
|
|
|
+ letter-spacing: rpx(10);
|
|
|
+ border-radius: rpx(3);
|
|
|
+ margin: auto;
|
|
|
+ border: none;
|
|
|
+ background: linear-gradient(to bottom, #fee78a, #ffce1b);
|
|
|
+ box-shadow: 0 8px 8px rgb(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+.check-box {
|
|
|
+ width: rpx(180);
|
|
|
+ height: rpx(18);
|
|
|
+ margin: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.check-box .el-checkbox{
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+.check-box .forgot-password {
|
|
|
+ color: white;
|
|
|
+ font-size: rpx(6);
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+</style>
|
丸子