285 lines
7.8 KiB
Vue
285 lines
7.8 KiB
Vue
|
<!-- @format -->
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div style="height: 100%">
|
|||
|
|
<a-layout style="height: 100%">
|
|||
|
|
<a-layout-content class="center-content">
|
|||
|
|
<div class="lg_card">
|
|||
|
|
<a-page-header style="border: 1px solid rgb(235, 237, 240)" @back="$router.back()">
|
|||
|
|
<template #backIcon>
|
|||
|
|
<div class="back_icon"><left-outlined style="font-size: 20px" /><h1>返回</h1></div>
|
|||
|
|
</template>
|
|||
|
|
<template #title>
|
|||
|
|
<h1 class="lg_card_title">注册党建知识答题平台</h1>
|
|||
|
|
</template>
|
|||
|
|
</a-page-header>
|
|||
|
|
<ns-form
|
|||
|
|
:labelWrap="true"
|
|||
|
|
style="margin: 32px auto 0; width: 50%"
|
|||
|
|
ref="mainRef"
|
|||
|
|
formLayout="vertical"
|
|||
|
|
:schemas="formSchema"
|
|||
|
|
:model="data"
|
|||
|
|
v-bind="$attrs" />
|
|||
|
|
<a-button
|
|||
|
|
@click="submit"
|
|||
|
|
:loading="loading"
|
|||
|
|
:disabled="!mainRef?.validateResult"
|
|||
|
|
type="primary"
|
|||
|
|
style="
|
|||
|
|
width: 420px;
|
|||
|
|
height: 52px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
"
|
|||
|
|
>注册</a-button
|
|||
|
|
>
|
|||
|
|
<div class="login_link" @click="$router.push({ name: 'login' })">
|
|||
|
|
登录已有账号<right-outlined style="font-size: 14px" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer">Copyright 2021 鼎云科技 All Rights Reserved</div>
|
|||
|
|
</a-layout-content>
|
|||
|
|
</a-layout>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { defineComponent, ref, watch } from 'vue';
|
|||
|
|
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
|
|||
|
|
import { useRouter } from 'vue-router';
|
|||
|
|
import { NsMessage } from '/nerv-lib/component/message';
|
|||
|
|
import { http } from '/nerv-lib/util/http';
|
|||
|
|
import { router } from '/nerv-lib/saas/router';
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: 'UserRegister',
|
|||
|
|
components: {
|
|||
|
|
LeftOutlined,
|
|||
|
|
RightOutlined,
|
|||
|
|
},
|
|||
|
|
setup() {
|
|||
|
|
const mainRef = ref();
|
|||
|
|
let data = ref({});
|
|||
|
|
let loading = ref(false);
|
|||
|
|
watch(
|
|||
|
|
() => data.value.password,
|
|||
|
|
() => {
|
|||
|
|
if (data.value.confirmPassword) mainRef.value.formElRef.validateFields('confirmPassword');
|
|||
|
|
},
|
|||
|
|
{ deep: true },
|
|||
|
|
);
|
|||
|
|
let formSchema = ref([
|
|||
|
|
{
|
|||
|
|
field: 'telNum',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '手机号码',
|
|||
|
|
field: 'accountName',
|
|||
|
|
component: 'NsInput',
|
|||
|
|
componentProps: {
|
|||
|
|
placeholder: '请输入手机号作为登录账号',
|
|||
|
|
},
|
|||
|
|
rules: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
validator: async (rule, value) => {
|
|||
|
|
data.value.telNum = value;
|
|||
|
|
if (!value) return Promise.reject('请输入手机号码');
|
|||
|
|
if (!/^[1][3456789][\d]{9}$/.test(value))
|
|||
|
|
return Promise.reject('请输入正确的手机号码');
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '学员姓名',
|
|||
|
|
field: 'userName',
|
|||
|
|
component: 'NsInput',
|
|||
|
|
componentProps: {
|
|||
|
|
placeholder: '请输入真实姓名',
|
|||
|
|
},
|
|||
|
|
rules: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
validator: async (rule, value) => {
|
|||
|
|
const _reg = /^[^\x00-\xff]$/;
|
|||
|
|
if (!value) return Promise.reject('请输入真实姓名');
|
|||
|
|
if (value.includes(' ')) return Promise.reject('不支持空格');
|
|||
|
|
if (value) {
|
|||
|
|
let strLength = 0;
|
|||
|
|
let strArray = value.split('');
|
|||
|
|
strArray.forEach((item) => {
|
|||
|
|
if (_reg.test(item)) {
|
|||
|
|
strLength += 2;
|
|||
|
|
} else {
|
|||
|
|
strLength += 1;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (strLength > 32) {
|
|||
|
|
return Promise.reject('不支持空格，长度不得超过32个字符，中文占两个字符');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '用户密码',
|
|||
|
|
field: 'password',
|
|||
|
|
component: 'NsInputPassword',
|
|||
|
|
componentProps: {
|
|||
|
|
placeholder: '请输入登录密码，密码6~18位，支持字母、数字、特殊字符!@#$%^&*',
|
|||
|
|
},
|
|||
|
|
rules: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
validator: async (rule, value) => {
|
|||
|
|
let reg = /^[0-9a-zA-Z!@#$%^&*]{6,18}$/;
|
|||
|
|
if (!value) return Promise.reject('请输入登录密码');
|
|||
|
|
if (!reg.test(value))
|
|||
|
|
return Promise.reject('支持数字、字母、特殊字符!@#$%^&*，6~18位字符');
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '确认密码',
|
|||
|
|
field: 'confirmPassword',
|
|||
|
|
component: 'NsInputPassword',
|
|||
|
|
componentProps: {
|
|||
|
|
placeholder: '请再次输入密码',
|
|||
|
|
},
|
|||
|
|
rules: [
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
validator: async (rule, value) => {
|
|||
|
|
if (value !== data.value.password) return Promise.reject('两次密码输入不一致');
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
const submit = () => {
|
|||
|
|
loading.value = true;
|
|||
|
|
mainRef.value
|
|||
|
|
.triggerSubmit()
|
|||
|
|
.then((data) => {
|
|||
|
|
http
|
|||
|
|
.post('/api/exam_op/objs/admin/WorkUser/register', data)
|
|||
|
|
.then((res) => {
|
|||
|
|
loading.value = false;
|
|||
|
|
NsMessage.success('注册成功', 1, () => {
|
|||
|
|
router.push({ path: '/login' });
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
loading.value = false;
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
loading.value = false;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
return {
|
|||
|
|
data,
|
|||
|
|
formSchema,
|
|||
|
|
mainRef,
|
|||
|
|
submit,
|
|||
|
|
loading,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
:deep(.center-content) {
|
|||
|
|
background: url('./img/background.png') center center no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
|
|||
|
|
// background-position-y: -120px;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
.ant-layout-content {
|
|||
|
|
height: calc(100vh - 112px);
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 400px;
|
|||
|
|
}
|
|||
|
|
.lg_card {
|
|||
|
|
width: 1200px;
|
|||
|
|
height: 560px;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 23%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
background: #ffffff;
|
|||
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|||
|
|
}
|
|||
|
|
.ant-page-header {
|
|||
|
|
border: none !important;
|
|||
|
|
border-bottom: 1px solid rgb(235, 237, 240) !important;
|
|||
|
|
height: 84px;
|
|||
|
|
}
|
|||
|
|
.back_icon {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
h1 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: rgba(0, 0, 0, 0.85);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.lg_card_title {
|
|||
|
|
font-family: 'PingFang SC';
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 32px;
|
|||
|
|
line-height: 36px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #172e3d;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
bottom: 8px;
|
|||
|
|
}
|
|||
|
|
:deep(.ant-page-header-heading) {
|
|||
|
|
height: 100%;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.login_link {
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 32px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
&:hover {
|
|||
|
|
color: #c50001;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.footer {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
bottom: 48px;
|
|||
|
|
color: rgba(0, 0, 0, 0.4);
|
|||
|
|
font-family: 'PingFang';
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
:deep(.ant-input-affix-wrapper) {
|
|||
|
|
height: 52px;
|
|||
|
|
}
|
|||
|
|
:deep(.ant-form-item-label-wrap) {
|
|||
|
|
line-height: 52px;
|
|||
|
|
}
|
|||
|
|
:deep(.ant-col-6) {
|
|||
|
|
flex: 0 0 20%;
|
|||
|
|
}
|
|||
|
|
</style>
|