1
This commit is contained in:
@@ -0,0 +1,735 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'login-wrapper',
|
||||
['', 'login-form-right', 'login-form-left'][direction]
|
||||
]"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + config?.loginBgImg + ')'
|
||||
}"
|
||||
>
|
||||
<div class="logo-login" v-if="config?.siteName">
|
||||
<img
|
||||
:src="
|
||||
config.sysLogo ||
|
||||
'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg'
|
||||
"
|
||||
class="logo"
|
||||
/>
|
||||
<h4>{{ config.siteName }}</h4>
|
||||
</div>
|
||||
<div class="company-name" v-if="config?.loginTitle"
|
||||
>{{ config?.loginTitle }}
|
||||
</div>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="login-form ele-bg-white"
|
||||
>
|
||||
<div class="login-title flex justify-center items-center px-12">
|
||||
<h4 class="title-btn">邀请注册</h4>
|
||||
</div>
|
||||
<template v-if="loginType === 'account'">
|
||||
<!-- 邀请信息显示 -->
|
||||
<div
|
||||
v-if="inviterId"
|
||||
style="
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
border-radius: 4px;
|
||||
"
|
||||
>
|
||||
<div style="color: #52c41a; font-size: 14px">
|
||||
<check-circle-outlined style="margin-right: 4px" />
|
||||
您正在通过邀请链接注册，注册成功后将自动建立推荐关系
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
:placeholder="`请输入手机号码`"
|
||||
>
|
||||
<template #addonBefore> +86</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
size="large"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
@pressEnter="submit"
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</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-checkbox>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:disabled="!form.remember"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
注册
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="loginType === 'sms'">
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
:placeholder="`请输入手机号码`"
|
||||
>
|
||||
<template #addonBefore> +86</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
size="large"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
@pressEnter="submit"
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
{{ loading ? t('login.loading') : t('login.login') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
<div class="login-copyright">
|
||||
<a-space>
|
||||
<span>© {{ new Date().getFullYear() }}</span>
|
||||
<span>{{ config?.copyright || 'websoft.top Inc.' }}</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
v-model:value="imgCode"
|
||||
:maxlength="5"
|
||||
size="large"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
@pressEnter="sendCode"
|
||||
/>
|
||||
<a-button class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
</div>
|
||||
<!-- 地图位置选择弹窗 -->
|
||||
<ele-map-picker
|
||||
:need-city="true"
|
||||
:dark-mode="darkMode"
|
||||
v-model:visible="showMap"
|
||||
:center="[108.374959, 22.767024]"
|
||||
:search-type="1"
|
||||
:zoom="12"
|
||||
@done="onDone"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, unref, watch, onMounted, onBeforeUnmount } 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 { CheckCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
|
||||
import {
|
||||
getCaptcha,
|
||||
loginBySms,
|
||||
registerUser,
|
||||
sendSmsCaptcha
|
||||
} from '@/api/passport/login';
|
||||
import { THEME_STORE_NAME } from '@/config/setting';
|
||||
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 { useThemeStore } from '@/store/modules/theme';
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { addShopDealerReferee } from '@/api/shop/shopDealerReferee';
|
||||
import { getToken } from '@/utils/token-util';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const router = useRouter();
|
||||
const { currentRoute } = router;
|
||||
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);
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 配置信息
|
||||
const { form } = useFormData<User>({
|
||||
phone: '',
|
||||
code: '',
|
||||
remember: false, // 这里作为“同意协议”的勾选状态使用
|
||||
isAdmin: true,
|
||||
dealerId: 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);
|
||||
// 邀请人ID
|
||||
const inviterId = ref<number>();
|
||||
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 表单验证规则（只保留本页面实际填写的字段）
|
||||
const rules = reactive({
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '手机号格式不正确',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.code'),
|
||||
type: 'string'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
if (text.value !== imgCode.value.toLowerCase()) {
|
||||
message.error('图形验证码不正确');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone })
|
||||
.then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((e: any) => {
|
||||
message.error(e?.message || '短信验证码发送失败');
|
||||
})
|
||||
.finally(() => {
|
||||
codeLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
const goHome = () => {
|
||||
const { query } = unref(currentRoute);
|
||||
goHomeRoute(query.from as string);
|
||||
localStorage.removeItem(THEME_STORE_NAME);
|
||||
};
|
||||
|
||||
// 建立邀请推荐关系（需要登录态；失败不影响主流程）
|
||||
let bindInviterDone = false;
|
||||
let bindInviterInFlight: Promise<unknown> | null = null;
|
||||
const tryBindInviteRelation = async () => {
|
||||
if (bindInviterDone) {
|
||||
return;
|
||||
}
|
||||
if (bindInviterInFlight) {
|
||||
return bindInviterInFlight;
|
||||
}
|
||||
if (!inviterId.value) {
|
||||
return;
|
||||
}
|
||||
if (!getToken()) {
|
||||
return;
|
||||
}
|
||||
const tenantId =
|
||||
Number(localStorage.getItem('TenantId')) ||
|
||||
Number(userStore.info?.tenantId) ||
|
||||
Number(form.tenantId) ||
|
||||
undefined;
|
||||
const userId =
|
||||
Number(localStorage.getItem('UserId')) ||
|
||||
Number(userStore.info?.userId) ||
|
||||
0;
|
||||
if (!userId) {
|
||||
return;
|
||||
}
|
||||
bindInviterInFlight = addShopDealerReferee({
|
||||
dealerId: inviterId.value,
|
||||
userId,
|
||||
level: 1,
|
||||
tenantId
|
||||
}).then(
|
||||
(res) => {
|
||||
bindInviterDone = true;
|
||||
return res;
|
||||
},
|
||||
(e) => {
|
||||
// Allow retry if the add failed (e.g. user info not ready yet).
|
||||
bindInviterDone = false;
|
||||
throw e;
|
||||
}
|
||||
);
|
||||
try {
|
||||
await bindInviterInFlight;
|
||||
} finally {
|
||||
bindInviterInFlight = null;
|
||||
}
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const submit = async () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
// 通过短信验证码完成注册；inviter 作为推荐人ID传给后端
|
||||
const msg = await registerUser({
|
||||
tenantId: form.tenantId,
|
||||
phone: form.phone,
|
||||
username: form.phone,
|
||||
code: form.code?.trim(),
|
||||
// 后端若用 Java boolean 命名为 `isAdmin`，序列化/反序列化可能会被映射成 `admin`；
|
||||
// 这里双写以兼容不同字段名，避免后端拿到 null 导致 NPE。
|
||||
isAdmin: true,
|
||||
...({ admin: true } as any),
|
||||
dealerId: inviterId.value
|
||||
});
|
||||
|
||||
// 注册成功后自动登录，再建立绑定关系（避免未登录时后端取 role 为空）
|
||||
await loginBySms({
|
||||
tenantId: form.tenantId,
|
||||
phone: form.phone,
|
||||
code: form.code?.trim(),
|
||||
remember: !!form.remember
|
||||
});
|
||||
|
||||
// 确保拿到 userId/tenantId（部分后端登录接口可能不返回 user 字段）
|
||||
await userStore.fetchUserInfo().catch(() => void 0);
|
||||
|
||||
// 建立绑定关系（失败不影响主流程）
|
||||
try {
|
||||
await tryBindInviteRelation();
|
||||
} catch (e: any) {
|
||||
message.warning(
|
||||
`注册成功，但建立推荐关系失败：${e?.message || '未知错误'}`
|
||||
);
|
||||
}
|
||||
|
||||
message.success(msg);
|
||||
resetFields();
|
||||
cleanPageTabs();
|
||||
goHome();
|
||||
} catch (e: any) {
|
||||
message.error(e?.message || '注册失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
configWebsiteField({
|
||||
lang: locale.value
|
||||
}).then((data) => {
|
||||
config.value = data;
|
||||
});
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
// resetFields();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 首次加载
|
||||
changeCaptcha();
|
||||
|
||||
// 检查URL参数中的邀请人ID
|
||||
onMounted(() => {
|
||||
// 优先从链接参数中拿 tenantId（新用户未登录时，用于后端识别租户/初始化角色）
|
||||
const tenantIdParam = (unref(currentRoute).query.tenantId ??
|
||||
new URLSearchParams(window.location.search).get('tenantId')) as
|
||||
| string
|
||||
| undefined;
|
||||
if (tenantIdParam != null && tenantIdParam !== '') {
|
||||
const tid = Number.parseInt(String(tenantIdParam).trim(), 10);
|
||||
if (!Number.isNaN(tid) && tid > 0) {
|
||||
form.tenantId = tid;
|
||||
// 让 request 拦截器也能带上 TenantId
|
||||
localStorage.setItem('TenantId', String(tid));
|
||||
showTenantId.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const inviterParam = (unref(currentRoute).query.inviter ??
|
||||
new URLSearchParams(window.location.search).get('inviter')) as
|
||||
| string
|
||||
| undefined;
|
||||
if (inviterParam != null && inviterParam !== '') {
|
||||
// 容错：有些场景会把链接后面带上逗号/空格等（例如复制文本），这里提取首段数字
|
||||
const raw = String(inviterParam).trim();
|
||||
const id = Number.parseInt(raw.match(/\d+/)?.[0] || '', 10);
|
||||
if (!Number.isNaN(id) && id > 0) {
|
||||
inviterId.value = id;
|
||||
form.dealerId = id;
|
||||
}
|
||||
}
|
||||
|
||||
// 已登录用户通过邀请链接访问时，补绑一次推荐关系
|
||||
tryBindInviteRelation();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (countdownTimer) {
|
||||
clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
});
|
||||
|
||||
// 地图选择回调（本页面不使用地图能力，避免模板引用报错）
|
||||
const onDone = () => {
|
||||
showMap.value = false;
|
||||
};
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
() => {
|
||||
// 解析二级域名获取租户ID
|
||||
const tenantId = getTenantId();
|
||||
if (tenantId) {
|
||||
form.tenantId = Number(tenantId);
|
||||
showTenantId.value = false;
|
||||
}
|
||||
const tid = localStorage.getItem('TenantId');
|
||||
if (tid) {
|
||||
form.tenantId = Number(tid);
|
||||
showTenantId.value = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 背景 */
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/bg-2.jpeg');
|
||||
background-color: var(--grey-5);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.company-name {
|
||||
position: absolute;
|
||||
top: 17%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.login-form {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 50px;
|
||||
|
||||
.active {
|
||||
color: #007dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 第三方登录图标 */
|
||||
.login-oauth-icon {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
margin: 0 12px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.work-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
transform: translateX(0);
|
||||
margin: -230px auto auto auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
right: auto;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.wwLogin_qrcode_head {
|
||||
padding: 10px 0 40px 0 !important;
|
||||
}
|
||||
|
||||
.logo-login {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: 6px;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<a-form
|
||||
class="login-form ele-bg-white"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
>
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
size="large"
|
||||
allow-clear
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
disabled
|
||||
placeholder="请输入手机号码"
|
||||
>
|
||||
<template #addonBefore> +86 </template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
size="large"
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
/>
|
||||
<a-button
|
||||
size="large"
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
size="large"
|
||||
v-model:value="imgCode"
|
||||
:maxlength="5"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
@pressEnter="sendCode"
|
||||
/>
|
||||
<a-button size="large" class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import type { StepForm } from '../model';
|
||||
import { assignObject, phoneReg } from 'ele-admin-pro';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
getCaptcha,
|
||||
sendSmsCaptcha,
|
||||
registerUser
|
||||
} from '@/api/passport/login';
|
||||
import { User } from '@/api/system/user/model';
|
||||
|
||||
const props = defineProps<{
|
||||
// 修改回显的数据
|
||||
data?: StepForm | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: StepForm): void;
|
||||
(e: 'back'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示图形验证码弹窗
|
||||
const visible = ref(false);
|
||||
// 图形验证码
|
||||
const imgCode = ref('');
|
||||
// 发送验证码按钮loading
|
||||
const codeLoading = ref(false);
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 图形验证码地址
|
||||
const captcha = ref('');
|
||||
const text = ref('');
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
if (text.value !== imgCode.value) {
|
||||
message.error('图形验证码不正确');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone, key: imgCode.value })
|
||||
.then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 60;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((e) => {
|
||||
codeLoading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<User>({
|
||||
type: 10,
|
||||
phone: '',
|
||||
username: '',
|
||||
nickname: '',
|
||||
roles: [],
|
||||
companyName: '',
|
||||
organizationName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写短信验证码',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
?.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// roleId 6开发者 10商户
|
||||
const addData = {
|
||||
...form,
|
||||
username: props.data?.username,
|
||||
password: props.data?.password,
|
||||
phone: props.data?.phone,
|
||||
nickname: props.data?.nickname,
|
||||
roles: [{ roleId: form.type }]
|
||||
};
|
||||
registerUser(addData)
|
||||
.then((data) => {
|
||||
loading.value = false;
|
||||
message.success('注册成功');
|
||||
form.tenantId = Number(data) || 0;
|
||||
emit('done', form);
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
emit('back');
|
||||
};
|
||||
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<a-form
|
||||
class="login-form ele-bg-white"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
>
|
||||
<a-form-item name="companyName" v-if="form.type === 10">
|
||||
<a-input
|
||||
size="large"
|
||||
placeholder="请输入应用名称"
|
||||
v-model:value="form.companyName"
|
||||
:maxlength="24"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="email">
|
||||
<a-input
|
||||
size="large"
|
||||
placeholder="请输入电子邮箱地址"
|
||||
v-model:value="form.email"
|
||||
:maxlength="24"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
size="large"
|
||||
placeholder="请输入手机号码"
|
||||
v-model:value="form.phone"
|
||||
:maxlength="11"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="password">
|
||||
<a-input
|
||||
size="large"
|
||||
allow-clear
|
||||
:maxlength="24"
|
||||
type="password"
|
||||
v-model:value="form.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="password2">
|
||||
<a-input
|
||||
size="large"
|
||||
allow-clear
|
||||
:maxlength="24"
|
||||
type="password"
|
||||
v-model:value="form.password2"
|
||||
placeholder="请输入确认密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="昵称" name="nickname">-->
|
||||
<!-- <a-input-->
|
||||
<!-- placeholder="请输入昵称"-->
|
||||
<!-- v-model:value="form.nickname"-->
|
||||
<!-- :maxlength="24"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label=" " name="register" v-if="form.type === 1">-->
|
||||
<!-- 我已阅读并同意 <a>用户协议</a> 和 <a>隐私权政策</a>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import type { StepForm } from '../model';
|
||||
import { emailReg, phoneReg } from 'ele-admin-pro/es';
|
||||
import type { RuleObject } from 'ant-design-vue/es/form';
|
||||
import { createCode } from '@/utils/common';
|
||||
import { checkExistence } from '@/api/system/company';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: StepForm): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<User>({
|
||||
type: 10,
|
||||
phone: '',
|
||||
username: createCode(),
|
||||
nickname: '',
|
||||
organizationName: '',
|
||||
companyName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请填写应用名称');
|
||||
}
|
||||
checkExistence('shortName', value)
|
||||
.then(() => {
|
||||
if (form.type === 10) {
|
||||
reject('该名称已经存在');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择账号类型',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择账号类型',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
pattern: emailReg,
|
||||
message: '邮箱格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入邮箱地址');
|
||||
}
|
||||
checkExistence('email', value)
|
||||
.then(() => {
|
||||
reject('该邮箱已经存在');
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入手机号码');
|
||||
}
|
||||
checkExistence('phone', value)
|
||||
.then(() => {
|
||||
reject('该手机号码已经存在');
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: async (_rule: Rule, value: string) => {
|
||||
if (/^[\S]{8,32}$/.test(value)) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('密码必须为8-32位非空白字符');
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password2: [
|
||||
{
|
||||
required: true,
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请再次输入新密码');
|
||||
}
|
||||
if (value !== form.password) {
|
||||
return Promise.reject('两次输入密码不一致');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 步骤一提交 */
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
emit('done', form);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
} else {
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div style="padding-bottom: 40px">
|
||||
<a-result :title="`注册成功`" status="success" :sub-title="subTitle">
|
||||
<div class="desc">
|
||||
<p> 租户ID：{{ data.tenantId }} </p>
|
||||
<p> 名称：{{ data.companyName }} </p>
|
||||
<p> 账号：{{ data.phone }} </p>
|
||||
<p> 密码：{{ data.password }} </p>
|
||||
</div>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { StepForm } from '../model';
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps<{
|
||||
// 修改回显的数据
|
||||
data?: StepForm | null;
|
||||
}>();
|
||||
|
||||
const subTitle = ref('注册资料已发到您预留的邮箱地址');
|
||||
</script>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<step-edit v-model:visible="showEdit" v-if="active === 0" @done="onDone" />
|
||||
<step-confirm
|
||||
v-if="active === 1"
|
||||
:data="form"
|
||||
@done="onNext"
|
||||
@back="onBack"
|
||||
/>
|
||||
<step-success v-if="active === 2" :data="form" @back="onBack" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import StepEdit from './components/step-edit.vue';
|
||||
import StepConfirm from './components/step-confirm.vue';
|
||||
import StepSuccess from './components/step-success.vue';
|
||||
import type { StepForm } from './model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
// 选中步骤
|
||||
const active = ref(0);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 登录框方向, 0 居中, 1 居右, 2 居左
|
||||
const direction = ref(0);
|
||||
const form = reactive<StepForm>({});
|
||||
|
||||
//
|
||||
const onDone = (data: StepForm) => {
|
||||
Object.assign(form, data);
|
||||
active.value = 1;
|
||||
};
|
||||
|
||||
//
|
||||
const onNext = (data: StepForm) => {
|
||||
Object.assign(form, data);
|
||||
active.value = 2;
|
||||
};
|
||||
|
||||
//
|
||||
const onBack = () => {
|
||||
active.value = 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'FormStep'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.account-type {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.account-desc {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
export interface StepForm {
|
||||
type?: number;
|
||||
apply?: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
password2?: string;
|
||||
phone?: string;
|
||||
code?: string;
|
||||
nickname?: string;
|
||||
companyName?: string;
|
||||
tenantId?: number;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div id="ww_login"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as ww from '@wecom/jssdk';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const wwLoginInstance = ref(null);
|
||||
|
||||
const wwLogin = () => {
|
||||
wwLoginInstance.value = ww.createWWLoginPanel({
|
||||
el: '#ww_login',
|
||||
params: {
|
||||
login_type: 'ServiceApp',
|
||||
appid: 'wx5400ab7aebf0f3c3',
|
||||
agentid: '10000xx',
|
||||
redirect_uri: 'https://oa.gxwebsoft.com/wx-work-login',
|
||||
state: 'loginState',
|
||||
redirect_type: 'callback',
|
||||
panel_size: 'small'
|
||||
},
|
||||
onCheckWeComLogin({ isWeComLogin }) {
|
||||
console.log('1111');
|
||||
console.log(isWeComLogin);
|
||||
},
|
||||
onLoginSuccess({ code }) {
|
||||
console.log('222');
|
||||
console.log({ code });
|
||||
},
|
||||
onLoginFail(err) {
|
||||
console.log('333');
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
wwLogin();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,832 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'login-wrapper',
|
||||
['', 'login-form-right', 'login-form-left'][direction]
|
||||
]"
|
||||
:style="{
|
||||
backgroundImage: 'url(https://oss.wsdns.cn/20250105/314d2a3da10048b09ef0f0464fdacbff.jpg)'
|
||||
}"
|
||||
>
|
||||
<div class="logo-login" v-if="config?.siteName">
|
||||
<img
|
||||
:src="
|
||||
config.siteLogo
|
||||
"
|
||||
class="logo"
|
||||
/>
|
||||
<h4>{{ config.siteName }}</h4>
|
||||
</div>
|
||||
<div class="company-name" v-if="config?.loginTitle"
|
||||
>{{ config?.loginTitle }}
|
||||
</div>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="login-form ele-bg-white"
|
||||
>
|
||||
<div class="login-title flex justify-center items-center px-12">
|
||||
<template v-if="loginType === 'scan'">
|
||||
<h4 class="title-btn">扫码登录</h4>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h4
|
||||
class="title-btn"
|
||||
:class="loginType === 'sms' ? 'active' : ''"
|
||||
@click="onLoginType('sms')"
|
||||
>手机号登录</h4
|
||||
>
|
||||
<a-divider type="vertical" style="height: 20px" />
|
||||
<h4
|
||||
class="title-btn"
|
||||
:class="loginType === 'account' ? 'active' : ''"
|
||||
@click="onLoginType('account')"
|
||||
>账号登录</h4
|
||||
>
|
||||
</template>
|
||||
</div>
|
||||
<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=""
|
||||
/>
|
||||
</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>
|
||||
<!-- <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="username">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
v-model:value="form.userId"
|
||||
:placeholder="`用户ID`"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="password">
|
||||
<a-input-password
|
||||
size="large"
|
||||
v-model:value="form.password"
|
||||
placeholder="登录密码"
|
||||
@pressEnter="submit"
|
||||
>
|
||||
<template #prefix>
|
||||
<lock-outlined />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
type="text"
|
||||
:maxlength="5"
|
||||
v-model:value="form.code"
|
||||
placeholder="验证码"
|
||||
@pressEnter="submit"
|
||||
>
|
||||
<template #prefix>
|
||||
<safety-certificate-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button class="login-captcha" @click="changeCaptcha">
|
||||
<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
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
{{ loading ? t('login.loading') : t('login.login') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="loginType === 'sms'">
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
:placeholder="`请输入手机号码`"
|
||||
>
|
||||
<template #addonBefore> +86</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="smsCode">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.smsCode"
|
||||
size="large"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
@pressEnter="onLoginBySms"
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLoginBySms"
|
||||
>
|
||||
{{ loading ? t('login.loading') : t('login.login') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="loginType == 'scan'">
|
||||
<QrLogin
|
||||
@loginSuccess="onQrLoginSuccess"
|
||||
@loginError="onQrLoginError"
|
||||
/>
|
||||
</template>
|
||||
</a-form>
|
||||
<div class="login-copyright">
|
||||
<a-space>
|
||||
<span>© {{ new Date().getFullYear() }}</span>
|
||||
<span>{{ config?.copyright || 'websoft.top Inc.' }}</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
v-model:value="imgCode"
|
||||
:maxlength="5"
|
||||
size="large"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
@pressEnter="sendCode"
|
||||
/>
|
||||
<a-button class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
|
||||
<!-- 多账户选择登录 -->
|
||||
<a-modal
|
||||
:width="500"
|
||||
:footer="null"
|
||||
title="选择账号登录"
|
||||
v-model:visible="showSelectLoginUser"
|
||||
>
|
||||
<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}`">
|
||||
<template #title>
|
||||
{{ item.tenantName }}
|
||||
</template>
|
||||
<template #avatar>
|
||||
<a-avatar :src="item.avatar" />
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<template #actions>
|
||||
<RightOutlined />
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</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 {
|
||||
LockOutlined,
|
||||
UserOutlined,
|
||||
QrcodeOutlined,
|
||||
MobileOutlined,
|
||||
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';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const routerInstance = useRouter();
|
||||
const { currentRoute } = routerInstance;
|
||||
const { t } = useI18n();
|
||||
const { locale } = useI18n();
|
||||
|
||||
// 路由导航函数
|
||||
const push = (path: string) => {
|
||||
routerInstance.push(path);
|
||||
};
|
||||
|
||||
// 登录框方向, 0 居中, 1 居右, 2 居左
|
||||
const direction = ref(0);
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
// 是否显示tenantId填写输入框
|
||||
const loginType = ref('sms');
|
||||
|
||||
// 默认配置
|
||||
const defaultConfig: Config = {
|
||||
siteName: '桂礼序',
|
||||
siteLogo: 'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg',
|
||||
domain: '',
|
||||
icpNo: '',
|
||||
copyright: '',
|
||||
loginBgImg: '',
|
||||
address: '',
|
||||
tel: '',
|
||||
kefu2: '',
|
||||
kefu1: '',
|
||||
email: '',
|
||||
loginTitle: '',
|
||||
sysLogo: ''
|
||||
};
|
||||
|
||||
// 配置信息（使用默认值初始化）
|
||||
const config = ref<Config>({ ...defaultConfig });
|
||||
|
||||
// 加载网站配置
|
||||
const loadWebsiteConfig = async () => {
|
||||
try {
|
||||
const data = await configWebsiteField({ lang: locale.value });
|
||||
if (data) {
|
||||
// 用接口返回的数据覆盖默认值
|
||||
config.value = {
|
||||
...defaultConfig,
|
||||
...data,
|
||||
};
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.warn('获取网站配置失败，使用默认配置:', e.message);
|
||||
}
|
||||
};
|
||||
const { form } = useFormData<User>({
|
||||
userId: undefined,
|
||||
username: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
code: '',
|
||||
smsCode: '',
|
||||
tenantId: undefined,
|
||||
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();
|
||||
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
userId: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.username'),
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '手机号格式不正确',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.password'),
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.code'),
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
smsCode: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.code'),
|
||||
type: 'string'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
if (text.value !== imgCode.value.toLowerCase()) {
|
||||
message.error('图形验证码不正确');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone }).then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
// const { clearValidate, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
const goHome = () => {
|
||||
const { query } = unref(currentRoute);
|
||||
goHomeRoute(query.from as string);
|
||||
localStorage.removeItem(THEME_STORE_NAME);
|
||||
};
|
||||
|
||||
const onLoginBySms = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
form.code = form.smsCode?.toLowerCase();
|
||||
loginBySms(form)
|
||||
.then((msg) => {
|
||||
if (msg == '请选择登录用户') {
|
||||
showSelectLoginUser.value = true;
|
||||
listAdminsByPhoneAll({
|
||||
phone: form.phone,
|
||||
templateId: TEMPLATE_ID
|
||||
}).then((data) => {
|
||||
admins.value = data;
|
||||
});
|
||||
return false;
|
||||
} else {
|
||||
message.success(msg);
|
||||
loading.value = false;
|
||||
resetFields();
|
||||
cleanPageTabs();
|
||||
goHome();
|
||||
}
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
message.error(e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const onSelectUser = (item: User) => {
|
||||
form.tenantId = item.tenantId;
|
||||
onLoginBySms();
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
// if (form.code?.toLowerCase() !== text.value) {
|
||||
// message.error('验证码错误');
|
||||
// changeCaptcha();
|
||||
// return;
|
||||
// }
|
||||
loading.value = true;
|
||||
form.code = form.code?.toLowerCase();
|
||||
form.phone = undefined;
|
||||
login(form)
|
||||
.then((msg) => {
|
||||
if (msg == '请选择登录用户') {
|
||||
showSelectLoginUser.value = true;
|
||||
return false;
|
||||
}
|
||||
// 登录成功
|
||||
message.success(msg);
|
||||
loading.value = false;
|
||||
resetFields();
|
||||
cleanPageTabs();
|
||||
goHome();
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
message.error(e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// const doRegister = () => {
|
||||
// registerUser(form)
|
||||
// .then(() => {
|
||||
// loading.value = false;
|
||||
// message.success('注册成功');
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// loading.value = false;
|
||||
// message.error(e.message);
|
||||
// });
|
||||
// };
|
||||
|
||||
const onLoginType = (text) => {
|
||||
loginType.value = text;
|
||||
};
|
||||
|
||||
const onScan = () => {
|
||||
if (loginType.value == 'scan') {
|
||||
loginType.value = 'sms';
|
||||
} else {
|
||||
loginType.value = 'scan';
|
||||
}
|
||||
};
|
||||
|
||||
/* 二维码登录成功处理 */
|
||||
const onQrLoginSuccess = async (item: QrCodeStatusResponse) => {
|
||||
// 设置token到localStorage或其他存储
|
||||
localStorage.setItem('access_token', item.accessToken || '');
|
||||
message.success('扫码登录成功');
|
||||
if (item) {
|
||||
localStorage.setItem('access_token', `${item.accessToken}`);
|
||||
localStorage.setItem('TenantId', `${item.tenantId}`);
|
||||
cleanPageTabs();
|
||||
goHome();
|
||||
}
|
||||
};
|
||||
|
||||
/* 二维码登录错误处理 */
|
||||
const onQrLoginError = (error: string) => {
|
||||
message.error(error || '扫码登录失败');
|
||||
};
|
||||
|
||||
// const goBack = () => {
|
||||
// openUrl(getDomain());
|
||||
// return;
|
||||
// };
|
||||
|
||||
const loginConnect = () => {
|
||||
// getWxWorkQrConnect().then((result) => {
|
||||
// console.log(result);
|
||||
// qrConnect.value = result;
|
||||
// });
|
||||
};
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
// configWebsiteField({ lang: locale.value }).then((data) => {
|
||||
// config.value = data;
|
||||
// });
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
// resetFields();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 首次加载
|
||||
// loadWebsiteConfig();
|
||||
changeCaptcha();
|
||||
loginConnect();
|
||||
|
||||
watch(
|
||||
router.currentRoute,
|
||||
(data) => {
|
||||
if (data.query?.loginPhone) {
|
||||
form.phone = `${data.query?.loginPhone}`;
|
||||
} else {
|
||||
localStorage.clear();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 背景 */
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/bg-2.jpeg');
|
||||
background-color: var(--grey-5);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.company-name {
|
||||
position: absolute;
|
||||
top: 17%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.login-form {
|
||||
width: 380px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 50px;
|
||||
|
||||
.active {
|
||||
color: #007dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 第三方登录图标 */
|
||||
.login-oauth-icon {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
margin: 0 12px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.work-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
transform: translateX(0);
|
||||
margin: -230px auto auto auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
right: auto;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.wwLogin_qrcode_head {
|
||||
padding: 10px 0 40px 0 !important;
|
||||
}
|
||||
|
||||
.logo-login {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: 6px;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIdBySpm, getTokenBySpm, push } from '@/utils/common';
|
||||
import { setToken } from '@/utils/token-util';
|
||||
// import { message } from 'ant-design-vue';
|
||||
// import {pageOrderGoods} from "@/api/system/orderGoods";
|
||||
|
||||
if (getTokenBySpm()) {
|
||||
setToken(getTokenBySpm(), true);
|
||||
localStorage.setItem('TenantId', String(getIdBySpm(5)));
|
||||
localStorage.setItem('UserId', String(getIdBySpm(6)));
|
||||
// 登录成功
|
||||
push('/');
|
||||
// 是否已购买本产品
|
||||
// pageOrderGoods({ userId: Number(localStorage.getItem('UserId')),orderStatus: 1}).then(res => {
|
||||
// if(res?.count == 0){
|
||||
// message.error('请先安装本应用插件！');
|
||||
// setTimeout(() => {
|
||||
// push('/login')
|
||||
// },1000)
|
||||
// return false;
|
||||
// }
|
||||
// // 登录成功
|
||||
// push('/');
|
||||
// })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,581 @@
|
||||
<template>
|
||||
<div class="merchant-apply-container">
|
||||
<div class="merchant-apply-header">
|
||||
<h1>商家入驻申请</h1>
|
||||
<p>欢迎申请成为平台商家，请填写以下信息</p>
|
||||
</div>
|
||||
|
||||
<a-steps :current="currentStep" style="margin-bottom: 30px">
|
||||
<a-step title="基本信息" />
|
||||
<a-step title="资质信息" />
|
||||
<a-step title="确认提交" />
|
||||
</a-steps>
|
||||
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
class="merchant-apply-form"
|
||||
>
|
||||
<!-- 第一步：基本信息 -->
|
||||
<div v-show="currentStep === 0">
|
||||
<a-card title="基本信息" style="margin-bottom: 20px">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="商户名称" name="merchantName">
|
||||
<a-input
|
||||
v-model:value="form.merchantName"
|
||||
placeholder="请输入商户名称"
|
||||
:maxlength="100"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证件类型" name="idType">
|
||||
<a-select
|
||||
v-model:value="form.idType"
|
||||
placeholder="请选择证件类型"
|
||||
>
|
||||
<a-select-option value="1">营业执照</a-select-option>
|
||||
<a-select-option value="2">统一社会信用代码</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="证件号码" name="merchantCode">
|
||||
<a-input
|
||||
v-model:value="form.merchantCode"
|
||||
placeholder="请输入证件号码"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="商户手机号" name="phone">
|
||||
<a-input
|
||||
v-model:value="form.phone"
|
||||
placeholder="请输入联系人手机号"
|
||||
:maxlength="11"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="商户姓名" name="realName">
|
||||
<a-input
|
||||
v-model:value="form.realName"
|
||||
placeholder="请输入联系人姓名"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="身份证号码" name="idCard">
|
||||
<a-input
|
||||
v-model:value="form.idCard"
|
||||
placeholder="请输入法人身份证号码"
|
||||
:maxlength="18"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="店铺类型" name="shopType">
|
||||
<a-input
|
||||
v-model:value="form.shopType"
|
||||
placeholder="请输入店铺类型"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="商户分类" name="category">
|
||||
<a-input
|
||||
v-model:value="form.category"
|
||||
placeholder="请输入商户所属分类"
|
||||
:maxlength="100"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<!-- 第二步：资质信息 -->
|
||||
<div v-show="currentStep === 1">
|
||||
<a-card title="资质信息" style="margin-bottom: 20px">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="营业执照" name="yyzz">
|
||||
<div class="upload-container">
|
||||
<a-image
|
||||
v-if="form.yyzz"
|
||||
:src="form.yyzz"
|
||||
:width="120"
|
||||
:height="120"
|
||||
style="margin-bottom: 10px"
|
||||
/>
|
||||
<SelectFile
|
||||
:placeholder="`请上传营业执照`"
|
||||
:limit="1"
|
||||
:data="yyzzImages"
|
||||
@done="chooseYyzzImage"
|
||||
@del="onDeleteYyzzImage"
|
||||
/>
|
||||
<p class="upload-tip">请上传清晰的营业执照照片</p>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="身份证正面" name="sfz1">
|
||||
<div class="upload-container">
|
||||
<a-image
|
||||
v-if="form.sfz1"
|
||||
:src="form.sfz1"
|
||||
:width="120"
|
||||
:height="120"
|
||||
style="margin-bottom: 10px"
|
||||
/>
|
||||
<SelectFile
|
||||
:placeholder="`请上传身份证正面`"
|
||||
:limit="1"
|
||||
:data="sfz1Images"
|
||||
@done="chooseSfz1Image"
|
||||
@del="onDeleteSfz1Image"
|
||||
/>
|
||||
<p class="upload-tip">请上传清晰的身份证正面照片</p>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="12">
|
||||
<a-form-item label="身份证反面" name="sfz2">
|
||||
<div class="upload-container">
|
||||
<a-image
|
||||
v-if="form.sfz2"
|
||||
:src="form.sfz2"
|
||||
:width="120"
|
||||
:height="120"
|
||||
style="margin-bottom: 10px"
|
||||
/>
|
||||
<SelectFile
|
||||
:placeholder="`请上传身份证反面`"
|
||||
:limit="1"
|
||||
:data="sfz2Images"
|
||||
@done="chooseSfz2Image"
|
||||
@del="onDeleteSfz2Image"
|
||||
/>
|
||||
<p class="upload-tip">请上传清晰的身份证反面照片</p>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<a-form-item label="资质图片" name="files">
|
||||
<SelectFile
|
||||
:placeholder="`请上传其他资质证明文件`"
|
||||
:limit="9"
|
||||
:data="files"
|
||||
@done="chooseFiles"
|
||||
@del="onDeleteFiles"
|
||||
/>
|
||||
<p class="upload-tip"
|
||||
>可上传产品合格证、授权书等相关资质文件（最多9张）</p
|
||||
>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<!-- 第三步：确认提交 -->
|
||||
<div v-show="currentStep === 2">
|
||||
<a-card title="申请信息确认" style="margin-bottom: 20px">
|
||||
<a-descriptions
|
||||
bordered
|
||||
:column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
|
||||
>
|
||||
<a-descriptions-item label="商户名称">{{
|
||||
form.merchantName
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="证件类型">{{
|
||||
getIdTypeName(form.idType)
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="证件号码">{{
|
||||
form.merchantCode
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="联系人手机号">{{
|
||||
form.phone
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="联系人姓名">{{
|
||||
form.realName
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="身份证号码">{{
|
||||
form.idCard
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="店铺类型">{{
|
||||
form.shopType
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="商户分类">{{
|
||||
form.category
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="营业执照">
|
||||
<a-image
|
||||
v-if="form.yyzz"
|
||||
:src="form.yyzz"
|
||||
:width="120"
|
||||
:height="120"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="身份证正面">
|
||||
<a-image
|
||||
v-if="form.sfz1"
|
||||
:src="form.sfz1"
|
||||
:width="120"
|
||||
:height="120"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="身份证反面">
|
||||
<a-image
|
||||
v-if="form.sfz2"
|
||||
:src="form.sfz2"
|
||||
:width="120"
|
||||
:height="120"
|
||||
/>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="其他资质文件">
|
||||
<div v-if="files.length > 0" class="files-preview">
|
||||
<a-image
|
||||
v-for="(file, index) in files"
|
||||
:key="index"
|
||||
:src="file.url"
|
||||
:width="80"
|
||||
:height="80"
|
||||
style="margin-right: 10px; margin-bottom: 10px"
|
||||
/>
|
||||
</div>
|
||||
<span v-else>无</span>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<a-alert
|
||||
message="请仔细核对以上信息，提交后将无法修改。审核结果将在3个工作日内通过短信通知您。"
|
||||
type="info"
|
||||
show-icon
|
||||
style="margin-top: 20px"
|
||||
/>
|
||||
</a-card>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="form-actions">
|
||||
<a-button
|
||||
v-if="currentStep > 0"
|
||||
@click="prevStep"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
上一步
|
||||
</a-button>
|
||||
|
||||
<a-button v-if="currentStep < 2" type="primary" @click="nextStep">
|
||||
下一步
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
v-if="currentStep === 2"
|
||||
type="primary"
|
||||
@click="submitApply"
|
||||
:loading="submitLoading"
|
||||
>
|
||||
提交申请
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { addShopMerchantApply } from '@/api/shop/shopMerchantApply';
|
||||
import { ShopMerchantApply } from '@/api/shop/shopMerchantApply/model';
|
||||
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
||||
import { FileRecord } from '@/api/system/file/model';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const router = useRouter();
|
||||
|
||||
// 当前步骤
|
||||
const currentStep = ref(0);
|
||||
|
||||
// 提交状态
|
||||
const submitLoading = ref(false);
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref<any>(null);
|
||||
|
||||
// 图片数据
|
||||
const yyzzImages = ref<ItemType[]>([]);
|
||||
const sfz1Images = ref<ItemType[]>([]);
|
||||
const sfz2Images = ref<ItemType[]>([]);
|
||||
const files = ref<ItemType[]>([]);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<ShopMerchantApply>({
|
||||
type: 1,
|
||||
idType: '1', // 默认营业执照
|
||||
merchantName: undefined,
|
||||
merchantCode: undefined,
|
||||
image: undefined,
|
||||
phone: undefined,
|
||||
realName: undefined,
|
||||
idCard: undefined,
|
||||
shopType: undefined,
|
||||
category: undefined,
|
||||
commission: undefined,
|
||||
keywords: undefined,
|
||||
yyzz: undefined,
|
||||
sfz1: undefined,
|
||||
sfz2: undefined,
|
||||
files: undefined,
|
||||
userId: undefined,
|
||||
ownStore: 0,
|
||||
recommend: 0,
|
||||
goodsReview: 1,
|
||||
name2: undefined,
|
||||
reason: undefined,
|
||||
comments: '商家入驻申请',
|
||||
status: 0,
|
||||
sortNumber: 100,
|
||||
tenantId: undefined
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
merchantName: [
|
||||
{ required: true, message: '请输入商户名称', trigger: 'blur' }
|
||||
],
|
||||
idType: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
|
||||
merchantCode: [
|
||||
{ required: true, message: '请输入证件号码', trigger: 'blur' }
|
||||
],
|
||||
phone: [{ required: true, message: '请输入联系人手机号', trigger: 'blur' }],
|
||||
realName: [
|
||||
{ required: true, message: '请输入联系人姓名', trigger: 'blur' }
|
||||
],
|
||||
idCard: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
|
||||
shopType: [{ required: true, message: '请输入店铺类型', trigger: 'blur' }],
|
||||
category: [{ required: true, message: '请输入商户分类', trigger: 'blur' }],
|
||||
yyzz: [{ required: true, message: '请上传营业执照', trigger: 'change' }],
|
||||
sfz1: [{ required: true, message: '请上传身份证正面', trigger: 'change' }],
|
||||
sfz2: [{ required: true, message: '请上传身份证反面', trigger: 'change' }]
|
||||
});
|
||||
|
||||
// 获取证件类型名称
|
||||
const getIdTypeName = (type: string | undefined) => {
|
||||
switch (type) {
|
||||
case '1':
|
||||
return '营业执照';
|
||||
case '2':
|
||||
return '统一社会信用代码';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
// 图片选择处理
|
||||
const chooseYyzzImage = (data: FileRecord) => {
|
||||
yyzzImages.value = [
|
||||
{
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
}
|
||||
];
|
||||
form.yyzz = data.path;
|
||||
};
|
||||
|
||||
const onDeleteYyzzImage = () => {
|
||||
yyzzImages.value = [];
|
||||
form.yyzz = undefined;
|
||||
};
|
||||
|
||||
const chooseSfz1Image = (data: FileRecord) => {
|
||||
sfz1Images.value = [
|
||||
{
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
}
|
||||
];
|
||||
form.sfz1 = data.path;
|
||||
};
|
||||
|
||||
const onDeleteSfz1Image = () => {
|
||||
sfz1Images.value = [];
|
||||
form.sfz1 = undefined;
|
||||
};
|
||||
|
||||
const chooseSfz2Image = (data: FileRecord) => {
|
||||
sfz2Images.value = [
|
||||
{
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
}
|
||||
];
|
||||
form.sfz2 = data.path;
|
||||
};
|
||||
|
||||
const onDeleteSfz2Image = () => {
|
||||
sfz2Images.value = [];
|
||||
form.sfz2 = undefined;
|
||||
};
|
||||
|
||||
const chooseFiles = (data: FileRecord) => {
|
||||
files.value.push({
|
||||
uid: data.id,
|
||||
url: data.path,
|
||||
status: 'done'
|
||||
});
|
||||
};
|
||||
|
||||
const onDeleteFiles = (index: number) => {
|
||||
files.value.splice(index, 1);
|
||||
};
|
||||
|
||||
// 步骤控制
|
||||
const nextStep = () => {
|
||||
if (!formRef.value) return;
|
||||
|
||||
// 验证当前步骤的表单
|
||||
const validateFields = getValidateFields();
|
||||
if (validateFields.length > 0) {
|
||||
formRef.value
|
||||
.validateFields(validateFields)
|
||||
.then(() => {
|
||||
currentStep.value++;
|
||||
})
|
||||
.catch(() => {
|
||||
message.error('请完善必填信息');
|
||||
});
|
||||
} else {
|
||||
currentStep.value++;
|
||||
}
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
currentStep.value--;
|
||||
};
|
||||
|
||||
// 获取当前步骤需要验证的字段
|
||||
const getValidateFields = () => {
|
||||
switch (currentStep.value) {
|
||||
case 0:
|
||||
return [
|
||||
'merchantName',
|
||||
'idType',
|
||||
'merchantCode',
|
||||
'phone',
|
||||
'realName',
|
||||
'idCard',
|
||||
'shopType',
|
||||
'category'
|
||||
];
|
||||
case 1:
|
||||
return ['yyzz', 'sfz1', 'sfz2'];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// 提交申请
|
||||
const submitApply = () => {
|
||||
if (!formRef.value) return;
|
||||
|
||||
submitLoading.value = true;
|
||||
|
||||
// 处理表单数据
|
||||
const formData = {
|
||||
...form,
|
||||
files:
|
||||
files.value.length > 0
|
||||
? JSON.stringify(files.value.map((item) => item.url))
|
||||
: undefined
|
||||
};
|
||||
|
||||
addShopMerchantApply(formData)
|
||||
.then((msg) => {
|
||||
submitLoading.value = false;
|
||||
message.success('申请提交成功，我们将在3个工作日内完成审核！');
|
||||
// 跳转到申请成功页面
|
||||
router.push('/merchant/success');
|
||||
})
|
||||
.catch((e) => {
|
||||
submitLoading.value = false;
|
||||
message.error(e.message || '申请提交失败，请稍后重试');
|
||||
});
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.merchant-apply-container {
|
||||
max-width: 1000px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.merchant-apply-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.merchant-apply-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.files-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="success-container">
|
||||
<a-result
|
||||
status="success"
|
||||
title="商家入驻申请提交成功"
|
||||
sub-title="我们将在3个工作日内完成审核，审核结果将通过短信通知您"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button key="console" type="primary" @click="goHome"
|
||||
>返回首页</a-button
|
||||
>
|
||||
<a-button key="buy" @click="viewApplication">查看申请</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const goHome = () => {
|
||||
router.push('/');
|
||||
};
|
||||
|
||||
const viewApplication = () => {
|
||||
router.push('/merchant/apply');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.success-container {
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="qr-confirm-container">
|
||||
<a-card :bordered="false" class="confirm-card">
|
||||
<!-- 头部信息 -->
|
||||
<div class="header-info">
|
||||
<div class="app-info">
|
||||
<img :src="appLogo" alt="应用图标" class="app-logo" />
|
||||
<h3 class="app-name">{{ appName }}</h3>
|
||||
</div>
|
||||
<p class="confirm-tip">确认登录到Web端管理后台？</p>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<div class="user-info" v-if="userInfo">
|
||||
<a-avatar :size="64" :src="userInfo.avatar">
|
||||
<template v-if="!userInfo.avatar" #icon>
|
||||
<UserOutlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<div class="user-details">
|
||||
<h4 class="username">{{ userInfo.nickname || userInfo.username }}</h4>
|
||||
<p class="user-phone">{{ userInfo.phone || userInfo.mobile }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备信息 -->
|
||||
<div class="device-info">
|
||||
<div class="info-item">
|
||||
<span class="label">登录设备：</span>
|
||||
<span class="value"
|
||||
>{{ deviceInfo.browser }} {{ deviceInfo.version }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">操作系统：</span>
|
||||
<span class="value">{{ deviceInfo.os }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">IP地址：</span>
|
||||
<span class="value">{{ deviceInfo.ip }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">登录时间：</span>
|
||||
<span class="value">{{ formatTime(new Date()) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<a-button
|
||||
size="large"
|
||||
@click="handleCancel"
|
||||
:loading="cancelLoading"
|
||||
class="cancel-btn"
|
||||
>
|
||||
取消登录
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="handleConfirm"
|
||||
:loading="confirmLoading"
|
||||
class="confirm-btn"
|
||||
>
|
||||
确认登录
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 安全提示 -->
|
||||
<div class="security-tip">
|
||||
<ExclamationCircleOutlined style="color: #faad14; margin-right: 8px" />
|
||||
<span>请确认是您本人操作，如非本人操作请点击"取消登录"</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
ExclamationCircleOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
confirmQrLogin,
|
||||
scanQrCode,
|
||||
type QrLoginConfirmRequest
|
||||
} from '@/api/passport/qrLogin';
|
||||
import { getUserInfo } from '@/api/layout';
|
||||
import { getToken } from '@/utils/token-util';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// 响应式数据
|
||||
const qrCodeKey = ref<string>('');
|
||||
const userInfo = ref<any>(null);
|
||||
const confirmLoading = ref<boolean>(false);
|
||||
const cancelLoading = ref<boolean>(false);
|
||||
|
||||
// 应用信息
|
||||
const appName = ref<string>('唐九运售电云');
|
||||
const appLogo = ref<string>('/logo.png');
|
||||
|
||||
// 设备信息（这里可以从后端获取或前端检测）
|
||||
const deviceInfo = ref({
|
||||
browser: 'Chrome',
|
||||
version: '120.0',
|
||||
os: 'Windows 10',
|
||||
ip: '192.168.1.100'
|
||||
});
|
||||
|
||||
/**
|
||||
* 格式化时间
|
||||
*/
|
||||
const formatTime = (date: Date): string => {
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取用户信息
|
||||
*/
|
||||
const fetchUserInfo = async () => {
|
||||
try {
|
||||
const token = getToken();
|
||||
if (!token) {
|
||||
message.error('请先登录');
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const info = await getUserInfo();
|
||||
userInfo.value = info;
|
||||
} catch (error: any) {
|
||||
console.error('获取用户信息失败:', error);
|
||||
message.error('获取用户信息失败');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 标记二维码已扫描
|
||||
*/
|
||||
const markScanned = async () => {
|
||||
try {
|
||||
if (!qrCodeKey.value) return;
|
||||
|
||||
await scanQrCode(qrCodeKey.value);
|
||||
} catch (error: any) {
|
||||
console.error('标记扫描失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 确认登录
|
||||
*/
|
||||
const handleConfirm = async () => {
|
||||
if (!qrCodeKey.value) {
|
||||
message.error('二维码参数错误');
|
||||
return;
|
||||
}
|
||||
|
||||
confirmLoading.value = true;
|
||||
try {
|
||||
if (!userInfo.value || !userInfo.value.userId) {
|
||||
message.error('用户信息获取失败');
|
||||
return;
|
||||
}
|
||||
|
||||
const requestData: QrLoginConfirmRequest = {
|
||||
token: qrCodeKey.value,
|
||||
userId: userInfo.value.userId,
|
||||
platform: 'web'
|
||||
};
|
||||
|
||||
await confirmQrLogin(requestData);
|
||||
message.success('登录确认成功');
|
||||
|
||||
// 可以跳转到成功页面或关闭页面
|
||||
setTimeout(() => {
|
||||
// 如果是在APP内的webview中，可以调用原生方法关闭页面
|
||||
if (window.history.length > 1) {
|
||||
router.go(-1);
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
}, 1500);
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '确认登录失败');
|
||||
} finally {
|
||||
confirmLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 取消登录
|
||||
*/
|
||||
const handleCancel = async () => {
|
||||
cancelLoading.value = true;
|
||||
try {
|
||||
// 直接返回，不调用后端接口
|
||||
message.info('已取消登录');
|
||||
|
||||
setTimeout(() => {
|
||||
if (window.history.length > 1) {
|
||||
router.go(-1);
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
}, 1000);
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '取消登录失败');
|
||||
} finally {
|
||||
cancelLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时初始化
|
||||
onMounted(async () => {
|
||||
// 从URL参数获取二维码key
|
||||
qrCodeKey.value = route.query.qrCodeKey as string;
|
||||
|
||||
if (!qrCodeKey.value) {
|
||||
message.error('二维码参数错误');
|
||||
router.push('/');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取用户信息
|
||||
await fetchUserInfo();
|
||||
|
||||
// 标记二维码已扫描
|
||||
await markScanned();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.qr-confirm-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.confirm-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-info {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.app-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.app-logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-tip {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.user-details {
|
||||
margin-left: 16px;
|
||||
flex: 1;
|
||||
|
||||
.username {
|
||||
margin: 0 0 4px 0;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-phone {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-info {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.cancel-btn,
|
||||
.confirm-btn {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
border-color: #d9d9d9;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.security-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #fffbe6;
|
||||
border: 1px solid #ffe58f;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,805 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'login-wrapper',
|
||||
['', 'login-form-right', 'login-form-left'][direction]
|
||||
]"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + config?.loginBgImg + ')'
|
||||
}"
|
||||
>
|
||||
<div class="logo-login" v-if="config?.siteName">
|
||||
<img
|
||||
:src="
|
||||
config.sysLogo ||
|
||||
'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg'
|
||||
"
|
||||
alt="登录页面LOGO"
|
||||
class="logo"
|
||||
/>
|
||||
<h4>{{ config.siteName }}</h4>
|
||||
</div>
|
||||
<div class="company-name" v-if="config?.loginTitle"
|
||||
>{{ config?.loginTitle }}
|
||||
</div>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="login-form ele-bg-white"
|
||||
>
|
||||
<div class="login-title flex justify-center items-center px-12">
|
||||
<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
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
:placeholder="`请输入手机号码`"
|
||||
>
|
||||
<template #addonBefore> +86</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
size="large"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
@pressEnter="onLoginBySms"
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</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>
|
||||
<a-checkbox v-model:checked="form.remember">
|
||||
同意
|
||||
<a href="https://website.websoft.top/xieyi/01.html" target="_blank"
|
||||
>《服务协议及隐私政策》</a
|
||||
>
|
||||
</a-checkbox>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:disabled="!form.remember"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
注册
|
||||
</a-button>
|
||||
<div class="register text-center pt-5"
|
||||
><a @click="push('/login')">已有账号，立即登录</a></div
|
||||
>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="loginType === 'sms'">
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
:placeholder="`请输入手机号码`"
|
||||
>
|
||||
<template #addonBefore> +86</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
size="large"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
@pressEnter="onLoginBySms"
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLoginBySms"
|
||||
>
|
||||
{{ loading ? t('login.loading') : t('login.login') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
<div class="login-copyright">
|
||||
<a-space>
|
||||
<span>© {{ new Date().getFullYear() }}</span>
|
||||
<span>{{ config?.copyright || 'websoft.top Inc.' }}</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
v-model:value="imgCode"
|
||||
:maxlength="5"
|
||||
size="large"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
@pressEnter="sendCode"
|
||||
/>
|
||||
<a-button class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
</div>
|
||||
<!-- 地图位置选择弹窗 -->
|
||||
<ele-map-picker
|
||||
:need-city="true"
|
||||
:dark-mode="darkMode"
|
||||
v-model:visible="showMap"
|
||||
:center="[108.374959, 22.767024]"
|
||||
:search-type="1"
|
||||
:zoom="12"
|
||||
@done="onDone"
|
||||
/>
|
||||
</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';
|
||||
|
||||
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);
|
||||
|
||||
// 配置信息
|
||||
const { form } = useFormData<CmsWebsite>({
|
||||
// 站点ID
|
||||
websiteId: undefined,
|
||||
// 网站名称
|
||||
websiteName: undefined,
|
||||
// 网站标识
|
||||
websiteCode: undefined,
|
||||
// 网站LOGO
|
||||
websiteIcon: undefined,
|
||||
// 网站LOGO
|
||||
websiteLogo: undefined,
|
||||
// 网站LOGO(深色模式)
|
||||
websiteDarkLogo: undefined,
|
||||
// 网站类型
|
||||
websiteType: undefined,
|
||||
// 网站关键词
|
||||
keywords: undefined,
|
||||
// 域名前缀
|
||||
prefix: undefined,
|
||||
// 绑定域名
|
||||
domain: undefined,
|
||||
// 全局样式
|
||||
style: undefined,
|
||||
// 后台管理地址
|
||||
adminUrl: undefined,
|
||||
// 应用版本 10标准版 20专业版 30永久授权
|
||||
version: undefined,
|
||||
// 服务到期时间
|
||||
expirationTime: undefined,
|
||||
// 模版ID
|
||||
templateId: TEMPLATE_ID,
|
||||
// 行业类型(父级)
|
||||
industryParent: undefined,
|
||||
// 行业类型(子级)
|
||||
industryChild: undefined,
|
||||
// 企业ID
|
||||
companyId: undefined,
|
||||
// 所在国家
|
||||
country: undefined,
|
||||
// 所在省份
|
||||
province: undefined,
|
||||
// 所在城市
|
||||
city: undefined,
|
||||
// 所在辖区
|
||||
region: undefined,
|
||||
// 经度
|
||||
longitude: undefined,
|
||||
// 纬度
|
||||
latitude: undefined,
|
||||
// 街道地址
|
||||
address: undefined,
|
||||
// 联系电话
|
||||
phone: undefined,
|
||||
// 电子邮箱
|
||||
email: undefined,
|
||||
// ICP备案号
|
||||
icpNo: undefined,
|
||||
// 公安备案
|
||||
policeNo: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 是否推荐
|
||||
recommend: undefined,
|
||||
// 是否运行中
|
||||
running: undefined,
|
||||
// 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
|
||||
status: undefined,
|
||||
// 维护说明
|
||||
statusText: undefined,
|
||||
// 关闭说明
|
||||
statusClose: undefined,
|
||||
// 全局样式
|
||||
styles: undefined,
|
||||
// 语言
|
||||
lang: undefined,
|
||||
// 排序号
|
||||
sortNumber: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 是否删除, 0否, 1是
|
||||
deleted: undefined,
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined,
|
||||
// 修改时间
|
||||
updateTime: undefined,
|
||||
// 网站配置
|
||||
config: undefined,
|
||||
// 短信验证码
|
||||
smsCode: undefined,
|
||||
// 短信验证码
|
||||
code: undefined,
|
||||
// 是否管理员
|
||||
isSuperAdmin: true,
|
||||
// 企业名称
|
||||
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);
|
||||
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入品牌名称',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
category: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择行业分类',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '手机号格式不正确',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// address: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请选择店铺位置',
|
||||
// type: 'string'
|
||||
// }
|
||||
// ],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.password'),
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.code'),
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
smsCode: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.code'),
|
||||
type: 'string'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
if (text.value !== imgCode.value.toLowerCase()) {
|
||||
message.error('图形验证码不正确');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone }).then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
const goHome = () => {
|
||||
const { query } = unref(currentRoute);
|
||||
goHomeRoute(query.from as string);
|
||||
localStorage.removeItem(THEME_STORE_NAME);
|
||||
};
|
||||
|
||||
const onIndustry = (item: any) => {
|
||||
form.industryParent = item[0];
|
||||
form.industryChild = item[1];
|
||||
form.category = `${item[0]}/${item[1]}`;
|
||||
};
|
||||
|
||||
/* 打开位置选择 */
|
||||
const openMapPicker = () => {
|
||||
showMap.value = true;
|
||||
};
|
||||
|
||||
/* 地图选择后回调 */
|
||||
const onDone = (location: CenterPoint) => {
|
||||
if (location) {
|
||||
console.log(location);
|
||||
form.companyName = `${location.name}`;
|
||||
form.province = `${location.city?.province}`;
|
||||
form.city = `${location.city?.city}`;
|
||||
form.region = `${location.city?.district}`;
|
||||
form.address = `${location.address}`;
|
||||
form.longitude = `${location.lng}`;
|
||||
form.latitude = `${location.lat}`;
|
||||
}
|
||||
showMap.value = false;
|
||||
};
|
||||
|
||||
const onLoginBySms = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
form.code = form.smsCode?.toLowerCase();
|
||||
loginBySms(form)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
loading.value = false;
|
||||
resetFields();
|
||||
cleanPageTabs();
|
||||
goHome();
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
message.error(e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
|
||||
// 普通注册流程
|
||||
createCmsWebSite(form)
|
||||
.then(async (msg) => {
|
||||
setTimeout(() => {
|
||||
// 登录成功
|
||||
message.success(msg);
|
||||
loading.value = false;
|
||||
resetFields();
|
||||
cleanPageTabs();
|
||||
goHome();
|
||||
}, 2000);
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error(err.message);
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
configWebsiteField({
|
||||
lang: locale.value
|
||||
}).then((data) => {
|
||||
config.value = data;
|
||||
});
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
// resetFields();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 首次加载
|
||||
changeCaptcha();
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
() => {
|
||||
// 解析二级域名获取租户ID
|
||||
const tenantId = getTenantId();
|
||||
if (tenantId) {
|
||||
form.tenantId = Number(tenantId);
|
||||
showTenantId.value = false;
|
||||
}
|
||||
const tid = localStorage.getItem('TenantId');
|
||||
if (tid) {
|
||||
form.tenantId = Number(tid);
|
||||
showTenantId.value = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 背景 */
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/bg-2.jpeg');
|
||||
background-color: var(--grey-5);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.company-name {
|
||||
position: absolute;
|
||||
top: 17%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.login-form {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 50px;
|
||||
|
||||
.active {
|
||||
color: #007dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 第三方登录图标 */
|
||||
.login-oauth-icon {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
margin: 0 12px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.work-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
transform: translateX(0);
|
||||
margin: -230px auto auto auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
right: auto;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.wwLogin_qrcode_head {
|
||||
padding: 10px 0 40px 0 !important;
|
||||
}
|
||||
|
||||
.logo-login {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: 6px;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,802 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'login-wrapper',
|
||||
['', 'login-form-right', 'login-form-left'][direction]
|
||||
]"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + config?.loginBgImg + ')'
|
||||
}"
|
||||
>
|
||||
<div class="logo-login" v-if="config?.siteName">
|
||||
<img
|
||||
:src="
|
||||
config.sysLogo ||
|
||||
'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg'
|
||||
"
|
||||
class="logo"
|
||||
/>
|
||||
<h4>{{ config.siteName }}</h4>
|
||||
</div>
|
||||
<div class="company-name" v-if="config?.loginTitle"
|
||||
>{{ config?.loginTitle }}
|
||||
</div>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="login-form ele-bg-white"
|
||||
>
|
||||
<div class="login-title flex justify-center items-center px-12">
|
||||
<h4 class="title-btn">注册</h4>
|
||||
</div>
|
||||
<template v-if="loginType === 'account'">
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
:placeholder="`请输入手机号码`"
|
||||
>
|
||||
<template #addonBefore> +86</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
size="large"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
@pressEnter="onLoginBySms"
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</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-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>
|
||||
<a-checkbox v-model:checked="form.remember">
|
||||
同意
|
||||
<a href="https://website.websoft.top/xieyi/01.html" target="_blank"
|
||||
>《服务协议及隐私政策》</a
|
||||
>
|
||||
</a-checkbox>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:disabled="!form.remember"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
注册
|
||||
</a-button>
|
||||
<div class="register text-center pt-5"
|
||||
><a @click="push('/login')">已有账号，立即登录</a></div
|
||||
>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="loginType === 'sms'">
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
:placeholder="`请输入手机号码`"
|
||||
>
|
||||
<template #addonBefore> +86</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
size="large"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
@pressEnter="onLoginBySms"
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="onLoginBySms"
|
||||
>
|
||||
{{ loading ? t('login.loading') : t('login.login') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-form>
|
||||
<div class="login-copyright">
|
||||
<a-space>
|
||||
<span>© {{ new Date().getFullYear() }}</span>
|
||||
<span>{{ config?.copyright || 'websoft.top Inc.' }}</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
v-model:value="imgCode"
|
||||
:maxlength="5"
|
||||
size="large"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
@pressEnter="sendCode"
|
||||
/>
|
||||
<a-button class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
</div>
|
||||
<!-- 地图位置选择弹窗 -->
|
||||
<ele-map-picker
|
||||
:need-city="true"
|
||||
:dark-mode="darkMode"
|
||||
v-model:visible="showMap"
|
||||
:center="[108.374959, 22.767024]"
|
||||
:search-type="1"
|
||||
:zoom="12"
|
||||
@done="onDone"
|
||||
/>
|
||||
</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';
|
||||
|
||||
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);
|
||||
|
||||
// 配置信息
|
||||
const { form } = useFormData<CmsWebsite>({
|
||||
// 站点ID
|
||||
websiteId: undefined,
|
||||
// 网站名称
|
||||
websiteName: undefined,
|
||||
// 网站标识
|
||||
websiteCode: undefined,
|
||||
// 网站LOGO
|
||||
websiteIcon: undefined,
|
||||
// 网站LOGO
|
||||
websiteLogo: undefined,
|
||||
// 网站LOGO(深色模式)
|
||||
websiteDarkLogo: undefined,
|
||||
// 网站类型
|
||||
websiteType: undefined,
|
||||
// 网站关键词
|
||||
keywords: undefined,
|
||||
// 域名前缀
|
||||
prefix: undefined,
|
||||
// 绑定域名
|
||||
domain: undefined,
|
||||
// 全局样式
|
||||
style: undefined,
|
||||
// 后台管理地址
|
||||
adminUrl: undefined,
|
||||
// 应用版本 10标准版 20专业版 30永久授权
|
||||
version: undefined,
|
||||
// 服务到期时间
|
||||
expirationTime: undefined,
|
||||
// 模版ID
|
||||
templateId: TEMPLATE_ID,
|
||||
// 行业类型(父级)
|
||||
industryParent: undefined,
|
||||
// 行业类型(子级)
|
||||
industryChild: undefined,
|
||||
// 企业ID
|
||||
companyId: undefined,
|
||||
// 所在国家
|
||||
country: undefined,
|
||||
// 所在省份
|
||||
province: undefined,
|
||||
// 所在城市
|
||||
city: undefined,
|
||||
// 所在辖区
|
||||
region: undefined,
|
||||
// 经度
|
||||
longitude: undefined,
|
||||
// 纬度
|
||||
latitude: undefined,
|
||||
// 街道地址
|
||||
address: undefined,
|
||||
// 联系电话
|
||||
phone: undefined,
|
||||
// 电子邮箱
|
||||
email: undefined,
|
||||
// ICP备案号
|
||||
icpNo: undefined,
|
||||
// 公安备案
|
||||
policeNo: undefined,
|
||||
// 备注
|
||||
comments: undefined,
|
||||
// 是否推荐
|
||||
recommend: undefined,
|
||||
// 是否运行中
|
||||
running: undefined,
|
||||
// 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
|
||||
status: undefined,
|
||||
// 维护说明
|
||||
statusText: undefined,
|
||||
// 关闭说明
|
||||
statusClose: undefined,
|
||||
// 全局样式
|
||||
styles: undefined,
|
||||
// 语言
|
||||
lang: undefined,
|
||||
// 排序号
|
||||
sortNumber: undefined,
|
||||
// 用户ID
|
||||
userId: undefined,
|
||||
// 是否删除, 0否, 1是
|
||||
deleted: undefined,
|
||||
// 租户id
|
||||
tenantId: undefined,
|
||||
// 创建时间
|
||||
createTime: undefined,
|
||||
// 修改时间
|
||||
updateTime: undefined,
|
||||
// 网站配置
|
||||
config: undefined,
|
||||
// 短信验证码
|
||||
smsCode: undefined,
|
||||
// 短信验证码
|
||||
code: undefined,
|
||||
// 是否管理员
|
||||
isSuperAdmin: true,
|
||||
// 企业名称
|
||||
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);
|
||||
|
||||
// 表格选中数据
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入店铺名称',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
category: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择行业分类',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
required: true,
|
||||
type: 'string',
|
||||
message: '手机号格式不正确',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// address: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: '请选择店铺位置',
|
||||
// type: 'string'
|
||||
// }
|
||||
// ],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.password'),
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.code'),
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
smsCode: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.code'),
|
||||
type: 'string'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
if (text.value !== imgCode.value.toLowerCase()) {
|
||||
message.error('图形验证码不正确');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone }).then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
const { resetFields } = useForm(form, rules);
|
||||
|
||||
const goHome = () => {
|
||||
const { query } = unref(currentRoute);
|
||||
goHomeRoute(query.from as string);
|
||||
localStorage.removeItem(THEME_STORE_NAME);
|
||||
};
|
||||
|
||||
const onIndustry = (item: any) => {
|
||||
form.industryParent = item[0];
|
||||
form.industryChild = item[1];
|
||||
form.category = `${item[0]}/${item[1]}`;
|
||||
};
|
||||
|
||||
/* 打开位置选择 */
|
||||
const openMapPicker = () => {
|
||||
showMap.value = true;
|
||||
};
|
||||
|
||||
/* 地图选择后回调 */
|
||||
const onDone = (location: CenterPoint) => {
|
||||
if (location) {
|
||||
console.log(location);
|
||||
form.companyName = `${location.name}`;
|
||||
form.province = `${location.city?.province}`;
|
||||
form.city = `${location.city?.city}`;
|
||||
form.region = `${location.city?.district}`;
|
||||
form.address = `${location.address}`;
|
||||
form.longitude = `${location.lng}`;
|
||||
form.latitude = `${location.lat}`;
|
||||
}
|
||||
showMap.value = false;
|
||||
};
|
||||
|
||||
const onLoginBySms = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
form.code = form.smsCode?.toLowerCase();
|
||||
loginBySms(form)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
loading.value = false;
|
||||
resetFields();
|
||||
cleanPageTabs();
|
||||
goHome();
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
message.error(e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 保存编辑 */
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
createCmsWebSite(form)
|
||||
.then((msg) => {
|
||||
setTimeout(() => {
|
||||
// 登录成功
|
||||
message.success(msg);
|
||||
loading.value = false;
|
||||
resetFields();
|
||||
cleanPageTabs();
|
||||
goHome();
|
||||
}, 2000);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error('该手机号码已经被注册');
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
configWebsiteField({
|
||||
lang: locale.value
|
||||
}).then((data) => {
|
||||
config.value = data;
|
||||
});
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
// resetFields();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 首次加载
|
||||
changeCaptcha();
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
() => {
|
||||
// 解析二级域名获取租户ID
|
||||
const tenantId = getTenantId();
|
||||
if (tenantId) {
|
||||
form.tenantId = Number(tenantId);
|
||||
showTenantId.value = false;
|
||||
}
|
||||
const tid = localStorage.getItem('TenantId');
|
||||
if (tid) {
|
||||
form.tenantId = Number(tid);
|
||||
showTenantId.value = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 背景 */
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/bg-2.jpeg');
|
||||
background-color: var(--grey-5);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.company-name {
|
||||
position: absolute;
|
||||
top: 17%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.login-form {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 50px;
|
||||
|
||||
.active {
|
||||
color: #007dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 第三方登录图标 */
|
||||
.login-oauth-icon {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
margin: 0 12px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.work-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
transform: translateX(0);
|
||||
margin: -230px auto auto auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
right: auto;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.wwLogin_qrcode_head {
|
||||
padding: 10px 0 40px 0 !important;
|
||||
}
|
||||
|
||||
.logo-login {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: 6px;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user