289 lines
8.1 KiB
TypeScript
289 lines
8.1 KiB
TypeScript
import { defineStore } from "pinia"
|
|
|
|
import { getLaunchParam, getAppInfo } from "../utils/app"
|
|
import { jump } from "../router/index"
|
|
|
|
type TabbarItem = {
|
|
pagePath: string
|
|
text: string
|
|
iconPath: string
|
|
selectedIconPath: string
|
|
launchParam: string[]
|
|
auth: string[]
|
|
}
|
|
|
|
type StoreState = {
|
|
rootTabbarList: Array<TabbarItem>
|
|
rootActiveIndex: number
|
|
tabbarList: Array<TabbarItem>
|
|
launchParam: string | null
|
|
currentRoute: string
|
|
}
|
|
|
|
const TABBAR_CONSTANT: Array<TabbarItem> = [
|
|
{
|
|
pagePath: "/pages/tabbar/canteen",
|
|
text: "食堂",
|
|
iconPath: "/static/tabbar/canteen.png",
|
|
selectedIconPath: "/static/tabbar/canteen-select.png",
|
|
launchParam: ["canteen"],
|
|
auth: [],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/canteenAnalyse",
|
|
text: "喜好分析",
|
|
iconPath: "/static/tabbar/canteen-analyse.png",
|
|
selectedIconPath: "/static/tabbar/canteen-analyse-select.png",
|
|
launchParam: ["canteen"],
|
|
auth: [],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/selfMerchant",
|
|
text: "自营商家",
|
|
iconPath: "/static/tabbar/self-merchant.png",
|
|
selectedIconPath: "/static/tabbar/self-merchant-select.png",
|
|
launchParam: ["selfMerchant"],
|
|
auth: ["user"],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/coopMerchant",
|
|
text: "合作商家",
|
|
iconPath: "/static/tabbar/coop-merchant.png",
|
|
selectedIconPath: "/static/tabbar/coop-merchant-select.png",
|
|
launchParam: ["coopMerchant"],
|
|
auth: ["user"],
|
|
},
|
|
// 在线商城(商品展示)
|
|
{
|
|
pagePath: "/pages/tabbar/onlineShop",
|
|
text: "在线商城",
|
|
iconPath: "/static/tabbar/online-shop.png",
|
|
selectedIconPath: "/static/tabbar/online-shop-select.png",
|
|
launchParam: ["onlineShop"],
|
|
auth: ["user"],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/prosperityShop",
|
|
text: "共富商城",
|
|
iconPath: "/static/tabbar/prosperity-shop.png",
|
|
selectedIconPath: "/static/tabbar/prosperity-shop-select.png",
|
|
launchParam: ["prosperityShop"],
|
|
auth: ["user"],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/prosperityShopMchList",
|
|
text: "共富商家",
|
|
iconPath: "/static/tabbar/prosperity-shop.png",
|
|
selectedIconPath: "/static/tabbar/prosperity-shop-select.png",
|
|
launchParam: ["prosperityShopMchList"],
|
|
auth: ["user"],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/cabinet",
|
|
text: "智能柜",
|
|
iconPath: "/static/tabbar/cabinet.png",
|
|
selectedIconPath: "/static/tabbar/cabinet-select.png",
|
|
launchParam: [],
|
|
auth: ["doorAdmin"],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/order",
|
|
text: "订单",
|
|
iconPath: "/static/tabbar/order.png",
|
|
selectedIconPath: "/static/tabbar/order-select.png",
|
|
launchParam: ["canteen", "selfMerchant", "coopMerchant", "onlineShop", "prosperityShop"],
|
|
auth: ["user"],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/flowStatistics",
|
|
text: "流水统计",
|
|
iconPath: "/static/tabbar/order.png",
|
|
selectedIconPath: "/static/tabbar/order-select.png",
|
|
launchParam: [],
|
|
auth: ["merchant"],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/individualOrder",
|
|
text: "订单",
|
|
iconPath: "/static/tabbar/order.png",
|
|
selectedIconPath: "/static/tabbar/order-select.png",
|
|
launchParam: [],
|
|
auth: ["merchant"],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/integrated",
|
|
text: "综合服务",
|
|
iconPath: "/static/tabbar/integrated.png",
|
|
selectedIconPath: "/static/tabbar/integrated-select.png",
|
|
launchParam: ["integrated"],
|
|
auth: ["user"],
|
|
},
|
|
{
|
|
pagePath: "/pages/integrated/notice/index",
|
|
text: "通知公告",
|
|
iconPath: "/static/tabbar/notice.png",
|
|
selectedIconPath: "/static/tabbar/notice-select.png",
|
|
launchParam: ["notice"],
|
|
auth: ["user"],
|
|
},
|
|
{
|
|
pagePath: "/pages/integrated/feedback/index",
|
|
text: "意见反馈",
|
|
iconPath: "/static/tabbar/feedback.png",
|
|
selectedIconPath: "/static/tabbar/feedback-select.png",
|
|
launchParam: ["feedback"],
|
|
auth: ["user"],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/my",
|
|
text: "我的",
|
|
iconPath: "/static/tabbar/my.png",
|
|
selectedIconPath: "/static/tabbar/my-select.png",
|
|
launchParam: [
|
|
"canteen",
|
|
"selfMerchant",
|
|
"onlineShop",
|
|
"coopMerchant",
|
|
"integrated",
|
|
"prosperityShop",
|
|
"prosperityShopMchList",
|
|
"notice",
|
|
"feedback",
|
|
],
|
|
auth: ["user", "merchant", "doorAdmin"],
|
|
},
|
|
]
|
|
|
|
const WORKBENCH_TABBAR_ITEM: TabbarItem = {
|
|
pagePath: "/pages/root/dashboard",
|
|
text: "工作台",
|
|
iconPath: "/static/tabbar/home.png",
|
|
selectedIconPath: "/static/tabbar/home-select.png",
|
|
launchParam: [],
|
|
auth: [],
|
|
}
|
|
|
|
function getTabbarLaunchParam(url?: string) {
|
|
const launchParam = getLaunchParam(url)
|
|
if (launchParam) return launchParam
|
|
if (!url) return ""
|
|
|
|
// 常用功能也可能直接配置 Tabbar 页面路径，需要由页面反推出所属业务场景。
|
|
const pagePath = url.split("?")[0]
|
|
const tabbarItem = TABBAR_CONSTANT.find((item) => item.pagePath === pagePath)
|
|
return tabbarItem?.launchParam[0] || ""
|
|
}
|
|
|
|
const defaultRootTabbarList: Array<TabbarItem> = [
|
|
{
|
|
pagePath: "/pages/root/dashboard",
|
|
text: "首页",
|
|
iconPath: "/static/tabbar/home.png",
|
|
selectedIconPath: "/static/tabbar/home-select.png",
|
|
launchParam: [],
|
|
auth: [],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/scan",
|
|
text: "扫一扫",
|
|
iconPath: "/static/tabbar/scan.png",
|
|
selectedIconPath: "/static/tabbar/scan.png",
|
|
launchParam: [],
|
|
auth: [],
|
|
},
|
|
{
|
|
pagePath: "/pages/tabbar/my",
|
|
text: "我的",
|
|
iconPath: "/static/tabbar/my.png",
|
|
selectedIconPath: "/static/tabbar/my-select.png",
|
|
launchParam: [],
|
|
auth: [],
|
|
},
|
|
]
|
|
|
|
// tabbar
|
|
export const useTabbarStore = defineStore("tabbarStore", {
|
|
state: (): StoreState => ({
|
|
rootTabbarList: defaultRootTabbarList,
|
|
rootActiveIndex: 0,
|
|
tabbarList: [],
|
|
launchParam: null,
|
|
currentRoute: "/pages/root/dashboard",
|
|
}),
|
|
getters: {
|
|
isDashboardPage(state) {
|
|
const currentRoute = state.currentRoute.startsWith("/") ? state.currentRoute : `/${state.currentRoute}`
|
|
return currentRoute === "/pages/root/dashboard" || currentRoute === "/pages/tabbar/my"
|
|
},
|
|
isTabbar(state) {
|
|
const currentRoute = state.currentRoute.startsWith("/") ? state.currentRoute : `/${state.currentRoute}`
|
|
// 工作台只作为业务 Tabbar 的返回入口，进入页面后仍展示首页自己的根 Tabbar。
|
|
return currentRoute !== WORKBENCH_TABBAR_ITEM.pagePath && state.tabbarList.some((item) => item.pagePath === currentRoute)
|
|
},
|
|
activeIndex(state) {
|
|
const currentRoute = state.currentRoute.startsWith("/") ? state.currentRoute : `/${state.currentRoute}`
|
|
return state.tabbarList.findIndex((item) => item.pagePath === currentRoute)
|
|
},
|
|
pageTabbarList(state) {
|
|
return state.tabbarList.map((item) => {
|
|
return {
|
|
title: item.text,
|
|
icon: item.iconPath,
|
|
selectedIcon: item.selectedIconPath,
|
|
}
|
|
})
|
|
},
|
|
rootPageTabbarList(state) {
|
|
return defaultRootTabbarList.map((item, index) => {
|
|
return {
|
|
title: item.text,
|
|
icon: item.iconPath,
|
|
selectedIcon: item.selectedIconPath,
|
|
disabled: index == 1 ? true : false,
|
|
}
|
|
})
|
|
},
|
|
},
|
|
actions: {
|
|
async componetTabbarList(launchParam?: string) {
|
|
const _launchParam = getTabbarLaunchParam(launchParam)
|
|
const hasMyTabbar = this.tabbarList.some((item) => item.pagePath === "/pages/tabbar/my")
|
|
const hasWorkbenchTabbar = this.tabbarList.some((item) => item.pagePath === WORKBENCH_TABBAR_ITEM.pagePath)
|
|
// 热更新或旧状态中可能已有相同场景但尚未加入工作台，此时仍需重新组装。
|
|
if (this.launchParam === _launchParam && (!hasMyTabbar || hasWorkbenchTabbar)) return
|
|
const appInfo = await getAppInfo()
|
|
if (!_launchParam || !appInfo) return
|
|
const tabbarList: Array<TabbarItem> = []
|
|
TABBAR_CONSTANT.forEach((item) => {
|
|
const visible = item.launchParam.includes(_launchParam)
|
|
if (visible) {
|
|
tabbarList.push(item)
|
|
}
|
|
})
|
|
const myTabbarIndex = tabbarList.findIndex((item) => item.pagePath === "/pages/tabbar/my")
|
|
if (myTabbarIndex !== -1) {
|
|
// 仅对带“我的”的业务导航生效，并保证“工作台”紧邻其左侧。
|
|
tabbarList.splice(myTabbarIndex, 0, WORKBENCH_TABBAR_ITEM)
|
|
}
|
|
this.tabbarList = tabbarList
|
|
this.launchParam = _launchParam
|
|
},
|
|
jumpFirstTabbar() {
|
|
const firstTabbar = this.tabbarList[0]
|
|
if (!firstTabbar) {
|
|
return
|
|
}
|
|
jump(firstTabbar.pagePath, {})
|
|
},
|
|
setCurrentRoute(route: string) {
|
|
if (route === this.currentRoute) {
|
|
return
|
|
}
|
|
this.currentRoute = route
|
|
},
|
|
setRootActiveIndex(index: number) {
|
|
this.rootActiveIndex = index
|
|
},
|
|
},
|
|
})
|