|
|
|
|
@ -6,39 +6,45 @@ |
|
|
|
|
<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" |
|
|
|
|
<el-form style="margin-top: 40px;" :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 prop="workno"> |
|
|
|
|
<el-input v-model="formModel.workno" :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 prop="realname"> |
|
|
|
|
<el-input v-model="formModel.realname" :prefix-icon="Stamp" placeholder="请输入姓名"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="password"> |
|
|
|
|
<el-input v-model="formModel.password" :prefix-icon="Lock" type="password" |
|
|
|
|
placeholder="请输入密码"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="repassword"> |
|
|
|
|
<el-input v-model="formModel.repassword" :prefix-icon="Lock" type="password" |
|
|
|
|
<el-form-item prop="confirmPassword"> |
|
|
|
|
<el-input v-model="formModel.confirmPassword" :prefix-icon="Lock" type="password" |
|
|
|
|
placeholder="请输入再次密码"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<div class="captcha"> |
|
|
|
|
<el-input v-model="formModel.smscode" style="height: 0.21rem" maxlength="4" |
|
|
|
|
:prefix-icon="Lock" /> |
|
|
|
|
<div class="code" @click="getcodeinfo"> |
|
|
|
|
<img :src="codeUrl" alt="" srcset="" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item style="margin-top: -20px;"> |
|
|
|
|
<el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 150px;" class="button" |
|
|
|
|
type="primary" auto-insert-space @click="register"> |
|
|
|
|
type="primary" auto-insert-space @click="registered"> |
|
|
|
|
注册 |
|
|
|
|
</el-button> |
|
|
|
|
<el-button style="color: #3ad7e2;background-color: #0e2e5e;width: 150px;" class="button" |
|
|
|
|
type="primary" auto-insert-space @click="isRegister = false"> |
|
|
|
|
type="primary" auto-insert-space @click="$emits('backLogin')"> |
|
|
|
|
返回到登录页 |
|
|
|
|
</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
<!-- <el-form-item class=" flex"> |
|
|
|
|
<el-link type="info" :underline="false" @click="isRegister = false"> |
|
|
|
|
← 返回 |
|
|
|
|
@ -62,12 +68,12 @@ |
|
|
|
|
</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 label="学号" prop="workno"> |
|
|
|
|
<el-input v-model="formModel.workno" :prefix-icon="Avatar" placeholder="请输入学号"></el-input> |
|
|
|
|
</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-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" |
|
|
|
|
v-model="formModel.password"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button class="hexagon-button" type="primary" auto-insert-space>登录</el-button> |
|
|
|
|
@ -92,16 +98,18 @@ import settingStore from "@/store/modules/setting"; |
|
|
|
|
import { User, Lock, Avatar, Stamp } from '@element-plus/icons-vue' |
|
|
|
|
const setting = settingStore(); |
|
|
|
|
console.log(setting.title); |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
|
|
|
|
|
import { getCode, sturegister } from '@/api/user' |
|
|
|
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
|
|
|
|
const $emits = defineEmits(['backLogin']) |
|
|
|
|
const isRegister = ref(false) |
|
|
|
|
const formRef=ref() |
|
|
|
|
const formModel = ref({ |
|
|
|
|
username: '', |
|
|
|
|
studentNumb: '', |
|
|
|
|
name: '', |
|
|
|
|
workno: '', |
|
|
|
|
realname: '', |
|
|
|
|
password: '', |
|
|
|
|
repassword: '' |
|
|
|
|
confirmPassword: '', |
|
|
|
|
smscode: '', |
|
|
|
|
}) |
|
|
|
|
// 添加校验规则 |
|
|
|
|
const rules = { |
|
|
|
|
@ -109,11 +117,11 @@ const rules = { |
|
|
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' }, |
|
|
|
|
{ min: 5, max: 30, message: '用户名长度最小五位最大三十位', trigger: ['change', 'blur'] } |
|
|
|
|
], |
|
|
|
|
studentNumb:[ |
|
|
|
|
workno:[ |
|
|
|
|
{ required: true, message: '请输入学号', trigger: 'blur' }, |
|
|
|
|
{ min: 5, max: 11, message: '学号长度最小五位最大三十位', trigger: ['change', 'blur'] } |
|
|
|
|
], |
|
|
|
|
name: [ |
|
|
|
|
realname: [ |
|
|
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
password: [ |
|
|
|
|
@ -124,7 +132,7 @@ const rules = { |
|
|
|
|
trigger: ['change', 'blur'] |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
repassword: [ |
|
|
|
|
confirmPassword: [ |
|
|
|
|
{ required: true, message: '请再次输入密码', trigger: 'blur' }, |
|
|
|
|
{ |
|
|
|
|
max: 15, |
|
|
|
|
@ -146,10 +154,31 @@ const rules = { |
|
|
|
|
], |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
const register=async()=>{ |
|
|
|
|
|
|
|
|
|
const registered=async()=>{ |
|
|
|
|
await formRef.value.validate() |
|
|
|
|
console.log('开始注册i请求'); |
|
|
|
|
console.log('开始注册请求'); |
|
|
|
|
let data = { |
|
|
|
|
// checkKey: 1629428467008, |
|
|
|
|
password: formModel.value.password, |
|
|
|
|
realname: formModel.value.realname, |
|
|
|
|
smscode: formModel.value.smscode, |
|
|
|
|
username: formModel.value.username, |
|
|
|
|
workno: formModel.value.workno, |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
const res: any = await sturegister(data) |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
// ElMessage.success(`注册成功`) |
|
|
|
|
console.log(res.message); |
|
|
|
|
$emits('backLogin') |
|
|
|
|
} else { |
|
|
|
|
// ElMessage.warning(res.message) |
|
|
|
|
console.log(res.message); |
|
|
|
|
|
|
|
|
|
getcodeinfo() |
|
|
|
|
} |
|
|
|
|
console.log(res) |
|
|
|
|
} |
|
|
|
|
// import { useRouter } from 'vue-router' |
|
|
|
|
// const router = useRouter() |
|
|
|
|
@ -157,6 +186,24 @@ const register=async()=>{ |
|
|
|
|
// router.push('/') |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// 获取验证码 |
|
|
|
|
const codeUrl = ref('') |
|
|
|
|
const getcodeinfo = async () => { |
|
|
|
|
const res: any = await getCode(1629428467008) |
|
|
|
|
codeUrl.value = res.result |
|
|
|
|
console.log(codeUrl.value) |
|
|
|
|
} |
|
|
|
|
getcodeinfo() |
|
|
|
|
watch(isRegister,()=>{ |
|
|
|
|
formModel.value={ |
|
|
|
|
password:'' , |
|
|
|
|
realname: '', |
|
|
|
|
smscode: '', |
|
|
|
|
username: '', |
|
|
|
|
workno: '', |
|
|
|
|
confirmPassword: '', |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
@ -198,7 +245,7 @@ const register=async()=>{ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.hexagon-button { |
|
|
|
|
margin-top: 30px; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
/* 应用clip-path属性来创建六边形形状 */ |
|
|
|
|
width: 180px; |
|
|
|
|
height: 50px; |
|
|
|
|
|
