修复商品卡片文字遮挡问题

pages/index/index.js

@@ -835,6 +835,14 @@ Page({
 
   // 处理商品数据 - 淘宝风格
   processGoodsData: function (products, isLoadMore = false) {
+    // 检查第一个商品是否包含description字段
+    if (products.length > 0) {
+      console.log('商品数据包含的所有字段:', Object.keys(products[0]));
+      console.log('description字段是否存在:', 'description' in products[0]);
+      if ('description' in products[0]) {
+        console.log('description字段的值:', products[0].description);
+      }
+    }
     let newGoods = products.map(product => {
       const imageUrls = product.imageUrls || product.images || [];
       const formattedImageUrls = Array.isArray(imageUrls) ? imageUrls : [imageUrls];

pages/index/index.wxml

@@ -274,10 +274,8 @@
                   autoplay="{{true}}"
                   loop="{{true}}"
                   muted="{{true}}"
-                  object-fit="fill"
+                  poster=""
-                  poster="" 
+                ></video>
-                  style="height: 270rpx; display: block; box-sizing: border-box; width: 337rpx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
-                </video>
                 <!-- 图片处理 -->
                 <image 
                   wx:else
@@ -287,22 +285,24 @@
                   lazy-load="true"
                   bindload="onImageLoad"
                   data-index="{{index}}"
-                  style="height: 270rpx; display: block; box-sizing: border-box; width: 337rpx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;"></image>
+                ></image>
                 <view wx:if="{{item.supplyStatus === '预售' && item.status !== 'sold_out'}}" class="promo-tag presale">预售</view>
                 <view wx:if="{{item.supplyStatus === '现货' && item.status !== 'sold_out'}}" class="promo-tag in-stock">现货</view>
                 <view wx:if="{{item.status === 'sold_out'}}" class="promo-tag sold-out">售空</view>
               </view>
-              <view class="product-info" style="height: 190rpx; display: flex; box-sizing: border-box">
+              <view class="product-info">
-                <view class="product-title" style="height: 38rpx; display: -webkit-box; box-sizing: border-box">{{item.name}}</view>
+                <view class="product-title">{{item.name}}</view>
-                <view class="product-spec" style="width: 308rpx; height: 29rpx; display: block; box-sizing: border-box">{{item.displaySpecification}}<text wx:if="{{item.displayYolk}}"> | {{item.displayYolk}}</text></view>
+                <view class="product-status-row">
-                <view class="product-status-row" style="width: 339rpx; display: block; box-sizing: border-box; height: 60rpx; left: -10rpx; top: 0rpx">
+                  <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}" style="margin-right: 8rpx;">{{item.sourceType || ''}}</view>
-                  <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
+                  <!-- 在光标位置添加货源描述 -->
-                  <view wx:if="{{item.status !== 'sold_out'}}" class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}" style="width: 70rpx; display: inline-block; box-sizing: border-box">{{item.negotiateStatus}}</view>
+                  <view class="product-description">{{item.description || ''}}</view>
+                </view>
+                <view class="product-stock-row">
                   <view wx:if="{{item.status !== 'sold_out'}}" class="status-tag item-count">库存：{{item.totalStock && item.totalStock !== '充足' ? item.totalStock + '件' : (item.totalStock || '充足')}}</view>
                   <view wx:if="{{item.status === 'sold_out'}}" class="status-tag item-count">已售：{{item.originalTotalStock || 0}}件</view>
                 </view>
                 <view class="product-meta">
-                  <text class="sales-count"> 已有{{item.frequency || 0}}人浏览</text>
+                  <text class="sales-count">已有{{item.frequency || 0}}人浏览</text>
                   <text class="product-location">{{item.region || ''}}</text>
                 </view>
               </view>

pages/index/index.wxss

@@ -1643,13 +1643,14 @@ wx-button:not([size=mini]) {
 .product-image-wrapper {
   position: relative;
   width: 100%;
-  height: 320rpx; /* 固定图片高度 */
+  height: 320rpx;
   background: #f5f5f5;
   border-radius: 16rpx 16rpx 0 0;
   overflow: hidden;
 }
 
-.product-image {
+/* 统一媒体元素样式 */
+.product-media {
   width: 100%;
   height: 100%;
   display: block;
@@ -1660,7 +1661,8 @@ wx-button:not([size=mini]) {
 
 /* 视频样式增强 */
 video.product-media {
-  object-fit: fill;
+  object-fit: cover;
+  z-index: 1;
 }
 
 
@@ -1739,10 +1741,13 @@ video.product-media {
 /* 商品信息区域 */
 .product-info {
   padding: 16rpx;
-  height: 210rpx; /* 固定信息区域高度 (600 - 350 - 40 = 210) */
+  height: auto;
+  min-height: 210rpx;
   display: flex;
   flex-direction: column;
-  justify-content: space-between; /* 内容均匀分布 */
+  justify-content: space-between;
+  gap: 10rpx;
+  box-sizing: border-box;
 }
 
 /* 商品标题 */
@@ -1750,70 +1755,62 @@ video.product-media {
   font-size: 26rpx;
   color: #000000;
   line-height: 1.4;
-  height: 72rpx; /* 固定标题高度 */
+  height: 72rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  margin-bottom: 8rpx;
   font-weight: 700;
 }
 
-/* 商品规格 */
+/* 商品描述 */
-.product-spec {
+.product-description {
   font-size: 22rpx;
-  color: #333333;
+  color: #666;
-  height: 32rpx; /* 固定规格高度 */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-bottom: 10rpx;
+  flex: 1;
-  line-height: 1.3;
 }
 
-/* 价格区域 - 淘宝风格突出显示 */
+/* 商品状态行 */
-.product-price-row {
+.product-status-row {
-  height: 48rpx; /* 固定价格区域高度 */
-  margin-bottom: 8rpx;
   display: flex;
-  align-items: baseline;
+  align-items: center;
-  justify-content: space-between;
+  gap: 8rpx;
+  flex-wrap: wrap;
 }
 
-.price-wrapper {
+/* 商品库存行 */
+.product-stock-row {
   display: flex;
-  align-items: baseline;
+  align-items: center;
-}
-
-.price-unit {
-  font-size: 24rpx;
-  color: #ff4d4f;
-  font-weight: 700;
-}
-
-.price-value {
-  font-size: 40rpx;
-  color: #ff4d4f;
-  font-weight: 800;
-  margin: 0 2rpx;
-  letter-spacing: 1rpx;
-}
-
-.price-unit:last-child {
-  margin-left: 4rpx;
-  font-size: 22rpx;
-  color: #ff4d4f;
 }
 
 /* 销量和地区 - 淘宝风格 */
 .product-meta {
-  height: 32rpx; /* 固定元信息高度 */
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 22rpx;
   color: #999;
+  margin-top: 8rpx;
+}
+
+/* 商品卡片 */
+.product-card {
+  width: 100%;
+  height: auto;
+  min-height: 450rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  position: relative;
 }
 
 .sales-count {