dlsx
/
virtualSimulation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

注册页面级联选择器获取班级信息

Browse Source
main
xy 3 weeks ago
parent 1d5d79e316
commit aa0706c170
2 changed files with 272 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      src/api/user.ts
  2. 380
      src/layout/loginPage.vue

11
src/api/user.ts
Unescape View File

@ -6,10 +6,19 @@ export const getCode = (time: any) => {
url: '/sys/randomImage/' + time,
})
}
// 获取院系列表
export const getFaculties = (params: any) => {
return request({
url: '/sys/sysDepart/stu',
params,
})
}
// 注册
export const sturegister = (data: any) => {
return request({
url: '/sys/user/sturegister',
url: '/sys/user/register',
method: 'POST',
data,
})

380
src/layout/loginPage.vue
Unescape View File

@ -6,68 +6,146 @@
<div class="main-content">
<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">
<el-input
v-model="formModel.username"
:prefix-icon="User"
placeholder="请输入账号"
></el-input>
</el-form-item>
<el-form-item prop="studentNumb">
<el-input
v-model="formModel.studentNumb"
:prefix-icon="Avatar"
placeholder="请输入学号"
></el-input>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="formModel.name"
:prefix-icon="Stamp"
placeholder="请输入姓名"
></el-input>
<el-form :rules="rules" :model="formModel" ref="formRef" size="large" autocomplete="off" v-if="isRegister">
<el-form-item prop="username" class="custom-form-item">
<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">
<User />
</el-icon>
</div>
<div style="padding-right: 10px; color: #2592a1">用户账号</div>
</div>
<div class="right">
<el-input v-model="formModel.username" style="border-color: #20bec8;"
placeholder="请输入用户账号"></el-input>
</div>
</div>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="formModel.password"
:prefix-icon="Lock"
type="password"
placeholder="请输入密码"
></el-input>
<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="border-color: #20bec8"
placeholder="请输入密码"></el-input>
</div>
</div>
</el-form-item>
<el-form-item prop="repassword">
<el-input
v-model="formModel.repassword"
:prefix-icon="Lock"
type="password"
placeholder="请输入再次密码"
></el-input>
<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="请再次输入密码"></el-input>
</div>
</div>
</el-form-item>
<el-form-item prop="name" class="custom-form-item">
<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>
<el-button
style="color: #3ad7e2; background-color: #0e2e5e; width: 150px"
class="button"
type="primary"
auto-insert-space
@click="register"
>
<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 :props="props" style="width: 100%; height: 0.2344rem"
v-model="formModel.department" />
</div>
</div>
</el-form-item>
<!-- <el-cascader :props="props" style="width: 100%; height: 0.2344rem" v-model="formModel.department" /> -->
<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>
<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 style="margin-bottom: -30px;">
<el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 165px" class="button" type="primary"
auto-insert-space @click="register">
注册
</el-button>
<el-button
style="color: #3ad7e2; background-color: #0e2e5e; width: 150px"
class="button"
type="primary"
auto-insert-space
@click="isRegister = false"
>
<el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 165px" class="button" type="primary"
auto-insert-space @click="isRegister = false">
返回到登录页
</el-button>
</el-form-item>
@ -78,77 +156,88 @@
</el-link>
</el-form-item> -->
</el-form>
<el-form
:model="formModel"
:rules="rules"
ref="formRef"
size="large"
autocomplete="off"
v-else
class="custom-form"
>
<el-form-item prop="username">
<el-form :model="formModel" :rules="rules" ref="formRef" size="large" autocomplete="off" v-else
class="custom-form">
<el-form-item prop="username" class="custom-form-item">
<div style="display: flex; align-items: center; color: pink">
<div class="left" 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 />
<User />
</el-icon>
</div>
<div style="padding-right: 10px; color: #2592a1">用户名</div>
</div>
<div class="right">
<el-input
v-model="formModel.username"
style="border-color: #20bec8; background-color: pink"
placeholder="请输入用户名"
></el-input>
<el-input v-model="formModel.username" style="border-color: #20bec8;" placeholder="请输入用户名"></el-input>
</div>
</div>
</el-form-item>
<el-form-item label="学号" prop="studentNumb">
<el-input
v-model="formModel.studentNumb"
:prefix-icon="Avatar"
placeholder="请输入学号"
></el-input>
<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 label="密码" prop="password">
<el-input
name="password"
:prefix-icon="Lock"
type="password"
placeholder="请输入密码"
v-model="formModel.password"
></el-input>
<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="border-color: #20bec8"
placeholder="请输入密码"></el-input>
</div>
</div>
</el-form-item>
<el-form-item label="验证码">
<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"
/>
<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 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
class="hexagon-button"
type="primary"
auto-insert-space
@click="login"
>登录</el-button
>
<el-button
class="hexagon-button"
type="primary"
auto-insert-space
@click="isRegister = true"
>去注册</el-button
>
<el-button class="hexagon-button" type="primary" auto-insert-space @click="login">登录</el-button>
<el-button class="hexagon-button" type="primary" auto-insert-space
@click="isRegister = true">去注册</el-button>
</el-form-item>
</el-form>
</el-col>
@ -162,10 +251,10 @@
// import { ref } from "vue"
// import { onMounted, reactive, ref, toRefs, watch } from "vue";
import settingStore from "@/store/modules/setting";
import { User, Lock, Avatar, Stamp } from "@element-plus/icons-vue";
import { User, Lock, Avatar, Stamp,Grid,Iphone } from "@element-plus/icons-vue";
import { ref } from "vue";
import userStore from "@/store/modules/user";
import { getCode } from "@/api";
import { getCode, sturegister,getFaculties } from '@/api/user'
import { useRouter } from "vue-router";
const router = useRouter()
const setting = settingStore();
@ -176,12 +265,42 @@ const isRegister = ref(false);
const formRef = ref();
const formModel = ref({
username: "",
studentNumb: "",
name: "",
password: "",
repassword: "",
name: "",
department: '',
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 props = {
lazy: true,
checkStrictly: true,
emitPath: false,
async lazyLoad(node: any, resolve: any) {
await getFacultiesList({
primaryType: 'key',
pid: node.value,
})
const nodes = FacultiesList.value.map((item: any) => ({
value: item.id,
label: item.title,
}))
resolve(nodes)
},
}
// 添加校验规则
const rules = {
username: [
@ -234,7 +353,27 @@ const rules = {
};
const register = async () => {
await formRef.value.validate();
console.log("开始注册i请求");
console.log("开始注册请求");
let data = {
department: formModel.value.department,
studentNumb: formModel.value.studentNumb,
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,
};
const res: any = await sturegister(data)
if (res.code === 200) {
// ElMessage.success(`注册成功`)
// $emits('backLogin')
} else {
// ElMessage.warning(res.message)
getcodeinfo()
}
console.log(res)
};
const codeUrl = ref("");
const getcodeinfo = async () => {
@ -299,6 +438,7 @@ const login = async () => {
margin: 0;
background: url("../assets/images/login.png") no-repeat;
background-position: center;
background-size: 50% auto;
}
.captcha {
width: 100%;
@ -336,18 +476,16 @@ const login = async () => {
background-color: #0e2e5e;
font-size: 18px;
}
// .custom-form .el-form-item__label {
// color: #409eff;
// /* 标签颜色 */
// font-size: 14px;
// font-weight: bold;
// .el-form-item__label {
// color: #0e2e5e;
// }
// .bold-icon svg {
// stroke-width: 9;
// /* 加粗效果 */
// .el-form-item__error {
// left: 80px;
// }
.el-form-item__label {
color: #0e2e5e;
.el-input {
width: 300px;
}
:deep(.el-form-item__error){
left: 110px;
}
</style>

Write Preview
Loading…
Cancel
Save