修复收藏页面视频显示问题，应用商品详情页面的视频加载方式

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);
+    // 可以在这里添加图片加载完成后的处理逻辑，比如统计加载时间、显示动画等
   }
 })

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%;">
+          <view wx:if="{{item.Product && item.Product.mediaItems && item.Product.mediaItems.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>
+            <!-- 视频处理：根据类型字段判断 -->
+            <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>

pages/favorites/index.wxss

@@ -33,4 +33,11 @@
 .image-swiper {
   width: 100%;
   height: 100%;
+}
+
+/* 轮播媒体样式 */
+.slider-media {
+  width: 100%;
+  height: 100%;
+  display: block;
 }