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