gxwebsoft/mp-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
gxwebsoft
2025-12-17 10:03:00 +08:00
parent 66cd1dbf11
commit 2962689f2f
7 changed files with 1168 additions and 1149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

417
src/views/passport/login/index.vue
View File

@@ -18,9 +18,8 @@
/> />
<h4>{{ config.siteName }}</h4> <h4>{{ config.siteName }}</h4>
</div> </div>
<div class="company-name" v-if="config?.loginTitle">{{ <div class="company-name" v-if="config?.loginTitle"
config?.loginTitle >{{ config?.loginTitle }}
}}
</div> </div>
<a-form <a-form
ref="formRef" ref="formRef"
@@ -30,60 +29,64 @@
> >
<div class="login-title flex justify-center items-center px-12"> <div class="login-title flex justify-center items-center px-12">
<template v-if="loginType === 'scan'"> <template v-if="loginType === 'scan'">
<h4 <h4 class="title-btn">扫码登录</h4>
class="title-btn"
>扫码登录</h4
>
</template> </template>
<template v-else> <template v-else>
<h4 <h4
class="title-btn" class="title-btn"
:class="loginType === 'sms' ? 'active' : ''" :class="loginType === 'sms' ? 'active' : ''"
@click="onLoginType('sms')" @click="onLoginType('sms')"
>短信登录</h4 >手机号登录</h4
> >
<a-divider type="vertical" style="height: 20px"/> <a-divider type="vertical" style="height: 20px" />
<h4 <h4
class="title-btn" class="title-btn"
:class="loginType === 'account' ? 'active' : ''" :class="loginType === 'account' ? 'active' : ''"
@click="onLoginType('account')" @click="onLoginType('account')"
>密码登录</h4 >账号登录</h4
> >
</template> </template>
</div> </div>
<div class="login-bar absolute top-0 z-50 right-0 cursor-pointer" @click="onScan"> <div
class="login-bar absolute top-0 z-50 right-0 cursor-pointer"
@click="onScan"
>
<div class="go-to-register cursor-pointer"> <div class="go-to-register cursor-pointer">
<img src="@/assets/O1CN01yz6fEl1MwaRtkJyvf_!!6000000001499-55-tps-70-70.svg" <img
alt=""/> src="@/assets/O1CN01yz6fEl1MwaRtkJyvf_!!6000000001499-55-tps-70-70.svg"
alt=""
/>
</div> </div>
<div class="absolute top-2 right-2 text-lg text-white font-bold cursor-pointer"> <div
<QrcodeOutlined v-if="loginType === 'sms'"/> class="absolute top-2 right-2 text-lg text-white font-bold cursor-pointer"
<MobileOutlined v-else/> >
<QrcodeOutlined v-if="loginType === 'sms'" />
<MobileOutlined v-else />
</div> </div>
<!-- <span class="absolute top-3 right-1.5 text-sm text-white font-bold cursor-pointer">{{ '登录' }}</span>--> <!-- <span class="absolute top-3 right-1.5 text-sm text-white font-bold cursor-pointer">{{ '登录' }}</span>-->
</div> </div>
<template v-if="loginType === 'account'"> <template v-if="loginType === 'account'">
<a-form-item name="tenantId"> <!-- <a-form-item name="tenantId">-->
<a-input <!-- <a-input-->
allow-clear <!-- allow-clear-->
size="large" <!-- size="large"-->
v-model:value="form.tenantId" <!-- v-model:value="form.tenantId"-->
:placeholder="`请输入租户ID`" <!-- :placeholder="`请输入租户ID`"-->
> <!-- >-->
<template #prefix> <!-- <template #prefix>-->
<UserOutlined/> <!-- <UserOutlined />-->
</template> <!-- </template>-->
</a-input> <!-- </a-input>-->
</a-form-item> <!-- </a-form-item>-->
<a-form-item name="username"> <a-form-item name="username">
<a-input <a-input
allow-clear allow-clear
size="large" size="large"
v-model:value="form.username" v-model:value="form.userId"
:placeholder="`请输入用户名`" :placeholder="`用户ID`"
> >
<template #prefix> <template #prefix>
<UserOutlined/> <UserOutlined />
</template> </template>
</a-input> </a-input>
</a-form-item> </a-form-item>
@@ -91,11 +94,11 @@
<a-input-password <a-input-password
size="large" size="large"
v-model:value="form.password" v-model:value="form.password"
placeholder="请输入登录密码" placeholder="登录密码"
@pressEnter="submit" @pressEnter="submit"
> >
<template #prefix> <template #prefix>
<lock-outlined/> <lock-outlined />
</template> </template>
</a-input-password> </a-input-password>
</a-form-item> </a-form-item>
@@ -107,22 +110,27 @@
type="text" type="text"
:maxlength="5" :maxlength="5"
v-model:value="form.code" v-model:value="form.code"
placeholder="图形验证码" placeholder="验证码"
@pressEnter="submit" @pressEnter="submit"
> >
<template #prefix> <template #prefix>
<safety-certificate-outlined/> <safety-certificate-outlined />
</template> </template>
</a-input> </a-input>
<a-button class="login-captcha" @click="changeCaptcha"> <a-button class="login-captcha" @click="changeCaptcha">
<img v-if="captcha" :src="captcha" alt=""/> <img v-if="captcha" :src="captcha" alt="" />
</a-button> </a-button>
</div> </div>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<div class="flex justify-between">
<a-checkbox v-model:checked="form.remember"> <a-checkbox v-model:checked="form.remember">
{{ t('login.remember') }} {{ t('login.remember') }}
</a-checkbox> </a-checkbox>
<a class="login-forget" @click="push('/forget')">
{{ t('login.forget') }}
</a>
</div>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button <a-button
@@ -134,7 +142,9 @@
> >
{{ loading ? t('login.loading') : t('login.login') }} {{ loading ? t('login.loading') : t('login.login') }}
</a-button> </a-button>
<!-- <div class="register text-center pt-5"><a @click="push('/register')">免费注册</a></div>--> <div class="register text-center pt-5"
><a @click="push('/register')">前往注册</a></div
>
</a-form-item> </a-form-item>
</template> </template>
<template v-if="loginType === 'sms'"> <template v-if="loginType === 'sms'">
@@ -179,7 +189,9 @@
> >
{{ loading ? t('login.loading') : t('login.login') }} {{ loading ? t('login.loading') : t('login.login') }}
</a-button> </a-button>
<!-- <div class="register text-center pt-5"><a @click="push('/register')">免费注册</a></div>--> <div class="register text-center pt-5"
><a @click="push('/register')">前往注册</a></div
>
</a-form-item> </a-form-item>
</template> </template>
<template v-if="loginType == 'scan'"> <template v-if="loginType == 'scan'">
@@ -212,7 +224,7 @@
@pressEnter="sendCode" @pressEnter="sendCode"
/> />
<a-button class="login-captcha"> <a-button class="login-captcha">
<img alt="" :src="captcha" @click="changeCaptcha"/> <img alt="" :src="captcha" @click="changeCaptcha" />
</a-button> </a-button>
</div> </div>
<a-button <a-button
@@ -236,19 +248,20 @@
<div class="flex flex-col justify-start"> <div class="flex flex-col justify-start">
<a-list item-layout="horizontal" :data-source="admins"> <a-list item-layout="horizontal" :data-source="admins">
<template #renderItem="{ item }"> <template #renderItem="{ item }">
<a-list-item class="cursor-pointer hover:border-gray-100" @click="onSelectUser(item)"> <a-list-item
<a-list-item-meta class="cursor-pointer hover:border-gray-100"
:description="`租户ID: ${item.tenantId}`" @click="onSelectUser(item)"
> >
<a-list-item-meta :description="`租户ID: ${item.tenantId}`">
<template #title> <template #title>
{{ item.tenantName }} {{ item.tenantName }}
</template> </template>
<template #avatar> <template #avatar>
<a-avatar :src="item.avatar"/> <a-avatar :src="item.avatar" />
</template> </template>
</a-list-item-meta> </a-list-item-meta>
<template #actions> <template #actions>
<RightOutlined/> <RightOutlined />
</template> </template>
</a-list-item> </a-list-item>
</template> </template>
@@ -259,47 +272,54 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, reactive, unref, watch} from 'vue'; import { ref, reactive, unref, watch } from 'vue';
import {useI18n} from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {useRouter} from 'vue-router'; import { useRouter } from 'vue-router';
import {Form, message} from 'ant-design-vue'; import { Form, message } from 'ant-design-vue';
import { import {
LockOutlined, LockOutlined,
UserOutlined, UserOutlined,
QrcodeOutlined, QrcodeOutlined,
MobileOutlined, MobileOutlined,
SafetyCertificateOutlined SafetyCertificateOutlined,
} from '@ant-design/icons-vue'; RightOutlined
import {goHomeRoute, cleanPageTabs} from '@/utils/page-tab-util'; } from '@ant-design/icons-vue';
import {login, loginBySms, getCaptcha} from '@/api/passport/login'; import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
import QrLogin from '@/components/QrLogin/index.vue'; import { login, loginBySms, getCaptcha } from '@/api/passport/login';
import QrLogin from '@/components/QrLogin/index.vue';
import {User} from '@/api/system/user/model'; import { User } from '@/api/system/user/model';
import {TEMPLATE_ID, THEME_STORE_NAME} from '@/config/setting'; import { TEMPLATE_ID, THEME_STORE_NAME } from '@/config/setting';
import {sendSmsCaptcha} from '@/api/passport/login'; import { sendSmsCaptcha } from '@/api/passport/login';
import useFormData from '@/utils/use-form-data'; import useFormData from '@/utils/use-form-data';
import {FormInstance} from 'ant-design-vue/es/form'; import { FormInstance } from 'ant-design-vue/es/form';
import {configWebsiteField} from '@/api/cms/cmsWebsiteField'; import { configWebsiteField } from '@/api/cms/cmsWebsiteField';
import {Config} from '@/api/cms/cmsWebsiteField/model'; import { Config } from '@/api/cms/cmsWebsiteField/model';
import {phoneReg} from 'ele-admin-pro'; import { phoneReg } from 'ele-admin-pro';
import router from "@/router"; import router from '@/router';
import {listAdminsByPhoneAll} from "@/api/system/user"; import { listAdminsByPhoneAll } from '@/api/system/user';
import {QrCodeStatusResponse} from "@/api/passport/qrLogin"; import { QrCodeStatusResponse } from '@/api/passport/qrLogin';
const useForm = Form.useForm; const useForm = Form.useForm;
const {currentRoute} = useRouter(); const routerInstance = useRouter();
const {t} = useI18n(); const { currentRoute } = routerInstance;
const {locale} = useI18n(); const { t } = useI18n();
const { locale } = useI18n();
// 登录框方向, 0 居中, 1 居右, 2 居左 // 路由导航函数
const direction = ref(0); const push = (path: string) => {
// 加载状态 routerInstance.push(path);
const loading = ref(false); };
// 是否显示tenantId填写输入框
const loginType = ref('scan'); // 登录框方向, 0 居中, 1 居右, 2 居左
const config = ref<Config>(); const direction = ref(0);
// 配置信息 // 加载状态
const {form} = useFormData<User>({ const loading = ref(false);
// 是否显示tenantId填写输入框
const loginType = ref('scan');
const config = ref<Config>();
// 配置信息
const { form } = useFormData<User>({
userId: undefined, userId: undefined,
username: '', username: '',
phone: '', phone: '',
@@ -310,32 +330,32 @@ const {form} = useFormData<User>({
templateId: TEMPLATE_ID, templateId: TEMPLATE_ID,
isSuperAdmin: true, isSuperAdmin: true,
remember: true remember: true
}); });
// 验证码 base64 数据 // 验证码 base64 数据
const captcha = ref(''); const captcha = ref('');
// 验证码内容, 实际项目去掉 // 验证码内容, 实际项目去掉
const text = ref(''); const text = ref('');
// 是否显示图形验证码弹窗 // 是否显示图形验证码弹窗
const visible = ref(false); const visible = ref(false);
// 图形验证码 // 图形验证码
const imgCode = ref(''); const imgCode = ref('');
// 发送验证码按钮loading // 发送验证码按钮loading
const codeLoading = ref(false); const codeLoading = ref(false);
// 验证码倒计时时间 // 验证码倒计时时间
const countdownTime = ref(0); const countdownTime = ref(0);
// 验证码倒计时定时器 // 验证码倒计时定时器
let countdownTimer: number | null = null; let countdownTimer: number | null = null;
// 多用户选择账号登录 // 多用户选择账号登录
const showSelectLoginUser = ref<boolean>(false) const showSelectLoginUser = ref<boolean>(false);
const admins = ref<User[]>([]); const admins = ref<User[]>([]);
// const tenantId = getTenantId(); // const tenantId = getTenantId();
// 表格选中数据 // 表格选中数据
const formRef = ref<FormInstance | null>(null); const formRef = ref<FormInstance | null>(null);
// 表单验证规则 // 表单验证规则
const rules = reactive({ const rules = reactive({
userId: [ userId: [
{ {
required: true, required: true,
@@ -373,10 +393,10 @@ const rules = reactive({
type: 'string' type: 'string'
} }
] ]
}); });
/* 显示发送短信验证码弹窗 */ /* 显示发送短信验证码弹窗 */
const openImgCodeModal = () => { const openImgCodeModal = () => {
if (!form.phone) { if (!form.phone) {
message.error('请输入手机号码'); message.error('请输入手机号码');
return; return;
@@ -384,10 +404,10 @@ const openImgCodeModal = () => {
imgCode.value = ''; imgCode.value = '';
changeCaptcha(); changeCaptcha();
visible.value = true; visible.value = true;
}; };
/* 发送短信验证码 */ /* 发送短信验证码 */
const sendCode = () => { const sendCode = () => {
if (!imgCode.value) { if (!imgCode.value) {
message.error('请输入图形验证码'); message.error('请输入图形验证码');
return; return;
@@ -397,7 +417,7 @@ const sendCode = () => {
return; return;
} }
codeLoading.value = true; codeLoading.value = true;
sendSmsCaptcha({phone: form.phone}).then(() => { sendSmsCaptcha({ phone: form.phone }).then(() => {
message.success('短信验证码发送成功, 请注意查收!'); message.success('短信验证码发送成功, 请注意查收!');
visible.value = false; visible.value = false;
codeLoading.value = false; codeLoading.value = false;
@@ -411,19 +431,19 @@ const sendCode = () => {
countdownTime.value--; countdownTime.value--;
}, 1000); }, 1000);
}); });
}; };
// const { clearValidate, validate, validateInfos } = useForm(form, rules); // const { clearValidate, validate, validateInfos } = useForm(form, rules);
const {resetFields} = useForm(form, rules); const { resetFields } = useForm(form, rules);
const goHome = () => { const goHome = () => {
const {query} = unref(currentRoute); const { query } = unref(currentRoute);
goHomeRoute(query.from as string); goHomeRoute(query.from as string);
localStorage.removeItem(THEME_STORE_NAME); localStorage.removeItem(THEME_STORE_NAME);
}; };
const onLoginBySms = () => { const onLoginBySms = () => {
if (!formRef.value) { if (!formRef.value) {
return; return;
} }
@@ -436,9 +456,12 @@ const onLoginBySms = () => {
.then((msg) => { .then((msg) => {
if (msg == '请选择登录用户') { if (msg == '请选择登录用户') {
showSelectLoginUser.value = true; showSelectLoginUser.value = true;
listAdminsByPhoneAll({phone: form.phone, templateId: TEMPLATE_ID}).then(data => { listAdminsByPhoneAll({
phone: form.phone,
templateId: TEMPLATE_ID
}).then((data) => {
admins.value = data; admins.value = data;
}) });
return false; return false;
} else { } else {
message.success(msg); message.success(msg);
@@ -453,17 +476,16 @@ const onLoginBySms = () => {
loading.value = false; loading.value = false;
}); });
}) })
.catch(() => { .catch(() => {});
}); };
};
const onSelectUser = (item: User) => { const onSelectUser = (item: User) => {
form.tenantId = item.tenantId; form.tenantId = item.tenantId;
onLoginBySms(); onLoginBySms();
} };
/* 保存编辑 */ /* 保存编辑 */
const submit = () => { const submit = () => {
if (!formRef.value) { if (!formRef.value) {
return; return;
} }
@@ -496,36 +518,35 @@ const submit = () => {
loading.value = false; loading.value = false;
}); });
}) })
.catch(() => { .catch(() => {});
}); };
};
// const doRegister = () => { // const doRegister = () => {
// registerUser(form) // registerUser(form)
// .then(() => { // .then(() => {
// loading.value = false; // loading.value = false;
// message.success('注册成功'); // message.success('注册成功');
// }) // })
// .catch((e) => { // .catch((e) => {
// loading.value = false; // loading.value = false;
// message.error(e.message); // message.error(e.message);
// }); // });
// }; // };
const onLoginType = (text) => { const onLoginType = (text) => {
loginType.value = text; loginType.value = text;
}; };
const onScan = () => { const onScan = () => {
if (loginType.value == 'scan') { if (loginType.value == 'scan') {
loginType.value = 'sms' loginType.value = 'sms';
} else { } else {
loginType.value = 'scan' loginType.value = 'scan';
} }
} };
/* 二维码登录成功处理 */ /* 二维码登录成功处理 */
const onQrLoginSuccess = async (item: QrCodeStatusResponse) => { const onQrLoginSuccess = async (item: QrCodeStatusResponse) => {
// 设置token到localStorage或其他存储 // 设置token到localStorage或其他存储
localStorage.setItem('access_token', item.accessToken || ''); localStorage.setItem('access_token', item.accessToken || '');
message.success('扫码登录成功'); message.success('扫码登录成功');
@@ -535,28 +556,28 @@ const onQrLoginSuccess = async (item: QrCodeStatusResponse) => {
cleanPageTabs(); cleanPageTabs();
goHome(); goHome();
} }
}; };
/* 二维码登录错误处理 */ /* 二维码登录错误处理 */
const onQrLoginError = (error: string) => { const onQrLoginError = (error: string) => {
message.error(error || '扫码登录失败'); message.error(error || '扫码登录失败');
}; };
// const goBack = () => { // const goBack = () => {
// openUrl(getDomain()); // openUrl(getDomain());
// return; // return;
// }; // };
const loginConnect = () => { const loginConnect = () => {
// getWxWorkQrConnect().then((result) => { // getWxWorkQrConnect().then((result) => {
// console.log(result); // console.log(result);
// qrConnect.value = result; // qrConnect.value = result;
// }); // });
}; };
/* 获取图形验证码 */ /* 获取图形验证码 */
const changeCaptcha = () => { const changeCaptcha = () => {
configWebsiteField({lang: locale.value}).then((data) => { configWebsiteField({ lang: locale.value }).then((data) => {
config.value = data; config.value = data;
}); });
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面 // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
@@ -572,13 +593,13 @@ const changeCaptcha = () => {
.catch((e) => { .catch((e) => {
message.error(e.message); message.error(e.message);
}); });
}; };
// 首次加载 // 首次加载
changeCaptcha(); changeCaptcha();
loginConnect(); loginConnect();
watch( watch(
router.currentRoute, router.currentRoute,
(data) => { (data) => {
if (data.query?.loginPhone) { if (data.query?.loginPhone) {
@@ -587,13 +608,13 @@ watch(
localStorage.clear(); localStorage.clear();
} }
}, },
{immediate: true} { immediate: true }
); );
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/* 背景 */ /* 背景 */
.login-wrapper { .login-wrapper {
padding: 48px 16px 0 16px; padding: 48px 16px 0 16px;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@@ -612,19 +633,19 @@ watch(
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
} }
.company-name { .company-name {
position: absolute; position: absolute;
top: 17%; top: 17%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 24px; font-size: 24px;
color: #ffffff; color: #ffffff;
} }
/* 卡片 */ /* 卡片 */
.login-form { .login-form {
width: 380px; width: 380px;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
@@ -653,18 +674,18 @@ watch(
color: #007dff; color: #007dff;
} }
} }
} }
.login-form-right .login-form { .login-form-right .login-form {
margin: 0 15% 0 auto; margin: 0 15% 0 auto;
} }
.login-form-left .login-form { .login-form-left .login-form {
margin: 0 auto 0 15%; margin: 0 auto 0 15%;
} }
/* 验证码 */ /* 验证码 */
.login-input-group { .login-input-group {
display: flex; display: flex;
align-items: center; align-items: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -684,34 +705,34 @@ watch(
height: 100%; height: 100%;
} }
} }
} }
/* 第三方登录图标 */ /* 第三方登录图标 */
.login-oauth-icon { .login-oauth-icon {
color: #fff; color: #fff;
padding: 5px; padding: 5px;
margin: 0 12px; margin: 0 12px;
font-size: 18px; font-size: 18px;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
} }
.work-icon { .work-icon {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
/* 底部版权 */ /* 底部版权 */
.login-copyright { .login-copyright {
color: #eee; color: #eee;
text-align: center; text-align: center;
padding: 48px 0 22px 0; padding: 48px 0 22px 0;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
/* 响应式 */ /* 响应式 */
@media screen and (min-height: 640px) { @media screen and (min-height: 640px) {
.login-wrapper { .login-wrapper {
padding-top: 0; padding-top: 0;
} }
@@ -743,9 +764,9 @@ watch(
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.login-form-right .login-form, .login-form-right .login-form,
.login-form-left .login-form { .login-form-left .login-form {
left: 50%; left: 50%;
@@ -754,13 +775,13 @@ watch(
margin-right: auto; margin-right: auto;
transform: translateX(-50%); transform: translateX(-50%);
} }
} }
.wwLogin_qrcode_head { .wwLogin_qrcode_head {
padding: 10px 0 40px 0 !important; padding: 10px 0 40px 0 !important;
} }
.logo-login { .logo-login {
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 20px; left: 20px;
@@ -779,5 +800,5 @@ watch(
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
} }
} }
</style> </style>

376
src/views/passport/register/index.vue
View File

@@ -19,9 +19,8 @@
/> />
<h4>{{ config.siteName }}</h4> <h4>{{ config.siteName }}</h4>
</div> </div>
<div class="company-name" v-if="config?.loginTitle">{{ <div class="company-name" v-if="config?.loginTitle"
config?.loginTitle >{{ config?.loginTitle }}
}}
</div> </div>
<a-form <a-form
ref="formRef" ref="formRef"
@@ -30,11 +29,37 @@
class="login-form ele-bg-white" class="login-form ele-bg-white"
> >
<div class="login-title flex justify-center items-center px-12"> <div class="login-title flex justify-center items-center px-12">
<h4 <h4 class="title-btn">创建应用</h4>
class="title-btn"
>注册</h4
>
</div> </div>
<a-form-item name="companyName">
<div class="flex">
<a-input
allow-clear
size="large"
placeholder="云应用名称"
v-model:value="form.companyName"
/>
<!-- <a-button-->
<!-- class="ele-btn-icon"-->
<!-- size="large"-->
<!-- style="margin-left: 10px; width: 137px"-->
<!-- @click="openMapPicker"-->
<!-- >-->
<!-- <AimOutlined />选取-->
<!-- </a-button>-->
</div>
</a-form-item>
<a-form-item name="category">
<industry-select
v-model:value="form.category"
valueField="label"
allow-clear
size="large"
placeholder="所属行业"
class="ele-fluid"
@change="onIndustry"
/>
</a-form-item>
<template v-if="loginType === 'account'"> <template v-if="loginType === 'account'">
<a-form-item name="phone"> <a-form-item name="phone">
<a-input <a-input
@@ -67,56 +92,29 @@
</a-button> </a-button>
</div> </div>
</a-form-item> </a-form-item>
<a-form-item name="companyName"> <!-- <a-form-item name="companyName">-->
<div class="flex"> <!-- <a-input-->
<a-input <!-- allow-clear-->
allow-clear <!-- size="large"-->
size="large" <!-- :maxlength="11"-->
placeholder="公众号|小程序名称" <!-- v-model:value="form.companyName"-->
v-model:value="form.companyName" <!-- :placeholder="`请输入店铺名称`"-->
> <!-- />-->
</a-input> <!-- </a-form-item>-->
<a-button <!-- <a-form-item name="email">-->
class="ele-btn-icon" <!-- <a-input-->
size="large" <!-- allow-clear-->
style="margin-left: 10px; width: 137px" <!-- size="large"-->
@click="openMapPicker" <!-- v-model:value="form.email"-->
> <!-- :placeholder="`(选填)请输入电子邮箱`"-->
<AimOutlined />选取 <!-- />-->
</a-button> <!-- </a-form-item>-->
</div>
</a-form-item>
<!-- <a-form-item name="companyName">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- size="large"-->
<!-- :maxlength="11"-->
<!-- v-model:value="form.companyName"-->
<!-- :placeholder="`请输入店铺名称`"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item name="email">-->
<!-- <a-input-->
<!-- allow-clear-->
<!-- size="large"-->
<!-- v-model:value="form.email"-->
<!-- :placeholder="`(选填)请输入电子邮箱`"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item name="category">
<industry-select
v-model:value="form.category"
valueField="label"
allow-clear
size="large"
placeholder="所属行业"
class="ele-fluid"
@change="onIndustry"
/>
</a-form-item>
<a-form-item> <a-form-item>
<a-checkbox v-model:checked="form.remember"> <a-checkbox v-model:checked="form.remember">
同意 <a href="https://website.websoft.top/xieyi/01.html" target="_blank">《服务协议及隐私政策》</a> 同意
<a href="https://website.websoft.top/xieyi/01.html" target="_blank"
>《服务协议及隐私政策》</a
>
</a-checkbox> </a-checkbox>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
@@ -130,7 +128,9 @@
> >
注册 注册
</a-button> </a-button>
<div class="register text-center pt-5"><a @click="push('/login')">已有账号，立即登录</a></div> <div class="register text-center pt-5"
><a @click="push('/login')">已有账号，立即登录</a></div
>
</a-form-item> </a-form-item>
</template> </template>
<template v-if="loginType === 'sms'"> <template v-if="loginType === 'sms'">
@@ -201,7 +201,7 @@
@pressEnter="sendCode" @pressEnter="sendCode"
/> />
<a-button class="login-captcha"> <a-button class="login-captcha">
<img alt="" :src="captcha" @click="changeCaptcha"/> <img alt="" :src="captcha" @click="changeCaptcha" />
</a-button> </a-button>
</div> </div>
<a-button <a-button
@@ -228,48 +228,48 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, reactive, unref, watch} from 'vue'; import { ref, reactive, unref, watch } from 'vue';
import {useI18n} from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {useRouter} from 'vue-router'; import { useRouter } from 'vue-router';
import {getTenantId} from '@/utils/domain'; import { getTenantId } from '@/utils/domain';
import {Form, message} from 'ant-design-vue'; import { Form, message } from 'ant-design-vue';
import { AimOutlined } from '@ant-design/icons-vue'; import { AimOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import {goHomeRoute, cleanPageTabs} from '@/utils/page-tab-util'; import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
import {loginBySms, getCaptcha} from '@/api/passport/login'; import { loginBySms, getCaptcha } from '@/api/passport/login';
import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types'; import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
import {TEMPLATE_ID, THEME_STORE_NAME} from '@/config/setting'; import { TEMPLATE_ID, THEME_STORE_NAME } from '@/config/setting';
import {sendSmsCaptcha} from '@/api/passport/login'; import { sendSmsCaptcha } from '@/api/passport/login';
import useFormData from '@/utils/use-form-data'; import useFormData from '@/utils/use-form-data';
import {FormInstance} from 'ant-design-vue/es/form'; import { FormInstance } from 'ant-design-vue/es/form';
import {configWebsiteField} from '@/api/cms/cmsWebsiteField'; import { configWebsiteField } from '@/api/cms/cmsWebsiteField';
import {Config} from '@/api/cms/cmsWebsiteField/model'; import { Config } from '@/api/cms/cmsWebsiteField/model';
import {phoneReg} from 'ele-admin-pro'; import { phoneReg } from 'ele-admin-pro';
import {push} from "@/utils/common"; import { push } from '@/utils/common';
import {useThemeStore} from "@/store/modules/theme"; import { useThemeStore } from '@/store/modules/theme';
import {CmsWebsite} from "@/api/cms/cmsWebsite/model"; import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
import {createCmsWebSite} from "@/api/layout"; import { createCmsWebSite } from '@/api/layout';
const useForm = Form.useForm; const useForm = Form.useForm;
const {currentRoute} = useRouter(); const { currentRoute } = useRouter();
const {t} = useI18n(); const { t } = useI18n();
const { locale } = useI18n(); const { locale } = useI18n();
// 登录框方向, 0 居中, 1 居右, 2 居左 // 登录框方向, 0 居中, 1 居右, 2 居左
const direction = ref(0); const direction = ref(0);
// 加载状态 // 加载状态
const loading = ref(false); const loading = ref(false);
// 是否显示tenantId填写输入框 // 是否显示tenantId填写输入框
const showTenantId = ref(true); const showTenantId = ref(true);
const loginType = ref('account'); const loginType = ref('account');
const config = ref<Config>(); const config = ref<Config>();
// 是否开启响应式布局 // 是否开启响应式布局
const themeStore = useThemeStore(); const themeStore = useThemeStore();
const { darkMode } = storeToRefs(themeStore); const { darkMode } = storeToRefs(themeStore);
// 配置信息 // 配置信息
const {form} = useFormData<CmsWebsite>({ const { form } = useFormData<CmsWebsite>({
// 站点ID // 站点ID
websiteId: undefined, websiteId: undefined,
// 网站名称 // 网站名称
websiteName: undefined, websiteName: undefined,
@@ -364,35 +364,35 @@ const {form} = useFormData<CmsWebsite>({
// 是否管理员 // 是否管理员
isSuperAdmin: true, isSuperAdmin: true,
// 企业名称 // 企业名称
companyName: undefined, companyName: undefined
}); });
// 验证码 base64 数据 // 验证码 base64 数据
const captcha = ref(''); const captcha = ref('');
// 验证码内容, 实际项目去掉 // 验证码内容, 实际项目去掉
const text = ref(''); const text = ref('');
// 是否显示图形验证码弹窗 // 是否显示图形验证码弹窗
const visible = ref(false); const visible = ref(false);
// 图形验证码 // 图形验证码
const imgCode = ref(''); const imgCode = ref('');
// 发送验证码按钮loading // 发送验证码按钮loading
const codeLoading = ref(false); const codeLoading = ref(false);
// 验证码倒计时时间 // 验证码倒计时时间
const countdownTime = ref(0); const countdownTime = ref(0);
// 验证码倒计时定时器 // 验证码倒计时定时器
let countdownTimer: number | null = null; let countdownTimer: number | null = null;
// 是否显示地图选择弹窗 // 是否显示地图选择弹窗
const showMap = ref(false); const showMap = ref(false);
// 表格选中数据 // 表格选中数据
const formRef = ref<FormInstance | null>(null); const formRef = ref<FormInstance | null>(null);
// 表单验证规则 // 表单验证规则
const rules = reactive({ const rules = reactive({
companyName: [ companyName: [
{ {
required: true, required: true,
message: '请输入店铺名称', message: '请输入品牌名称',
type: 'string' type: 'string'
} }
], ],
@@ -440,10 +440,10 @@ const rules = reactive({
type: 'string' type: 'string'
} }
] ]
}); });
/* 显示发送短信验证码弹窗 */ /* 显示发送短信验证码弹窗 */
const openImgCodeModal = () => { const openImgCodeModal = () => {
if (!form.phone) { if (!form.phone) {
message.error('请输入手机号码'); message.error('请输入手机号码');
return; return;
@@ -451,10 +451,10 @@ const openImgCodeModal = () => {
imgCode.value = ''; imgCode.value = '';
changeCaptcha(); changeCaptcha();
visible.value = true; visible.value = true;
}; };
/* 发送短信验证码 */ /* 发送短信验证码 */
const sendCode = () => { const sendCode = () => {
if (!imgCode.value) { if (!imgCode.value) {
message.error('请输入图形验证码'); message.error('请输入图形验证码');
return; return;
@@ -464,7 +464,7 @@ const sendCode = () => {
return; return;
} }
codeLoading.value = true; codeLoading.value = true;
sendSmsCaptcha({phone: form.phone}).then(() => { sendSmsCaptcha({ phone: form.phone }).then(() => {
message.success('短信验证码发送成功, 请注意查收!'); message.success('短信验证码发送成功, 请注意查收!');
visible.value = false; visible.value = false;
codeLoading.value = false; codeLoading.value = false;
@@ -478,29 +478,29 @@ const sendCode = () => {
countdownTime.value--; countdownTime.value--;
}, 1000); }, 1000);
}); });
}; };
const {resetFields} = useForm(form, rules); const { resetFields } = useForm(form, rules);
const goHome = () => { const goHome = () => {
const {query} = unref(currentRoute); const { query } = unref(currentRoute);
goHomeRoute(query.from as string); goHomeRoute(query.from as string);
localStorage.removeItem(THEME_STORE_NAME); localStorage.removeItem(THEME_STORE_NAME);
}; };
const onIndustry = (item: any) => { const onIndustry = (item: any) => {
form.industryParent = item[0]; form.industryParent = item[0];
form.industryChild = item[1]; form.industryChild = item[1];
form.category = `${item[0]}/${item[1]}`; form.category = `${item[0]}/${item[1]}`;
}; };
/* 打开位置选择 */ /* 打开位置选择 */
const openMapPicker = () => { const openMapPicker = () => {
showMap.value = true; showMap.value = true;
}; };
/* 地图选择后回调 */ /* 地图选择后回调 */
const onDone = (location: CenterPoint) => { const onDone = (location: CenterPoint) => {
if (location) { if (location) {
console.log(location); console.log(location);
form.companyName = `${location.name}`; form.companyName = `${location.name}`;
@@ -512,9 +512,9 @@ const onDone = (location: CenterPoint) => {
form.latitude = `${location.lat}`; form.latitude = `${location.lat}`;
} }
showMap.value = false; showMap.value = false;
}; };
const onLoginBySms = () => { const onLoginBySms = () => {
if (!formRef.value) { if (!formRef.value) {
return; return;
} }
@@ -536,12 +536,11 @@ const onLoginBySms = () => {
loading.value = false; loading.value = false;
}); });
}) })
.catch(() => { .catch(() => {});
}); };
};
/* 保存编辑 */ /* 保存编辑 */
const submit = () => { const submit = () => {
if (!formRef.value) { if (!formRef.value) {
return; return;
} }
@@ -560,19 +559,18 @@ const submit = () => {
resetFields(); resetFields();
cleanPageTabs(); cleanPageTabs();
goHome(); goHome();
}, 2000) }, 2000);
}) })
.catch(() => { .catch(() => {
message.error('该手机号码已经被注册'); message.error('该手机号码已经被注册');
loading.value = false; loading.value = false;
}); });
}) })
.catch(() => { .catch(() => {});
}); };
};
/* 获取图形验证码 */ /* 获取图形验证码 */
const changeCaptcha = () => { const changeCaptcha = () => {
configWebsiteField({ configWebsiteField({
lang: locale.value lang: locale.value
}).then((data) => { }).then((data) => {
@@ -591,12 +589,12 @@ const changeCaptcha = () => {
.catch((e) => { .catch((e) => {
message.error(e.message); message.error(e.message);
}); });
}; };
// 首次加载 // 首次加载
changeCaptcha(); changeCaptcha();
watch( watch(
currentRoute, currentRoute,
() => { () => {
// 解析二级域名获取租户ID // 解析二级域名获取租户ID
@@ -611,13 +609,13 @@ watch(
showTenantId.value = false; showTenantId.value = false;
} }
}, },
{immediate: true} { immediate: true }
); );
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/* 背景 */ /* 背景 */
.login-wrapper { .login-wrapper {
padding: 48px 16px 0 16px; padding: 48px 16px 0 16px;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@@ -636,19 +634,19 @@ watch(
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
} }
.company-name { .company-name {
position: absolute; position: absolute;
top: 17%; top: 17%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 24px; font-size: 24px;
color: #ffffff; color: #ffffff;
} }
/* 卡片 */ /* 卡片 */
.login-form { .login-form {
width: 450px; width: 450px;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
@@ -677,18 +675,18 @@ watch(
color: #007dff; color: #007dff;
} }
} }
} }
.login-form-right .login-form { .login-form-right .login-form {
margin: 0 15% 0 auto; margin: 0 15% 0 auto;
} }
.login-form-left .login-form { .login-form-left .login-form {
margin: 0 auto 0 15%; margin: 0 auto 0 15%;
} }
/* 验证码 */ /* 验证码 */
.login-input-group { .login-input-group {
display: flex; display: flex;
align-items: center; align-items: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -708,34 +706,34 @@ watch(
height: 100%; height: 100%;
} }
} }
} }
/* 第三方登录图标 */ /* 第三方登录图标 */
.login-oauth-icon { .login-oauth-icon {
color: #fff; color: #fff;
padding: 5px; padding: 5px;
margin: 0 12px; margin: 0 12px;
font-size: 18px; font-size: 18px;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
} }
.work-icon { .work-icon {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
/* 底部版权 */ /* 底部版权 */
.login-copyright { .login-copyright {
color: #eee; color: #eee;
text-align: center; text-align: center;
padding: 48px 0 22px 0; padding: 48px 0 22px 0;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
/* 响应式 */ /* 响应式 */
@media screen and (min-height: 640px) { @media screen and (min-height: 640px) {
.login-wrapper { .login-wrapper {
padding-top: 0; padding-top: 0;
} }
@@ -767,9 +765,9 @@ watch(
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.login-form-right .login-form, .login-form-right .login-form,
.login-form-left .login-form { .login-form-left .login-form {
left: 50%; left: 50%;
@@ -778,13 +776,13 @@ watch(
margin-right: auto; margin-right: auto;
transform: translateX(-50%); transform: translateX(-50%);
} }
} }
.wwLogin_qrcode_head { .wwLogin_qrcode_head {
padding: 10px 0 40px 0 !important; padding: 10px 0 40px 0 !important;
} }
.logo-login { .logo-login {
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 20px; left: 20px;
@@ -803,5 +801,5 @@ watch(
color: #ffffff; color: #ffffff;
font-size: 20px; font-size: 20px;
} }
} }
</style> </style>

0
src/views/developer/components/CodeInfo.vue → src/views/system/developer/components/CodeInfo.vue
View File

0
src/views/developer/components/ParamInfo.vue → src/views/system/developer/components/ParamInfo.vue
View File

0
src/views/developer/components/ServerInfo.vue → src/views/system/developer/components/ServerInfo.vue
View File

0
src/views/developer/components/TenantInfo.vue → src/views/system/developer/components/TenantInfo.vue
View File

0
src/views/developer/index.vue → src/views/system/developer/index.vue
View File