| | |
| | | icon: string; |
| | | activeIcon: string; |
| | | pagePath: string; |
| | | currentPath: string; |
| | | active: boolean; |
| | | className: string; |
| | | onClick?: (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()); |
| | | return ( |
| | | <div |
| | | class={['bottom-tab-item', { active: props.active }, props.className]} |
| | | 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={props.active ? props.activeIcon : props.icon} /> |
| | | <img class="bottom-tab-item-icon" src={isActive ? props.activeIcon : props.icon} /> |
| | | </div> |
| | | <div class="bottom-tab-item-text">{props.text}</div> |
| | | </div> |
| | |
| | | } |
| | | return; |
| | | } |
| | | system.setTabIndex(index); |
| | | Taro.switchTab({ url }); |
| | | Taro.switchTab({ url }).then(() => { |
| | | system.setTabIndex(index); |
| | | }); |
| | | }; |
| | | |
| | | function goPublish() { |
| | |
| | | }} |
| | | > |
| | | <TarBarItem |
| | | text={'homeTitle'} |
| | | 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-friend.png" |
| | | activeIcon="../assets/tabbar/icon-friend-active.png" |
| | | pagePath={TabBarPageRouter.CircleFriend} |
| | | index={1} |
| | | active={system.activeTab === 1} |
| | | className="circleFriend" |
| | | onClick={switchTab} |
| | | ></TarBarItem> |
| | | <div class="bottom-tab-item publish-wrapper" onClick={goPublish}> |
| | | <img class="bottom-tab-item-img-publish" src={IconPublish} /> |
| | | <div class="bottom-tab-item-text">发布</div> |
| | | </div> |
| | | <TarBarItem |
| | | text="消息" |
| | | icon="../assets/tabbar/icon-message.png" |
| | | activeIcon="../assets/tabbar/icon-message-active.png" |
| | | pagePath={TabBarPageRouter.Message} |
| | | active={system.activeTab === 2} |
| | | className="message" |
| | | text="工作台" |
| | | icon="../assets/tabbar/icon-task.png" |
| | | activeIcon="../assets/tabbar/icon-task-active.png" |
| | | pagePath={TabBarPageRouter.Workbenches} |
| | | currentPath={router.path} |
| | | active={system.activeTab === 1} |
| | | className="task" |
| | | onClick={switchTab} |
| | | index={2} |
| | | badge={(isLogin.value && myMessageCount.value?.unReadCount) ?? 0} |
| | | ></TarBarItem> */} |
| | | index={1} |
| | | ></TarBarItem> |
| | | <TarBarItem |
| | | text="我的" |
| | | icon="../assets/tabbar/icon-mine.png" |
| | | activeIcon="../assets/tabbar/icon-mine-active.png" |
| | | pagePath={TabBarPageRouter.Mine} |
| | | active={system.activeTab === 3} |
| | | currentPath={router.path} |
| | | active={system.activeTab === 2} |
| | | className="mine" |
| | | onClick={switchTab} |
| | | index={3} |
| | | index={2} |
| | | ></TarBarItem> |
| | | </View> |
| | | ); |