更新首页功能

pages/index/index.js

@@ -925,34 +925,34 @@ Page({
   selectRegion: function(e) {
     const region = e.currentTarget.dataset.region
     
+    // 立即关闭弹窗
+    this.setData({
+      selectedRegion: region,
+      showRegionPicker: false
+    })
+    
     // 重新显示tabBar
     const app = getApp();
     if (app && app.globalData) {
       app.globalData.showTabBar = true;
     }
     
-    // 应用筛选条件
+    // 如果从局部地区切换到全国地区，重新加载所有商品
-    this.setData({
+    if (region === '全国' && this.data.selectedCategory === '全部' && !this.data.searchKeyword) {
-      selectedRegion: region,
+      // 重新加载商品数据
-      showRegionPicker: false
+      this.refreshGoodsList();
-    }, () => {
+    } else {
-      // 如果从局部地区切换到全国地区，重新加载所有商品
+      // 否则仅对本地商品进行筛选
-      if (region === '全国' && this.data.selectedCategory === '全部' && !this.data.searchKeyword) {
+      const filteredGoods = this.applyFilters(this.data.goods, false)
-        // 重新加载商品数据
+      const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
-        this.refreshGoodsList();
+      const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
-      } else {
+      this.setData({
-        // 否则仅对本地商品进行筛选
+        filteredGoods: filteredGoods,
-        const filteredGoods = this.applyFilters(this.data.goods, false)
+        groupedGoods: groupedGoods,
-        const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
+        leftColumnGoods: leftColumnGoods,
-        const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
+        rightColumnGoods: rightColumnGoods
-        this.setData({
+      })
-          filteredGoods: filteredGoods,
+    }
-          groupedGoods: groupedGoods,
-          leftColumnGoods: leftColumnGoods,
-          rightColumnGoods: rightColumnGoods
-        })
-      }
-    })
   },
   
   // 阻止事件冒泡

pages/index/index.wxml

@@ -10,8 +10,7 @@
         <view class="search-input-wrapper">
           <!-- 将地区选择器放在最左边 -->
           <view class="region-selector" bindtap="toggleRegionPicker">
-            <text>{{selectedRegion || '全国'}}</text>
+            <text>{{selectedRegion || '全国'}} ▼</text>
-            <text class="region-arrow"></text>
           </view>
           <!-- 搜索图标和输入框 -->
           <text class="search-icon">🔍</text>
@@ -29,14 +28,14 @@
   
   <!-- 地区选择器弹窗 -->
   <view wx:if="{{showRegionPicker}}" class="region-picker-overlay" bindtap="toggleRegionPicker">
-    <view class="region-picker-container" bindtap="stopPropagation">
+    <view class="region-picker-container" catchtap="stopPropagation">
       <view class="region-picker-title">选择地区</view>
       <view class="region-list">
         <view 
           wx:for="{{regions}}" 
           wx:key="index" 
           class="region-item {{selectedRegion === item ? 'active' : ''}}"
-          bindtap="selectRegion" 
+          catchtap="selectRegion" 
           data-region="{{item}}"
         >
           {{item}}
@@ -134,7 +133,7 @@
       </view>
     </view>
   </view>
-    <view class="title"></view>
+  
   <!-- 商品列表区域 -->
   <view class="goods-section">
     <scroll-view 

pages/index/index.wxss

@@ -13,7 +13,7 @@ page {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
+  background: transparent;
   margin: 0;
   padding: 0;
 }
@@ -26,7 +26,7 @@ page {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
+  background: transparent;
 }
 
 /* 为整个容器添加修复 */
@@ -35,10 +35,14 @@ page {
   top: 0;
   left: 0;
   right: 0;
-  z-index: 1000;
+  z-index: 1002;
-  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10rpx);
+  -webkit-backdrop-filter: blur(10rpx);
   padding: 10rpx 0;
   min-height: 120rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
 }
 
 /* 确保所有主要区域背景一致 */
@@ -46,7 +50,7 @@ page {
 .category-section,
 .goods-section,
 .goods-list {
-  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
+  background: transparent;
 }
 
 /* 修复商品列表区域 */
@@ -61,6 +65,7 @@ page {
   border-radius: 0;
   box-shadow: none;
   background: transparent;
+  z-index: 1;
 }
 
 /* 标题样式调整 */
@@ -92,7 +97,7 @@ page {
 /* 修复商品列表区域 */
 .goods-list {
   flex: 1;
-  padding-top: 280rpx;
+  padding-top: 240rpx;
   height: 100%;
   min-height: 100vh;
   box-sizing: border-box;
@@ -101,19 +106,18 @@ page {
   background: transparent;
 }
 
-/* 品种筛选区域调整 */
+/* 品种筛选区域调整 - 确保在商品图层之上，搜索框之下 */
 .category-section {
   position: fixed;
-  top: 160rpx;
+  top: 150rpx;
   left: 0;
   right: 0;
-  z-index: 999;
+  z-index: 1001;
-  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
+  background: transparent;
-  padding: 10rpx 0;
+  padding: 6rpx 0;
-  height: 70rpx;
+  height: 50rpx;
   box-sizing: border-box;
-  border-bottom: 2rpx solid #f0f0f0;
+  box-shadow: none;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
   margin: 0;
 }
 
@@ -133,15 +137,15 @@ page {
 /* 确保滚动视图有正确的容器高度 */
 .goods-section {
   height: auto;
-  min-height: calc(100vh - 60rpx); /* 最小高度，确保占满屏幕 */
+  min-height: calc(100vh - 60rpx);
   position: relative;
-  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%); /* 与页面背景保持一致 */
+  background: #f5f5f5;
 }
 
 .goods-list {
-  height: auto; /* 自动高度，适应内容 */
+  height: auto;
   box-sizing: border-box;
-  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%); /* 与页面背景保持一致 */
+  background: #f5f5f5;
 }
 
 /* 标题样式 */
@@ -271,6 +275,7 @@ wx-button:not([size=mini]) {
   width: 100%;
   border-radius: 20rpx 20rpx 0 0;
   padding: 20rpx;
+  padding-bottom: 160rpx;
   box-sizing: border-box;
 }
 
@@ -320,79 +325,78 @@ wx-button:not([size=mini]) {
   margin: 0 0 20rpx 0;
   flex: 0 1 auto;
   box-sizing: border-box;
+  background: transparent;
 }
 
 .category-scroll {
   display: flex;
-  gap: 12rpx; /* 减少间距 */
+  gap: 16rpx;
-  padding: 8rpx 20rpx; /* 调整内边距 */
+  padding: 10rpx 20rpx;
   white-space: nowrap;
   overflow-x: auto;
-  background: rgba(255, 255, 255, 0.5);
+  background: transparent;
-  backdrop-filter: blur(10rpx);
-  -webkit-backdrop-filter: blur(10rpx);
   border-radius: 0;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  border: none;
-  border: 1rpx solid rgba(255, 255, 255, 0.5);
+  justify-content: flex-start;
-  justify-content: center;
   align-items: center;
 }
 
 .egg-item {
   position: relative;
-  padding: 12rpx 20rpx;
+  padding: 0;
-  background: rgba(255, 255, 255, 0.7);
+  background: transparent;
-  backdrop-filter: blur(8rpx);
+  backdrop-filter: none;
-  -webkit-backdrop-filter: blur(8rpx);
+  -webkit-backdrop-filter: none;
   border-radius: 30rpx;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  box-shadow: none;
-  border: 1rpx solid rgba(200, 200, 200, 0.5);
+  border: 1rpx solid #e0e0e0;
   flex-shrink: 0;
+  min-width: 120rpx;
+  height: 56rpx;
 }
 
 .egg-item.active {
-  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
+  background: #1677ff;
   color: white;
-  box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.35);
   border: 1rpx solid transparent;
-  transform: translateY(-2rpx);
 }
 
 .egg-inner {
-  font-size: 24rpx;
+  font-size: 26rpx;
   color: #555;
-  font-weight: 600;
+  font-weight: 500;
   text-align: center;
   white-space: nowrap;
+  padding: 0 20rpx;
 }
 
 .egg-item.active .egg-inner {
   color: #ffffff;
-  font-size: 28rpx;
+  font-size: 26rpx;
 }
 
 /* 侧边栏按钮样式 - 白色半透明毛玻璃质感 */
 .sidebar-btn {
   position: fixed;
   left: 20rpx;
-  z-index: 1000;
+  z-index: 1002;
   width: 120rpx;
   height: 80rpx;
-  background-color: rgba(255, 255, 255, 0.85); /* 白色半透明 */
+  background-color: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(10rpx); /* 毛玻璃效果 */
+  backdrop-filter: blur(10rpx);
-  -webkit-backdrop-filter: blur(10rpx); /* 兼容iOS */
+  -webkit-backdrop-filter: blur(10rpx);
   border-radius: 40rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15); /* 柔和阴影 */
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
   transition: all 0.3s ease;
-  border: 1rpx solid rgba(255, 255, 255, 0.5); /* 半透明白色边框 */
+  border: 1rpx solid rgba(255, 255, 255, 0.5);
-  touch-action: none; /* 禁用浏览器默认的触摸行为 */
+  touch-action: none;
 }
 
 .sidebar-btn:hover {
@@ -1098,8 +1102,9 @@ wx-button:not([size=mini]) {
 
 /* 骨架屏样式 */
 .skeleton-container {
-  padding: 20rpx;
+  padding: 0;
-  background: #f8f8f8;
+  background: transparent;
+  margin-top: 180rpx;
 }
 
 .skeleton-waterfall {
@@ -1522,7 +1527,7 @@ wx-button:not([size=mini]) {
   opacity: 0;
   transform: translateY(20rpx);
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 999;
+  z-index: 1002;
   pointer-events: none;
 }