push
This commit is contained in:
xuziqiang
284
nervui-party-construction/src/view/login/register.vue
Normal file
284
nervui-party-construction/src/view/login/register.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<!-- @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>
|
||||
Reference in New Issue
Block a user