Mini-Program/pages/favorites/index.wxml

<!--pages/favorites/index.wxml-->
<view class="container" style="align-items: flex-start; padding: 20rpx; width: 100%; max-width: 100vw; overflow-x: hidden; position: relative; box-sizing: border-box;">
  <!-- 加载状态 -->
  <view wx:if="{{loading}}" class="loading-container">
    <loading>
      加载中...
    </loading>
  </view>

  <!-- 空状态 -->
  <view wx:elif="{{!hasFavorites}}" class="empty-container" style="width: 100%; margin: 0 auto; padding: 0;">
    <view class="empty-icon">💔</view>
    <text class="empty-text">您还没有收藏任何商品</text>
  </view>

  <!-- 收藏列表 -->
  <view wx:else class="goods-list" style="width: 100%; display: flex; flex-direction: column; align-items: flex-start;">
    <view wx:for="{{favoritesList}}" wx:key="productId" class="card" style="width: 100%; margin-top: 0; margin-bottom: 20rpx;">
      <!-- 图片和信息2:3比例并排显示，整体高度固定 -->
      <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>
          <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%;">
            <swiper 
              class="image-swiper" 
              style="width: 100%; height: 100%;" 
              current="{{item.currentImageIndex || 0}}" 
              bindchange="swiperChange" 
              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: 100%; height: 100%;" bindtap="previewImage" data-urls="{{item.Product.imageUrls}}" 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.imageUrls.length}}
            </view>
          </view>
        </view>
        
        <!-- 右侧信息区域 60%宽度（3/5），相应调整 -->
        <view style="width: 60%; display: flex; flex-direction: column; background-color: white; border-left: 1rpx solid #f0f0f0;">
            <!-- 上半部分商品信息区域（60%高度），可点击查看详情 -->
          <view style="flex: 0.6; padding: 0rpx 15rpx 15rpx 15rpx; cursor: pointer;" bindtap="goToGoodsDetail" data-item="{{item}}">
            <view>
                <view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx;">
                  <view style="display: flex; align-items: center; flex: 1;">
                    <view style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -0.1rpx;">{{item.Product.supplyStatus || '暂无状态'}}</view>
                    <text style="font-size: 36rpx; font-weight: bold;">{{item.Product.productName || '未命名商品'}}</text>
                    <span style="vertical-align: middle; font-size: 12rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 10rpx; 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>
              <view style="font-size: 28rpx; color: #888; margin-top: 30rpx;">
                {{(item.Product.spec && item.Product.spec !== '无') ? item.Product.spec : (item.Product.specification && item.Product.specification !== '无') ? item.Product.specification : '无'}} | {{item.Product.yolk || '无'}} | {{item.Product.minOrder || item.Product.quantity || 1}}件
              </view>
            </view>
          </view>
          
          <!-- 下半部分按钮区域（40%高度） -->
          <view style="flex: 0.4; display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx;">
            <!-- 价格显示 -->
            <text style="color: #52c41a; font-size: 28rpx; font-weight: bold;">¥{{item.Product.price || 0}}</text>
            <!-- 取消收藏按钮 -->
          <button 
            style="font-size: 24rpx; font-weight: bold; width: 150rpx; height: 60rpx; border-radius: 24rpx; display: flex; justify-content: center; align-items: center; padding: 0; border: none; margin: 0; transition: all 0.3s ease; position: relative; overflow: hidden; color: #FF6B6B; background: rgba(255, 107, 107, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);"
            bindtap="cancelFavorite"
            data-productid="{{item.productId}}"
          >
            取消收藏
          </button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 已展示全部收藏提示 -->
    <view class="all-shown-tip" style="width: 100%; display: flex; justify-content: center; align-items: center; padding: 40rpx 0; color: #999; font-size: 26rpx; text-align: center;">
      已展示全部收藏
    </view>
  </view>
</view>

<!-- 图片预览弹窗 -->
<view class="image-preview-mask" wx:if="{{showImagePreview}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 10001;" catchtouchmove="true">
  <view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
    <swiper 
      style="width: 100%; height: 100%;" 
      current="{{previewImageIndex}}" 
      bindchange="onPreviewImageChange" 
      indicator-dots="true" 
      indicator-color="rgba(255,255,255,0.5)" 
      indicator-active-color="#fff">
      <block wx:for="{{previewImageUrls}}" wx:key="*this">
        <swiper-item>
          <image 
            src="{{item}}" 
            mode="aspectFit" 
            style="width: 100%; height: 100%; transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px); transition: {{isScaling ? 'none' : 'transform 0.3s'}};" 
            bindtap="handleImageTap" 
            bindtouchstart="handleTouchStart" 
            bindtouchmove="handleTouchMove" 
            bindtouchend="handleTouchEnd" 
            bindtouchcancel="handleTouchEnd"
          ></image>
        </swiper-item>
      </block>
    </swiper>
    <view style="position: absolute; top: 40rpx; right: 40rpx; color: white; font-size: 40rpx;">
      <text bindtap="closeImagePreview" style="background: rgba(0,0,0,0.5); padding: 10rpx 20rpx; border-radius: 50%;">×</text>
    </view>
  </view>
</view>