feat: 分端显示
This commit is contained in:
@@ -2,13 +2,11 @@ import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
|
||||
import type { CustomTabBarItem, NativeTabBarItem } from './types'
|
||||
|
||||
/**
|
||||
* tabbar 选择的策略,更详细的介绍见 tabbar.md 文件
|
||||
* 0: 'NO_TABBAR' `无 tabbar`
|
||||
* 1: 'NATIVE_TABBAR' `完全原生 tabbar`
|
||||
* 2: 'CUSTOM_TABBAR_WITH_CACHE' `有缓存自定义 tabbar`
|
||||
* 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' `无缓存自定义 tabbar`
|
||||
*
|
||||
* 温馨提示:本文件的任何代码更改了之后,都需要重新运行,否则 pages.json 不会更新导致配置不生效
|
||||
* tabbar 选择的策略
|
||||
* 0: 'NO_TABBAR' 无 tabbar
|
||||
* 1: 'NATIVE_TABBAR' 完全原生 tabbar
|
||||
* 2: 'CUSTOM_TABBAR_WITH_CACHE' 有缓存自定义 tabbar
|
||||
* 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' 无缓存自定义 tabbar
|
||||
*/
|
||||
export const TABBAR_STRATEGY_MAP = {
|
||||
NO_TABBAR: 0,
|
||||
@@ -17,113 +15,143 @@ export const TABBAR_STRATEGY_MAP = {
|
||||
CUSTOM_TABBAR_WITHOUT_CACHE: 3,
|
||||
}
|
||||
|
||||
// TODO: 1/3. 通过这里切换使用tabbar的策略
|
||||
// 如果是使用 NO_TABBAR(0),nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
|
||||
// 如果是使用 NATIVE_TABBAR(1),只需要配置 nativeTabbarList,customTabbarList 不生效
|
||||
// 如果是使用 CUSTOM_TABBAR(2,3),只需要配置 不生效
|
||||
export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
|
||||
|
||||
// TODO: 2/3. 使用 NATIVE_TABBAR 时,更新下面的 tabbar 配置
|
||||
// 原生 tabbar 配置(备用)
|
||||
export const nativeTabbarList: NativeTabBarItem[] = [
|
||||
{
|
||||
iconPath: 'static/tabbar/home.png',
|
||||
selectedIconPath: 'static/tabbar/homeHL.png',
|
||||
pagePath: 'pages/index/index',
|
||||
text: '数字广东',
|
||||
text: '首页',
|
||||
},
|
||||
{
|
||||
iconPath: 'static/tabbar/personal.png',
|
||||
selectedIconPath: 'static/tabbar/personalHL.png',
|
||||
pagePath: 'pages/me/me',
|
||||
text: '个人',
|
||||
text: '我的',
|
||||
},
|
||||
]
|
||||
|
||||
// TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时,更新下面的 tabbar 配置
|
||||
// 如果需要配置鼓包,需要在 'tabbar/store.ts' 里面设置,最后在 `tabbar/index.vue` 里面更改鼓包的图片
|
||||
export const customTabbarList: CustomTabBarItem[] = [
|
||||
// ==================== 用户端 Tabbar 配置 ====================
|
||||
export const userTabbarList: CustomTabBarItem[] = [
|
||||
{
|
||||
text: '数字广东',
|
||||
text: '首页',
|
||||
pagePath: 'pages/index/index',
|
||||
// 注意 unocss 图标需要如下处理:(二选一)
|
||||
// 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行)
|
||||
// 2)配置到 unocss.config.ts 的 safelist 中
|
||||
iconType: 'image',
|
||||
icon: '/static/logo2.png',
|
||||
iconActive: '/static/logo1.png',
|
||||
// badge: 'dot',
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/sort/index',
|
||||
text: '分类',
|
||||
// 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行)
|
||||
// 2)配置到 unocss.config.ts 的 safelist 中
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-view-mode-2',
|
||||
// badge: 10,
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/goods/cart',
|
||||
text: '购物车',
|
||||
// 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行)
|
||||
// 2)配置到 unocss.config.ts 的 safelist 中
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-shopping-cart',
|
||||
// badge: 10,
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/me/me',
|
||||
text: '我的',
|
||||
// 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行)
|
||||
// 2)配置到 unocss.config.ts 的 safelist 中
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-user',
|
||||
// badge: 10,
|
||||
},
|
||||
// 其他类型演示
|
||||
// 1、uiLib
|
||||
// {
|
||||
// pagePath: 'pages/index/index',
|
||||
// text: '首页',
|
||||
// iconType: 'uiLib',
|
||||
// icon: 'home',
|
||||
// },
|
||||
// 2、iconfont
|
||||
// {
|
||||
// pagePath: 'pages/index/index',
|
||||
// text: '首页',
|
||||
// // 注意 iconfont 图标需要额外加上 'iconfont',如下
|
||||
// iconType: 'iconfont',
|
||||
// icon: 'iconfont icon-my',
|
||||
// },
|
||||
// 3、image
|
||||
// {
|
||||
// pagePath: 'pages/index/index',
|
||||
// text: '首页',
|
||||
// // 使用 ‘image’时,需要配置 icon + iconActive 2张图片
|
||||
// iconType: 'image',
|
||||
// icon: '/static/tabbar/home.png',
|
||||
// iconActive: '/static/tabbar/homeHL.png',
|
||||
// },
|
||||
]
|
||||
|
||||
// ==================== 商家端 Tabbar 配置 ====================
|
||||
export const merchantTabbarList: CustomTabBarItem[] = [
|
||||
{
|
||||
text: '工作台',
|
||||
pagePath: 'pagesMerchant/dashboard/index',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-dashboard',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesMerchant/order/list',
|
||||
text: '订单',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-document',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesMerchant/goods/list',
|
||||
text: '商品',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-product',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesMerchant/finance/index',
|
||||
text: '财务',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-wallet',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesMerchant/me/index',
|
||||
text: '我的',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-user',
|
||||
},
|
||||
]
|
||||
|
||||
// ==================== 银行端 Tabbar 配置 ====================
|
||||
export const bankTabbarList: CustomTabBarItem[] = [
|
||||
{
|
||||
text: '工作台',
|
||||
pagePath: 'pagesBank/dashboard/index',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-analytics',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesBank/audit/list',
|
||||
text: '审核',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-task-approved',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesBank/customer/list',
|
||||
text: '客户',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-group',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesBank/me/index',
|
||||
text: '我的',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-user',
|
||||
},
|
||||
]
|
||||
|
||||
// 根据客户端类型获取对应的 tabbar 配置
|
||||
export type ClientTypeKey = 'user' | 'merchant' | 'bank'
|
||||
export function getTabbarListByClientType(clientType: ClientTypeKey): CustomTabBarItem[] {
|
||||
const tabbarMap: Record<ClientTypeKey, CustomTabBarItem[]> = {
|
||||
user: userTabbarList,
|
||||
merchant: merchantTabbarList,
|
||||
bank: bankTabbarList,
|
||||
}
|
||||
return tabbarMap[clientType] || userTabbarList
|
||||
}
|
||||
|
||||
// 默认使用用户端配置
|
||||
export const customTabbarList: CustomTabBarItem[] = userTabbarList
|
||||
|
||||
/**
|
||||
* 是否启用 tabbar 缓存
|
||||
* NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时,需要tabbar缓存
|
||||
*/
|
||||
export const tabbarCacheEnable
|
||||
= [TABBAR_STRATEGY_MAP.NATIVE_TABBAR, TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE].includes(selectedTabbarStrategy)
|
||||
|
||||
/**
|
||||
* 是否启用自定义 tabbar
|
||||
* CUSTOM_TABBAR(2,3) 时,启用自定义tabbar
|
||||
*/
|
||||
export const customTabbarEnable
|
||||
= [TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE, TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITHOUT_CACHE].includes(selectedTabbarStrategy)
|
||||
|
||||
/**
|
||||
* 是否需要隐藏原生 tabbar
|
||||
* CUSTOM_TABBAR_WITH_CACHE(2) 时,需要隐藏原生tabbar
|
||||
*/
|
||||
export const needHideNativeTabbar = selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
|
||||
|
||||
@@ -131,7 +159,6 @@ const _tabbarList = customTabbarEnable ? customTabbarList.map(item => ({ text: i
|
||||
export const tabbarList = customTabbarEnable ? customTabbarList : nativeTabbarList
|
||||
|
||||
const _tabbar: TabBar = {
|
||||
// 只有微信小程序支持 custom。App 和 H5 不生效
|
||||
custom: selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE,
|
||||
color: '#999999',
|
||||
selectedColor: '#018d71',
|
||||
@@ -145,3 +172,4 @@ const _tabbar: TabBar = {
|
||||
}
|
||||
|
||||
export const tabBar = tabbarCacheEnable ? _tabbar : undefined
|
||||
|
||||
|
||||
Reference in New Issue
Block a user