zhc077
2 months ago
parent
76eea2db8a
commit
847e775b5d
12 changed files with 1505 additions and 684 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,360 @@ |
||||
<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"> |
||||
<JSelectDept :placeholder="t('sys.login.selectorgPlaceholder')" 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 { 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.selectorgPlaceholder')); |
||||
return; |
||||
} |
||||
if (!formData.username) { |
||||
createMessage.warn(t('sys.login.accountPlaceholder')); |
||||
return; |
||||
} |
||||
if (!formData.mobile) { |
||||
createMessage.warn(t('sys.login.mobilePlaceholder')); |
||||
return; |
||||
} |
||||
if (!formData.password) { |
||||
createMessage.warn(t('sys.login.passwordPlaceholder')); |
||||
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> |
||||
@ -0,0 +1,353 @@ |
||||
<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.registerButton4shenbaoren')}}</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('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.realNamePlaceholder')" v-model:value="formData.realname" /> |
||||
</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.workNoPlaceholder')" v-model:value="formData.workno" /> |
||||
</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.department')" />–>--> |
||||
<!-- <JStuSelectDept v-model:value="formData.department" :multi="false" />--> |
||||
<!-- </div>--> |
||||
<!-- </a-form-item>--> |
||||
<a-form-item> |
||||
<div class="aui-input-line"> |
||||
<JSelectDept :placeholder="t('sys.login.selectorgPlaceholder')" 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: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:mail-outlined"/> |
||||
<a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.smsCode')" v-model:value="formData.smscode" /> |
||||
<div v-if="showInterval" class="aui-code-line" @click="getLoginCode">{{t('component.countdown.normalText')}}</div> |
||||
<div v-else class="aui-code-line">{{t('component.countdown.sendText',[unref(timeRuning)])}}</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="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> |
||||
<!-- <a-form-item name="policy"> |
||||
<div class="aui-flex"> |
||||
<div class="aui-flex-box"> |
||||
<div class="aui-choice"> |
||||
<a-checkbox v-model:checked="formData.policy" /> |
||||
<span style="color: #1b90ff;margin-left: 4px">{{ t('sys.login.policy') }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-form-item>--> |
||||
</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, registerShenbaoren, 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 { 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.username) { |
||||
createMessage.warn(t('sys.login.accountPlaceholder')); |
||||
return; |
||||
} |
||||
if (!formData.realname) { |
||||
createMessage.warn(t('sys.login.realNamePlaceholder')); |
||||
return; |
||||
} |
||||
if (!formData.department) { |
||||
createMessage.warn(t('sys.login.selectorgPlaceholder')); |
||||
return; |
||||
} |
||||
if (!formData.mobile) { |
||||
createMessage.warn(t('sys.login.mobilePlaceholder')); |
||||
return; |
||||
} |
||||
if (!formData.password) { |
||||
createMessage.warn(t('sys.login.passwordPlaceholder')); |
||||
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 registerShenbaoren( |
||||
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, |
||||
}) |
||||
); |
||||
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: ''/*, policy: false*/ }); |
||||
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> |
||||
Loading…
Reference in new issue