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

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,
     })

src/layout/loginPage.vue

@@ -6,68 +6,146 @@
     <div class="main-content">
       <el-row style="display: flex; justify-content: center">
         <el-col>
-          <el-form
+          <el-form :rules="rules" :model="formModel" ref="formRef" size="large" autocomplete="off" v-if="isRegister">
-            :rules="rules"
+            <el-form-item prop="username" class="custom-form-item">
-            :model="formModel"
+              <div style="display: flex; align-items: center; color: pink">
-            ref="formRef"
+                <div class="left" style="display: flex; align-items: center;width: 90px;">
-            size="large"
+                  <div style="padding-right: 10px; color: #1084c1">
-            autocomplete="off"
+                    <el-icon class="bold-icon">
-            v-if="isRegister"
+                      <User />
-          >
+                    </el-icon>
-            <el-form-item prop="username">
+                  </div>
-              <el-input
+                  <div style="padding-right: 10px; color: #2592a1">用户账号</div>
-                v-model="formModel.username"
+                </div>
-                :prefix-icon="User"
+                <div class="right">
-                placeholder="请输入账号"
+                  <el-input v-model="formModel.username" style="border-color: #20bec8;"
-              ></el-input>
+                    placeholder="请输入用户账号"></el-input>
-            </el-form-item>
+                </div>
-            <el-form-item prop="studentNumb">
+              </div>
-              <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-item>
             <el-form-item prop="password">
-              <el-input
+              <div style="display: flex; align-items: center;">
-                v-model="formModel.password"
+                <div class="left" style="display: flex; align-items: center ;width: 90px;">
-                :prefix-icon="Lock"
+                  <div style="padding-right: 10px; color: #1084c1">
-                type="password"
+                    <el-icon class="bold-icon">
-                placeholder="请输入密码"
+                      <Lock />
-              ></el-input>
+                    </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
+              <div style="display: flex; align-items: center;">
-                v-model="formModel.repassword"
+                <div class="left" style="display: flex; align-items: center ;width: 90px;">
-                :prefix-icon="Lock"
+                  <div style="padding-right: 10px; color: #1084c1">
-                type="password"
+                    <el-icon class="bold-icon">
-                placeholder="请输入再次密码"
+                      <Lock />
-              ></el-input>
+                    </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
+              <div style="display: flex; align-items: center;">
-                style="color: #3ad7e2; background-color: #0e2e5e; width: 150px"
+                <div class="left" style="display: flex; align-items: center ;width: 90px;">
-                class="button"
+                  <div style="padding-right: 10px; color: #1084c1">
-                type="primary"
+                    <el-icon class="bold-icon">
-                auto-insert-space
+                      <Iphone />
-                @click="register"
+                    </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
+              <el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 165px" class="button" type="primary"
-                style="color: #3ad7e2; background-color: #0e2e5e; width: 150px"
+                auto-insert-space @click="isRegister = false">
-                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
+          <el-form :model="formModel" :rules="rules" ref="formRef" size="large" autocomplete="off" v-else
-            :model="formModel"
+            class="custom-form">
-            :rules="rules"
+            <el-form-item prop="username" class="custom-form-item">
-            ref="formRef"
-            size="large"
-            autocomplete="off"
-            v-else
-            class="custom-form"
-          >
-            <el-form-item prop="username">
               <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
+                  <el-input v-model="formModel.username" style="border-color: #20bec8;" placeholder="请输入用户名"></el-input>
-                    v-model="formModel.username"
-                    style="border-color: #20bec8; background-color: pink"
-                    placeholder="请输入用户名"
-                  ></el-input>
                 </div>
               </div>
             </el-form-item>
-            <el-form-item label="学号" prop="studentNumb">
+            <el-form-item prop="studentNumb">
-              <el-input
+              <div style="display: flex; align-items: center;">
-                v-model="formModel.studentNumb"
+                <div class="left" style="display: flex; align-items: center ;width: 90px;">
-                :prefix-icon="Avatar"
+                  <div style="padding-right: 10px; color: #1084c1">
-                placeholder="请输入学号"
+                    <el-icon class="bold-icon">
-              ></el-input>
+                      <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-form-item prop="password">
-              <el-input
+              <div style="display: flex; align-items: center;">
-                name="password"
+                <div class="left" style="display: flex; align-items: center ;width: 90px;">
-                :prefix-icon="Lock"
+                  <div style="padding-right: 10px; color: #1084c1">
-                type="password"
+                    <el-icon class="bold-icon">
-                placeholder="请输入密码"
+                      <Lock />
-                v-model="formModel.password"
+                    </el-icon>
-              ></el-input>
+                  </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 class="captcha">
+              <div style="display: flex; align-items: center;">
-                <el-input
+                <div class="left" style="display: flex; align-items: center ;width: 90px;">
-                  v-model="formModel.captcha"
+                  <div style="padding-right: 10px; color: #1084c1">
-                  style="height: 0.2344rem"
+                    <el-icon class="bold-icon">
-                  maxlength="4"
+                      <Grid />
-                />
+                    </el-icon>
-                <div class="code" @click="getcodeinfo">
+                  </div>
-                  <img :src="codeUrl" alt="" srcset="" />
+                  <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
+              <el-button class="hexagon-button" type="primary" auto-insert-space @click="login">登录</el-button>
-                class="hexagon-button"
+              <el-button class="hexagon-button" type="primary" auto-insert-space
-                type="primary"
+                @click="isRegister = true">去注册</el-button>
-                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;
 }
-
+// .el-form-item__label {
-// .custom-form .el-form-item__label {
+//   color: #0e2e5e;
-//     color: #409eff;
-//     /* 标签颜色 */
-//     font-size: 14px;
-//     font-weight: bold;
 // }
-// .bold-icon svg {
+// .el-form-item__error {
-//     stroke-width: 9;
+//   left: 80px;
-//     /* 加粗效果 */
 // }
-.el-form-item__label {
+.el-input {
-  color: #0e2e5e;
+  width: 300px;
+}
+:deep(.el-form-item__error){
+  left: 110px;
 }
 </style>