修改商品详情页和首页登录流程

1. 将登录检查移至 viewGoodsDetail 函数末尾
2. 在详情页显示登录弹窗而非在首页
3. 为收藏和在线咨询功能添加登录检查
4. 优化用户体验，确保先浏览再提示登录

pages/goods-detail/goods-detail.js

@@ -94,6 +94,8 @@ Page({
     previewImageIndex: 0,     // 当前预览图片的索引
     fromSeller: false,        // 是否来自seller页面
     isFavorite: false,        // 当前商品是否已收藏
+    // 登录弹窗状态
+    showOneKeyLoginModal: false, // 是否显示登录弹窗
     // 图片缩放相关状态
     scale: 1,                    // 当前缩放比例
     lastScale: 1,                // 上一次缩放比例
@@ -108,6 +110,18 @@ Page({
 
   onLoad: function (options) {
     console.log('商品详情页面加载，参数:', options);
+    
+    // 处理登录状态检查
+    if (options.needLogin === 'true' || options.needLogin === true) {
+      console.log('检测到需要登录，显示登录提示弹窗');
+      // 延迟显示登录弹窗，确保页面完全加载
+      setTimeout(() => {
+        this.setData({
+          showOneKeyLoginModal: true
+        });
+      }, 500);
+    }
+    
     // 解析传入的商品数据
     let goodsData = null;
     if (options.goodsData) {
@@ -435,11 +449,9 @@ Page({
     
     if (!openid || !userId) {
       console.log('用户未登录，显示一键登录弹窗');
-      // 由于商品详情页可能没有登录弹窗，这里直接提示用户登录
+      // 显示登录弹窗
-      wx.showToast({
+      this.setData({
-        title: '请先登录',
+        showOneKeyLoginModal: true
-        icon: 'none',
-        duration: 2000
       });
       return;
     }
@@ -773,6 +785,18 @@ Page({
       return;
     }
     
+    // 检查用户登录状态
+    const openid = wx.getStorageSync('openid');
+    const userId = wx.getStorageSync('userId');
+    
+    if (!openid || !userId) {
+      console.log('用户未登录，显示登录弹窗');
+      this.setData({
+        showOneKeyLoginModal: true
+      });
+      return;
+    }
+    
     // 跳转到聊天界面或打开客服窗口
     wx.showModal({
       title: '在线咨询',
@@ -799,14 +823,8 @@ Page({
                 userPhone = wx.getStorageSync('phoneNumber');
               }
             }
-            // 如果都获取不到，使用默认登录手机号
-            if (!userPhone) {
-              userPhone = '18482694520';
-            }
           } catch (e) {
             console.error('获取用户手机号失败:', e);
-            // 如果获取失败，使用默认登录手机号
-            userPhone = '18482694520';
           }
 
           console.log('当前用户手机号:', userPhone);
@@ -942,6 +960,66 @@ Page({
   },
   */
 
+  // 关闭登录弹窗
+  closeOneKeyLoginModal() {
+    this.setData({
+      showOneKeyLoginModal: false
+    });
+  },
+
+  // 处理手机号授权结果
+  onPhoneNumberResult(e) {
+    console.log('getPhoneNumber响应:', e.detail);
+
+    // 关闭登录弹窗
+    this.setData({
+      showOneKeyLoginModal: false
+    });
+
+    // 用户点击拒绝授权
+    if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
+      wx.showToast({
+        title: '需要授权手机号才能使用',
+        icon: 'none',
+        duration: 2000
+      });
+      return;
+    }
+
+    // 处理没有权限的情况
+    if (e.detail.errMsg === 'getPhoneNumber:fail no permission') {
+      wx.showToast({
+        title: '当前环境无法获取手机号权限',
+        icon: 'none',
+        duration: 3000
+      });
+      return;
+    }
+
+    // 这里可以添加完整的登录处理逻辑
+    // 参考首页的 onGetPhoneNumber 函数
+    console.log('手机号授权成功，需要完整的登录流程处理');
+
+    // 由于详情页的登录处理比较复杂，建议跳转到首页处理
+    // 或者可以触发一个全局事件，让其他页面处理登录逻辑
+    const app = getApp();
+    if (app && app.globalData) {
+      app.globalData.pendingPhoneAuth = e.detail;
+      // 可以跳转到首页处理登录
+      wx.switchTab({
+        url: '/pages/index/index',
+        success: () => {
+          // 可以发送事件通知首页处理登录
+          wx.showToast({
+            title: '请在首页完成登录',
+            icon: 'none',
+            duration: 2000
+          });
+        }
+      });
+    }
+  },
+
   // 返回上一页
   goBack() {
     wx.navigateBack();

pages/goods-detail/goods-detail.wxml

@@ -38,7 +38,7 @@
           <span style="vertical-align: middle; font-size: 20rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 8rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span>
         </view>
         <view style="display: flex; align-items: flex-start;">
-          <view class="source-type-badge" style="display: flex; align-items: center; justify-content: center;">
+          <view class="source-type-badge" style="display: flex; align-items: center; justify-content: center; margin-right: 10rpx;">
             <text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text>
           </view>
         </view>
@@ -90,7 +90,7 @@
         </view>
         <view class="info-item">
           <view class="info-label-container">
-            <text class="info-label">斤重</text>
+            <text class="info-label">产品包装</text>
           </view>
           <view class="info-value-container">
             <text class="info-value">{{goodsDetail.displayGrossWeight || '暂无'}}</text>
@@ -135,6 +135,29 @@
         </view>
       </view>
   </view>
+  
+  <!-- 登录弹窗 -->
+  <view wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">
+    <view class="auth-modal-container">
+      <view class="auth-modal-title">授权登录</view>
+      <view class="auth-modal-content">授权您的手机号后才能使用完整功能</view>
+      <view class="auth-modal-buttons">
+        <button 
+          class="auth-primary-button" 
+          open-type="getPhoneNumber" 
+          bindgetphonenumber="onPhoneNumberResult"
+        >
+          授权手机号
+        </button>
+        <button 
+          class="auth-cancel-button" 
+          bindtap="closeOneKeyLoginModal"
+        >
+          取消
+        </button>
+      </view>
+    </view>
+  </view>
 </view>
 
   <!-- 操作按钮区域 -->

pages/goods-detail/goods-detail.wxss

@@ -561,3 +561,108 @@
     font-size: 32px;
   }
 }
+
+/* 登录弹窗样式 */
+.auth-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.auth-modal-container {
+  background-color: #fff;
+  border-radius: 32rpx;
+  width: 90%;
+  max-width: 720rpx;
+  padding: 60rpx 40rpx 40rpx;
+  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+  border: 2rpx solid rgba(255, 255, 255, 0.8);
+  box-sizing: border-box;
+}
+
+.auth-modal-title {
+  font-size: 44rpx;
+  font-weight: bold;
+  color: #222;
+  text-align: center;
+  margin-bottom: 40rpx;
+  letter-spacing: 1rpx;
+}
+
+.auth-modal-content {
+  font-size: 32rpx;
+  line-height: 1.6;
+  color: #555;
+  text-align: center;
+  margin-bottom: 50rpx;
+  padding: 0 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+  word-break: break-word;
+}
+
+.auth-modal-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  padding: 0 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.auth-primary-button {
+  background-color: #07c160;
+  color: #fff;
+  font-size: 36rpx;
+  font-weight: 600;
+  line-height: 1.6;
+  border-radius: 12rpx;
+  padding: 32rpx 0;
+  width: 100%;
+  box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
+  transition: all 0.3s ease;
+  border: none;
+  margin: 0;
+  min-width: auto;
+}
+
+.auth-primary-button:active {
+  transform: translateY(2rpx);
+  box-shadow: 0 3rpx 12rpx rgba(7, 193, 96, 0.5);
+}
+
+.auth-primary-button::after {
+  border: none;
+}
+
+.auth-cancel-button {
+  background-color: #fff;
+  color: #666;
+  font-size: 36rpx;
+  font-weight: 500;
+  line-height: 1.6;
+  border-radius: 12rpx;
+  padding: 32rpx 0;
+  width: 100%;
+  border: 1rpx solid #e0e0e0;
+  transition: all 0.3s ease;
+  margin: 0;
+  min-width: auto;
+}
+
+.auth-cancel-button:active {
+  transform: translateY(2rpx);
+  border-color: #d0d0d0;
+}
+
+.auth-cancel-button::after {
+  border: none;
+}

pages/index/index.js

@@ -40,8 +40,6 @@ Page({
     // 商品相关 - 淘宝风格
     goods: [],
     filteredGoods: [],
-    leftColumnGoods: [],
-    rightColumnGoods: [],
     selectedCategory: '全部',
     categories: ['全部', '粉壳', '褐壳', '绿壳', '白壳'],
     loadingMore: false,
@@ -282,11 +280,8 @@ Page({
         }, () => {
           // 重新应用筛选条件，确保显示的商品收藏状态也更新
           const filteredGoods = this.applyFilters(this.data.goods, false);
-        const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods);
           this.setData({
             filteredGoods: filteredGoods,
-          leftColumnGoods: leftColumnGoods,
-          rightColumnGoods: rightColumnGoods
           });
         });
     };
@@ -367,8 +362,6 @@ Page({
       hasMoreData: true,
       goods: existingGoods,
       filteredGoods: [],
-      leftColumnGoods: [],
-      rightColumnGoods: []
     })
     
     const timestamp = new Date().getTime();
@@ -529,17 +522,9 @@ Page({
       console.log('filteredGoods[1].category:', filteredGoods[1] ? filteredGoods[1].category : 'N/A')
     }
     
-    const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
-    console.log('leftColumnGoods 数量:', leftColumnGoods.length)
-    console.log('rightColumnGoods 数量:', rightColumnGoods.length)
-    console.log('leftColumnGoods[0]:', leftColumnGoods[0])
-    console.log('rightColumnGoods[0]:', rightColumnGoods[0])
-    
     this.setData({
       goods: updatedGoods,
       filteredGoods: filteredGoods,
-      leftColumnGoods: leftColumnGoods,
-      rightColumnGoods: rightColumnGoods,
       loadingMore: false,
       isLoading: false,
       page: this.data.page + 1
@@ -585,13 +570,9 @@ Page({
     
     const filteredGoods = this.applyFilters(updatedGoods, false)
     
-    const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
-    
     this.setData({
       goods: updatedGoods,
       filteredGoods: filteredGoods,
-      leftColumnGoods: leftColumnGoods,
-      rightColumnGoods: rightColumnGoods,
       loadingMore: false,
       isLoading: false,
       page: this.data.page + 1
@@ -806,16 +787,11 @@ Page({
     this.updateGoodsFavoriteStatus(processedGoods, false);
     
     // 应用筛选条件
-    let filteredGoods = this.applyFilters(processedGoods, false);
+    const filteredGoods = this.applyFilters(processedGoods, false);
-    
-    // 分配到两列
-    const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods);
     
     this.setData({
       goods: processedGoods,
       filteredGoods: filteredGoods,
-      leftColumnGoods: leftColumnGoods,
-      rightColumnGoods: rightColumnGoods,
       loadingMore: false,
       isLoading: false,
       hasMoreData: false // 缓存数据不分页
@@ -835,6 +811,34 @@ Page({
     })
   },
   
+  // 统一字段长度
+  normalizeFieldLength: function(item) {
+    const normalized = { ...item }
+    
+    // 统一 name 字段长度为 20 字符
+    if (normalized.name) {
+      normalized.name = normalized.name.length > 20 ? 
+        normalized.name.substring(0, 17) + '...' : 
+        normalized.name.padEnd(20, ' ')
+    }
+    
+    // 统一 region 字段长度为 15 字符
+    if (normalized.region) {
+      normalized.region = normalized.region.length > 15 ? 
+        normalized.region.substring(0, 12) + '...' : 
+        normalized.region.padEnd(15, ' ')
+    }
+    
+    // 统一 grossWeight 字段长度为 10 字符
+    if (normalized.grossWeight) {
+      normalized.grossWeight = normalized.grossWeight.length > 10 ? 
+        normalized.grossWeight.substring(0, 7) + '...' : 
+        normalized.grossWeight.padEnd(10, ' ')
+    }
+    
+    return normalized
+  },
+
   // 应用筛选条件
   applyFilters: function(goods, shouldSort = true) {
     let filtered = [...goods]
@@ -874,6 +878,9 @@ Page({
       })
     }
     
+    // 统一字段长度
+    filtered = filtered.map(item => this.normalizeFieldLength(item))
+    
     return filtered
   },
   
@@ -1019,12 +1026,9 @@ Page({
     
     const filteredGoods = this.applyFilters(this.data.goods, false)
     const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
-    const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
     this.setData({
       filteredGoods: filteredGoods,
       groupedGoods: groupedGoods,
-      leftColumnGoods: leftColumnGoods,
-      rightColumnGoods: rightColumnGoods
     })
   },
   
@@ -1059,12 +1063,9 @@ Page({
       // 否则仅对本地商品进行筛选
       const filteredGoods = this.applyFilters(this.data.goods, false)
       const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
-      const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
       this.setData({
         filteredGoods: filteredGoods,
         groupedGoods: groupedGoods,
-        leftColumnGoods: leftColumnGoods,
-        rightColumnGoods: rightColumnGoods
       })
     }
   },
@@ -1093,8 +1094,6 @@ Page({
       hasMoreData: true,
       goods: [],
       filteredGoods: [],
-      leftColumnGoods: [],
-      rightColumnGoods: [],
       loadingMore: false,
       isLoading: true
     })
@@ -1120,15 +1119,8 @@ Page({
   
   // 查看商品详情
   viewGoodsDetail: function(e) {
-    // 检查登录状态
-    if (this.data.needPhoneAuth) {
-      this.setData({
-        showOneKeyLoginModal: true
-      })
-      return;
-    }
-    
     const item = e.currentTarget.dataset.item
+    
     // 确保productId存在，优先使用id，其次使用productId
     const productId = String(item.id || item.productId || '')
     
@@ -1143,8 +1135,10 @@ Page({
     }
     
     // 将完整的商品数据传递给详情页，包含联系人信息，与buyer页面保持一致
+    // 同时传递登录状态信息，让详情页决定是否显示登录弹窗
+    const needLogin = this.data.needPhoneAuth;
     wx.navigateTo({
-      url: `/pages/goods-detail/goods-detail?goodsData=${encodeURIComponent(JSON.stringify(item))}&productId=${productId}`
+      url: `/pages/goods-detail/goods-detail?goodsData=${encodeURIComponent(JSON.stringify(item))}&productId=${productId}&needLogin=${needLogin}`
     })
   },
   
@@ -1351,11 +1345,8 @@ Page({
           }, () => {
             // 重新应用筛选条件，确保显示的商品收藏状态也更新
             const filteredGoods = this.applyFilters(this.data.goods, false);
-            const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods);
             this.setData({
               filteredGoods: filteredGoods,
-              leftColumnGoods: leftColumnGoods,
-              rightColumnGoods: rightColumnGoods
             });
           });
         }

pages/index/index.wxml

@@ -109,19 +109,8 @@
   
   <!-- 骨架屏加载 -->
   <view wx:if="{{isLoading && goods.length === 0}}" class="skeleton-container">
-    <view class="skeleton-waterfall">
+    <view class="skeleton-grid">
-      <view class="skeleton-column">
+      <view class="skeleton-grid-item" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index">
-        <view class="skeleton-item" wx:for="{{[1,2,3,4]}}" wx:key="index">
-          <view class="skeleton-image"></view>
-          <view class="skeleton-title"></view>
-          <view class="skeleton-title short"></view>
-          <view class="skeleton-footer">
-            <view class="skeleton-price"></view>
-          </view>
-        </view>
-      </view>
-      <view class="skeleton-column">
-        <view class="skeleton-item" wx:for="{{[1,2,3,4]}}" wx:key="index">
         <view class="skeleton-image"></view>
         <view class="skeleton-title"></view>
         <view class="skeleton-title short"></view>
@@ -131,7 +120,6 @@
       </view>
     </view>
   </view>
-  </view>
   
   <!-- 商品列表区域 -->
   <view class="goods-section">
@@ -150,94 +138,11 @@
       bindrefresherrestore="onRestore"
     >
       <view class="goods-list-container">
-        <!-- 瀑布流布局 -->
+        <!-- 网格布局 -->
-        <view class="waterfall-container">
+        <view class="grid-container">
-          <!-- 左列 -->
-          <view class="waterfall-column left-column">
-            <!-- 顶部空白间距 -->
-            <view style="height: 20rpx;"></view>
-            
-            <!-- 广告位1：轮播图1 -->
-            <view class="waterfall-item">
-              <view class="ad-card ad-full-card">
-                <swiper class="ad-swiper" autoplay="true" interval="3000" duration="500" circular="true">
-                  <swiper-item>
-                    <image class="ad-image" src="/images/1.jpg" mode="aspectFill" bindtap="onAdClick" data-ad="ad_slot_1_1" data-src="/images/1.jpg"></image>
-                  </swiper-item>
-                  <swiper-item>
-                    <image class="ad-image" src="/images/2.jpg" mode="aspectFill" bindtap="onAdClick" data-ad="ad_slot_1_2" data-src="/images/2.jpg"></image>
-                  </swiper-item>
-                  <swiper-item>
-                    <image class="ad-image" src="/images/3.jpg" mode="aspectFill" bindtap="onAdClick" data-ad="ad_slot_1_3" data-src="/images/3.jpg"></image>
-                  </swiper-item>
-                </swiper>
-              </view>
-            </view>
-            
-            
-            <!-- 正常商品列表 -->
-            <view 
-              class="waterfall-item" 
-              wx:for="{{leftColumnGoods}}" 
-              wx:key="id" 
-              data-item="{{item}}"
-              bindtap="viewGoodsDetail"
-              wx:if="{{!item.isAd && filteredGoods.length > 0}}"
-            >
-              <view class="product-card">
-                <view class="product-image-wrapper">
-                  <image 
-                    class="product-image" 
-                    src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}" 
-                    mode="widthFix"
-                    lazy-load="true"
-                    bindload="onImageLoad"
-                    data-index="{{index}}"
-                    data-column="left"
-                  ></image>
-                  <view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view>
-                  <view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view>
-                </view>
-                <view class="product-info">
-                  <view class="product-title">{{item.name}}</view>
-                  <view class="product-spec">{{item.specification || '无'}}<text wx:if="{{item.yolk && item.yolk !== '无'}}"> | {{item.yolk}}</text></view>
-                  <view class="product-status-row">
-                    <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
-                    <view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view>
-                  </view>
-                  <view class="product-meta">
-                    <text class="sales-count">已有{{item.reservedCount || 0}}人收藏</text>
-                    <text class="product-location">{{item.region || ''}}</text>
-                    
-                  </view>
-                </view>
-              </view>
-            </view>
-          </view>
-          
-          <!-- 右列 -->
-          <view class="waterfall-column right-column">
-            <!-- 顶部空白间距 -->
-            <view style="height: 4rpx;"></view>
-            
-            <!-- 广告位2：半高图片广告 (始终显示) -->
-            <view class="waterfall-item">
-              <view class="ad-card ad-half-image">
-                <image 
-                  class="ad-image-half" 
-                  src="/images/4.jpg" 
-                  mode="aspectFill"
-                  bindtap="onAdClick"
-                  data-ad="ad_slot_2"
-                  data-src="/images/4.jpg"
-                ></image>
-              </view>
-            </view>
-            
-            <!-- 正常商品列表 -->
           <view 
-              class="waterfall-item" 
+            class="grid-item" 
-              wx:for="{{rightColumnGoods}}" 
+            wx:for="{{filteredGoods}}" 
             wx:key="id" 
             data-item="{{item}}"
             bindtap="viewGoodsDetail"
@@ -252,7 +157,6 @@
                   lazy-load="true"
                   bindload="onImageLoad"
                   data-index="{{index}}"
-                    data-column="right"
                 ></image>
                 <view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view>
                 <view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view>
@@ -263,6 +167,7 @@
                 <view class="product-status-row">
                   <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
                   <view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view>
+                  <view class="status-tag item-count">库存：{{item.minOrder || item.quantity || '暂无'}}</view>
                 </view>
                 <view class="product-meta">
                   <text class="sales-count">已有{{item.reservedCount || 0}}人收藏</text>
@@ -272,7 +177,6 @@
             </view>
           </view>
         </view>
-        </view>
         
         <!-- 加载更多 -->
         <view wx:if="{{loadingMore}}" class="loading-more">

pages/index/index.wxss

@@ -617,25 +617,18 @@ wx-button:not([size=mini]) {
   padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
 }
 
-.waterfall-container {
+.grid-container {
   display: flex;
-  gap: 32rpx;
+  flex-wrap: wrap;
-  width: 100%;
-}
-
-.waterfall-column {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
   gap: 16rpx;
+  width: 100%;
+  padding: 0 10rpx;
+  box-sizing: border-box;
 }
 
-.left-column {
+.grid-item {
-  align-items: flex-start;
+  width: calc((100% - 16rpx) / 2);
-}
+  /* 每个商品项占50%宽度，留出16rpx的间距 */
-
-.right-column {
-  align-items: flex-end;
 }
 
 .goods-item {
@@ -874,6 +867,12 @@ wx-button:not([size=mini]) {
   border: 1rpx solid rgba(140, 140, 140, 0.5);
 }
 
+.status-tag.item-count {
+  background: rgba(82, 196, 26, 0.15);
+  color: #389e0d;
+  border: 1rpx solid rgba(82, 196, 26, 0.5);
+}
+
 .goods-footer {
   display: flex;
   justify-content: space-between;
@@ -1153,24 +1152,18 @@ wx-button:not([size=mini]) {
   margin-top: 180rpx;
 }
 
-.skeleton-waterfall {
+.skeleton-grid {
   display: flex;
+  flex-wrap: wrap;
   gap: 16rpx;
   width: 100%;
 }
 
-.skeleton-column {
+.skeleton-grid-item {
-  flex: 1;
+  width: calc((100% - 16rpx) / 2);
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-}
-
-.skeleton-item {
   background: #fff;
   border-radius: 16rpx;
   overflow: hidden;
-  padding-bottom: 20rpx;
 }
 
 .skeleton-image {
@@ -1226,40 +1219,25 @@ wx-button:not([size=mini]) {
   padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
 }
 
-/* 瀑布流容器 */
+/* 网格容器 */
-.waterfall-container {
+.grid-container {
   display: flex;
-  gap: 32rpx;
+  flex-wrap: wrap;
+  gap: 16rpx;
   width: 100%;
-  margin-top: 20rpx; /* 增加上边距，避免被分类区域遮挡 */
+  margin-top: 20rpx;
   background: transparent;
 }
 
-/* 瀑布流列 */
+/* 网格商品项 */
-.waterfall-column {
+.grid-item {
-  flex: 1;
+  width: calc((100% - 16rpx) / 2);
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-}
-
-.left-column {
-  align-items: flex-start;
-}
-
-.right-column {
-  align-items: flex-end;
-}
-
-/* 瀑布流商品项 */
-.waterfall-item {
-  width: 100%;
   border-radius: 16rpx;
   overflow: hidden;
   transition: all 0.3s ease;
 }
 
-.waterfall-item:active {
+.grid-item:active {
   transform: scale(0.98);
   opacity: 0.9;
 }
@@ -1267,6 +1245,7 @@ wx-button:not([size=mini]) {
 /* 商品卡片 */
 .product-card {
   width: 100%;
+  height: 450rpx; /* 固定高度 */
   background: #fff;
   border-radius: 16rpx;
   overflow: hidden;
@@ -1274,7 +1253,6 @@ wx-button:not([size=mini]) {
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
-  /* 移除固定最小高度，让卡片高度根据内容自动调整 */
 }
 
 .product-card:active {
@@ -1286,6 +1264,7 @@ wx-button:not([size=mini]) {
 .product-image-wrapper {
   position: relative;
   width: 100%;
+  height: 320rpx; /* 固定图片高度 */
   background: #f5f5f5;
   border-radius: 16rpx 16rpx 0 0;
   overflow: hidden;
@@ -1293,7 +1272,9 @@ wx-button:not([size=mini]) {
 
 .product-image {
   width: 100%;
+  height: 100%; /* 图片占满整个图片容器 */
   display: block;
+  object-fit: cover; /* 图片按比例填充，裁剪多余部分 */
 }
 
 /* 促销标签 */
@@ -1327,9 +1308,10 @@ wx-button:not([size=mini]) {
 /* 商品信息区域 */
 .product-info {
   padding: 16rpx;
-  flex: 1; /* 自动拉伸，占据剩余空间 */
+  height: 210rpx; /* 固定信息区域高度 (600 - 350 - 40 = 210) */
   display: flex;
   flex-direction: column;
+  justify-content: space-between; /* 内容均匀分布 */
 }
 
 /* 商品标题 */
@@ -1337,12 +1319,12 @@ wx-button:not([size=mini]) {
   font-size: 26rpx;
   color: #000000ff;
   line-height: 1.4;
+  height: 72rpx; /* 固定标题高度 */
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  min-height: 72rpx;
   margin-bottom: 8rpx;
   font-weight: 500;
 }
@@ -1351,15 +1333,17 @@ wx-button:not([size=mini]) {
 .product-spec {
   font-size: 22rpx;
   color: #797878ff;
-  margin-bottom: 12rpx;
+  height: 32rpx; /* 固定规格高度 */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-bottom: 8rpx;
 }
 
 /* 价格区域 - 淘宝风格突出显示 */
 .product-price-row {
-  margin-bottom: 12rpx;
+  height: 48rpx; /* 固定价格区域高度 */
+  margin-bottom: 8rpx;
   display: flex;
   align-items: baseline;
   justify-content: space-between;
@@ -1392,12 +1376,12 @@ wx-button:not([size=mini]) {
 
 /* 销量和地区 - 淘宝风格 */
 .product-meta {
+  height: 32rpx; /* 固定元信息高度 */
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 22rpx;
   color: #999;
-  margin-top: 8rpx;
 }
 
 .sales-count {