feat(layout): 添加企业邀请码加入功能
- 在 Basic.vue 中添加 JoinModal 组件,用于展示加入企业的模态框 - 添加 checkHasInviteCode 方法,在页面加载时检查邀请码 - 新增 getQueryParam 工具函数,用于获取 URL 参数 - 添加加入企业的相关 API 接口 - 实现 JoinModal 组件,包含加入企业的逻辑和界面
This commit is contained in:
@ -150,3 +150,13 @@ export const removeEnterpriseAccount = (userId: number) => {
|
|||||||
export const getEnterpriseInviteCode = () => {
|
export const getEnterpriseInviteCode = () => {
|
||||||
return Http.get(`/v1/enterprises/invite-code`);
|
return Http.get(`/v1/enterprises/invite-code`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 根据邀请码获取企业信息
|
||||||
|
export const getEnterpriseByInviteCode = (inviteCode: string) => {
|
||||||
|
return Http.get(`/v1/enterprises/by-invite-code`, { invite_code: inviteCode });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据邀请码加入企业
|
||||||
|
export const joinEnterpriseByInviteCode = (inviteCode: string) => {
|
||||||
|
return Http.post(`/v1/enterprises/join`, { invite_code: inviteCode });
|
||||||
|
};
|
||||||
|
|||||||
47
src/components/join-modal.vue
Normal file
47
src/components/join-modal.vue
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<Modal title="加入企业" @ok="handleJoin">
|
||||||
|
<div v-if="enterprise" class="join-body flex item-center">
|
||||||
|
<img src="@/assets/warning.svg" alt="" />
|
||||||
|
{{ `确定加入 “${enterprise.name}”吗?` }}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import Modal from '@components/modal.vue';
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { getQueryParam } from '@/utils/helper';
|
||||||
|
|
||||||
|
import { getEnterpriseByInviteCode, joinEnterpriseByInviteCode } from '@/api/all';
|
||||||
|
const enterprise = ref();
|
||||||
|
const inviteCode = ref();
|
||||||
|
|
||||||
|
async function getEnterprise() {
|
||||||
|
inviteCode.value = getQueryParam('invite_code');
|
||||||
|
if (inviteCode.value) {
|
||||||
|
enterprise.value = await getEnterpriseByInviteCode(inviteCode.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleJoin() {
|
||||||
|
await joinEnterpriseByInviteCode(inviteCode.value);
|
||||||
|
AMessage.success('加入成功');
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
getEnterprise();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.join-body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Alibaba PuHuiTi, serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--Text-1, rgba(33, 31, 36, 1));
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,7 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useAppStore } from '@/stores';
|
import { useAppStore } from '@/stores';
|
||||||
import { useResponsive } from '@/hooks';
|
import { useResponsive } from '@/hooks';
|
||||||
|
import JoinModal from '@/components/join-modal.vue';
|
||||||
|
import { getQueryParam } from '@/utils/helper';
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
const joinEnterpriseVisible = ref(false);
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@ -27,11 +31,19 @@ const route = useRoute();
|
|||||||
// onMounted(() => {
|
// onMounted(() => {
|
||||||
// showSidebar.value = route.meta.requiresSidebar == true;
|
// showSidebar.value = route.meta.requiresSidebar == true;
|
||||||
// });
|
// });
|
||||||
|
onMounted(() => {
|
||||||
|
checkHasInviteCode();
|
||||||
|
});
|
||||||
const setCollapsed = (val: boolean) => {
|
const setCollapsed = (val: boolean) => {
|
||||||
appStore.updateSettings({ menuCollapse: val });
|
appStore.updateSettings({ menuCollapse: val });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const checkHasInviteCode = () => {
|
||||||
|
const inviteCode = getQueryParam('invite_code');
|
||||||
|
if (inviteCode) {
|
||||||
|
joinEnterpriseVisible.value = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
const drawerVisible = ref(false);
|
const drawerVisible = ref(false);
|
||||||
const drawerCancel = () => {
|
const drawerCancel = () => {
|
||||||
drawerVisible.value = false;
|
drawerVisible.value = false;
|
||||||
@ -43,6 +55,7 @@ provide('toggleDrawerMenu', () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<a-layout :class="['layout', { mobile: appStore.hideMenu }]">
|
<a-layout :class="['layout', { mobile: appStore.hideMenu }]">
|
||||||
|
<JoinModal v-model:visible="joinEnterpriseVisible" />
|
||||||
<div v-if="navbar" class="layout-navbar">
|
<div v-if="navbar" class="layout-navbar">
|
||||||
<base-navbar />
|
<base-navbar />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
5
src/utils/helper.ts
Normal file
5
src/utils/helper.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export function getQueryParam(param: string): string | null {
|
||||||
|
const search = window.location.search || window.location.hash.split('?')[1] || '';
|
||||||
|
const params = new URLSearchParams(search);
|
||||||
|
return params.get(param);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user