From 06b1e86b180e46f0345968921b46aab585b76d65 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: Wed, 14 Jan 2026 17:05:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=94=B6=E8=97=8F=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=A7=86=E9=A2=91=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E5=BA=94=E7=94=A8=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E8=A7=86=E9=A2=91=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/favorites/index.js   |  91 +++++++++++++++++++++++++++++
 pages/favorites/index.wxml | 115 +++++++++++++++++++++++++++++++++++--
 pages/favorites/index.wxss |   7 +++
 3 files changed, 207 insertions(+), 6 deletions(-)

diff --git a/pages/favorites/index.js b/pages/favorites/index.js
index 20d5103..17730e1 100644
--- a/pages/favorites/index.js
+++ b/pages/favorites/index.js
@@ -1,6 +1,37 @@
 // pages/favorites/index.js
 const API = require('../../utils/api.js');
 
+// 判断URL是否为视频URL
+function isVideoUrl(url) {
+  if (!url || typeof url !== 'string') {
+    return false;
+  }
+  // 转换为小写，确保大小写不敏感
+  const lowerUrl = url.toLowerCase();
+  // 支持的视频格式
+  const videoExtensions = ['.mp4', '.mov', '.avi', '.wmv', '.flv', '.webm', '.m4v', '.3gp'];
+  // 检查URL是否以视频扩展名结尾
+  for (const ext of videoExtensions) {
+    if (lowerUrl.endsWith(ext)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// 预处理媒体URL，返回包含type字段的媒体对象数组
+function processMediaUrls(urls) {
+  if (!urls || !Array.isArray(urls)) {
+    return [];
+  }
+  return urls.map(url => {
+    return {
+      url: url,
+      type: isVideoUrl(url) ? 'video' : 'image'
+    };
+  });
+}
+
 // 提取地区中的省份信息
 function extractProvince(region) {
   if (!region || typeof region !== 'string') {
@@ -276,6 +307,60 @@ Page({
             item.fullRegion = fullRegion;
             item.region = province;
             item.status = status;
+            
+            // 处理媒体数据，兼容新旧格式
+            let imageUrls = [];
+            
+            // 优先获取mediaItems
+            if (matchingProduct && matchingProduct.mediaItems) {
+              imageUrls = matchingProduct.mediaItems.map(item => item.url);
+            } 
+            // 然后尝试获取imageUrls
+            else if (matchingProduct && (matchingProduct.imageUrls || matchingProduct.images)) {
+              imageUrls = matchingProduct.imageUrls || matchingProduct.images;
+              imageUrls = Array.isArray(imageUrls) ? imageUrls : [imageUrls];
+            }
+            
+            // 处理当前收藏数据中的媒体URL
+            if (item.Product && (item.Product.imageUrls || item.Product.images)) {
+              const itemImageUrls = item.Product.imageUrls || item.Product.images;
+              const formattedItemImageUrls = Array.isArray(itemImageUrls) ? itemImageUrls : [itemImageUrls];
+              
+              // 如果之前没有获取到媒体URL，使用当前收藏数据中的
+              if (imageUrls.length === 0) {
+                imageUrls = formattedItemImageUrls;
+              }
+            }
+            
+            // 预处理媒体数据，生成mediaItems
+            const mediaItems = processMediaUrls(imageUrls);
+            
+            // 为每个mediaItem添加index
+            mediaItems.forEach((media, index) => {
+              media.index = index;
+            });
+            
+            // 预生成媒体URL列表
+            const mediaUrls = mediaItems.map(media => media.url);
+            
+            // 更新item对象
+            item.mediaItems = mediaItems;
+            item.mediaUrls = mediaUrls;
+            
+            if (item.Product) {
+              if (!item.Product) {
+                item.Product = {};
+              }
+              item.Product.mediaItems = JSON.parse(JSON.stringify(mediaItems));
+              item.Product.mediaUrls = mediaUrls;
+              // 确保imageUrls也被正确设置
+              item.Product.imageUrls = imageUrls;
+              console.log('收藏页面 - 处理后的媒体数据:', item.Product.mediaItems, item.Product.mediaUrls);
+            }
+            
+            // 确保顶层也有imageUrls
+            item.imageUrls = imageUrls;
+            
             if (item.Product) {
               item.Product.product_contact = product_contact;
               item.Product.contact_phone = contact_phone;
@@ -684,5 +769,11 @@ Page({
       previewImageIndex: e.detail.current
     });
     this.resetZoom();
+  },
+  
+  // 图片加载完成事件
+  onImageLoad(e) {
+    console.log('图片加载完成:', e);
+    // 可以在这里添加图片加载完成后的处理逻辑，比如统计加载时间、显示动画等
   }
 })
\ No newline at end of file
diff --git a/pages/favorites/index.wxml b/pages/favorites/index.wxml
index 3cf1858..0f74fbc 100644
--- a/pages/favorites/index.wxml
+++ b/pages/favorites/index.wxml
@@ -20,15 +20,108 @@
       <view style="display: flex; width: 100%; height: 200rpx; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;">
         <!-- 左侧图片区域 40%宽度（2/5），高度固定 -->
         <view style="width: 40%; position: relative; height: 200rpx;">
-          <!-- 第一张图片 -->
-          <view wx:if="{{item.Product && item.Product.imageUrls && item.Product.imageUrls.length > 0}}" style="width: 100%; height: 100%;">
-            <image src="{{item.Product.imageUrls[0]}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-urls="{{item.Product.imageUrls}}" data-index="0"></image>
+          <!-- 第一张媒体（支持图片和视频） -->
+          <view wx:if="{{item.Product && item.Product.mediaItems && item.Product.mediaItems.length > 0}}" style="width: 100%; height: 100%;">
+            <!-- 视频处理：根据类型字段判断 -->
+            <video 
+              wx:if="{{item.Product.mediaItems[0].type === 'video'}}" 
+              src="{{item.Product.mediaItems[0].url}}" 
+              class="slider-media"
+              mode="aspectFill"
+              show-center-play-btn="{{true}}"
+              show-play-btn="{{false}}"
+              controls="{{true}}"
+              autoplay="{{true}}"
+              loop="{{true}}"
+              muted="{{true}}"
+              initial-time="0"
+              show-mute-btn="{{true}}"
+              enable-progress-gesture="{{true}}"
+              enable-play-gesture="{{true}}"
+              object-fit="fill" >
+            </video>
+            <!-- 图片处理 -->
+            <image 
+              wx:else
+              src="{{item.Product.mediaItems[0].url || '/images/default-avatar.png'}}" 
+              mode="aspectFill" 
+              style="width: 100%; height: 100%;" 
+              bindtap="previewImage" 
+              data-urls="{{item.Product.mediaUrls}}" 
+              data-index="0"
+              lazy-load="true"
+              bindload="onImageLoad"
+              data-index="0">
+            </image>
+          </view>
+          <!-- 兼容旧的imageUrls格式 -->
+          <view wx:elif="{{item.Product && item.Product.imageUrls && item.Product.imageUrls.length > 0}}" style="width: 100%; height: 100%;">
+            <image 
+              src="{{item.Product.imageUrls[0] || '/images/default-avatar.png'}}" 
+              mode="aspectFill" 
+              style="width: 100%; height: 100%;" 
+              bindtap="previewImage" 
+              data-urls="{{item.Product.imageUrls}}" 
+              data-index="0"
+              lazy-load="true"
+              bindload="onImageLoad"
+              data-index="0">
+            </image>
           </view>
           <view wx:else style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999;">
             <text>暂无图片</text>
           </view>
-          <!-- 剩余图片可滑动区域 -->
-          <view wx:if="{{item.Product && item.Product.imageUrls && item.Product.imageUrls.length > 0}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+          <!-- 剩余图片/视频可滑动区域 -->
+          <view wx:if="{{item.Product && item.Product.mediaItems && item.Product.mediaItems.length > 0}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+            <swiper 
+              class="image-swiper" 
+              style="width: 100%; height: 100%;" 
+              current="{{item.currentImageIndex || 0}}" 
+              bindchange="swiperChange" 
+              data-item-id="{{index}}">
+              <block wx:for="{{item.Product.mediaItems}}" wx:for-item="media" wx:for-index="idx" wx:key="idx">
+                <swiper-item>
+                  <!-- 视频处理：根据类型字段判断 -->
+                  <video 
+                    wx:if="{{media.type === 'video'}}" 
+                    src="{{media.url}}" 
+                    class="slider-media"
+                    mode="aspectFill"
+                    show-center-play-btn="{{true}}"
+                    show-play-btn="{{false}}"
+                    controls="{{true}}"
+                    autoplay="{{true}}"
+                    loop="{{true}}"
+                    muted="{{true}}"
+                    initial-time="0"
+                    show-mute-btn="{{true}}"
+                    enable-progress-gesture="{{true}}"
+                    enable-play-gesture="{{true}}"
+                    object-fit="fill" >
+                  </video>
+                  <!-- 图片处理 -->
+                  <image 
+                    wx:else
+                    src="{{media.url || '/images/default-avatar.png'}}" 
+                    mode="aspectFill" 
+                    style="width: 100%; height: 100%; display: inline-block; box-sizing: border-box" 
+                    bindtap="previewImage" 
+                    data-urls="{{item.Product.mediaUrls}}" 
+                    data-index="{{idx}}"
+                    lazy-load="true"
+                    bindload="onImageLoad"
+                    data-index="{{idx}}">
+                  </image>
+                </swiper-item>
+              </block>
+            </swiper>
+            <!-- 显示页码指示器 -->
+            <view style="position: absolute; bottom: 10rpx; right: 10rpx; background-color: rgba(0,0,0,0.5); color: white; padding: 5rpx 10rpx; border-radius: 15rpx; font-size: 20rpx;">
+              {{(item.currentImageIndex || 0) + 1}}/{{item.Product.mediaItems.length}}
+            </view>
+          </view>
+          <!-- 兼容旧的imageUrls格式 -->
+          <view wx:elif="{{item.Product && item.Product.imageUrls && item.Product.imageUrls.length > 0}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
             <swiper 
               class="image-swiper" 
               style="width: 100%; height: 100%;" 
@@ -37,7 +130,17 @@
               data-item-id="{{index}}">
               <block wx:for="{{item.Product.imageUrls}}" wx:for-item="img" wx:for-index="idx" wx:key="idx">
                 <swiper-item>
-                  <image src="{{img}}" mode="aspectFill" style="width: 268rpx; height: 210rpx; display: inline-block; box-sizing: border-box" bindtap="previewImage" data-urls="{{item.Product.imageUrls}}" data-index="{{idx}}"></image>
+                  <image 
+                    src="{{img || '/images/default-avatar.png'}}" 
+                    mode="aspectFill" 
+                    style="width: 268rpx; height: 210rpx; display: inline-block; box-sizing: border-box" 
+                    bindtap="previewImage" 
+                    data-urls="{{item.Product.imageUrls}}" 
+                    data-index="{{idx}}"
+                    lazy-load="true"
+                    bindload="onImageLoad"
+                    data-index="{{idx}}">
+                  </image>
                 </swiper-item>
               </block>
             </swiper>
diff --git a/pages/favorites/index.wxss b/pages/favorites/index.wxss
index f8e9f28..e1d0d7d 100644
--- a/pages/favorites/index.wxss
+++ b/pages/favorites/index.wxss
@@ -33,4 +33,11 @@
 .image-swiper {
   width: 100%;
   height: 100%;
+}
+
+/* 轮播媒体样式 */
+.slider-media {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
\ No newline at end of file