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: 20rpx; padding-bottom: 100rpx;">
      <!-- 类别选择区域 -->
      <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="{{goods.length > 0 && (selectedOption || selectedCategory)}}" style="margin-top: 40rpx; width: 100%; max-width: 750rpx;">
          <view style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx;">
            <text style="font-size: 28rpx; font-weight: bold; color: #333; text-align: center; display: block;">选择的种类: {{selectedCategory}}</text>
            <text style="font-size: 28rpx; font-weight: bold; color: #333; text-align: center; display: block; margin-top: 10rpx;">选择的规格: {{selectedSpec}}</text>
          </view>
          
          <!-- 商品卡片列表 -->
          <view class="waterfall-container">
            <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="{{false}}"
                      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>
                      <text class="product-description">{{item.description || ''}}</text>
                    </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>
                      <text class="product-price">¥{{item.price}}</text>
                    </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="{{false}}"
                      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>
                      <text class="product-description">{{item.description || ''}}</text>
                    </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>
                      <text class="product-price">¥{{item.price}}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </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 wx:if="{{showTips}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center;">
    <view style="background-color: rgba(255, 255, 255, 0.9); border-radius: 16rpx; padding: 40rpx; width: 80%; max-width: 500rpx; text-align: center;">
      <text style="font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; display: block;">欢迎使用对比价格功能</text>
      <text style="font-size: 28rpx; color: #666; line-height: 40rpx;">此页面用于对比不同商品的价格信息。</text>
      <text style="font-size: 28rpx; color: #f10b0bff; line-height: 40rpx;">对比同种商品，不同规格</text>
      <text style="font-size: 28rpx; color: #666; line-height: 40rpx;">的商品价格信息。</text>
      <text style="font-size: 28rpx; color: #666; line-height: 40rpx;">想要看到相同规格的同种类型</text>
      <text style="font-size: 28rpx; color: #f10b0bff; line-height: 40rpx;">相同规格的同种类型</text>
      <text style="font-size: 28rpx; color: #666; line-height: 40rpx;">点击商品内的对比价格按钮即可展示</text>
      <view style="margin-top: 40rpx;">
        <button style="background-color: #ff6b81; color: #fff; border-radius: 8rpx; padding: 12rpx 40rpx; font-size: 28rpx;" bindtap="closeTips">我知道了</button>
      </view>
    </view>
  </view>
</view>