import './index.scss';
|
|
import { SetupContext } from 'vue';
|
import { View, Text, Image } from '@tarojs/components';
|
import Taro from '@tarojs/taro';
|
import { useSystemStore } from '@/stores/modules/system';
|
import { storeToRefs } from 'pinia';
|
import { TabBarPageRouter } from '@/constants';
|
// import IconPublish from '@/assets/tabbar/icon-publish.png';
|
import { useUser, useIsLogin } from '@/hooks';
|
import { Message } from '@12333/utils';
|
|
type TarBarItemProps = {
|
text: string;
|
icon: string;
|
activeIcon: string;
|
pagePath: string;
|
currentPath: string;
|
active: boolean;
|
className: string;
|
onClick?: (url: string, index: number) => any;
|
index: number;
|
badge?: number;
|
};
|
|
type TarBarItemEvents = {
|
click: (url: string, index: number) => any;
|
};
|
|
const TarBarItem = function (props: TarBarItemProps, context: SetupContext<TarBarItemEvents>) {
|
const _badge = props.badge > 99 ? '99+' : props.badge;
|
// const isActive = props.currentPath.toLowerCase().includes(props.pagePath.toLowerCase());
|
const isActive = props.active;
|
return (
|
<div
|
class={['bottom-tab-item', { active: isActive }, props.className]}
|
onClick={() => context.emit('click', props.pagePath, props.index)}
|
>
|
<div class="bottom-tab-item-icon-wrapper">
|
{props.badge > 0 && <div class="bottom-tab-item-badge">{_badge}</div>}
|
<img class="bottom-tab-item-icon" src={isActive ? props.activeIcon : props.icon} />
|
</div>
|
<div class="bottom-tab-item-text">{props.text}</div>
|
</div>
|
);
|
};
|
|
TarBarItem.emits = {
|
click: (url: string, index: number) => typeof url === 'string',
|
};
|
|
const whitePageList = [RouterPath.home, RouterPath.mine];
|
|
export default {
|
name: 'CustomTabBar',
|
components: {
|
View,
|
Text,
|
Image,
|
TarBarItem,
|
},
|
setup() {
|
const system = useSystemStore();
|
const { IPhoneXPadding } = storeToRefs(system);
|
|
const router = Taro.useRouter();
|
|
const isLogin = useIsLogin();
|
|
const loginTipShowed = ref(false);
|
|
const switchTab = (url: string, index: number) => {
|
if (!isLogin.value && whitePageList.every((x) => x !== url)) {
|
if (!loginTipShowed.value) {
|
loginTipShowed.value = true;
|
Message.confirm({ message: '请前往登录' })
|
.then(() => {
|
Taro.navigateTo({
|
url: `${RouterPath.authorization}?redirect=${url}`,
|
});
|
})
|
.finally(() => {
|
loginTipShowed.value = false;
|
});
|
}
|
return;
|
}
|
Taro.switchTab({ url }).then(() => {
|
system.setTabIndex(index);
|
});
|
};
|
|
function goPublish() {
|
if (!isLogin.value) {
|
if (!loginTipShowed.value) {
|
loginTipShowed.value = true;
|
Message.confirm({ message: '请前往登录' })
|
.then(() => {
|
Taro.navigateTo({
|
url: `${RouterPath.authorization}?redirect=${RouterPath.home}`,
|
});
|
})
|
.finally(() => {
|
loginTipShowed.value = false;
|
});
|
}
|
|
return;
|
}
|
// Taro.navigateTo({
|
// url: RouterPath.pulishCircleFriend,
|
// });
|
}
|
|
return () => {
|
const _router = Taro.useRouter();
|
return (
|
<View
|
class="bottom-tab"
|
style={{
|
paddingBottom: `${IPhoneXPadding.value}px`,
|
}}
|
>
|
<TarBarItem
|
text={'找工作'}
|
icon="../assets/tabbar/icon-home.png"
|
activeIcon="../assets/tabbar/icon-home-active.png"
|
pagePath={TabBarPageRouter.Home}
|
currentPath={_router.path}
|
index={0}
|
active={system.activeTab === 0}
|
className="home"
|
onClick={switchTab}
|
></TarBarItem>
|
|
<TarBarItem
|
text="任务"
|
icon="../assets/tabbar/icon-task.png"
|
activeIcon="../assets/tabbar/icon-task-active.png"
|
pagePath={TabBarPageRouter.Task}
|
currentPath={_router.path}
|
active={system.activeTab === 1}
|
className="task"
|
onClick={switchTab}
|
index={1}
|
></TarBarItem>
|
<TarBarItem
|
text="我的"
|
icon="../assets/tabbar/icon-mine.png"
|
activeIcon="../assets/tabbar/icon-mine-active.png"
|
pagePath={TabBarPageRouter.Mine}
|
currentPath={_router.path}
|
active={system.activeTab === 2}
|
className="mine"
|
onClick={switchTab}
|
index={2}
|
></TarBarItem>
|
</View>
|
);
|
};
|
},
|
};
|
