feat:小程序自定义tabbar

src/sheep/stores/tabbar.ts

@@ -0,0 +1,185 @@
+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 = {
+	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/tabbar/my",
+		text: "我的",
+		iconPath: "/static/tabbar/my.png",
+		selectedIconPath: "/static/tabbar/my-select.png",
+		launchParam: ["canteen", "selfMerchant", "onlineShop", "coopMerchant", "integrated", "prosperityShop", "prosperityShopMchList"],
+		auth: ["user", "merchant", "doorAdmin"],
+	},
+]
+
+// tabbar
+export const useTabbarStore = defineStore("tabbarStore", {
+	state: (): StoreState => ({
+		tabbarList: [],
+		launchParam: null,
+		currentRoute: "/pages/root/dashboard",
+	}),
+	getters: {
+		isTabbar(state) {
+			return state.tabbarList.some((item) => item.pagePath === `/${state.currentRoute}`)
+		},
+		activeIndex(state) {
+			return state.tabbarList.findIndex((item) => item.pagePath === `/${state.currentRoute}`)
+		},
+		pageTabbarList(state) {
+			return state.tabbarList.map((item) => {
+				return {
+					title: item.text,
+					icon: item.iconPath,
+					selectedIcon: item.selectedIconPath,
+				}
+			})
+		},
+	},
+	actions: {
+		async componetTabbarList(launchParam?: string) {
+			let _launchParam = ""
+			if (launchParam) {
+				_launchParam = getLaunchParam(launchParam)
+			} else {
+				_launchParam = getLaunchParam()
+			}
+			if (this.launchParam === _launchParam) return
+			const appInfo = await getAppInfo()
+			if (!_launchParam || !appInfo) return
+			const tabbarList: Array<TabbarItem> = []
+			TABBAR_CONSTANT.forEach((item, index) => {
+				const visible = item.launchParam.includes(_launchParam)
+				if (visible) {
+					tabbarList.push(item)
+				}
+			})
+			this.tabbarList = tabbarList
+		},
+		jumpFirstTabbar() {
+			const firstTabbar = this.tabbarList[0]
+			if (!firstTabbar) {
+				return
+			}
+			jump(firstTabbar.pagePath, {}, 3)
+		},
+		setCurrentRoute(route: string) {
+			console.log("设置route:", route)
+			this.currentRoute = route
+		},
+	},
+})