1

pages/category/category_detail.vue

@@ -23,7 +23,7 @@
 				<view class="filter-item" :class="{ 'active': sortType === 1 }" @click="changeSort(1)">综合</view>
 				<view class="filter-item" :class="{ 'active': sortType === 2 }" @click="changeSort(2)">销量</view>
 				<view class="filter-item" :class="{ 'active': sortType === 3 }" @click="changeSort(3)">
-					价格
+					券后价
 					<view class="price-arrows">
 						<text class="up" :class="{ 'hl': sortType === 3 && priceOrder === 'asc' }">▲</text>
 						<text class="down" :class="{ 'hl': sortType === 3 && priceOrder === 'desc' }">▼</text>
@@ -31,6 +31,14 @@
 				</view>
 			</view>
 
+			<!-- 高级筛选标签栏 -->
+			<view class="sub-filter-row">
+				<view class="sub-filter-item" :class="{ 'active': filterHasCoupon }" @click="toggleFilter('coupon')">有券</view>
+				<view class="sub-filter-item" :class="{ 'active': filterIsFlagship }" @click="toggleFilter('flagship')">旗舰店</view>
+				<view class="sub-filter-item" :class="{ 'active': filterIsTmall }" @click="toggleFilter('tmall')">天猫</view>
+				<view class="sub-filter-item" :class="{ 'active': filterIsBrand }" @click="toggleFilter('brand')">品牌</view>
+			</view>
+
 			<!-- 商品列表 (横向单列风格) -->
 			<view class="goods-list">
 				<view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx" @click="goToDetail(goods.id)">
@@ -92,7 +100,12 @@
 				sortType: 1, // 1:综合, 2:销量, 3:价格
 				priceOrder: 'desc',
 				loading: false,
-				finished: false
+				finished: false,
+				// 高级筛选状态
+				filterHasCoupon: false,
+				filterIsFlagship: false,
+				filterIsTmall: false,
+				filterIsBrand: false
 			}
 		},
 		onLoad(options) {
@@ -126,14 +139,27 @@
 					sortParam = this.priceOrder === 'asc' ? 8 : 9;
 				}
 
+				// 构建高级筛选参数
+				let filterParams = '';
+				if (this.filterHasCoupon) filterParams += '&filtrate_type=16';
+				if (this.filterIsBrand) filterParams += '&is_brand=1';
+				
+				// 动态构建 shoptype: 旗舰店为1，天猫为2，两者都选为1,2
+				let shopTypes = [];
+				if (this.filterIsFlagship) shopTypes.push(1);
+				if (this.filterIsTmall) shopTypes.push(2);
+				if (shopTypes.length > 0) {
+					filterParams += `&shoptype=${shopTypes.join(',')}`;
+				}
+
 				uni.request({
-					url: `https://api.cmspro.haodanku.com/find/allItemList?category_id=${this.mainCatId}&son_category=${encodeURIComponent(this.secondCategory)}&page=${this.page}&sort=${sortParam}&page_size=20&cid=qOstW90`,
+					url: `https://api.cmspro.haodanku.com/find/allItemList?category_id=${this.mainCatId}&son_category=${encodeURIComponent(this.secondCategory)}&page=${this.page}&sort=${sortParam}&page_size=20&cid=qOstW90${filterParams}`,
 					success: (res) => {
 						if (res.data && res.data.code === 200 && res.data.data && res.data.data.item_info) {
 							const list = res.data.data.item_info.map(item => ({
 								id: item.id,
 								image: item.itempic,
-								title: item.itemshorttitle,
+								title: item.itemshorttitle && item.itemshorttitle.length > 18 ? item.itemshorttitle.substring(0, 18) + '...' : item.itemshorttitle,
 								finalPrice: item.itemendprice,
 								couponValue: item.couponmoney || 0,
 								sales: item.itemsale >= 10000 ? (item.itemsale / 10000).toFixed(1) + '万' : item.itemsale,
@@ -169,6 +195,14 @@
 				}
 				this.getProducts(true);
 			},
+			toggleFilter(type) {
+				if (type === 'coupon') this.filterHasCoupon = !this.filterHasCoupon;
+				if (type === 'flagship') this.filterIsFlagship = !this.filterIsFlagship;
+				if (type === 'tmall') this.filterIsTmall = !this.filterIsTmall;
+				if (type === 'brand') this.filterIsBrand = !this.filterIsBrand;
+				
+				this.getProducts(true);
+			},
 			loadMore() {
 				this.getProducts();
 			},
@@ -271,6 +305,30 @@
 		font-weight: bold;
 	}
 
+	/* 高级筛选标签栏 */
+	.sub-filter-row {
+		display: flex;
+		background: #ffffff;
+		padding: 10rpx 20rpx 20rpx;
+		align-items: center;
+	}
+
+	.sub-filter-item {
+		padding: 6rpx 20rpx;
+		background: #f5f6f8;
+		color: #333;
+		font-size: 24rpx;
+		border-radius: 8rpx;
+		margin-right: 16rpx;
+		transition: all 0.2s;
+	}
+
+	.sub-filter-item.active {
+		background: linear-gradient(to right, #ff758c, #ff416c);
+		color: #ffffff;
+		font-weight: 500;
+	}
+
 	.price-arrows {
 		display: flex;
 		flex-direction: column;
@@ -338,7 +396,7 @@
 	}
 
 	.title-text {
-		font-size: 26rpx;
+		font-size: 22rpx;
 		color: #333;
 		font-weight: 500;
 		overflow: hidden;