1

pages/index/index.vue

@@ -234,6 +234,14 @@
 			
 			<view class="loading-more">-- 到底啦 --</view>
 		</scroll-view>
+
+		<!-- 底部 Tab 栏 -->
+		<view class="bottom-tab-bar">
+			<view class="tab-item" v-for="(tab, index) in bottomBarList" :key="index" @click="activeBottomTab = index">
+				<image class="tab-icon" :src="activeBottomTab === index ? tab.hl_img : tab.img"></image>
+				<text class="tab-text" :style="{ color: activeBottomTab === index ? tab.hl_color : tab.color }">{{ tab.title }}</text>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -241,6 +249,8 @@
 	export default {
 		data() {
 			return {
+				activeBottomTab: 0,
+				bottomBarList: [],
 				currentTab: 0,
 				navList: [{ name: '首页', cat_id: 0 }, { name: '推荐', cat_id: -1 }],
 				scrollTarget: '',
@@ -285,6 +295,7 @@
 			}
 		},
 		onLoad() {
+			this.getBottomBar();
 			this.getCategoryList();
 			this.getNoticeList();
 			this.getGoodsList();
@@ -308,6 +319,17 @@
 			}
 		},
 		methods: {
+			getBottomBar() {
+				uni.request({
+					url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
+					success: (res) => {
+						if (res.data && res.data.code === 200 && res.data.data.bottom_bar) {
+							// 根据 sort 降序排序
+							this.bottomBarList = res.data.data.bottom_bar.sort((a, b) => b.sort - a.sort);
+						}
+					}
+				});
+			},
 			getCategoryList() {
 				uni.request({
 					url: 'https://api.cmspro.haodanku.com/index/category?cid=qOstW90',
@@ -1491,6 +1513,40 @@
 		text-align: center;
 		color: #999;
 		font-size: 24rpx;
-		padding: 30rpx 0 50rpx;
+		padding: 30rpx 0 calc(120rpx + env(safe-area-inset-bottom));
+	}
+
+	/* 底部 Tab 栏 */
+	.bottom-tab-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		z-index: 999;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		height: 100rpx;
+		background-color: #ffffff;
+		border-top: 1rpx solid #eeeeee;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.bottom-tab-bar .tab-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+	}
+
+	.bottom-tab-bar .tab-icon {
+		width: 44rpx;
+		height: 44rpx;
+		margin-bottom: 6rpx;
+	}
+
+	.bottom-tab-bar .tab-text {
+		font-size: 20rpx;
 	}
 </style>