Merge pull request '优化商品卡片布局和浏览记录功能' (#12) from hzj into Xfy

Reviewed-on: http://8.137.125.67:4000/SwtTt29/Mini-Program/pulls/12

pages/index/index.js

@@ -59,6 +59,7 @@ Page({
     needPhoneAuth: false,
     testMode: true,
     partnerstatus: '',
+    viewedGoods: [], // 已浏览商品ID列表
 
     // 侧边栏相关
     showSidebar: false,
@@ -329,6 +330,32 @@ Page({
     });
   },
 
+  // 标记商品为已浏览
+  markGoodsAsViewed: function(productId) {
+    let viewedGoods = this.data.viewedGoods;
+    if (!viewedGoods.includes(productId)) {
+      viewedGoods.push(productId);
+      this.setData({ viewedGoods });
+    }
+    
+    // 更新商品列表，添加已浏览标记
+    let updatedGoods = this.data.goods.map(item => {
+      if (String(item.productId || item.id) === productId) {
+        return {
+          ...item,
+          isViewed: true
+        };
+      }
+      return item;
+    });
+    
+    this.setData({ goods: updatedGoods }, () => {
+      // 重新应用筛选条件，确保显示的商品也更新
+      const filteredGoods = this.applyFilters(updatedGoods, true);
+      this.setData({ filteredGoods });
+    });
+  },
+  
   // 跳转到我要卖蛋页面
   navigateToSettlement() {
     wx.navigateTo({
@@ -630,7 +657,9 @@ Page({
       refreshRegion: currentRegion,
       // 下拉刷新时确保从published状态开始加载
       isQueryingSoldOut: false,
-      publishedHasMore: true
+      publishedHasMore: true,
+      // 清除已浏览商品标记
+      viewedGoods: [],
     })
 
     const timestamp = new Date().getTime();
@@ -2192,6 +2221,9 @@ Page({
       return;
     }
 
+    // 记录已浏览商品
+    this.markGoodsAsViewed(productId);
+
     // 将完整的商品数据传递给详情页，包含联系人信息，与buyer页面保持一致
     // 同时传递登录状态信息，让详情页决定是否显示登录弹窗
     const needLogin = this.data.needPhoneAuth;

pages/index/index.wxml

@@ -291,11 +291,10 @@
                 <view wx:if="{{item.status === 'sold_out'}}" class="promo-tag sold-out">售空</view>
               </view>
               <view class="product-info">
-                <view class="product-title">{{item.name}}</view>
-                <view class="product-status-row">
-                  <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}" style="margin-right: 8rpx;">{{item.sourceType || ''}}</view>
-                  <!-- 在光标位置添加货源描述 -->
-                  <view class="product-description">{{item.description || ''}}</view>
+                <view class="product-first-row">
+                  <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
+                  <text class="product-title {{item.isViewed ? 'viewed' : ''}}">{{item.name}}</text>
+                  <text class="product-description {{item.isViewed ? 'viewed' : ''}}">{{item.description || ''}}</text>
                 </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>

pages/index/index.wxss

@@ -1750,36 +1750,42 @@ video.product-media {
   box-sizing: border-box;
 }
 
+/* 第一行布局：货源类型 | 产品名称 | 货源描述 */
+.product-first-row {
+  display: block;
+  width: 100%;
+  line-height: 1.4;
+}
+
 /* 商品标题 */
 .product-title {
   font-size: 26rpx;
   color: #000000;
-  line-height: 1.4;
-  height: 72rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
   font-weight: 700;
+  display: inline;
+  margin-right: 8rpx;
 }
 
 /* 商品描述 */
 .product-description {
-  font-size: 22rpx;
-  color: #666;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
+  font-size: 26rpx;
+  color: #000000;
+  font-weight: 700;
+  display: inline;
+  word-break: break-word;
 }
 
-/* 商品状态行 */
-.product-status-row {
-  display: flex;
-  align-items: center;
-  gap: 8rpx;
-  flex-wrap: wrap;
+/* 状态标签样式 */
+.status-tag {
+  display: inline;
+  margin-right: 8rpx;
+}
+
+/* 已浏览商品样式 */
+.product-title.viewed,
+.product-description.viewed {
+  color: #999999;
+  opacity: 0.8;
 }
 
 /* 商品库存行 */
@@ -1798,6 +1804,11 @@ video.product-media {
   margin-top: 8rpx;
 }
 
+/* 移除旧的产品状态行样式 */
+.product-status-row {
+  display: none;
+}
+
 /* 商品卡片 */
 .product-card {
   width: 100%;