Mini-Program/pages/compare_price/index.wxml

<!-- pages/compare_price/index.wxml -->
<view class="page-container">

  <scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true">
    <!-- 步骤完成提示区 -->
    <view class="tips-section">
      <view class="tips-container">
        <view class="tips-icon">
          <text class="check-icon">✓</text>
        </view>
        <text class="tips-text">您已完成选择，以下是{{currentGoods ? (currentGoods.productName || currentGoods.name) : '商品'}}（{{selectedSpec || '43-44g'}}）的价格对比结果</text>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view wx:if="{{loading}}" class="loading">
      <text>加载中...</text>
    </view>
    
    <view wx:else>
      <view wx:if="{{(selectedOption || selectedCategory)}}" class="content-container">
        <!-- 当前商品卡片 -->
        <view wx:if="{{currentGoods}}" class="current-goods-section">
          <view class="section-title">
            <text class="title-icon">🏷</text>
            <text class="title-text">当前商品</text>
          </view>
          <view class="current-goods-card">
            <view class="goods-header">
              <view class="brand-tag">品牌</view>
              <text class="goods-name">{{currentGoods.productName || currentGoods.name || '商品'}}</text>
              <view class="price-container">
                <text class="currency-symbol" style="color: {{currentGoods.priceDiff > 0 ? '#FF4D4F' : currentGoods.priceDiff < 0 ? '#10B981' : '#666666'}}">¥</text>
                <text class="price-amount" style="color: {{currentGoods.priceDiff > 0 ? '#FF4D4F' : currentGoods.priceDiff < 0 ? '#10B981' : '#666666'}}">{{currentGoods.price}}</text>
              </view>
            </view>
            <text class="spec-info">{{currentGoods.specification || selectedSpec || '净重43-44g'}} | {{currentGoods.yolk || '绿壳'}} | 库存:{{currentGoods.totalStock || '450'}}</text>
            <view class="merchant-info">
              <view class="merchant-left">
                <text class="merchant-icon">🏪</text>
                <text class="merchant-text">{{currentGoods.sourceType || '鸡场直销'}}</text>
              </view>
              <view class="merchant-right">
                <text class="merchant-icon">📍</text>
                <text class="merchant-text">{{currentGoods.region || '重庆'}}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 对比商品列表 -->
        <view class="compare-section">
          <view class="section-title">
            <text class="title-icon">⚖</text>
            <text class="title-text">同类商品价格对比</text>
            <view class="filter-btn">
              <text class="filter-text">筛选</text>
              <text class="filter-icon">☰</text>
            </view>
          </view>
          <view class="compare-list">
            <view 
              class="compare-item" 
              wx:for="{{goods}}" 
              wx:key="id" 
              data-item="{{item}}"
              bindtap="navigateToGoodsDetail"
            >
              <view class="compare-item-header">
                <text class="compare-item-name">{{item.productName || item.name}}</text>
                <view class="compare-item-price">
                  <text class="currency-symbol" style="color: {{item.priceDiff > 0 ? '#FF4D4F' : item.priceDiff < 0 ? '#10B981' : '#666666'}}">¥</text>
                  <text class="compare-price-amount" style="color: {{item.priceDiff > 0 ? '#FF4D4F' : item.priceDiff < 0 ? '#10B981' : '#666666'}}">{{item.price}}</text>
                </view>
              </view>
              <text class="compare-item-spec">{{item.currentSpec || item.specification || (item.processedSpecs && item.processedSpecs.length > 0 ? item.processedSpecs.join(' | ') : '净重:45-50g')}} | {{item.category || '绿壳'}} | {{item.yolk || '无'}} | 库存:{{item.totalStock || '450'}}</text>
              <view class="compare-item-footer">
                <view class="merchant-region">
                  <text class="compare-item-merchant">🏪 {{item.sourceType || '生态农场'}}</text>
                  <text class="compare-item-region"> | 📍 {{item.region || '地区'}}</text>
                </view>
                <view class="price-comparison" wx:if="{{item.pricePercent}}">
                  <text class="price-trend-icon" style="color: {{item.priceDiff > 0 ? '#EF4444' : item.priceDiff < 0 ? '#10B981' : '#666666'}}">{{item.priceDiff > 0 ? '↑' : item.priceDiff < 0 ? '↓' : '→'}}</text>
                  <text class="price-trend-text" style="color: {{item.priceDiff > 0 ? '#FF4D4F' : item.priceDiff < 0 ? '#10B981' : '#666666'}}">{{item.priceDiff > 0 ? '+' : ''}}{{item.pricePercent}}%</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 加载更多按钮 -->
        <view wx:if="{{!loading && goods.length > 0 && hasMore}}" class="load-more">
          <button class="load-more-btn" bindtap="loadMore" loading="{{loadingMore}}">
            {{loadingMore ? '加载中...' : '加载更多'}}
          </button>
        </view>
        
        <!-- 价格趋势图 -->
        <view class="trend-section">
          <view class="section-title">
            <text class="title-icon">📈</text>
            <text class="title-text">价格趋势对比</text>
          </view>
          <view class="trend-chart">
            <view class="chart-container">
              <!-- 图表内容 -->
              <view class="chart-placeholder">
                <text>价格趋势图</text>
              </view>
            </view>
            <view class="chart-legend">
              <view class="legend-item">
                <view class="legend-dot blue"></view>
                <text class="legend-text">当前商品</text>
              </view>
              <view class="legend-item">
                <view class="legend-dot orange"></view>
                <text class="legend-text">同类平均</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 加载完成提示 -->
        <view wx:if="{{!loading && goods.length > 0 && !hasMore}}" class="load-complete">
          <text>已经加载全部符合的商品</text>
        </view>
      </view>
      
      <view wx:if="{{goods.length === 0 && selectedOption}}" class="no-data">
        <text>暂无在售数据</text>
      </view>
      
      <!-- 类别选择区域 -->
      <view wx:if="{{!selectedOption}}" class="select-section">
        <view class="select-card">
          <text class="select-title">请从商品详情页点击对比价格</text>
        </view>
        <view class="select-tips">
          <text class="tips-line">此页面仅用于展示对比价格数据</text>
          <text class="tips-line">请返回商品详情页</text>
          <text class="tips-line">点击对比价格按钮</text>
        </view>
      </view>
    </view>
  </scroll-view>
  
  <!-- 底部操作栏 -->
  <view class="bottom-bar">
    <view class="bottom-btn reset-btn full-width" bindtap="resetSelection">
      <text class="btn-icon">🔄</text>
      <text class="btn-text">重新选择</text>
    </view>
  </view>
</view>