From b87ab6c7b8344ad32f1ea2851566cdbdfd916f5f Mon Sep 17 00:00:00 2001
From: "1173117610@qq.com" <a15133400227>
Date: Mon, 11 May 2026 15:54:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/bottom-nav/bottom-nav.vue |   8 +-
 pages.json                           |   6 +
 pages/classify/classify.vue          | 297 +++++++++++++++++++++++++++
 3 files changed, 309 insertions(+), 2 deletions(-)
 create mode 100644 pages/classify/classify.vue

diff --git a/components/bottom-nav/bottom-nav.vue b/components/bottom-nav/bottom-nav.vue
index 3466d40..7753c3c 100644
--- a/components/bottom-nav/bottom-nav.vue
+++ b/components/bottom-nav/bottom-nav.vue
@@ -29,8 +29,11 @@
 					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);
+							// 过滤并排序：剔除“发现”，仅保留首页、榜单、分类
+							const allowedTitles = ['首页', '榜单', '分类'];
+							this.bottomBarList = res.data.data.bottom_bar
+								.filter(item => allowedTitles.includes(item.title))
+								.sort((a, b) => b.sort - a.sort);
 						}
 					}
 				});
@@ -41,6 +44,7 @@
 				let url = '';
 				if (tab.title === '首页') url = '/pages/index/index';
 				else if (tab.title === '榜单') url = '/pages/rank/rank';
+				else if (tab.title === '分类') url = '/pages/classify/classify';
 				
 				if (url) {
 					uni.redirectTo({
diff --git a/pages.json b/pages.json
index f95c03a..d3ced2e 100644
--- a/pages.json
+++ b/pages.json
@@ -29,6 +29,12 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/classify/classify",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/classify/classify.vue b/pages/classify/classify.vue
new file mode 100644
index 0000000..d3ac733
--- /dev/null
+++ b/pages/classify/classify.vue
@@ -0,0 +1,297 @@
+<template>
+	<view class="classify-container">
+		<view class="classify-header">
+			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+			<view class="header-content">
+				<view class="search-bar">
+					<text class="search-icon">🔍</text>
+					<text class="search-placeholder">输入关键词或粘贴商品标题</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="main-body" :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
+			<!-- 左侧一级菜单 -->
+			<scroll-view scroll-y class="side-bar" :show-scrollbar="false">
+				<view class="side-item" :class="{ 'active': activeIndex === index }"
+					v-for="(item, index) in categoryData" :key="index" @click="switchMainCategory(index)">
+					<text class="side-txt">{{ item.name }}</text>
+				</view>
+			</scroll-view>
+
+			<!-- 右侧内容区 -->
+			<scroll-view scroll-y class="content-panel" :show-scrollbar="false">
+				<view class="category-group" v-for="(second, sIdx) in currentSubCategories" :key="sIdx">
+					<view class="group-title">
+						<text class="title-line"></text>
+						<text class="title-txt">{{ second.cate_name }}</text>
+						<text class="title-line"></text>
+					</view>
+					<view class="sub-grid">
+						<view class="sub-item" v-for="(three, tIdx) in second.three" :key="tIdx" @click="goToDetail(three)">
+							<view class="sub-img-wrap">
+								<image class="sub-img" :src="three.img_url" mode="aspectFit"></image>
+							</view>
+							<text class="sub-name">{{ three.cate_name }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="footer-placeholder"></view>
+			</scroll-view>
+		</view>
+
+		<!-- 底部导航 -->
+		<bottom-nav :activeTab="navActiveIndex"></bottom-nav>
+	</view>
+</template>
+
+<script>
+	import BottomNav from '@/components/bottom-nav/bottom-nav.vue';
+
+	export default {
+		components: {
+			BottomNav
+		},
+		data() {
+			return {
+				statusBarHeight: 44,
+				activeIndex: 0,
+				categoryData: [],
+				navActiveIndex: -1 // 初始为-1，直到匹配到分类Tab
+			}
+		},
+		computed: {
+			currentSubCategories() {
+				if (this.categoryData.length > 0 && this.categoryData[this.activeIndex]) {
+					return this.categoryData[this.activeIndex].second || [];
+				}
+				return [];
+			}
+		},
+		onLoad() {
+			const sysInfo = uni.getSystemInfoSync();
+			this.statusBarHeight = sysInfo.statusBarHeight || 44;
+			this.getSuperCategory();
+		},
+		methods: {
+			getSuperCategory() {
+				uni.request({
+					url: 'https://api.cmspro.haodanku.com/index/superCategory?cid=qOstW90',
+					header: {
+						'accept': 'application/json, text/plain, */*',
+						'accept-language': 'zh-CN,zh;q=0.9'
+					},
+					success: (res) => {
+						if (res.data && res.data.code === 200) {
+							this.categoryData = res.data.data;
+							// 获取数据后尝试匹配底部导航高亮状态
+							this.matchNavActive();
+						}
+					}
+				});
+			},
+			matchNavActive() {
+				// 获取底部导航数据，查找“分类”对应的索引
+				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) {
+							const allowedTitles = ['首页', '榜单', '分类'];
+							const list = res.data.data.bottom_bar
+								.filter(item => allowedTitles.includes(item.title))
+								.sort((a, b) => b.sort - a.sort);
+							const idx = list.findIndex(item => item.title === '分类');
+							if (idx !== -1) {
+								this.navActiveIndex = idx;
+							}
+						}
+					}
+				});
+			},
+			switchMainCategory(index) {
+				this.activeIndex = index;
+			},
+			goToDetail(three) {
+				const name = encodeURIComponent(three.cate_name.trim());
+				const catId = this.categoryData[this.activeIndex].cat_id;
+				const secondCat = three.second_category;
+				
+				uni.navigateTo({
+					url: `/pages/category/category_detail?cate_name=${name}&id=${catId}&second_category=${secondCat}`
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.classify-container {
+		width: 100%;
+		height: 100vh;
+		background-color: #ffffff;
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* 头部 */
+	.classify-header {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		background: #ffffff;
+		z-index: 100;
+		border-bottom: 1rpx solid #f8f8f8;
+	}
+
+	.header-content {
+		height: 88rpx;
+		display: flex;
+		align-items: center;
+		padding: 0 30rpx;
+	}
+
+	.search-bar {
+		flex: 1;
+		height: 72rpx;
+		background-color: #f5f5f5;
+		border-radius: 36rpx;
+		display: flex;
+		align-items: center;
+		padding: 0 30rpx;
+	}
+
+	.search-icon {
+		font-size: 28rpx;
+		color: #999;
+		margin-right: 12rpx;
+	}
+
+	.search-placeholder {
+		font-size: 26rpx;
+		color: #999;
+	}
+
+	/* 主体布局 */
+	.main-body {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+	}
+
+	/* 左侧菜单 */
+	.side-bar {
+		width: 180rpx;
+		height: 100%;
+		background-color: #f7f8fa;
+		flex-shrink: 0;
+	}
+
+	.side-item {
+		width: 100%;
+		height: 100rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+	}
+
+	.side-txt {
+		font-size: 28rpx;
+		color: #666;
+	}
+
+	.side-item.active {
+		background-color: #ffffff;
+	}
+
+	.side-item.active .side-txt {
+		color: #333;
+		font-weight: bold;
+	}
+
+	.side-item.active::before {
+		content: "";
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 6rpx;
+		height: 32rpx;
+		background: linear-gradient(180deg, #ff715a, #ff416c);
+		border-radius: 0 4rpx 4rpx 0;
+	}
+
+	/* 右侧内容 */
+	.content-panel {
+		flex: 1;
+		height: 100%;
+		padding: 0 20rpx;
+		background-color: #ffffff;
+	}
+
+	.category-group {
+		padding-top: 30rpx;
+	}
+
+	.group-title {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 30rpx;
+	}
+
+	.title-line {
+		width: 30rpx;
+		height: 2rpx;
+		background-color: #eee;
+	}
+
+	.title-txt {
+		font-size: 26rpx;
+		color: #333;
+		font-weight: bold;
+		margin: 0 20rpx;
+	}
+
+	.sub-grid {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.sub-item {
+		width: 33.33%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 40rpx;
+	}
+
+	.sub-img-wrap {
+		width: 120rpx;
+		height: 120rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 12rpx;
+	}
+
+	.sub-img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.sub-name {
+		font-size: 24rpx;
+		color: #666;
+		text-align: center;
+		width: 90%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.footer-placeholder {
+		height: 120rpx; /* 为底部导航预留空间 */
+	}
+</style>