87 lines
3.0 KiB
Vue
87 lines
3.0 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<div style="margin: 200px auto; background-color: #fff; width: 800px; height: 400px; border-radius: 10px">
|
|
<div >
|
|
<img
|
|
class="image"
|
|
style="height: 400px;width: 300px;float: left;"
|
|
src="../img/Login/login_top.png"
|
|
/>
|
|
</div>
|
|
<div style="height: 400px;width: 430px;float: left;margin:30px 0 0 40px;">
|
|
<div style="margin: 20px 0; text-align: center; font-size: 24px"><b>匠承非遗后台管理系统</b></div>
|
|
<el-form :model="user" ref="userForm">
|
|
<el-form-item prop="username">
|
|
<h2>账号</h2>
|
|
<el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="username"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<h2>密码</h2>
|
|
<el-input size="medium" style="margin: 10px 0;" prefix-icon="el-icon-lock" show-password v-model="password"></el-input>
|
|
</el-form-item>
|
|
<div style="margin: 10px 0; text-align: right">
|
|
<div style="display: block;
|
|
font-size: 15px;
|
|
width: 80%;
|
|
margin: 50px auto 0 auto;
|
|
text-align: center;
|
|
border-radius: 20px;
|
|
background-color: rgb(172, 115, 82);
|
|
line-height: 40px;
|
|
" @click="Login">登录</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref, reactive, onMounted} from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import {useRouter} from 'vue-router'
|
|
import myAxios from '@/api/myAxios';
|
|
import { userStore } from '../store/userStore';
|
|
|
|
const user = ref({})
|
|
const username = ref('')
|
|
const password = ref('')
|
|
const router = useRouter()
|
|
const store = userStore()
|
|
|
|
|
|
|
|
const Login = async ()=>{
|
|
if(username.value === '' || password.value === '') {
|
|
ElMessage.error('检查账号或密码是否成功填写')
|
|
return;
|
|
}
|
|
const res: any = await myAxios.post("/user/login",{
|
|
userAccount: username.value,
|
|
userPassword: password.value
|
|
})
|
|
console.log(res.data)
|
|
if(res.data.code === 1 && res ?.data) {
|
|
//将用户信息放入pinia
|
|
await store.getLoginUser(res.data.data)
|
|
//跳转个人中心
|
|
await router.replace('/PersonalCenter')
|
|
} else {
|
|
ElMessage({
|
|
type: 'warning',
|
|
message: res.data.message
|
|
})
|
|
return; //空返回结束函数
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wrapper{
|
|
height: 100vh;
|
|
background-image:url("../img/Login/登录底图.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
overflow: hidden;
|
|
}
|
|
</style> |