You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
385 lines
10 KiB
385 lines
10 KiB
<template> |
|
<div class="login-form"> |
|
<div class="login-title">注册</div> |
|
<div class="form"> |
|
<el-form :model="form" ref="ruleFormRef" label-width="0" :rules="rules"> |
|
<!-- <el-form-item> |
|
<el-col :span="11"> |
|
<el-input |
|
v-model="form.username" |
|
:prefix-icon="User" |
|
placeholder="账号" |
|
style="height: 0.2344rem" |
|
/> |
|
</el-col> |
|
<el-col :span="2" class="text-center"> |
|
<span class="text-gray-500"></span> |
|
</el-col> |
|
<el-col :span="11"> |
|
<el-input |
|
v-model="form.realname" |
|
:prefix-icon="User" |
|
placeholder="姓名" |
|
style="height: 0.2344rem" |
|
/> |
|
</el-col> |
|
</el-form-item> --> |
|
<el-form-item prop="username"> |
|
<el-input |
|
v-model="form.username" |
|
:prefix-icon="User" |
|
placeholder="账号" |
|
/> |
|
</el-form-item> |
|
<el-form-item prop="realname"> |
|
<el-input |
|
v-model="form.realname" |
|
:prefix-icon="User" |
|
placeholder="姓名" |
|
/> |
|
</el-form-item> |
|
<el-form-item prop="workno"> |
|
<el-input |
|
v-model="form.workno" |
|
placeholder="工号/学号" |
|
:prefix-icon="Iphone" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item> |
|
<!-- <el-cascader |
|
v-model="form.department" |
|
placeholder="选择院系" |
|
:options="options" |
|
style="width: 100%; height: 0.2344rem" |
|
/> --> |
|
<el-cascader |
|
:props="props" |
|
style="width: 100%; height: 0.2344rem" |
|
v-model="form.department" |
|
:show-all-levels="false" |
|
@change="handleChange" |
|
ref="cascader" |
|
/> |
|
</el-form-item> |
|
<el-form-item prop="mobile"> |
|
<el-input |
|
placeholder="手机号码" |
|
v-model="form.mobile" |
|
:prefix-icon="Iphone" |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item prop="password"> |
|
<el-input |
|
placeholder="密码" |
|
v-model="form.password" |
|
:prefix-icon="Lock" |
|
type="password" |
|
show-password |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-input |
|
placeholder="确认密码" |
|
v-model="form.confirmPassword" |
|
:prefix-icon="Lock" |
|
type="password" |
|
show-password |
|
></el-input> |
|
</el-form-item> |
|
<el-form-item> |
|
<!-- <el-input |
|
placeholder="验证码" |
|
v-model="form.smscode" |
|
:prefix-icon="Lock" |
|
></el-input> --> |
|
<div class="captcha"> |
|
<el-input |
|
v-model="form.smscode" |
|
style="height: 0.2344rem" |
|
maxlength="4" |
|
:prefix-icon="Lock" |
|
/> |
|
<div class="code" @click="getcodeinfo"> |
|
<img :src="codeUrl" alt="" srcset="" /> |
|
</div> |
|
</div> |
|
</el-form-item> |
|
</el-form> |
|
<div class="btn"> |
|
<div @click="$emits('backLogin')">返回</div> |
|
<div class="gradient" @click="ragistered">注册</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
|
import { User, Iphone, Lock } from '@element-plus/icons-vue' |
|
import { getFaculties } from '@/api/race' |
|
import { ElMessage } from 'element-plus' |
|
import { getCode, sturegister } from '@/api/user' |
|
import { ca } from 'element-plus/es/locales.mjs' |
|
const $emits = defineEmits(['backLogin']) |
|
const form = reactive<any>({ |
|
username: '', |
|
realname: '', |
|
workno: '', |
|
department: '', |
|
mobile: '', |
|
password: '', |
|
confirmPassword: '' /*, policy: false*/, |
|
smscode: '', |
|
}) |
|
const KeyValue: any = { |
|
username: '账号', |
|
realname: '姓名', |
|
workno: '学号', |
|
department: '院系', |
|
mobile: '手机号', |
|
password: '密码', |
|
confirmPassword: '确认密码' /*, policy: false*/, |
|
smscode: '验证码', |
|
} |
|
const rules = { |
|
username: [ |
|
{ required: true, message: '请输入用户名', trigger: 'blur' }, |
|
{ min: 6, max: 20, message: '账号长度在6到50个字符', trigger: 'blur' }, |
|
{ |
|
pattern: /^[a-zA-Z0-9]+$/, |
|
message: '姓名只能包含数字、英文', |
|
trigger: 'blur', |
|
}, |
|
], |
|
realname: [ |
|
{ required: true, message: '请输入姓名', trigger: 'blur' }, |
|
{ min: 2, max: 20, message: '姓名长度在2到10个字符', trigger: 'blur' }, |
|
// { |
|
// pattern: /^[a-zA-Z0-9]+$/, |
|
// message: '姓名只能包含中文、英文', |
|
// trigger: 'blur', |
|
// }, |
|
], |
|
workno: [ |
|
{ required: true, message: '请输入工号/学号', trigger: 'blur' }, |
|
{ |
|
pattern: /^[a-zA-Z0-9]{1,20}$/, |
|
message: '工号/学号为1-20位数字或字母', |
|
trigger: 'blur', |
|
}, |
|
], |
|
mobile: [ |
|
{ required: true, message: '请输入手机号', trigger: 'blur' }, |
|
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }, |
|
], |
|
password: [ |
|
{ required: true, message: '请输入密码', trigger: 'blur' }, |
|
{ min: 8, max: 16, message: '密码长度在8到16个字符', trigger: 'blur' }, |
|
{ |
|
pattern: |
|
/^(?=(.*[a-zA-Z]){2,}|(?=.*[a-zA-Z])(?=.*\d)|(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?])|(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?]))[a-zA-Z\d!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?]{8,16}$/, |
|
message: '密码必须包含至少两种字符类型：英文字符、数字、特殊字符', |
|
trigger: 'blur', |
|
}, |
|
], |
|
} |
|
const FacultiesList = ref([]) |
|
const getFacultiesList = async (data: any) => { |
|
const res: any = await getFaculties(data) |
|
console.log(res, 'res') |
|
FacultiesList.value = res.result |
|
} |
|
// 配置部门级联选择器 |
|
const props = { |
|
lazy: true, |
|
checkStrictly: true, |
|
emitPath: false, |
|
isLeaf: 'isLeaf', |
|
|
|
async lazyLoad(node: any, resolve: any) { |
|
// console.log(node, '1212') |
|
// console.log(node.data.isLeaf) |
|
|
|
// if (node.data.isLeaf) { |
|
// console.log(1111) |
|
|
|
// return resolve([]) |
|
// } |
|
await getFacultiesList({ |
|
primaryKey: 'key', |
|
pid: node.value, |
|
}) |
|
|
|
if (node.level == 0 || node.level == 1) { |
|
const nodes = FacultiesList.value.map((item: any) => ({ |
|
value: item.id, |
|
label: item.title, |
|
disabled: true, |
|
leaf: item.isLeaf, |
|
})) |
|
resolve(nodes) |
|
} else { |
|
const nodes = FacultiesList.value.map((item: any) => ({ |
|
value: item.id, |
|
label: item.title, |
|
leaf: item.isLeaf, |
|
})) |
|
resolve(nodes) |
|
} |
|
}, |
|
} |
|
const cascader = ref() |
|
const handleChange = (e: any) => { |
|
// console.log(e,cascader.value); |
|
cascader.value.togglePopperVisible() |
|
} |
|
const ruleFormRef = ref<any>() |
|
const ragistered = async () => { |
|
try { |
|
await ruleFormRef.value.validate() |
|
for (const key in form) { |
|
if (form[key] === '') { |
|
ElMessage.warning(`${KeyValue[key]}不能为空`) |
|
return console.log(KeyValue[key], '不能为空') |
|
} else { |
|
if (key === 'mobile') { |
|
const phoneRegex = /^1[3-9]\d{9}$/ |
|
if (!phoneRegex.test(form[key])) { |
|
return ElMessage.warning(`手机号格式不正确`) |
|
} |
|
} |
|
} |
|
} |
|
if (!(form.password === form.confirmPassword)) { |
|
return ElMessage.warning(`两次密码不同`) |
|
} |
|
console.log(form) |
|
let data = { |
|
checkKey: 1629428467008, |
|
departmentid: form.department, |
|
password: form.password, |
|
phone: form.mobile, |
|
realname: form.realname, |
|
smscode: form.smscode, |
|
username: form.username, |
|
workno: form.workno, |
|
} |
|
const res: any = await sturegister(data) |
|
if (res.code === 200) { |
|
ElMessage.success(`注册成功`) |
|
$emits('backLogin') |
|
} else { |
|
ElMessage.warning(res.message) |
|
getcodeinfo() |
|
} |
|
console.log(res) |
|
} catch (error: any) { |
|
console.log(error, 'error') |
|
// 判断对象是否有这个属性 |
|
if(error.hasOwnProperty('data')){ |
|
ElMessage.warning(error.data.message) |
|
|
|
}else{ |
|
for (const key in error) { |
|
ElMessage.warning(`${KeyValue[key]}${error[key][0].message}`) |
|
} |
|
} |
|
|
|
} |
|
} |
|
const codeUrl = ref('') |
|
|
|
// 获取验证码 |
|
const getcodeinfo = async () => { |
|
const res: any = await getCode(1629428467008) |
|
codeUrl.value = res.result |
|
console.log(codeUrl.value) |
|
} |
|
getcodeinfo() |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.login-form { |
|
width: 640px; |
|
height: 820px; |
|
border-radius: 15px; |
|
background-color: #ffffff1a !important; |
|
padding: 70px 60px; |
|
backdrop-filter: blur(10px); |
|
box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2); |
|
.login-title { |
|
font-size: 32px; |
|
font-weight: 700; |
|
} |
|
.form { |
|
margin-top: 45px; |
|
padding: 0 40px; |
|
.captcha { |
|
width: 100%; |
|
height: 100%; |
|
position: relative; |
|
.code { |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
width: 105px; |
|
height: 100%; |
|
// background-color: pink; |
|
display: flex; |
|
align-items: center; |
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
.submit { |
|
width: 399px; |
|
height: 50px; |
|
text-align: center; |
|
line-height: 50px; |
|
font-size: 20px; |
|
font-weight: 600; |
|
cursor: pointer; |
|
color: #fff; |
|
border-radius: 10px; |
|
margin-top: 35px; |
|
} |
|
} |
|
.btn { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-top: 45px; |
|
div { |
|
width: 210px; |
|
height: 42px; |
|
text-align: center; |
|
line-height: 42px; |
|
font-size: 14px; |
|
cursor: pointer; |
|
border-radius: 10px; |
|
} |
|
div:nth-child(1) { |
|
border: 1px solid #dbdbdb; |
|
color: #3c3c3c; |
|
} |
|
div:nth-child(2) { |
|
color: #fff; |
|
} |
|
} |
|
} |
|
:deep(.el-form-item) { |
|
display: flex; |
|
flex-direction: row !important; |
|
height: 45px; |
|
margin-top: 25px; |
|
.el-input { |
|
height: 100%; |
|
} |
|
input { |
|
height: 100%; |
|
} |
|
} |
|
</style>
|
|
|