新增注册页面

src/renderer/src/views/classBegins/index.vue

@@ -104,6 +104,9 @@ const switchPageMode = () => {
   }
 }
 onMounted(async () => {
+  window.addEventListener('focus', () => {
+    console.log(11111111111111)
+  })
   const isDev = process.env.NODE_ENV == 'development'
   // toolState.showBoardAll = false // 隐藏画板
   toolState.isPdfWin=true //设置打开pdf窗口

src/renderer/src/views/login/components/Register.vue

@@ -0,0 +1,247 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="注册账号"
+    :fullscreen="true"
+    center
+    :before-close="handleClose"
+  >
+  <el-steps  style="max-width: 100%;-webkit-app-region: no-drag;" :active="activeIndex" finish-status="success" simple>
+    <el-step title="1.基本信息" />
+    <el-step title="2.在校信息" />
+  </el-steps>
+    <el-form
+      style="width: 80%;margin: 0 auto;margin-top: 30px;-webkit-app-region: no-drag;"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="auto"
+      status-icon
+      ref="ruleFormRef"
+    >
+      <el-form-item label="姓名" prop="name" v-if="activeIndex==1">
+        <el-input  v-model="ruleForm.name" />
+      </el-form-item>
+      <el-form-item label="身份证号"  prop="idNumber" v-if="activeIndex==1">
+        <el-input v-model="ruleForm.idNumber" />
+      </el-form-item>
+      <el-form-item label="手机号" prop="phoneNumber" v-if="activeIndex==1">
+        <el-input v-model="ruleForm.phoneNumber" />
+      </el-form-item>
+      <el-form-item label="验证码" prop="Code" v-if="activeIndex==1">
+        <el-input style="width:60%" v-model="ruleForm.Code" />
+        <el-button type="primary" style="margin-left:10px">发送验证码</el-button>
+      </el-form-item>
+      <el-form-item label="设置密码" prop="password" v-if="activeIndex==1">
+        <el-input v-model="ruleForm.password" />
+      </el-form-item>
+      <el-form-item label="确认密码" prop="confirmPassword" v-if="activeIndex==1">
+        <el-input v-model="ruleForm.confirmPassword" />
+      </el-form-item>
+      <el-form-item label="所属地区" prop="address" v-if="activeIndex==2">
+        <el-cascader
+            style="width:100%"
+            v-model="ruleForm.address"
+            :options="options"
+          />
+      </el-form-item>
+      <el-form-item label="学校" prop="school" v-if="activeIndex==2">
+        <el-select
+            v-model="ruleForm.school"
+            placeholder="请选择学校"
+            style="width: 100%"
+          >
+          <el-option :value="1">小学</el-option>
+          <el-option  :value="2">中学</el-option>
+          </el-select>
+      </el-form-item>
+      <el-form-item label="班级" prop="class" v-if="activeIndex==2">
+        <el-select
+            v-model="ruleForm.class"
+            multiple
+            placeholder="请选择班级"
+            style="width: 100%"
+          >
+          <el-option :value="1">1班</el-option>
+          <el-option  :value="2">2班</el-option>
+          </el-select>
+      </el-form-item>
+      <el-form-item label="学科" prop="discipline" v-if="activeIndex==2">
+        <el-checkbox-group v-model="ruleForm.discipline">
+        <el-checkbox value="Online activities" name="type">
+           语文
+        </el-checkbox>
+        <el-checkbox value="Promotion activities" name="type">
+          数学
+        </el-checkbox>
+      </el-checkbox-group>
+      </el-form-item>
+      <el-form-item v-if="activeIndex==1">
+        <div  class="centerDiv">
+          <el-button  type="primary" @click="nextStep(ruleFormRef)">下一步</el-button>
+        </div>
+      </el-form-item>
+      <el-form-item v-if="activeIndex==2">
+        <div  class="centerDiv">
+          <el-button  type="primary" @click="submitForm(ruleFormRef)">立即注册</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+    <!-- <template #footer>
+      <div class="dialog-footer" >
+        <el-button @click="dialogVisible = false">下一步</el-button>
+      </div>
+    </template> -->
+  </el-dialog>
+</template>
+
+<script  setup>
+import { ref, defineExpose, reactive } from 'vue'
+const ruleFormRef = ref(null)
+const activeIndex=ref(1)
+const ruleForm = reactive({
+  name: '',
+  idNumber:null,
+  phoneNumber: null,
+  Code:null,
+  password:null,
+  confirmPassword:null,
+})
+const rules = reactive({
+  name: [
+    { required: true, message: '请输入姓名', trigger: 'blur' },
+  ],
+  Code: [
+    { required: true, message: '请输入验证码', trigger: 'blur' },
+  ],
+  phoneNumber: [
+    { required: true, message: '手机号码是必填项', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' },
+  ],
+  idNumber: [
+    { required: true, message: '身份证号码是必填项', trigger: 'blur' },
+    { pattern: /^\d{17}[\dX]$/, message: '身份证号码格式不正确', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '密码长度必须大于6位数', trigger: 'blur' },
+   ],
+  confirmPassword: [
+    { required: true, message: '请再次输入密码', trigger: 'blur' },
+    { min: 6,  message: '密码长度必须大于6位数', trigger: 'blur' },
+     { validator: (rule, value, callback) => {
+         if (value !== ruleForm.password) {
+           callback(new Error('两次输入的密码不一致!'));
+         } else {
+           callback();
+         }
+       }, trigger: 'change' }
+  ],
+  address:[ {
+      required: true,
+      message: '请选择地址',
+      trigger: 'change',
+  },],
+  school:[{
+      required: true,
+      message: '请选择地址',
+      trigger: 'change',
+  },],
+  class:[ {
+      required: true,
+      message: '请选择班级',
+      trigger: 'change',
+  },],
+  discipline:[ {
+      type: 'array',
+      required: true,
+      message: '请选择学科',
+      trigger: 'change',
+    },] 
+})
+const dialogVisible = ref(false)
+const options = [
+  {
+    value: 'guide',
+    label: 'Guide',
+    children: [
+      {
+        value: 'disciplines',
+        label: 'Disciplines',
+        children: [
+          {
+            value: 'consistency',
+            label: 'Consistency',
+          },
+          {
+            value: 'feedback',
+            label: 'Feedback',
+          },
+        ],
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'side nav',
+            label: 'Side Navigation',
+          },
+          {
+            value: 'top nav',
+            label: 'Top Navigation',
+          },
+        ],
+      },
+    ],
+  },
+  
+  
+]
+// 打开弹窗
+const OpenModel = () =>{
+  dialogVisible.value=true
+}
+// 关闭弹窗
+const handleClose = () => {
+  if (ruleFormRef.value) ruleFormRef.value.resetFields()
+  activeIndex.value=1
+  dialogVisible.value=false
+}
+
+const nextStep = (formEl) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      activeIndex.value=2
+      console.log('submit!')
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
+
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(ruleForm)
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+defineExpose({
+  OpenModel,
+})
+</script>
+<style scoped lang="scss">
+.centerDiv{
+  -webkit-app-region: no-drag;
+  padding-bottom: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/renderer/src/views/login/index.vue

@@ -21,12 +21,20 @@
             placeholder="请输入密码"
           />
         </el-form-item>
-        <el-checkbox v-model="loginForm.rememberMe" class="flex mb-5">记住密码</el-checkbox>
+        <div class="flex mb-5">
+          <el-checkbox v-model="loginForm.rememberMe" >记住密码</el-checkbox>
+           <el-checkbox >阅读并同意《xxx》</el-checkbox>
+        </div>
+        
         <el-form-item>
           <el-button :loading="btnLoading" class="btn" type="primary" @click="submitForm(formRef)"
             >登录</el-button
           >
         </el-form-item>
+        <div class="flex mb-4" style="display: flex;justify-content: center;color: #ccc;cursor: pointer;">
+           <a style="margin-right: 10px;" @click="RegisterModel">注册账号</a> |
+           <a style="margin-left: 10px;">忘记密码</a>
+        </div>
       </el-form>
     </div>
   </div>
@@ -48,6 +56,8 @@
   </el-dialog>
   <!--选择学科-->
   <SelectSubject v-model="isSubject" :login-data="loginForm" />
+  <!--注册弹框-->
+  <Register ref="RegModel"></Register>
 </template>
 <script setup>
 import { onMounted, reactive, ref } from 'vue'
@@ -57,6 +67,7 @@ import useUserStore from '@/store/modules/user'
 import leftBg2 from '@/assets/images/login/left-bg2.png'
 import WindowTools from '@/components/window-tools/index.vue'
 import SelectSubject from '@/components/select-subject/index.vue'
+import Register from './components/Register.vue'
 
 const { session } = require('@electron/remote')
 const downloadProp = ref(0)
@@ -66,6 +77,7 @@ const formRef = ref()
 const userStore = useUserStore()
 const btnLoading = ref(false)
 const isSubject = ref(false)
+const RegModel = ref(false)
 //表单
 const loginForm = reactive({
   username: '',
@@ -84,7 +96,10 @@ ipcRenderer.on('update-app-progress', (e, prop) => {
   downloadProp.value = prop
   showDownLoading.value = prop !== 100
 })
-
+// 打开弹窗
+const RegisterModel = () =>{
+  RegModel.value.OpenModel()
+}
 //登录
 const submitForm = async (formEl) => {
   if (!formEl) return
@@ -162,7 +177,6 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   -webkit-app-region: drag;
-
   .box-item {
     width: 444px;
     height: 520px;