新增注册页面
This commit is contained in:
parent
37810586b7
commit
25d026bd13
|
|
@ -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窗口
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue