diff --git a/src/api/user.ts b/src/api/user.ts
index 086d417..1d3daf1 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -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,
})
diff --git a/src/layout/loginPage.vue b/src/layout/loginPage.vue
index 15792da..aac478b 100644
--- a/src/layout/loginPage.vue
+++ b/src/layout/loginPage.vue
@@ -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>
+ <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>
- <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">
+ <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="验证码">
- <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="" />
+ <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 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>