Mini-Program/pages/compare_price/index.wxml

<!-- pages/compare_price/index.wxml -->
<!--背景图片-->
<view style="position: relative; width: 100%; height: 100vh; overflow: hidden;">
  <image src="../../images/background.png" mode="aspectFill" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></image>
  <scroll-view style="position: relative; z-index: 10; width: 100%; height: 100%;" scroll-y="true" enable-back-to-top="true">
    <view style="width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0; padding-bottom: 20rpx;">
      <!-- 类别选择区域 -->
      <view wx:if="{{!selectedOption}}">
        <view style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx;">
          <text style="font-size: 32rpx; font-weight: bold; color: #333; text-align: center;">请从商品详情页点击对比价格</text>
        </view>
        <view style="display: flex; flex-direction: column; gap: 24rpx; width: 100%; max-width: 400rpx; align-items: center;">
          <text style="font-size: 28rpx; color: #666; text-align: center; line-height: 40rpx;">此页面仅用于展示对比价格数据</text>
          <text style="font-size: 28rpx; color: #666; text-align: center; line-height: 40rpx;">请返回商品详情页</text>
          <text style="font-size: 28rpx; color: #666; text-align: center; line-height: 40rpx;">点击对比价格按钮</text>
        </view>
      </view>
      
      
      <!-- 商品列表 -->
      <view wx:if="{{loading}}" style="margin-top: 40rpx; color: #fff; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);">
        <text>加载中...</text>
      </view>
      
      <view wx:else>
        <view wx:if="{{(selectedOption || selectedCategory)}}" style="margin-top: 10rpx; width: 100%; box-sizing: border-box; padding: 0 20rpx;">
          <!-- 当前商品信息 -->
          <view wx:if="{{currentGoods}}" style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx; width: 100%; box-sizing: border-box;">
            <text style="font-size: 30rpx; font-weight: bold; color: #333; text-align: center; display: block; margin-bottom: 10rpx;">当前商品</text>
            <view style="display: flex; flex-direction: column; gap: 16rpx;">
              <!-- 商品图片/视频轮播 -->
              <view style="width: 100%; height: 400rpx; border-radius: 10rpx; overflow: hidden; position: relative;">
                <swiper wx:if="{{currentGoods.mediaItems && currentGoods.mediaItems.length > 0}}" indicator-dots="{{true}}" autoplay="{{false}}" interval="10000" duration="500" style="width: 100%; height: 100%;" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
                  <swiper-item wx:for="{{currentGoods.mediaItems}}" wx:key="index">
                    <image wx:if="{{item.type === 'image'}}" src="{{item.url}}" mode="aspectFill" style="width: 100%; height: 100%;"></image>
                    <video wx:else src="{{item.url}}" mode="aspectFill" style="width: 100%; height: 100%;" controls="{{true}}" autoplay="{{true}}" loop="{{false}}" bindended="onVideoEnded"></video>
                  </swiper-item>
                </swiper>
                <image wx:else src="https://via.placeholder.com/300x300.png?text=No+Image" mode="aspectFill" style="width: 100%; height: 100%;"></image>
              </view>
              <!-- 商品信息 -->
              <view style="display: flex; flex-direction: column; gap: 12rpx;">
                <view style="display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;">
                  <view style="display: flex; align-items: center; gap: 15rpx; flex: 1; overflow: hidden;">
                    <text style="font-size: 36rpx; font-weight: bold; color: #333; word-break: break-word; flex-shrink: 0;">{{currentGoods.name}}</text>
                    <view style="display: flex; gap: 15rpx; overflow-x: auto; padding-bottom: 4rpx;">
                      <view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666; flex-shrink: 0;">{{selectedSpec}}</view>
                      <view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666; flex-shrink: 0;">{{currentGoods.yolk || '无'}}</view>
                      <view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666; flex-shrink: 0;">库存:{{currentGoods.totalStock || '充足'}}</view>
                    </view>
                  </view>
                  <view style="display: flex; flex-direction: column; align-items: flex-end; margin-left: 12rpx; flex-shrink: 0;">
                    <text style="font-size: 40rpx; font-weight: bold; color: #ff4d4f;">¥{{currentGoods.price}}</text>
                    <text wx:if="{{currentGoods.originalPrice}}" style="font-size: 28rpx; color: #999; text-decoration: line-through; margin-top: 4rpx;">¥{{currentGoods.originalPrice}}</text>
                  </view>
                </view>
                <view style="display: flex; flex-wrap: wrap; gap: 15rpx; margin-top: 8rpx; justify-content: space-around;">
                </view>
              </view>
            </view>
          </view>
          
          <!-- 选择信息 -->
          <view style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 15rpx; margin-bottom: 15rpx; width: 100%; box-sizing: border-box;">
            <view style="display: flex; justify-content: center; align-items: center; gap: 30rpx; flex-wrap: wrap;">
              <text style="font-size: 32rpx; font-weight: bold; color: #333;">选择的种类: {{selectedCategory}}</text>
              <text style="font-size: 32rpx; font-weight: bold; color: #333;">规格: {{selectedSpec}}</text>
            </view>
          </view>
          
          <!-- 商品卡片列表 -->
          <view class="waterfall-container" style="width: 100%; box-sizing: border-box;"> 
            <view class="waterfall-column">
              <view 
                class="waterfall-item" 
                wx:for="{{goods}}" 
                wx:key="id" 
                wx:if="{{index % 2 === 0}}" 
                data-item="{{item}}"
                bindtap="navigateToGoodsDetail"
              >
                <view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}" style="position: relative; background-color: rgba(255, 255, 255, 0.8); border-radius: 16rpx; overflow: hidden;">
                  <!-- 售空商品白色覆盖层 -->
                  <view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay-full"></view>
                  <view class="product-image-wrapper">
                  <!-- 媒体处理：优先展示图片 -->
                  <block wx:if="{{item.mediaItems && item.mediaItems.length > 0}}">
                    <!-- 图片处理 -->
                    <image 
                      wx:if="{{item.mediaItems[0].type === 'image'}}" 
                      class="product-media" 
                      src="{{item.mediaItems[0].url}}" 
                      mode="aspectFill"
                      lazy-load="true"
                      bindload="onImageLoad"
                      data-index="{{index}}"
                    ></image>
                    <!-- 视频处理：如果没有图片再展示视频 -->
                    <video 
                      wx:else 
                      id="video-{{item.id}}"
                      class="product-media" 
                      src="{{item.mediaItems[0].url}}" 
                      mode="aspectFill"
                      show-center-play-btn="{{true}}"
                      show-play-btn="{{false}}"
                      controls="{{true}}"
                      autoplay="{{true}}"
                      loop="{{true}}"
                      muted="{{true}}"
                      poster=""
                    ></video>
                  </block>
                  <!-- 占位图：如果没有媒体数据 -->
                  <image 
                    wx:else
                    class="product-media" 
                    src="https://via.placeholder.com/300x300.png?text=No+Image" 
                    mode="aspectFill"
                    lazy-load="true"
                    bindload="onImageLoad"
                    data-index="{{index}}"
                  ></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">
                    <view class="product-first-row">
                      <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}" style="margin-bottom: 8rpx;">
                        {{item.sourceType || ''}}
                      </view>
                      <text class="product-title">{{item.name}}</text>
                      <view style="display: flex; flex-wrap: wrap; gap: 8rpx; margin-top: 8rpx; padding-bottom: 8rpx;">
                        <view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view>
                        <view wx:for="{{item.processedSpecs}}" wx:key="index" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item}}</view>
                        <view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view>
                      </view>
                    </view>
                    <view class="product-stock-row" style="margin-top: 8rpx;">
                      <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>
                      <view style="display: flex; flex-direction: column; align-items: flex-end;">
                        <text class="product-price">¥{{item.price}}</text>
                        <text wx:if="{{item.originalPrice}}" style="font-size: 20rpx; color: #999; text-decoration: line-through; margin-top: 2rpx;">¥{{item.originalPrice}}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="waterfall-column">
              <view 
                class="waterfall-item" 
                wx:for="{{goods}}" 
                wx:key="id" 
                wx:if="{{index % 2 === 1}}" 
                data-item="{{item}}"
                bindtap="navigateToGoodsDetail"
              >
                <view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}" style="position: relative; background-color: rgba(255, 255, 255, 0.8); border-radius: 16rpx; overflow: hidden;">
                  <!-- 售空商品白色覆盖层 -->
                  <view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay-full"></view>
                  <view class="product-image-wrapper">
                  <!-- 媒体处理：优先展示图片 -->
                  <block wx:if="{{item.mediaItems && item.mediaItems.length > 0}}">
                    <!-- 图片处理 -->
                    <image 
                      wx:if="{{item.mediaItems[0].type === 'image'}}" 
                      class="product-media" 
                      src="{{item.mediaItems[0].url}}" 
                      mode="aspectFill"
                      lazy-load="true"
                      bindload="onImageLoad"
                      data-index="{{index}}"
                    ></image>
                    <!-- 视频处理：如果没有图片再展示视频 -->
                    <video 
                      wx:else 
                      id="video-{{item.id}}"
                      class="product-media" 
                      src="{{item.mediaItems[0].url}}" 
                      mode="aspectFill"
                      show-center-play-btn="{{true}}"
                      show-play-btn="{{false}}"
                      controls="{{true}}"
                      autoplay="{{true}}"
                      loop="{{true}}"
                      muted="{{true}}"
                      poster=""
                    ></video>
                  </block>
                  <!-- 占位图：如果没有媒体数据 -->
                  <image 
                    wx:else
                    class="product-media" 
                    src="https://via.placeholder.com/300x300.png?text=No+Image" 
                    mode="aspectFill"
                    lazy-load="true"
                    bindload="onImageLoad"
                    data-index="{{index}}"
                  ></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">
                    <view class="product-first-row">
                      <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}" style="margin-bottom: 8rpx;">
                        {{item.sourceType || ''}}
                      </view>
                      <text class="product-title">{{item.name}}</text>
                      <view style="display: flex; flex-wrap: wrap; gap: 8rpx; margin-top: 8rpx; padding-bottom: 8rpx;">
                        <view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view>
                        <view wx:for="{{item.processedSpecs}}" wx:key="index" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item}}</view>
                        <view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view>
                      </view>
                    </view>
                    <view class="product-stock-row" style="margin-top: 8rpx;">
                      <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>
                      <view style="display: flex; flex-direction: column; align-items: flex-end;">
                        <text class="product-price">¥{{item.price}}</text>
                        <text wx:if="{{item.originalPrice}}" style="font-size: 20rpx; color: #999; text-decoration: line-through; margin-top: 2rpx;">¥{{item.originalPrice}}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 加载完成提示 -->
          <view wx:if="{{!loading && goods.length > 0}}" style="margin-top: 15rpx; width: 100%; box-sizing: border-box;">
            <text style="font-size: 28rpx; color: #333; text-align: center; display: block;">已经加载全部符合的商品</text>
          </view>
        </view>
        
        <view wx:if="{{goods.length === 0 && selectedOption}}" style="margin-top: 40rpx; color: #fff; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);">
          <text>暂无在售数据</text>
        </view>
      </view>
    </view>
  </scroll-view>

</view>