动态tabbar

src/App.vue

@@ -1,8 +1,79 @@
-<script setup lang="ts">
-import { onLaunch, onShow, onHide } from "@dcloudio/uni-app"
-onLaunch(() => {})
-onShow(() => {})
-onHide(() => {})
+<script lang="ts">
+// import { onLaunch, onShow, onHide } from "@dcloudio/uni-app"
+// onLaunch(() => {})
+// onShow(() => {})
+// onHide(() => {})
+
+const tabbar = [
+	{
+		pagePath: "pages/tabbar/home",
+		text: "首页",
+		iconPath: "/static/tabbar/home.png",
+		selectedIconPath: "/static/tabbar/home-select.png",
+	},
+	// {
+	// 	"pagePath": "pages/tabbar/shop",
+	// 	"text": "超市",
+	// 	"iconPath": "/static/tabbar/shop.png",
+	// 	"selectedIconPath": "/static/tabbar/shop-select.png"
+	// },
+	{
+		pagePath: "pages/tabbar/order",
+		text: "订单",
+		iconPath: "/static/tabbar/order.png",
+		selectedIconPath: "/static/tabbar/order-select.png",
+	},
+	{
+		pagePath: "pages/tabbar/flowStatistics",
+		text: "流水统计",
+		iconPath: "/static/tabbar/order.png",
+		selectedIconPath: "/static/tabbar/order-select.png",
+	},
+	{
+		pagePath: "pages/tabbar/individualOrder",
+		text: "订单",
+		iconPath: "/static/tabbar/order.png",
+		selectedIconPath: "/static/tabbar/order-select.png",
+	},
+	{
+		pagePath: "pages/tabbar/my",
+		text: "我的",
+		iconPath: "/static/tabbar/my.png",
+		selectedIconPath: "/static/tabbar/my-select.png",
+	},
+]
+
+export default {
+	onLaunch() {},
+	onShow() {},
+	onHide() {},
+
+	methods: {
+		_initTabbar() {
+			tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath }, index) => {
+				if (index === 2) {
+					uni.setTabBarItem({
+						index: index,
+						pagePath,
+						text,
+						iconPath,
+						selectedIconPath,
+						visible: true,
+					})
+				} else {
+					uni.setTabBarItem({
+						index: index,
+						pagePath,
+						text,
+						iconPath,
+						selectedIconPath,
+						visible: true,
+					})
+				}
+			})
+		},
+	},
+}
 </script>
 
 <style lang="scss">

src/pages/tabbar/flowStatistics.vue

@@ -50,11 +50,11 @@
 
 			<view class="h-20rpx" />
 
-			<view class="bg-white rounded-16rpx p-2 mb-2 shadow-md" v-for="(v, i) in list" :key="i">
+			<view class="bg-white rounded-16rpx p-2 mb-1 shadow-md" v-for="(v, i) in list" :key="i">
 				<view class="flex justify-between items-center text-sm text-gray-800 mb-1">
 					<view class="flex items-center">
 						<image class="w-50rpx h-50rpx rounded-8rpx" :src="filePath(v.logoPic)" mode="aspectFill" />
-						<view>{{ v.merchantName }}</view>
+						<view class="ml-2">{{ v.merchantName }}</view>
 					</view>
 					<view>{{ v.day }}</view>
 				</view>
@@ -120,6 +120,9 @@ onLoad(() => {
 onShow(() => {
 	const isLogin = hooks.useCheckLogin()
 	if (!isLogin) return
+	if (pageRef.value) {
+		pageRef.value.reload(false)
+	}
 })
 
 const query = (page: number, pagesize: number) => {

src/pages/tabbar/home.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue"
-import { onShow } from "@dcloudio/uni-app"
+import { onLoad, onShow } from "@dcloudio/uni-app"
 import { hooks, router } from "@@/index"
 import { merchantApi } from "@@/api"
 import { filePath } from "@@/utils/file"
@@ -12,6 +12,10 @@ const state = reactive<any>({
 	},
 })
 
+onLoad(() => {
+	const app = getApp()
+	app._initTabbar()
+})
 onShow(() => {
 	if (pageRef.value) {
 		pageRef.value.reload(false)

src/pages/tabbar/my.vue

@@ -261,6 +261,9 @@ const getStorageUserInfo = () => {
 }
 
 onLoad(() => {
+	const app = getApp()
+	app._initTabbar()
+
 	isDevEnv()
 		? state.menuList.push({
 				text: "测试登录",

src/pages/tabbar/order.vue

@@ -31,9 +31,9 @@ onLoad(() => {
 onShow(async () => {
 	const isLogin = await hooks.useCheckLogin()
 	if (!isLogin) return
-	if (pageRef.value) {
-		pageRef.value.reload(false)
-	}
+	// if (pageRef.value) {
+	// 	pageRef.value.reload(false)
+	// }
 })
 const doTab = (e: any) => {
 	const target = data.tabs[e]
@@ -100,7 +100,7 @@ const doRefund = (v: any) => {
 								<!-- <view class="m-l-15rpx color-#999 font-size-26rpx! iconfont icon-youjiantou" /> -->
 							</view>
 							<tm-tag v-if="v.orderStatus == 1" color="info" size="xs">未支付</tm-tag>
-							<tm-tag v-if="v.orderStatus == 5" color="success" size="xs">待核销</tm-tag>
+							<tm-tag v-if="v.orderStatus == 5" color="success" size="xs">已支付</tm-tag>
 							<tm-tag v-if="v.orderStatus == 10" color="error" size="xs">售后</tm-tag>
 							<tm-tag v-if="v.orderStatus == 20" size="xs">已核销</tm-tag>
 						</view>

src/pages/tabbar/shop.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue"
-import { onShow } from "@dcloudio/uni-app"
+import { onLoad, onShow } from "@dcloudio/uni-app"
 import { merchantApi } from "@@/api"
 import { hooks, router } from "@@/index"
 import { filePath } from "@@/utils/file"
@@ -18,6 +18,10 @@ const query = (page: number, pagesize: number) => {
 	startPage(page, pagesize, false, state.pa)
 }
 
+onLoad(() => {
+	const app = getApp()
+	app._initTabbar()
+})
 onShow(() => {
 	pageRef.value && pageRef.value.reload(false)
 })