分类

mallApp/src/pages/home/category.vue

@@ -24,6 +24,21 @@
 			</view>
 		</view>
 
+	<!-- 商品筛选标签栏 -->
+	<view class="filter-tabs-container">
+		<view class="filter-tabs">
+			<view 
+				v-for="(filterItem, filterIndex) in filterTabs" 
+				:key="filterIndex"
+				class="filter-tab-item"
+				:class="{ 'active': currentFilterTab === filterIndex }"
+				@click="switchFilterTab(filterIndex)"
+			>
+				<text>{{ filterItem.name }}</text>
+			</view>
+		</view>
+	</view>
+
     <scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
       <view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[!isSearchMode && currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichNav($event ,item)" >
         <text>{{item.categoryName}}</text>
@@ -123,7 +138,15 @@ export default {
       searchText: '', // 搜索文本
       searchTimer: null, // 搜索防抖定时器
       isSearchMode: false, // 是否为搜索模式
-      lastSearchText: '' // 上次搜索的文本，用于优化
+      lastSearchText: '', // 上次搜索的文本，用于优化
+      // 筛选标签数据
+      filterTabs: [
+        { name: '全部', value: -1 },
+        { name: '鲜花', value: 0 },
+        { name: '绿植', value: 1 },
+        { name: '仿真花', value: 2 }
+      ],
+      currentFilterTab: 0 // 当前选中的筛选标签
     }
   },
 	computed: {
@@ -315,7 +338,21 @@ export default {
     },
     // 列表
     getGoodList () {
-      return getList({...this.form, page: this.list.page,pageSize:10,requestType:'mall'}) .then(res => {
+      // 获取当前筛选标签的值
+      const filterValue = this.filterTabs[this.currentFilterTab].value
+      const params = {
+        ...this.form, 
+        page: this.list.page,
+        pageSize: 10,
+        requestType: 'mall'
+      }
+      
+      // 添加flower筛选参数（-1表示全部，0表示鲜花，1表示绿植，2表示仿真花）
+      if (filterValue !== -1) {
+        params.flower = filterValue
+      }
+      
+      return getList(params).then(res => {
           // 处理商品列表数据，completes方法来自list混入
           // 该方法会处理分页数据，更新list对象的data、page、finished等属性
           // res包含接口返回的商品列表数据，completes方法会将数据添加到this.list.data中
@@ -378,6 +415,22 @@ export default {
         return `未找到"${this.searchText}"相关商品`
       }
       return '暂无商品'
+    },
+    
+    // 切换筛选标签
+    switchFilterTab(index) {
+      if (this.currentFilterTab === index) {
+        return
+      }
+      
+      this.currentFilterTab = index
+      
+      // 切换筛选标签时清空搜索状态
+      this.clearSearchState()
+      
+      // 重置列表并重新加载数据
+      this.resetList()
+      this.getGoodList()
     }
   },
   
@@ -464,7 +517,7 @@ page {
   position: fixed;
   left: 0;
   z-index: 10;
-  height: calc(100vh - 160upx); /* 调整高度以适应搜索框 */
+  height: calc(100vh - 240upx); /* 调整高度以适应搜索框和筛选标签栏 */
   background-color: #f0f2f6;
   .tab-bar-item {
     width: 200upx;
@@ -495,7 +548,7 @@ page {
 .right-box {
   width: 100%;
   overflow: auto;
-  height: calc(100vh - 280upx); /* 调整高度以适应搜索框 */
+  height: calc(100vh - 360upx); /* 调整高度以适应搜索框和筛选标签栏 */
   padding-left: 220upx;
   box-sizing: border-box;
   .page-view {
@@ -570,6 +623,42 @@ page {
 	gap: 20upx;
 }
 
+/* 筛选标签栏样式 */
+.filter-tabs-container {
+	padding: 0 30upx 20upx 30upx;
+	background-color: #fff;
+}
+
+.filter-tabs {
+	display: flex;
+	gap: 20upx;
+	align-items: center;
+}
+
+.filter-tab-item {
+	padding: 18upx 48upx;
+	border-radius: 50upx;
+	font-size: 28upx;
+	color: #3385FF;
+	border: 2upx solid #3385FF;
+	background-color: transparent;
+	transition: all 0.3s ease;
+	white-space: nowrap;
+	min-width: 120upx;
+	text-align: center;
+	flex: 1;
+	
+	&.active {
+		background-color: #3385FF;
+		color: #fff;
+		border-color: #3385FF;
+	}
+	
+	&:active {
+		opacity: 0.8;
+	}
+}
+
 .search-bar {
 	flex: 1;
 	background-color: #fff;