You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
243 lines
7.1 KiB
243 lines
7.1 KiB
<script setup>
|
|
import { ref, onMounted, reactive, computed } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import axios from 'axios'
|
|
import request from '@/util/http'
|
|
import { useRouter } from 'vue-router'
|
|
import { VscGlobe } from 'vue-icons-plus/vsc'
|
|
|
|
//获取当前浏览器地址
|
|
var url = window.location.href //上传服务器时打开注释并注释掉下一行
|
|
//截取machineId=后的字符串
|
|
var machineId = null
|
|
// 从浏览器地址获取machineId的方法
|
|
function getMachineId() {
|
|
var parts = url.split('machineId=')
|
|
if (parts.length > 1) {
|
|
machineId = parts[1].split('&')[0] // 进一步截取 & 之前的字符串
|
|
}
|
|
// machineId = decodeURIComponent(machineId); //如果machineId需要前端转码可以打开注释
|
|
console.log('MachineId字符串:', machineId) // 输出 machineId 的值
|
|
// 将 machineId 存储到本地存储中
|
|
if (machineId) {
|
|
localStorage.setItem('machineId', machineId)
|
|
}
|
|
}
|
|
getMachineId()
|
|
|
|
const router = useRouter() // 获取路由实例
|
|
let formData = new FormData()
|
|
// 添加表单数据到FormData对象中
|
|
// formData.append("jwcode", form.value.jwcode);
|
|
// formData.append("password", form.value.password);
|
|
|
|
const form = ref({ jwcode: '', password: '', token: '', machineId: machineId })
|
|
//调用方法
|
|
const login = async function () {
|
|
try {
|
|
const result = await request({
|
|
url: '/admin/login',
|
|
data: form.value
|
|
})
|
|
console.log('resultresult', result)
|
|
if (result.code == 200) {
|
|
localStorage.setItem('token', result.msg)
|
|
localStorage.setItem('permission', result.data.permission)
|
|
if (
|
|
result.data.permission == '5' ||
|
|
result.data.permission == '1' ||
|
|
result.data.permission == '2' ||
|
|
result.data.permission == '3'
|
|
) {
|
|
router.push('/workspace')
|
|
} else if (result.data.permission == '4') {
|
|
router.push('/noPermission')
|
|
}
|
|
ElMessage.success('登录成功')
|
|
console.log('请求成功', result)
|
|
} else {
|
|
form.value.password = ''
|
|
form.value.jwcode = ''
|
|
ElMessage.error(result.msg)
|
|
}
|
|
} catch (error) {
|
|
console.log('请求失败', error)
|
|
ElMessage.error('登录失败，请检查账号密码')
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
<template>
|
|
<el-row class="login-page">
|
|
<img
|
|
:span="12"
|
|
src="../assets/background.jpg"
|
|
alt="logo"
|
|
class="bg"
|
|
fit="fit"
|
|
/>
|
|
<!-- <div style="height: 100vh; width: 1000px" class="container"></div> -->
|
|
<el-col :span="6" :offset="3" class="form">
|
|
<!-- 登录表单 -->
|
|
<el-form :model="form" size="large" autocomplete="off" >
|
|
<el-form-item>
|
|
<h1 style="color: #409eff">金币系统登录</h1>
|
|
</el-form-item>
|
|
<el-form-item prop="jwcode">
|
|
<el-input v-model="form.jwcode" placeholder="请输入精网号" @keyup.enter="login"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password" @keyup.enter="login">
|
|
<el-input
|
|
v-model="form.password"
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item class="flex"> </el-form-item>
|
|
<!-- 登录按钮 -->
|
|
<el-form-item>
|
|
<button type="button" class="button" @click="login()">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
height="30"
|
|
width="24"
|
|
>
|
|
<path
|
|
fill="white"
|
|
d="M23.15 2.587L18.21 0.210001C17.9308 0.075557 17.6167 0.031246 17.3113 0.083204C17.0058 0.135162 16.724 0.280818 16.505 0.500001L7.04499 9.13L2.92499 6.002C2.73912 5.86101 2.50976 5.78953 2.27669 5.79994C2.04363 5.81035 1.82156 5.902 1.64899 6.059L0.326993 7.261C0.223973 7.35465 0.141644 7.46878 0.0852761 7.59608C0.0289081 7.72339 -0.00025659 7.86106 -0.000350724 8.00028C-0.000444857 8.1395 0.0285336 8.27721 0.0847294 8.40459C0.140925 8.53197 0.2231 8.64621 0.325993 8.74L3.89899 12L0.325993 15.26C0.2231 15.3538 0.140925 15.468 0.0847294 15.5954C0.0285336 15.7228 -0.000444857 15.8605 -0.000350724 15.9997C-0.00025659 16.1389 0.0289081 16.2766 0.0852761 16.4039C0.141644 16.5312 0.223973 16.6454 0.326993 16.739L1.64999 17.94C1.82256 18.097 2.04463 18.1887 2.27769 18.1991C2.51076 18.2095 2.74012 18.138 2.92599 17.997L7.04599 14.869L16.506 23.499C16.7248 23.7182 17.0064 23.8639 17.3117 23.9159C17.6171 23.9679 17.931 23.9235 18.21 23.789L23.152 21.412C23.4062 21.2893 23.6207 21.0973 23.7707 20.8581C23.9207 20.619 24.0002 20.3423 24 20.06V3.939C24 3.65647 23.9203 3.37967 23.7699 3.14048C23.6195 2.90129 23.4046 2.70943 23.15 2.587ZM18.004 17.448L10.826 12L18.004 6.552V17.448Z"
|
|
></path>
|
|
</svg>
|
|
<p class="text">登录</p>
|
|
</button>
|
|
<!-- <el-button
|
|
class="button"
|
|
type="primary"
|
|
auto-insert-space
|
|
@click="login()"
|
|
>登录</el-button
|
|
> -->
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
<style scoped>
|
|
.bg {
|
|
border-radius: 0 20px 20px 0;
|
|
height: 110vh;
|
|
width: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.background {
|
|
color: #fffdfd;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
background-color: #08193d;
|
|
}
|
|
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
user-select: none;
|
|
|
|
.title {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.button {
|
|
width: 100%;
|
|
}
|
|
|
|
.flex {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
/* From Uiverse.io by kamehame-ha */
|
|
.button {
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
gap: 15px;
|
|
background-color: #1b95e6;
|
|
outline: 3px #1b95e6 solid;
|
|
outline-offset: -3px;
|
|
border-radius: 5px;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: 400ms;
|
|
}
|
|
|
|
.button .text {
|
|
color: white;
|
|
font-weight: 700;
|
|
font-size: 1em;
|
|
transition: 400ms;
|
|
}
|
|
|
|
.button svg path {
|
|
transition: 400ms;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.button:hover .text {
|
|
color: #007acc;
|
|
}
|
|
|
|
.button:hover svg path {
|
|
fill: #007acc;
|
|
}
|
|
|
|
/* .box {
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
} */
|
|
/* From Uiverse.io by marsella_3472 */
|
|
/*
|
|
More comprehensive version at shenanigans.shoghisimon.ca/collection/css
|
|
*/
|
|
/* From Uiverse.io by SelfMadeSystem */
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(#000 1px, #0000 0),
|
|
linear-gradient(90deg, #000, #0000, #000),
|
|
linear-gradient(in oklch longer hue -2deg, #a00, #a00);
|
|
background-size: 100% 2px, 100% 100%, 100% 100%;
|
|
}
|
|
</style>
|
|
|
|
<!-- 这是补救
|
|
const run = () => {
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
|
|
const chartNode = document.querySelector("main");
|
|
drawChart.default(chartNode,data,width,height);
|
|
};
|
|
window.addEventListener("resize", run);
|
|
document.addEventListener("DOMContentLoaded", run);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
-->
|