From 73c9a637e9788abb675253e6b627455a7bcc4de8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E9=A3=9E=E6=B4=8B?=
 <15778543+xufeiyang6017@user.noreply.gitee.com>
Date: Mon, 19 Jan 2026 11:43:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=AB=98=E7=BA=A7=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=B9=E4=B8=BA=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E5=BC=B9=E5=87=BA=E5=B8=83=E5=B1=80=EF=BC=8C=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E9=80=89=E9=A1=B9=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.js   |   2 +-
 pages/index/index.wxml |  98 +++++++++++++++++++++++++
 pages/index/index.wxss | 162 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 261 insertions(+), 1 deletion(-)

diff --git a/pages/index/index.js b/pages/index/index.js
index 16dc41a..508839c 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -2148,7 +2148,7 @@ Page({
   },
 
   // 选择地区并关闭下拉菜单
-  selectRegion: function (e) {
+  selectAdvancedRegion: function (e) {
     const region = e.currentTarget.dataset.region;
     this.setData({
       'advancedFilters.region': region,
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index f70b75e..962cc2b 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -53,6 +53,104 @@
       </view>
     </view>
   </view>
+
+  <!-- 高级筛选底部弹窗 -->
+  <view wx:if="{{showAdvancedFilter}}" class="advanced-filter-overlay" bindtap="closeAdvancedFilter">
+    <view class="advanced-filter-container" catchtap="stopPropagation">
+      <!-- 筛选标题 -->
+      <view class="advanced-filter-header">
+        <text class="advanced-filter-title">高级筛选</text>
+        <view class="advanced-filter-actions">
+          <text class="reset-btn" bindtap="resetAdvancedFilter">重置</text>
+          <text class="confirm-btn" bindtap="applyAdvancedFilter">确定</text>
+        </view>
+      </view>
+      
+      <!-- 筛选内容区域 - 底部弹出式布局 -->
+      <view class="advanced-filter-content">
+        <!-- 左侧筛选分类列表 -->
+        <view class="filter-category-list">
+          <view 
+            wx:for="{{filterCategories}}" 
+            wx:key="value"
+            class="filter-category-item {{selectedFilterCategory === item.value ? 'active' : ''}}"
+            bindtap="selectFilterCategory"
+            data-category="{{item.value}}"
+          >
+            {{item.label}}
+          </view>
+        </view>
+        
+        <!-- 右侧筛选选项区域 -->
+        <view class="filter-options-list">
+          <!-- 地区筛选 -->
+          <view wx:if="{{selectedFilterCategory === 'region'}}" class="filter-options">
+            <view 
+              wx:for="{{regionOptions}}" 
+              wx:key="value"
+              class="filter-option-item {{advancedFilters.region === item.value ? 'active' : ''}}"
+              catchtap="selectAdvancedRegion"
+              data-region="{{item.value}}"
+            >
+              {{item.label}}
+            </view>
+          </view>
+          
+          <!-- 蛋壳颜色筛选 -->
+          <view wx:if="{{selectedFilterCategory === 'shellColor'}}" class="filter-options">
+            <view 
+              wx:for="{{shellColorOptions}}" 
+              wx:key="value"
+              class="filter-option-item {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
+              catchtap="selectShellColor"
+              data-color="{{item.value}}"
+            >
+              {{item.label}}
+            </view>
+          </view>
+          
+          <!-- 商品名称筛选 -->
+          <view wx:if="{{selectedFilterCategory === 'productName'}}" class="filter-options">
+            <view 
+              wx:for="{{productNameOptions}}" 
+              wx:key="value"
+              class="filter-option-item {{advancedFilters.productName === item.value ? 'active' : ''}}"
+              catchtap="selectProductName"
+              data-name="{{item.value}}"
+            >
+              {{item.label}}
+            </view>
+          </view>
+          
+          <!-- 规格筛选 -->
+          <view wx:if="{{selectedFilterCategory === 'specification'}}" class="filter-options specification-options">
+            <view 
+              wx:for="{{specificationOptions}}" 
+              wx:key="value"
+              class="filter-option-item {{advancedFilters.specification === item.value ? 'active' : ''}}"
+              catchtap="selectSpecification"
+              data-spec="{{item.value}}"
+            >
+              {{item.label}}
+            </view>
+          </view>
+          
+          <!-- 蛋黄类型筛选 -->
+          <view wx:if="{{selectedFilterCategory === 'yolkType'}}" class="filter-options">
+            <view 
+              wx:for="{{yolkTypeOptions}}" 
+              wx:key="value"
+              class="filter-option-item {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
+              catchtap="selectYolkType"
+              data-yolk="{{item.value}}"
+            >
+              {{item.label}}
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
   
   <!-- 侧边栏按钮 -->
   <view 
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index ffe49c6..d3aeed8 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -2089,3 +2089,165 @@ video.product-media {
   font-weight: bold;
   text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
 }
+
+/* 高级筛选底部弹窗样式 */
+.advanced-filter-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  animation: fadeIn 0.3s ease;
+}
+
+.advanced-filter-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 85%;
+  max-height: 900rpx;
+  background-color: white;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.2);
+  border-radius: 32rpx 32rpx 0 0;
+  animation: slideUp 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.advanced-filter-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 2rpx solid #f0f0f0;
+  background-color: white;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.advanced-filter-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.advanced-filter-actions {
+  display: flex;
+  gap: 20rpx;
+}
+
+.reset-btn {
+  font-size: 28rpx;
+  color: #666;
+  padding: 12rpx 24rpx;
+  border-radius: 40rpx;
+  border: 2rpx solid #e0e0e0;
+  transition: all 0.3s ease;
+}
+
+.reset-btn:active {
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+.confirm-btn {
+  font-size: 28rpx;
+  color: white;
+  padding: 12rpx 24rpx;
+  border-radius: 40rpx;
+  background-color: #1677ff;
+  box-shadow: 0 4rpx 12rpx rgba(22, 119, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+.confirm-btn:active {
+  background-color: #4096ff;
+  box-shadow: 0 2rpx 8rpx rgba(22, 119, 255, 0.4);
+}
+
+.advanced-filter-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  height: calc(100% - 120rpx);
+}
+
+.filter-category-list {
+  width: 30%;
+  background-color: #f5f5f5;
+  overflow-y: auto;
+}
+
+.filter-category-item {
+  padding: 30rpx 20rpx;
+  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-options-list {
+  width: 70%;
+  background-color: white;
+  overflow-y: auto;
+  height: 100%;
+  max-height: 600rpx;
+}
+
+.filter-options {
+  padding: 20rpx;
+}
+
+.filter-option-item {
+  display: block;
+  padding: 20rpx 24rpx;
+  margin: 12rpx 0;
+  border-radius: 16rpx;
+  border: 2rpx solid #e0e0e0;
+  font-size: 26rpx;
+  color: #666;
+  background-color: white;
+  transition: all 0.3s ease;
+}
+
+.filter-option-item.active {
+  background-color: #1677ff;
+  color: white;
+  border-color: #1677ff;
+}
+
+.filter-option-item:active {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
+.specification-options {
+  max-height: 600rpx;
+  overflow-y: auto;
+}
+
+/* 底部滑入动画 */
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+/* 淡入动画 */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}