42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { View, Text } from '@tarojs/components';
|
|
import Taro from '@tarojs/taro';
|
|
import './HqTabBar.css';
|
|
|
|
export const HQ_TABS = [
|
|
{ pagePath: '/pages/dashboard/index', text: '管理中心', icon: 'dashboard' },
|
|
{ pagePath: '/pages/stores/index', text: '门店审核', icon: 'fact_check' },
|
|
{ pagePath: '/pages/settlement/index', text: '结算中心', icon: 'account_balance_wallet' },
|
|
{ pagePath: '/pages/tickets/index', text: '客服中心', icon: 'support_agent' },
|
|
] as const;
|
|
|
|
type HqTabBarProps = {
|
|
selected: number;
|
|
};
|
|
|
|
/** 总部底栏（H5 需页面内显式渲染；Taro custom-tab-bar 在 H5 不自动挂载） */
|
|
export default function HqTabBar({ selected }: HqTabBarProps) {
|
|
return (
|
|
<View className="hq-tabbar">
|
|
{HQ_TABS.map((tab, index) => {
|
|
const active = selected === index;
|
|
return (
|
|
<View
|
|
key={tab.pagePath}
|
|
className={`hq-tabbar__item${active ? ' hq-tabbar__item--active' : ''}`}
|
|
onClick={() => {
|
|
if (!active) Taro.switchTab({ url: tab.pagePath });
|
|
}}
|
|
>
|
|
<Text
|
|
className={`material-symbols-outlined hq-tabbar__icon${active ? ' hq-tabbar__icon--active' : ''}`}
|
|
>
|
|
{tab.icon}
|
|
</Text>
|
|
<Text className="hq-tabbar__label">{tab.text}</Text>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
}
|