实现高级筛选左右布局并修复操作按钮被遮挡问题

pages/index/index.js

@@ -139,6 +139,17 @@ Page({
     showSpecificationPicker: false,
     showProductNamePicker: false,
     showAdvancedRegionPicker: false,
+    
+    // 筛选分类数据（左侧）
+    filterCategories: [
+      { label: '地区', value: 'region' },
+      { label: '蛋壳颜色', value: 'shellColor' },
+      { label: '商品名称', value: 'productName' },
+      { label: '规格', value: 'specification' },
+      { label: '蛋黄类型', value: 'yolkType' }
+    ],
+    // 当前选中的筛选分类
+    selectedFilterCategory: 'region',
     // 蛋壳颜色选项
     shellColorOptions: [
       { label: '全部颜色', value: 'all' },
@@ -1996,6 +2007,14 @@ Page({
     });
   },
   
+  // 选择筛选分类（左侧）
+  selectFilterCategory: function (e) {
+    const category = e.currentTarget.dataset.category;
+    this.setData({
+      selectedFilterCategory: category
+    });
+  },
+
   // 应用高级筛选
   applyAdvancedFilter: function () {
     // 这里可以实现应用筛选条件的逻辑

pages/index/index.wxml

@@ -111,137 +111,96 @@
   <view wx:if="{{showAdvancedFilter}}" class="sidebar bottom-popup advanced-filter-sidebar">
     <view class="sidebar-title">高级筛选</view>
     
-    <!-- 地区选择筛选 - 自定义下拉菜单 -->
-    <view class="filter-section">
-      <view class="filter-title">地区</view>
-      <view class="custom-picker">
+    <!-- 筛选内容区域 -->
+    <view class="filter-content">
+      <!-- 左侧分类列表 -->
+      <view class="filter-left">
         <view 
-          class="custom-picker-trigger"
-          bindtap="toggleRegionPicker"
+          wx:for="{{filterCategories}}" 
+          wx:key="index"
+          class="filter-category-item {{selectedFilterCategory === item.value ? 'active' : ''}}"
+          bindtap="selectFilterCategory"
+          data-category="{{item.value}}"
         >
-          {{advancedFilters.region === 'all' ? '全国' : advancedFilters.region}}
-          <text class="custom-picker-arrow {{showAdvancedRegionPicker ? 'rotate' : ''}}">▼</text>
+          {{item.label}}
         </view>
-        <view 
-          wx:if="{{showAdvancedRegionPicker}}" 
-          class="custom-picker-options"
-        >
+      </view>
+      
+      <!-- 右侧内容区域 -->
+      <view class="filter-right">
+        <!-- 地区选择内容 -->
+        <view wx:if="{{selectedFilterCategory === 'region'}}" class="filter-right-content">
+          <view class="filter-option all-option {{advancedFilters.region === 'all' ? 'active' : ''}}" bindtap="selectRegion" data-region="all">
+            全部
+          </view>
           <view 
             wx:for="{{regionOptions}}" 
             wx:key="index"
-            class="custom-picker-option {{advancedFilters.region === item.value ? 'active' : ''}}"
+            class="filter-option {{advancedFilters.region === item.value ? 'active' : ''}}"
             bindtap="selectRegion"
             data-region="{{item.value}}"
           >
             {{item.label}}
           </view>
         </view>
-      </view>
-    </view>
         
-    <!-- 蛋壳颜色筛选 - 自定义下拉菜单 -->
-    <view class="filter-section">
-      <view class="filter-title">蛋壳颜色</view>
-      <view class="custom-picker">
-        <view 
-          class="custom-picker-trigger"
-          bindtap="toggleShellColorPicker"
-        >
-          {{advancedFilters.shellColor === 'all' ? '全部颜色' : advancedFilters.shellColor}}
-          <text class="custom-picker-arrow {{showShellColorPicker ? 'rotate' : ''}}">▼</text>
-        </view>
-        <view 
-          wx:if="{{showShellColorPicker}}" 
-          class="custom-picker-options"
-        >
+        <!-- 蛋壳颜色内容 -->
+        <view wx:if="{{selectedFilterCategory === 'shellColor'}}" class="filter-right-content">
+          <view class="filter-option all-option {{advancedFilters.shellColor === 'all' ? 'active' : ''}}" bindtap="selectShellColor" data-color="all">
+            全部颜色
+          </view>
           <view 
             wx:for="{{shellColorOptions}}" 
             wx:key="index"
-            class="custom-picker-option {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
+            class="filter-option {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
             bindtap="selectShellColor"
             data-color="{{item.value}}"
           >
             {{item.label}}
           </view>
         </view>
-      </view>
-    </view>
         
-    <!-- 商品名称筛选 - 自定义下拉菜单 -->
-    <view class="filter-section">
-      <view class="filter-title">商品名称</view>
-      <view class="custom-picker">
-        <view 
-          class="custom-picker-trigger"
-          bindtap="toggleProductNamePicker"
-        >
-          {{advancedFilters.productName === 'all' ? '全部商品' : advancedFilters.productName}}
-          <text class="custom-picker-arrow {{showProductNamePicker ? 'rotate' : ''}}">▼</text>
-        </view>
-        <view 
-          wx:if="{{showProductNamePicker}}" 
-          class="custom-picker-options"
-        >
+        <!-- 商品名称内容 -->
+        <view wx:if="{{selectedFilterCategory === 'productName'}}" class="filter-right-content">
+          <view class="filter-option all-option {{advancedFilters.productName === 'all' ? 'active' : ''}}" bindtap="selectProductName" data-name="all">
+            全部商品
+          </view>
           <view 
             wx:for="{{productNameOptions}}" 
             wx:key="index"
-            class="custom-picker-option {{advancedFilters.productName === item.value ? 'active' : ''}}"
+            class="filter-option {{advancedFilters.productName === item.value ? 'active' : ''}}"
             bindtap="selectProductName"
             data-name="{{item.value}}"
           >
             {{item.label}}
           </view>
         </view>
-      </view>
-    </view>
         
-    <!-- 规格筛选 - 自定义下拉菜单 -->
-    <view class="filter-section">
-      <view class="filter-title">规格</view>
-      <view class="custom-picker">
-        <view 
-          class="custom-picker-trigger"
-          bindtap="toggleSpecificationPicker"
-        >
-          {{advancedFilters.specification === 'all' ? '全部规格' : advancedFilters.specification}}
-          <text class="custom-picker-arrow {{showSpecificationPicker ? 'rotate' : ''}}">▼</text>
-        </view>
-        <view 
-          wx:if="{{showSpecificationPicker}}" 
-          class="custom-picker-options"
-        >
+        <!-- 规格内容 -->
+        <view wx:if="{{selectedFilterCategory === 'specification'}}" class="filter-right-content">
+          <view class="filter-option all-option {{advancedFilters.specification === 'all' ? 'active' : ''}}" bindtap="selectSpecification" data-spec="all">
+            全部规格
+          </view>
           <view 
             wx:for="{{specificationOptions}}" 
             wx:key="index"
-            class="custom-picker-option {{advancedFilters.specification === item.value ? 'active' : ''}}"
+            class="filter-option {{advancedFilters.specification === item.value ? 'active' : ''}}"
             bindtap="selectSpecification"
             data-spec="{{item.value}}"
           >
             {{item.label}}
           </view>
         </view>
-      </view>
-    </view>
         
-    <!-- 蛋黄类型筛选 - 自定义下拉菜单 -->
-    <view class="filter-section">
-      <view class="filter-title">蛋黄类型</view>
-      <view class="custom-picker">
-        <view 
-          class="custom-picker-trigger"
-          bindtap="toggleYolkTypePicker"
-        >
-          {{advancedFilters.yolkType === 'all' ? '全部蛋黄' : advancedFilters.yolkType}}
-          <text class="custom-picker-arrow {{showYolkTypePicker ? 'rotate' : ''}}">▼</text>
-        </view>
-        <view 
-          wx:if="{{showYolkTypePicker}}" 
-          class="custom-picker-options"
-        >
+        <!-- 蛋黄类型内容 -->
+        <view wx:if="{{selectedFilterCategory === 'yolkType'}}" class="filter-right-content">
+          <view class="filter-option all-option {{advancedFilters.yolkType === 'all' ? 'active' : ''}}" bindtap="selectYolkType" data-yolk="all">
+            全部蛋黄
+          </view>
           <view 
             wx:for="{{yolkTypeOptions}}" 
             wx:key="index"
-            class="custom-picker-option {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
+            class="filter-option {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
             bindtap="selectYolkType"
             data-yolk="{{item.value}}"
           >
@@ -251,8 +210,6 @@
       </view>
     </view>
     
-
-    
     <!-- 操作按钮 -->
     <view class="filter-actions">
       <view class="filter-action-btn reset" bindtap="resetAdvancedFilter">重置</view>

pages/index/index.wxss

@@ -565,6 +565,89 @@ wx-button:not([size=mini]) {
   box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.2);
 }
 
+/* 筛选内容区域 */
+.filter-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 左侧分类列表 */
+.filter-left {
+  width: 25%;
+  background-color: #f5f5f5;
+  overflow-y: auto;
+}
+
+.filter-category-item {
+  padding: 30rpx 0;
+  text-align: center;
+  font-size: 28rpx;
+  color: #333;
+  border-bottom: 1rpx solid #e0e0e0;
+  transition: all 0.3s ease;
+}
+
+.filter-category-item.active {
+  background-color: white;
+  color: #1677ff;
+  font-weight: bold;
+  border-right: 4rpx solid #1677ff;
+}
+
+.filter-category-item:hover {
+  background-color: #e8f4ff;
+}
+
+/* 右侧内容区域 */
+.filter-right {
+  width: 75%;
+  background-color: white;
+  overflow-y: auto;
+}
+
+.filter-right-content {
+  padding: 20rpx;
+}
+
+.filter-option {
+  display: inline-block;
+  padding: 16rpx 24rpx;
+  margin: 12rpx;
+  border-radius: 20rpx;
+  border: 2rpx solid #e0e0e0;
+  font-size: 26rpx;
+  color: #666;
+  background-color: white;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.filter-option.active {
+  background-color: #1677ff;
+  color: white;
+  border-color: #1677ff;
+}
+
+.filter-option:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
+.filter-option.all-option {
+  width: calc(100% - 48rpx);
+  text-align: center;
+  margin: 12rpx;
+  background-color: #f0f0f0;
+  border-color: #d9d9d9;
+}
+
+.filter-option.all-option.active {
+  background-color: #1677ff;
+  color: white;
+  border-color: #1677ff;
+}
+
 /* 动画效果 */
 @keyframes fadeIn {
   from { opacity: 0; }
@@ -672,6 +755,11 @@ wx-button:not([size=mini]) {
   padding: 20rpx;
   gap: 20rpx;
   border-top: 2rpx solid #eee;
+  position: sticky;
+  bottom: 0;
+  background-color: white;
+  z-index: 10;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
 }
 
 .filter-action-btn {