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

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

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