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.
128 lines
3.0 KiB
128 lines
3.0 KiB
<script setup>
|
|
import { ref, onMounted, reactive, computed } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import axios from "axios";
|
|
import { useRouter } from "vue-router";
|
|
import { VscGlobe } from "vue-icons-plus/vsc";
|
|
|
|
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: "" });
|
|
//调用方法
|
|
const login = async function () {
|
|
try {
|
|
const result = await axios.post(
|
|
"http://192.168.8.93:10010/admin/login",
|
|
form.value
|
|
);
|
|
if (result.data.code == 200) {
|
|
localStorage.setItem("token", result.data.msg);
|
|
router.push("/");
|
|
ElMessage.success("登录成功");
|
|
console.log("请求成功", result);
|
|
} else {
|
|
form.value.password = "";
|
|
form.value.userjwcode = "";
|
|
ElMessage.error(result.data.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"
|
|
/>
|
|
<el-col :span="6" :offset="3" class="form">
|
|
<!-- 登录表单 -->
|
|
<el-form
|
|
:model="form"
|
|
size="large"
|
|
autocomplete="off"
|
|
@keyup.enter.native="login()"
|
|
>
|
|
<el-form-item>
|
|
<h1 style="color: #409eff">金币系统登录</h1>
|
|
</el-form-item>
|
|
<el-form-item prop="jwcode">
|
|
<el-input v-model="form.jwcode" placeholder="请输入精网号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
v-model="form.password"
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item class="flex"> </el-form-item>
|
|
<!-- 登录按钮 -->
|
|
<el-form-item>
|
|
<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: 100vh;
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* .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%);
|
|
} */
|
|
</style>
|