Wechat/pages/index/index.wxml

<!-- pages/shangpin/shangpin.wxml -->
<view class="shangpin-page">
  <!-- 1. 公告栏 -->
  <view class="gonggao-box" bindtap="showGonggaoDetail">
    <view class="gonggao-icon">
      <image src="/images/notice.png" mode="aspectFit" />
    </view>
    <view class="gonggao-content">
      <text class="gonggao-text {{gonggaoAnim ? 'gonggao-anim' : ''}}">
        {{shangpingonggao || '暂无公告'}}
      </text>
    </view>
  </view>
  
  <!-- 2. 轮播图区域 -->
  <view class="lunbo-container">
    <swiper 
      class="lunbo-swiper" 
      indicator-dots="{{lunboList.length > 1}}" 
      indicator-color="rgba(255,255,255,0.6)" 
      indicator-active-color="#a855f7"
      autoplay="{{lunboList.length > 1}}"
      interval="3000"
      circular
    >
      <block wx:for="{{lunboList}}" wx:key="index">
        <swiper-item>
          <!-- 移除点击预览事件 -->
          <image 
            src="{{item}}" 
            mode="aspectFill" 
            class="lunbo-image"
          />
        </swiper-item>
      </block>
    </swiper>
    
    <!-- 轮播图占位图（无数据时显示） -->
    <view wx:if="{{lunboList.length === 0}}" class="lunbo-placeholder">
      <image src="{{lunbozhanwei}}" mode="aspectFill" class="lunbo-image" />
    </view>
    
    <!-- 刷新按钮 -->
    <view class="refresh-btn" bindtap="refreshAllData">
      <image 
        src="/images/refresh.png" 
        mode="aspectFit" 
        class="refresh-icon {{isRefreshing ? 'refreshing' : ''}}"
      />
      <view class="refresh-dot"></view>
    </view>
  </view>
  
  <!-- 3. 商品展示区域 -->
  <view class="shangpin-container">
    <!-- 3.1 商品类型选择 -->
    <scroll-view 
      class="leixing-scroll" 
      scroll-x 
      scroll-with-animation
      show-scrollbar="{{false}}"
    >
      <view class="leixing-list">
        <block wx:for="{{shangpinleixing}}" wx:key="id">
          <view 
            class="leixing-item {{selectedLeixingId === item.id ? 'leixing-active' : ''}}" 
            bindtap="selectLeixing"
            data-id="{{item.id}}"
          >
            <view class="leixing-image-box">
              <image 
                src="{{ossImageUrl + item.tupian_url}}" 
                mode="aspectFill" 
                class="leixing-image"
                lazy-load="{{true}}"
              />
              <view class="leixing-glow"></view>
            </view>
            <text class="leixing-text">{{item.jieshao}}</text>
          </view>
        </block>
      </view>
    </scroll-view>
    
    <!-- 3.2 商品展示 -->
    <view class="shangpin-list-container">
      <block wx:for="{{filteredData}}" wx:key="*this">
        <!-- 专区标题 -->
        <view class="zhuanqu-title" wx:if="{{item.shangpinList.length > 0}}">
          <view class="zhuanqu-icon">
            <image 
              src="/images/zone.png" 
              mode="aspectFit" 
              class="zhuanqu-icon-image {{idx % 3 === 0 ? 'zhuanqu-sparkle' : ''}}"
            />
          </view>
          <text class="zhuanqu-text">{{item.zhuanqu.mingzi}}</text>
        </view>
        
        <!-- 商品网格 -->
        <view class="shangpin-grid" wx:if="{{item.shangpinList.length > 0}}">
          <block wx:for="{{item.shangpinList}}" wx:key="id">
            <view 
              class="shangpin-card" 
              bindtap="goToDetail"
              data-id="{{item.id}}"
            >
              <!-- 商品图片 -->
              <view class="shangpin-image-box">
                <image 
                  src="{{ossImageUrl + item.tupian_url}}" 
                  mode="aspectFill" 
                  class="shangpin-image"
                  lazy-load="{{true}}"
                />
              </view>
              
              <!-- 商品标题 -->
              <view class="shangpin-title">
                <text class="title-text">{{item.biaoqian}}</text>
              </view>
              
              <!-- 价格和购买按钮 -->
              <view class="shangpin-footer">
                <view class="price-box">
                  <text class="price-icon">¥</text>
                  <text class="price-integer">{{item.priceInteger}}</text>
                  <text class="price-decimal">.{{item.priceDecimal}}</text>
                </view>
                <view class="buy-btn">
                  <image src="/images/purchase.png" mode="aspectFit" class="buy-icon" />
                </view>
              </view>
            </view>
          </block>
        </view>
      </block>
      
      <!-- 空状态 -->
      <view wx:if="{{filteredData.length === 0}}" class="empty-state">
        <image src="/images/empty.png" mode="aspectFit" class="empty-image" />
        <text class="empty-text">暂无商品</text>
        <button class="empty-btn" bindtap="refreshAllData">刷新试试</button>
      </view>
    </view>
  </view>
  
  <!-- 公告详情弹窗 -->
  <view class="gonggao-modal {{showGonggaoModal ? 'gonggao-modal--show' : 'gonggao-modal--hide'}}" wx:if="{{showGonggaoModal || _modalLeaving}}">
    <view class="modal-mask {{showGonggaoModal ? 'modal-mask--in' : 'modal-mask--out'}}" bindtap="hideGonggaoDetail"></view>
    <view class="modal-content {{showGonggaoModal ? 'modal-content--in' : 'modal-content--out'}}">
      <view class="modal-header">
        <text class="modal-title">公告详情</text>
        <view class="modal-close" bindtap="hideGonggaoDetail">×</view>
      </view>
      <scroll-view class="modal-body" scroll-y>
        <text class="modal-text">{{shangpingonggao || '暂无公告内容'}}</text>
      </scroll-view>
    </view>
  </view>
  
  <!-- 加载提示 -->
  <view class="loading-toast" wx:if="{{isLoading}}">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>
  <global-notification id="global-notification" />
  <popup-notice id="popupNotice" />
</view>
<!-- 底部自定义TabBar -->
<tab-bar />