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.
565 lines
19 KiB
565 lines
19 KiB
<template> |
|
<div class="login_container"> |
|
<div class="top"> |
|
<div class="title">{{ setting.title }}</div> |
|
</div> |
|
<div class="main-content"> |
|
<div class="middle-content"> |
|
<div class="errorBtn" @click="clickErrorBtn"></div> |
|
<el-row style="display: flex; justify-content: center"> |
|
<el-col> |
|
<el-form :rules="rules" :model="formModel" ref="formRef" size="large" autocomplete="off" v-if="isRegister"> |
|
<el-form-item prop="username"> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<User /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">用户账号</div> |
|
</div> |
|
<div class="right"> |
|
<el-input v-model="formModel.username" placeholder="请输入用户账号"></el-input> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item prop="password"> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center ;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Lock /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">用户密码</div> |
|
</div> |
|
<div class="right"> |
|
<el-input type="password" v-model="formModel.password" |
|
placeholder="请输入密码" show-password></el-input> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item prop="repassword"> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center ;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Lock /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">确认密码</div> |
|
</div> |
|
<div class="right"> |
|
<el-input type="password" v-model="formModel.repassword" style="border-color: #20bec8" |
|
placeholder="请再次输入密码" show-password></el-input> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item prop="name"> |
|
<div style="display: flex; align-items: center; color: pink"> |
|
<div class="left" style="display: flex; align-items: center;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Stamp /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">姓名</div> |
|
</div> |
|
<div class="right"> |
|
<el-input v-model="formModel.name" style="border-color: #20bec8;" placeholder="请输入姓名"></el-input> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
|
|
<el-form-item prop="clssid"> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center ;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Avatar /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">班级</div> |
|
</div> |
|
<div class="right"> |
|
<el-cascader placeholder="请选择所属班级" :props="props" style="width: 142%; height: 0.2344rem" |
|
v-model="formModel.clssid" @change="handleChange" /> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<!-- <el-cascader :props="props" style="width: 100%; height: 0.2344rem" v-model="formModel.clssid" /> --> |
|
<el-form-item prop="studentNumb"> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center ;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Avatar /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">学号</div> |
|
</div> |
|
<div class="right"> |
|
<el-input v-model="formModel.studentNumb" style="border-color: #20bec8" |
|
placeholder="请输入学号"></el-input> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item prop="mobile"> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center ;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Iphone /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">手机号</div> |
|
</div> |
|
<div class="right"> |
|
<el-input v-model="formModel.mobile" style="border-color: #20bec8" placeholder="请输入手机号"></el-input> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center ;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Grid /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">验证码</div> |
|
</div> |
|
<div class="right"> |
|
<div class="captcha"> |
|
<el-input v-model="formModel.captcha" style="height: 0.2344rem" maxlength="4" /> |
|
<div class="code" @click="getcodeinfo"> |
|
<img :src="codeUrl" alt="" srcset="" /> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 152px;margin-top: 10px;" |
|
class="button" type="primary" auto-insert-space @click="register"> |
|
注册 |
|
</el-button> |
|
<el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 155px;margin-top: 10px;" |
|
class="button" type="primary" auto-insert-space @click="toLogin"> |
|
返回到登录页 |
|
</el-button> |
|
</el-form-item> |
|
<el-form-item> </el-form-item> |
|
<!-- <el-form-item class="flex"> |
|
<el-link type="info" :underline="false" @click="isRegister = false"> |
|
← 返回 |
|
</el-link> |
|
</el-form-item> --> |
|
</el-form> |
|
<el-form style="margin-bottom: 90px;" :model="formModel" :rules="rules" ref="formRef" size="large" |
|
autocomplete="off" v-else class="custom-form"> |
|
<el-form-item prop="username"> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<User /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">用户名</div> |
|
</div> |
|
<div class="right"> |
|
<el-input v-model="formModel.username" style="height: 0.2344rem ;width: 250px;" |
|
placeholder="请输入用户名"></el-input> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item prop="studentNumb"> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center ;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Avatar /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">学号</div> |
|
</div> |
|
<div class="right"> |
|
<el-input v-model="formModel.studentNumb" style="height: 0.2344rem;width: 250px;" |
|
placeholder="请输入学号"></el-input> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item prop="password"> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center ;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Lock /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">密码</div> |
|
</div> |
|
<div class="right"> |
|
<el-input type="password" v-model="formModel.password" style="height: 0.2344rem;width: 250px;" |
|
placeholder="请输入密码"></el-input> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<el-form-item> |
|
<div style="display: flex; align-items: center;"> |
|
<div class="left" style="display: flex; align-items: center ;width: 90px;"> |
|
<div style="padding-right: 10px; color: #1084c1"> |
|
<el-icon class="bold-icon"> |
|
<Grid /> |
|
</el-icon> |
|
</div> |
|
<div style="padding-right: 10px; color: #2592a1">验证码</div> |
|
</div> |
|
<div class="right"> |
|
<div class="captcha"> |
|
<el-input v-model="formModel.captcha" style="height: 0.2344rem;width: 250px;" maxlength="4" /> |
|
<div class="code" @click="getcodeinfo"> |
|
<img :src="codeUrl" alt="" srcset="" /> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
<!-- <el-form-item label="验证码"> |
|
<div class="captcha"> |
|
<el-input v-model="formModel.captcha" style="height: 0.2344rem" maxlength="4" /> |
|
<div class="code" @click="getcodeinfo"> |
|
<img :src="codeUrl" alt="" srcset="" /> |
|
</div> |
|
</div> |
|
</el-form-item> --> |
|
<el-form-item> |
|
<el-button style="margin:30px 50px 0px 20px;" class="hexagon-button" type="primary" auto-insert-space |
|
@click="login">登录</el-button> |
|
<el-button style="margin:30px 0px 0px 0;" class="hexagon-button" type="primary" auto-insert-space |
|
@click="toRegister">去注册</el-button> |
|
</el-form-item> |
|
</el-form> |
|
</el-col> |
|
<el-col :span="12" :xs="0"></el-col> |
|
</el-row> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
// import { ref } from "vue" |
|
// import { onMounted, reactive, ref, toRefs, watch } from "vue"; |
|
import { ElMessage} from 'element-plus' |
|
import settingStore from "@/store/modules/setting"; |
|
import { User, Lock, Avatar, Stamp, Grid, Iphone } from "@element-plus/icons-vue"; |
|
import { ref,onMounted} from "vue"; |
|
import userStore from "@/store/modules/user"; |
|
import { getCode, sturegister, getFaculties } from '@/api/user' |
|
import { useRouter } from "vue-router"; |
|
const router = useRouter() |
|
const setting = settingStore(); |
|
const user = userStore(); |
|
console.log(setting.title); |
|
|
|
const isRegister = ref(false); |
|
const formRef = ref(); |
|
const formModel = ref({ |
|
username: "", |
|
password: "", |
|
repassword: "", |
|
name: "", |
|
clssid: '', |
|
studentNumb: "", |
|
mobile: '', |
|
captcha: "", |
|
}); |
|
|
|
const FacultiesList = ref([]) |
|
const getFacultiesList = async (data: any) => { |
|
const res: any = await getFaculties(data) |
|
console.log(res, 'res11') |
|
FacultiesList.value = res.result |
|
} |
|
const deepValues = ref([]) |
|
// 配置部门级联选择器 |
|
const props = { |
|
lazy: true, |
|
checkStrictly: true, |
|
emitPath: false, |
|
async lazyLoad(node: any, resolve: any) { |
|
console.log(node); |
|
deepValues.value = node.pathValues |
|
await getFacultiesList({ |
|
primaryType: node.level + 1, |
|
pid: node.value, |
|
}) |
|
const nodes = FacultiesList.value.map((item: any) => ({ |
|
value: item.id, |
|
label: item.name, |
|
})) |
|
resolve(nodes) |
|
}, |
|
} |
|
|
|
const handleChange = (e: any) => { |
|
console.log(e); |
|
formModel.value.clssid = e |
|
} |
|
|
|
|
|
// 添加校验规则 |
|
const rules = { |
|
username: [ |
|
{ required: true, message: "请输入用户名", trigger: "blur" }, |
|
{ |
|
min: 5, |
|
max: 30, |
|
message: "用户名长度最小五位最大三十位", |
|
trigger: ["change", "blur"], |
|
}, |
|
], |
|
studentNumb: [ |
|
{ required: true, message: "请输入学号", trigger: "blur" }, |
|
{ |
|
min: 5, |
|
max: 11, |
|
message: "学号长度最小五位最大十一位", |
|
trigger: ["change", "blur"], |
|
}, |
|
], |
|
name: [{ required: true, message: "请输入姓名", trigger: "blur" }], |
|
password: [ |
|
{ required: true, message: "请输入密码", trigger: "blur" }, |
|
{ |
|
pattern: /^\S{6,15}$/, |
|
message: "密码长度最小六位最大十五位", |
|
trigger: ["change", "blur"], |
|
}, |
|
], |
|
repassword: [ |
|
{ required: true, message: "请再次输入密码", trigger: "blur" }, |
|
{ |
|
max: 15, |
|
min: 6, |
|
pattern: /^\S{6,15}$/, |
|
message: "密码长度最小六位最大十五位", |
|
trigger: ["change", "blur"], |
|
}, |
|
{ |
|
validator: (rule, value, callback) => { |
|
if (value !== formModel.value.password) { |
|
callback(new Error("两次输入密码不一致!")); |
|
} else { |
|
callback(); |
|
} |
|
}, |
|
trigger: "blur", |
|
}, |
|
], |
|
clssid: [ |
|
{ required: true, message: "请选择所属班级", trigger: "blur" }, |
|
], |
|
mobile: [ |
|
{ required: true, message: "请输入手机号", trigger: "blur" }, |
|
{ |
|
pattern: /^1[3-9]\d{9}$/, |
|
message: "手机号格式不正确", |
|
trigger: ["change", "blur"], |
|
}, |
|
] |
|
}; |
|
const register = async () => { |
|
await formRef.value.validate(); |
|
console.log("开始注册请求"); |
|
let data = { |
|
clssid: formModel.value.clssid, |
|
mobile: formModel.value.mobile, |
|
captcha: formModel.value.captcha, |
|
checkKey: 1629428467008, |
|
password: formModel.value.password, |
|
username: formModel.value.username, |
|
realname: formModel.value.name, |
|
workno: formModel.value.studentNumb, |
|
depid: deepValues.value.slice(0, 2).join(',') |
|
}; |
|
try { |
|
const res: any = await sturegister(data) |
|
formModel.value = { |
|
username: "", |
|
password: "", |
|
repassword: "", |
|
name: "", |
|
clssid: '', |
|
studentNumb: "", |
|
mobile: '', |
|
captcha: "", |
|
} |
|
ElMessage.success(`注册成功`) |
|
isRegister.value = false |
|
|
|
|
|
} catch (error) { |
|
console.log(error); |
|
|
|
getcodeinfo() |
|
|
|
} |
|
|
|
// getcodeinfo() |
|
}; |
|
const codeUrl = ref(""); |
|
const getcodeinfo = async () => { |
|
const res: any = await getCode(1629428467008); |
|
codeUrl.value = res.result; |
|
console.log(codeUrl.value); |
|
}; |
|
getcodeinfo(); |
|
// 登录 |
|
const login = async () => { |
|
await formRef.value.validate(); |
|
let data = { |
|
captcha: formModel.value.captcha, |
|
checkKey: 1629428467008, |
|
password: formModel.value.password, |
|
username: formModel.value.username, |
|
}; |
|
const res = await user.logIn(data); |
|
if (res) { |
|
router.push('/') |
|
} |
|
|
|
}; |
|
const toRegister = () => { |
|
isRegister.value = true |
|
getcodeinfo(); |
|
} |
|
const toLogin = () => { |
|
isRegister.value = false |
|
getcodeinfo(); |
|
} |
|
|
|
const clickErrorBtn=()=>{ |
|
console.log('aaa'); |
|
} |
|
onMounted(()=>{ |
|
getcodeinfo(); |
|
}) |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.login_container { |
|
position: relative; |
|
width: 100%; |
|
// height: 1080px; |
|
min-height: 100vh; |
|
background-color: #091d22; |
|
background: url("../assets//images/bg1.png") no-repeat; |
|
background-size: cover; |
|
|
|
.top { |
|
width: 100%; |
|
// height: 75px; |
|
text-align: center; |
|
font-size: 42px; |
|
line-height: 75px; |
|
font-style: italic; |
|
background: url("../assets/images/topbgc.png") no-repeat; |
|
// background-position: center bottom -10px; |
|
background-size: cover; |
|
|
|
.title { |
|
color: #fff; |
|
} |
|
} |
|
|
|
.main-content { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
height: 1000px; |
|
min-height: 100vh; |
|
// margin: 0; |
|
.middle-content{ |
|
position: relative; |
|
width: 60%; |
|
height:80%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
// background-color: pink; |
|
background: url("../assets/images/login.png") no-repeat; |
|
background-position: 59% -7px; |
|
background-size: 75% auto; |
|
} |
|
.errorBtn{ |
|
position: absolute; |
|
top: 30px; |
|
right: 122px; |
|
width: 50px; |
|
height: 50px; |
|
background-color: transparent; |
|
clip-path: polygon(100% 0, 0 0, 100% 100%); |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.captcha { |
|
width: 100%; |
|
height: 100%; |
|
position: relative; |
|
|
|
.code { |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
width: 105px; |
|
height: 100%; |
|
// background-color: pink; |
|
display: flex; |
|
align-items: center; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.hexagon-button { |
|
margin-top: 30px; |
|
/* 应用clip-path属性来创建六边形形状 */ |
|
width: 180px; |
|
height: 50px; |
|
/* 使用clip-path定义按钮形状 */ |
|
// clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%); |
|
/* 模拟边框效果 */ |
|
box-shadow: 0 0 0 2px cyan; |
|
background-color: #14213d; |
|
color: #3ad7e2; |
|
background-color: #0e2e5e; |
|
font-size: 18px; |
|
} |
|
|
|
// .el-form-item__label { |
|
// color: #0e2e5e; |
|
// } |
|
// .el-form-item__error { |
|
// left: 80px; |
|
// } |
|
.el-input { |
|
width: 300px; |
|
height: 36px; |
|
|
|
} |
|
|
|
:deep(.el-form-item__error) { |
|
left: 110px; |
|
} |
|
</style>
|
|
|