新增注册页面

This commit is contained in:
zhangxuelin 2024-09-09 01:14:26 +08:00
parent 37810586b7
commit 25d026bd13
4 changed files with 267 additions and 3 deletions

View File

@ -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

View File

@ -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>

View File

@ -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;