feat:小程序自定义tabbar

src/sheep/api/door.ts

@@ -0,0 +1,151 @@
+import request from "@/sheep/utils/request"
+
+export default {
+	/**
+	 * app获取智能柜授权信息
+	 * @param doorHardId 智能柜设备id
+	 * @param cabinetNo 货柜编号
+	 */
+	appGetAuthHardDoor: (data: { doorHardId: any; cabinetNo: any }) =>
+		request({
+			url: "hard/hard-auth/app/get-auth-hard-door",
+			method: "POST",
+			data,
+		}),
+	/**
+	 * app获取智能柜授权信息
+	 * @param authId 授权id
+	 * @param authStatus 是否授权
+	 */
+	appAuthHardDoor: (data: { authId: any; authStatus: any }) =>
+		request({
+			url: "hard/hard-auth/app/get-auth-hard-door",
+			method: "POST",
+			data,
+		}),
+	/**
+	 * app查询智能柜列表(有分页)
+	 */
+	hardDoorPage: (params: any) =>
+		request({
+			url: "hard/hard-door-manager/app/page",
+			method: "GET",
+			params,
+		}),
+
+	/**
+	 * app查询智能柜详情
+	 * @param hardDoorId 智能柜id
+	 */
+	hardDoorDetail: (params: { hardDoorId: any }): Promise<any> =>
+		request({
+			url: "hard/hard-door-manager/app/detail",
+			method: "GET",
+			params,
+		}),
+
+	/**
+	 * 上架
+	 * @param id 绑定id
+	 * @param hardSpuId 商品id
+	 */
+	putaway: (data: { id: any; hardSpuId: any }): Promise<any> =>
+		request({
+			url: "hard/hard-spu/app/putaway",
+			method: "POST",
+			data,
+		}),
+
+	/**
+	 * 下架
+	 * @param id 绑定id
+	 * @param hardSpuId 商品id
+	 */
+	unPutaway: (data: { id: any; hardSpuId: any }) =>
+		request({
+			url: "hard/hard-spu/app/un-putaway",
+			method: "POST",
+			data,
+		}),
+	/**
+	 * app查询货柜补货商品列表
+	 * @param hardDoorId 智能柜编号
+	 * @param cabinetNo 货柜编号
+	 */
+	cabinetPutawayList: (params: { hardDoorId: any; cabinetNo: any }): Promise<any> =>
+		request({
+			url: "hard/hard-spu/app/cabinet-putaway-list",
+			method: "GET",
+			params,
+		}),
+
+	/**
+	 * app查询货柜商品列表
+	 * @param hardId 智能柜编号
+	 * @param cabinetNo 货柜编号
+	 */
+	cabinetList: (params: { hardId: any; cabinetNo: any }): Promise<any> =>
+		request({
+			url: "hard/hard-spu/app/cabinet-list",
+			method: "GET",
+			params,
+		}),
+
+	/**
+	 * 补货完成
+	 * @param flowId
+	 * @param list
+	 */
+	repertoryDone: (data: { flowId: any; list: Array<{ hardSpuId: any; plusCount: any }> }): Promise<any> =>
+		request({
+			url: "hard/hard-spu-repertory/app/repertory-done",
+			method: "POST",
+			data,
+		}),
+
+	/**
+	 * 补货开门
+	 * @param hardDoorId 智能柜编号
+	 * @param cabinetNo 货柜编号
+	 */
+	openRepertory: (data: { hardDoorId: string; cabinetNo: string }): Promise<any> =>
+		request({
+			url: "hard/hard-door-flow/app/open-repertory",
+			method: "POST",
+			data,
+		}),
+
+	/**
+	 * app商品列表
+	 * @param name
+	 * @param skuType
+	 */
+	hardDoorSpuPage: (params: { name: any; skuType: any }): Promise<any> =>
+		request({
+			url: "hard/hard-spu/app/page",
+			method: "GET",
+			params,
+		}),
+	/**
+	 * app检修开门
+	 * @param hardDoorId 智能柜id
+	 * @param cabinetNo 货柜编号
+	 */
+	openAccess: (data: { hardDoorId: string; cabinetNo: string }): Promise<any> =>
+		request({
+			url: "hard/hard-door-flow/app/open-access",
+			method: "POST",
+			data,
+		}),
+	/**
+	 * app检修关门
+	 * @param hardDoorId 智能柜id
+	 * @param cabinetNo 货柜编号
+	 */
+	closeAccess: (data: { hardDoorId: string; cabinetNo: string }): Promise<any> =>
+		request({
+			url: "hard/hard-door-flow/app/close-access",
+			method: "POST",
+			data,
+		}),
+}

src/sheep/api/index.ts

@@ -7,6 +7,7 @@ export { default as applyApi } from "./apply"
 export { default as adApi } from "./ad"
 export { default as appApi } from "./app"
 export { default as boxesApi } from "./boxes"
+export { default as doorApi } from "./door"
 export { default as faceApi } from "./face"
 export { default as feedbackApi } from "./feedback"
 export { default as foodApi } from "./food"

src/sheep/components/base/base-just-flot-nav/base-just-flot-nav.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { computed } from "vue"
 import { router } from "@@/index"
+import { useTabbarStore } from "@@/stores/tabbar"
+
+const tabbarStore = useTabbarStore()
 
 const props = defineProps({
 	title: {
@@ -25,6 +28,10 @@ const isHistiry = computed(() => {
 	return router.hasHistory()
 })
 
+const isDashboard = computed(() => {
+	return tabbarStore.currentRoute == "pages/root/dashboard"
+})
+
 const isTabbar = computed(() => {
 	return router.hasTabbar()
 })
@@ -37,13 +44,18 @@ function getNavTop() {
 	const { statusBarHeight } = uni.getSystemInfoSync()
 	return `${statusBarHeight}px`
 }
+
+function doToDashboard() {
+	router.jump("/pages/root/dashboard", {}, 3)
+}
 </script>
 
 <template>
 	<view class="navbar" :style="{ top: getNavTop() }">
-		<view class="navbar_center" v-if="showLeft && !isTabbar" @tap="doBackClick">
-			<text class="sicon-back icon" v-if="isHistiry" />
-			<text class="sicon-home icon" v-else />
+		<view class="navbar_center" v-if="showLeft && !isTabbar">
+			<view v-if="isHistiry" class="sicon-back icon" @tap="doBackClick" />
+			<view v-if="isHistiry" class="navbar_left_line" />
+			<view v-if="!isDashboard" class="sicon-home icon" @tap="doToDashboard"></view>
 		</view>
 	</view>
 </template>
@@ -58,19 +70,25 @@ function getNavTop() {
 	align-items: center;
 
 	&_center {
+		display: flex;
+		align-items: center;
+		height: 56rpx;
+		border-radius: 28rpx;
 		background: #fff;
 		box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
-		border-radius: 28rpx;
-		width: 56rpx;
-		height: 56rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
 		z-index: 100;
 
+		&_line {
+			width: 1rpx;
+			height: 25rpx;
+			background: #999;
+		}
+
 		&>.icon {
-			font-size: 32rpx;
-			color: #333;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 56rpx;
 		}
 	}
 }

src/sheep/components/base/base-nav/base-nav.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { computed } from "vue"
 import { router } from "@@/index"
+import { useTabbarStore } from "@@/stores/tabbar"
 
+const tabbarStore = useTabbarStore()
 const emit = defineEmits(["rightClick"])
 
 const rightMap = {
@@ -35,17 +37,8 @@ const isHistiry = computed(() => {
 	return router.hasHistory()
 })
 
-const isTabbar = computed(() => {
-	return router.hasTabbar()
-})
-
 const isDashboard = computed(() => {
-	const pages = getCurrentPages()
-	const currentPage = pages[pages.length - 1]
-	if (!currentPage) {
-		return true
-	}
-	return currentPage.route != "pages/root/dashboard"
+	return tabbarStore.currentRoute == "pages/root/dashboard"
 })
 
 function doBackClick() {
@@ -60,9 +53,9 @@ function doToDashboard() {
 <template>
 	<view class="navbar" :style="{ backgroundColor: bgColor, height: '44px' }">
 		<view class="navbar_left">
-			<view class="sicon-back icon" @tap="doBackClick" />
-			<view v-if="isDashboard" class="navbar_left_line" />
-			<view v-if="isDashboard" class="sicon-home icon" @tap="doToDashboard" />
+			<view v-if="isHistiry" class="sicon-back icon" @tap="doBackClick" />
+			<view v-if="isHistiry" class="navbar_left_line" />
+			<view v-if="!isDashboard" class="sicon-home icon" @tap="doToDashboard"></view>
 		</view>
 		<view class="navbar_title" :style="{ color: titleColor }">{{ props.title }}</view>
 		<view v-if="props.rightIcon" class="navbar_right" @tap="emit('rightClick')">

src/sheep/components/crud/crud-layout/crud-layout.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { watch, reactive, onMounted } from "vue"
+
 import { router } from "@@/index"
+import { useTabbarStore } from "@@/stores/tabbar"
+import { jump } from "@/sheep/router";
+
+const tabbarStore = useTabbarStore()
 
 export type Props = {
 	tabBarType: "default" | "just-flot-back"
@@ -66,8 +71,6 @@ function defaultPage() {
 }
 
 function initBackStyle() {
-	console.log("tabBarType:", props.tabBarType);
-
 	switch (props.tabBarType) {
 		case "default":
 			break
@@ -79,6 +82,12 @@ function initBackStyle() {
 			break
 	}
 }
+
+function tabbarChange(index: number) {
+	const target = tabbarStore.tabbarList[index]
+	if (!target) return
+	jump(target.pagePath, {}, 3)
+}
 </script>
 
 <template>
@@ -102,6 +111,11 @@ function initBackStyle() {
 			<view class="layout_main_bottom">
 				<slot name="main-bottom"></slot>
 			</view>
+			<tm-tabbar v-if="tabbarStore.isTabbar" :activeIndex="tabbarStore.activeIndex"
+				:list="tabbarStore.pageTabbarList" :outIndex="-1" fontSize="12px" iconSize="24px" bgColor="#F6F5FA"
+				darkBgColor="#F6F5FA" borderColor="#DBDDDE" color="#8E8E8E" selected-color="#0094ff" position="relative"
+				@change="tabbarChange">
+			</tm-tabbar>
 		</view>
 	</view>
 </template>

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
+		},
+	},
+})

src/sheep/utils/app.ts

@@ -18,6 +18,23 @@ export const getAppInfo = async (): Promise<AppEnvValue> => {
 	return APPENV.WECHAT
 }
 
-export const getLaunchParam = () => {
-	return "canteen"
+// 获取url的params参数对象
+export function getUrlParams(url: string) {
+	const reg = /([^?&=]+)=([^?&=]+)/g
+	const params: any = {}
+	url.replace(reg, (_, k, v) => {
+		params[k] = decodeURIComponent(v)
+		return _
+	})
+	return params
+}
+
+export const getLaunchParam = (url?: string) => {
+	if (!url) {
+		const pages = getCurrentPages()
+		const currentPage = pages[pages.length - 1]
+		url = currentPage?.route ?? ""
+	}
+	const params = getUrlParams(url)
+	return params?.launchParam
 }