From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 27 五月 2024 16:19:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/system/loginmini/MiniRegister.vue | 266 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 266 insertions(+), 0 deletions(-)
diff --git a/src/views/system/loginmini/MiniRegister.vue b/src/views/system/loginmini/MiniRegister.vue
new file mode 100644
index 0000000..617b765
--- /dev/null
+++ b/src/views/system/loginmini/MiniRegister.vue
@@ -0,0 +1,266 @@
+<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.signUpFormTitle')}}</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.userName')" 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.mobile')" 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.password')" 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>
+ <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 } from 'vue';
+ import { getCaptcha, register } from '/@/api/sys/user';
+ import { SmsEnum } from '/@/views/sys/login/useLogin';
+ import { useMessage } from '/@/hooks/web/useMessage';
+ import logoImg from '/@/assets/loginmini/icon/lanpu_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 { useI18n } from "/@/hooks/web/useI18n";
+
+ const { t } = useI18n();
+ const { notification, createErrorModal, createMessage } = useMessage();
+ const emit = defineEmits(['go-back', 'success', 'register']);
+ const formRef = ref();
+ const formData = reactive<any>({
+ username: '',
+ mobile: '',
+ smscode: '',
+ password: '',
+ confirmPassword: '',
+ policy: false,
+ });
+ //鏄惁鏄剧ず鑾峰彇楠岃瘉鐮�
+ 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();
+ }
+
+ /**
+ * 鑾峰彇鎵嬫満楠岃瘉鐮�
+ */
+ 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.mobile) {
+ createMessage.warn(t('sys.login.mobilePlaceholder'));
+ return;
+ }
+ if (!formData.smscode) {
+ createMessage.warn(t('sys.login.smsPlaceholder'));
+ return;
+ }
+ if (!formData.password) {
+ 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.policy){
+ createMessage.warn(t('sys.login.policyPlaceholder'));
+ return;
+ }
+ registerAccount();
+ }
+
+ /**
+ * 娉ㄥ唽璐﹀彿
+ */
+ async function registerAccount() {
+ try {
+ const resultInfo = await register(
+ toRaw({
+ username: formData.username,
+ password: formData.password,
+ phone: formData.mobile,
+ smscode: formData.smscode,
+ })
+ );
+ 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,{username:'',mobile: '', 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;
+ }
+
+ 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>
--
Gitblit v1.9.3