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.
372 lines
13 KiB
372 lines
13 KiB
<template> |
|
<div class="aui-content"> |
|
<div class="aui-container"> |
|
<div class="aui-form"> |
|
<div class="aui-image"> |
|
<!-- <div class="aui-image-text"> |
|
<img :src="jeecgAdTextImg" alt="" /> |
|
</div>--> |
|
</div> |
|
<div class="aui-formBox"> |
|
<div class="aui-formWell"> |
|
<a-form ref="formRef" :model="formData"> |
|
<div class="aui-flex aui-form-nav aui-clear-left" style="padding-bottom: 21px"> |
|
<div class="aui-flex-box activeNav on">{{t('sys.login.registerButton4faren')}}</div> |
|
</div> |
|
<div class="aui-form-box"> |
|
<div class="aui-account aui-account-line"> |
|
<a-form-item> |
|
<div class="aui-input-line"> |
|
<Icon class="aui-icon" icon="ant-design:user-outlined" /> |
|
<a-input class="fix-auto-fill" type="text" :placeholder="t('请输入单位名称')" v-model:value="formData.orgName" /> |
|
</div> |
|
</a-form-item> |
|
<a-form-item> |
|
<div class="aui-input-line"> |
|
<Icon class="aui-icon" icon="ant-design:user-outlined" /> |
|
<a-input class="fix-auto-fill" type="text" :placeholder="t('请输入统一社会信用代码')" v-model:value="formData.certificateCode" /> |
|
</div> |
|
</a-form-item> |
|
<a-form-item> |
|
<div class="aui-input-line"> |
|
<Icon class="aui-icon" icon="ant-design:mobile-outlined" /> |
|
<a-input class="fix-auto-fill" type="text" :placeholder="t('请输法人姓名')" v-model:value="formData.realname" /> |
|
</div> |
|
</a-form-item> |
|
<a-form-item> |
|
<div class="aui-input-line"> |
|
<Icon class="aui-icon" icon="ant-design:user-outlined" /> |
|
<a-input class="fix-auto-fill" type="text" :placeholder="t('请输法人身份证号')" v-model:value="formData.idNo" /> |
|
</div> |
|
</a-form-item> |
|
<a-form-item> |
|
<div class="aui-input-line"> |
|
<JSelectDept4FaRen :placeholder="t('sys.login.selectorgPlaceholder4Kejiju')" v-model:value="formData.department" :multiple="false" /> |
|
</div> |
|
</a-form-item> |
|
<a-form-item> |
|
<div class="aui-input-line"> |
|
<Icon class="aui-icon" icon="ant-design:user-outlined"/> |
|
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.accountPlaceholder')" v-model:value="formData.username" /> |
|
</div> |
|
</a-form-item> |
|
|
|
<a-form-item> |
|
<div class="aui-input-line"> |
|
<Icon class="aui-icon" icon="ant-design:mobile-outlined" /> |
|
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.mobilePlaceholder')" v-model:value="formData.mobile" /> |
|
</div> |
|
</a-form-item> |
|
<a-form-item> |
|
<div class="aui-input-line"> |
|
<Icon class="aui-icon" icon="ant-design:lock-outlined" /> |
|
<a-input |
|
class="fix-auto-fill" |
|
:type="pwdIndex === 'close' ? 'password' : 'text'" |
|
:placeholder="t('sys.login.passwordPlaceholder')" |
|
v-model:value="formData.password" |
|
/> |
|
<div class="aui-eye"> |
|
<img :src="eyeKImg" alt="开启" v-if="pwdIndex === 'open'" @click="pwdClick('close')" /> |
|
<img :src="eyeGImg" alt="关闭" v-else-if="pwdIndex === 'close'" @click="pwdClick('open')" /> |
|
</div> |
|
</div> |
|
</a-form-item> |
|
<a-form-item> |
|
<div class="aui-input-line"> |
|
<Icon class="aui-icon" icon="ant-design:lock-outlined" /> |
|
<a-input |
|
class="fix-auto-fill" |
|
:type="confirmPwdIndex === 'close' ? 'password' : 'text'" |
|
:placeholder="t('sys.login.confirmPassword')" |
|
v-model:value="formData.confirmPassword" |
|
/> |
|
<div class="aui-eye"> |
|
<img :src="eyeKImg" alt="开启" v-if="confirmPwdIndex === 'open'" @click="confirmPwdClick('close')" /> |
|
<img :src="eyeGImg" alt="关闭" v-else-if="confirmPwdIndex === 'close'" @click="confirmPwdClick('open')" /> |
|
</div> |
|
</div> |
|
</a-form-item> |
|
<div class="aui-inputClear"> |
|
<i class="icon icon-code"></i> |
|
<a-form-item> |
|
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.smsPlaceholder')" v-model:value="formData.smscode" /> |
|
</a-form-item> |
|
<div class="aui-code"> |
|
<img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" /> |
|
<img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" /> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="aui-formButton"> |
|
<div class="aui-flex"> |
|
<a class="aui-link-login aui-flex-box" @click="registerHandleClick"> {{ t('sys.login.registerButton') }}</a> |
|
</div> |
|
<div class="aui-flex"> |
|
<a class="aui-linek-code aui-flex-box" @click="goBackHandleClick">{{ t('sys.login.backSignIn') }}</a> |
|
</div> |
|
</div> |
|
</a-form> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup name="mini-register"> |
|
|
|
import { ref, reactive, unref, toRaw,onMounted } from 'vue'; |
|
import { getCaptcha, registerFaren, getCodeInfo } from '/@/api/sys/user'; |
|
import { SmsEnum } from '/@/views/sys/login/useLogin'; |
|
import { useMessage } from '/@/hooks/web/useMessage'; |
|
import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png'; |
|
import jeecgAdTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png'; |
|
import eyeKImg from '/@/assets/loginmini/icon/icon-eye-k.png'; |
|
import eyeGImg from '/@/assets/loginmini/icon/icon-eye-g.png'; |
|
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue'; |
|
import JSelectDept4FaRen from '/@/components/Form/src/jeecg/components/JSelectDept4FaRen.vue'; |
|
import { useI18n } from '/@/hooks/web/useI18n'; |
|
import codeImg from '/@/assets/images/checkcode.png'; |
|
|
|
const { t } = useI18n(); |
|
const { notification, createErrorModal, createMessage } = useMessage(); |
|
const emit = defineEmits(['go-back', 'success', 'register']); |
|
const formRef = ref(); |
|
const formData = reactive<any>({ |
|
username: '', |
|
// workno: '', |
|
mobile: '', |
|
smscode: '', |
|
password: '', |
|
confirmPassword: '', |
|
// policy: false, |
|
realname: '', |
|
department: '', |
|
}); |
|
|
|
// 选择部门 |
|
//是否显示获取验证码 |
|
const showInterval = ref<boolean>(true); |
|
//60s |
|
const timeRuning = ref<number>(60); |
|
//定时器 |
|
const timer = ref<any>(null); |
|
//密码眼睛打开关闭 |
|
const pwdIndex = ref<string>('close'); |
|
//确认密码眼睛打开关闭 |
|
const confirmPwdIndex = ref<string>('close'); |
|
|
|
/** |
|
* 返回 |
|
*/ |
|
function goBackHandleClick() { |
|
emit('go-back'); |
|
initForm(); |
|
} |
|
// 验证码 |
|
const randCodeData = reactive<any>({ |
|
randCodeImage: '', |
|
requestCodeSuccess: false, |
|
checkKey: null, |
|
}); |
|
function handleChangeCheckCode() { |
|
formData.inputCode = ''; |
|
|
|
randCodeData.checkKey = 1629428467008; |
|
getCodeInfo(randCodeData.checkKey).then((res) => { |
|
randCodeData.randCodeImage = res; |
|
randCodeData.requestCodeSuccess = true; |
|
}); |
|
} |
|
/** |
|
* 获取手机验证码 |
|
*/ |
|
async function getLoginCode() { |
|
if (!formData.mobile) { |
|
createMessage.warn(t('sys.login.mobilePlaceholder')); |
|
return; |
|
} |
|
const result = await getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.REGISTER }); |
|
if (result) { |
|
const TIME_COUNT = 60; |
|
if (!unref(timer)) { |
|
timeRuning.value = TIME_COUNT; |
|
showInterval.value = false; |
|
timer.value = setInterval(() => { |
|
if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) { |
|
timeRuning.value = timeRuning.value - 1; |
|
} else { |
|
showInterval.value = true; |
|
clearInterval(unref(timer)); |
|
timer.value = null; |
|
} |
|
}, 1000); |
|
} |
|
} |
|
} |
|
|
|
function registerHandleClick() { |
|
if (!formData.orgName) { |
|
createMessage.warn(t('请输入单位名称')); |
|
return; |
|
} |
|
if (!formData.certificateCode) { |
|
createMessage.warn(t('请输入统一社会信用代码')); |
|
return; |
|
} |
|
if (!formData.realname) { |
|
createMessage.warn(t('sys.login.realNamePlaceholder')); |
|
return; |
|
} |
|
if (!formData.idNo) { |
|
createMessage.warn(t('请输法人身份证号')); |
|
return; |
|
} |
|
if (!formData.department) { |
|
createMessage.warn(t('sys.login.selectorgPlaceholder4Kejiju')); |
|
return; |
|
} |
|
if (!formData.username) { |
|
createMessage.warn(t('sys.login.accountPlaceholder')); |
|
return; |
|
} |
|
if (!formData.mobile) { |
|
createMessage.warn(t('sys.login.mobilePlaceholder')); |
|
return; |
|
} |
|
const phoneRegex = /^1[3-9]\d{9}$/; |
|
if (!phoneRegex.test(formData.mobile)) { |
|
createMessage.warn(t('sys.login.mobilePlaceholderNotReg')); |
|
return; |
|
} |
|
if (!formData.password) { |
|
createMessage.warn(t('sys.login.passwordPlaceholder')); |
|
return; |
|
} |
|
//包含字母（大小写）、数字以及特殊字符，并且有一定的长度要求，至少 8 位 |
|
const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,20}$/; |
|
if (!passwordRegex.test(formData.password)) { |
|
createMessage.warn(t('sys.login.passwordPlaceholderNotReg')); |
|
return; |
|
} |
|
// if (!formData.workno) { |
|
// createMessage.warn(t('sys.login.passwordPlaceholder')); |
|
// return; |
|
// } |
|
if (!formData.confirmPassword) { |
|
createMessage.warn(t('sys.login.confirmPassword')); |
|
return; |
|
} |
|
if (formData.password !== formData.confirmPassword) { |
|
createMessage.warn(t('sys.login.diffPwd')); |
|
return; |
|
} |
|
if (!formData.smscode) { |
|
createMessage.warn(t('sys.login.smsPlaceholder')); |
|
return; |
|
} |
|
// if (!formData.policy) { |
|
// createMessage.warn(t('sys.login.policyPlaceholder')); |
|
// return; |
|
// } |
|
registerAccount(); |
|
} |
|
|
|
/** |
|
* 注册账号 |
|
*/ |
|
async function registerAccount() { |
|
try { |
|
const resultInfo = await registerFaren( |
|
toRaw({ |
|
// workno: formData.workno, |
|
username: formData.username, |
|
departmentid: formData.department, |
|
realname: formData.realname, |
|
password: formData.password, |
|
phone: formData.mobile, |
|
smscode: formData.smscode, |
|
checkKey: randCodeData.checkKey, |
|
idNo: formData.idNo, |
|
certificateCode: formData.certificateCode, |
|
orgName: formData.orgName, |
|
}) |
|
); |
|
if (resultInfo && resultInfo.data.success) { |
|
notification.success({ |
|
description: resultInfo.data.message || t('sys.api.registerMsg'), |
|
duration: 3, |
|
}); |
|
emit('success', { username: formData.username, password: formData.password }); |
|
initForm(); |
|
} else { |
|
notification.warning({ |
|
message: t('sys.api.errorTip'), |
|
description: resultInfo.data.message || t('sys.api.networkExceptionMsg'), |
|
duration: 3, |
|
}); |
|
} |
|
} catch (error) { |
|
notification.error({ |
|
message: t('sys.api.errorTip'), |
|
description: error.message || t('sys.api.networkExceptionMsg'), |
|
duration: 3, |
|
}); |
|
} |
|
} |
|
|
|
/** |
|
* 初始化表单 |
|
*/ |
|
function initForm() { |
|
Object.assign(formData, { workno: '', username: '', mobile: '', realname: '', department: '', smscode: '', password: '', |
|
confirmPassword: '', |
|
idNo: '', |
|
certificateCode: '', |
|
orgName: '', |
|
}); |
|
if (!unref(timer)) { |
|
showInterval.value = true; |
|
clearInterval(unref(timer)); |
|
timer.value = null; |
|
} |
|
formRef.value.resetFields(); |
|
} |
|
|
|
/** |
|
* 密码打开或关闭 |
|
* @param value |
|
*/ |
|
function pwdClick(value) { |
|
pwdIndex.value = value; |
|
} |
|
|
|
/** |
|
* 确认密码打开或关闭 |
|
* @param value |
|
*/ |
|
function confirmPwdClick(value) { |
|
confirmPwdIndex.value = value; |
|
} |
|
onMounted(() => { |
|
//加载验证码 |
|
handleChangeCheckCode(); |
|
}); |
|
defineExpose({ |
|
initForm, |
|
}); |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
@import '/@/assets/loginmini/style/home.less'; |
|
@import '/@/assets/loginmini/style/base.less'; |
|
.aui-input-line .aui-icon { |
|
position: absolute; |
|
z-index: 2; |
|
top: 10px; |
|
left: 10px; |
|
font-size: 20px !important; |
|
} |
|
</style>
|
|
|