Mini-Program/pages/index/index.wxml

<view class="container">
  <!-- 顶部搜索区域容器 - 始终固定显示 -->
  <view class="top-section-container">
    
    <!-- 搜索区域 -->
    <view class="search-section" style="height: 100rpx; display: block; box-sizing: border-box">
      <view class="search-bar" style="width: 693rpx; display: flex; box-sizing: border-box; position: relative; left: 0rpx; top: 19rpx">
        <view class="search-input-wrapper">
          <!-- 搜索图标和输入框 -->
          <text class="search-icon">🔍</text>
          <input 
            class="search-input" 
            placeholder="搜索商品名称或地区" 
            placeholder-class="search-placeholder"
            value="{{searchKeyword}}"
            bindinput="onSearchInput"
          />
        </view>
        <view class="egg-inner" style="position: relative;" bindtap="openAdvancedFilter">筛选</view>
      </view>
    </view>
    
    <!-- 品种筛选区域 -->
    <view class="category-section">
      <view class="category-scroll">
        <view 
          wx:for="{{categories}}" 
          wx:key="index"
          class="egg-item {{selectedCategory === item ? 'active' : ''}}" 
          bindtap="selectCategory" 
          data-category="{{item}}"
        >
          <view class="egg-inner">{{item}}</view>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 地区选择器弹窗 -->
  <view wx:if="{{showRegionPicker}}" class="region-picker-overlay" bindtap="toggleRegionPicker">
    <view class="region-picker-container" catchtap="stopPropagation">
      <view class="region-picker-title">选择地区</view>
      <view class="region-list">
        <view 
          wx:for="{{regions}}" 
          wx:key="index" 
          class="region-item {{selectedRegion === item ? 'active' : ''}}"
          catchtap="selectRegion" 
          data-region="{{item}}"
        >
          {{item}}
        </view>
      </view>
    </view>
  </view>

  <!-- 高级筛选底部弹窗 -->
  <view wx:if="{{showAdvancedFilter}}" class="advanced-filter-overlay" bindtap="closeAdvancedFilter">
    <view class="advanced-filter-container" catchtap="stopPropagation">
      <!-- 筛选标题 -->
      <view class="advanced-filter-header">
        <text class="advanced-filter-title">高级筛选</text>
        <view class="advanced-filter-actions">
          <text class="reset-btn" bindtap="resetAdvancedFilter">重置</text>
          <text class="confirm-btn" bindtap="applyAdvancedFilter">确定</text>
        </view>
      </view>
      
      <!-- 筛选内容区域 - 底部弹出式布局 -->
      <view class="advanced-filter-content">
        <!-- 左侧筛选分类列表 -->
        <view class="filter-category-list">
          <view 
            wx:for="{{filterCategories}}" 
            wx:key="value"
            class="filter-category-item {{selectedFilterCategory === item.value ? 'active' : ''}}"
            bindtap="selectFilterCategory"
            data-category="{{item.value}}"
          >
            {{item.label}}
          </view>
        </view>
        
        <!-- 右侧筛选选项区域 -->
        <view class="filter-options-list">
          <!-- 地区筛选 -->
          <view wx:if="{{selectedFilterCategory === 'region'}}" class="filter-options">
            <view 
              wx:for="{{regionOptions}}" 
              wx:key="value"
              class="filter-option-item {{advancedFilters.region === item.value ? 'active' : ''}}"
              catchtap="selectAdvancedRegion"
              data-region="{{item.value}}"
            >
              {{item.label}}
            </view>
          </view>
          
          <!-- 蛋壳颜色筛选 -->
          <view wx:if="{{selectedFilterCategory === 'shellColor'}}" class="filter-options">
            <view 
              wx:for="{{shellColorOptions}}" 
              wx:key="value"
              class="filter-option-item {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
              catchtap="selectShellColor"
              data-color="{{item.value}}"
            >
              {{item.label}}
            </view>
          </view>
          
          <!-- 商品名称筛选 -->
          <view wx:if="{{selectedFilterCategory === 'productName'}}" class="filter-options">
            <view 
              wx:for="{{productNameOptions}}" 
              wx:key="value"
              class="filter-option-item {{advancedFilters.productName === item.value ? 'active' : ''}}"
              catchtap="selectProductName"
              data-name="{{item.value}}"
            >
              {{item.label}}
            </view>
          </view>
          
          <!-- 规格筛选 -->
          <view wx:if="{{selectedFilterCategory === 'specification'}}" class="filter-options specification-options">
            <view 
              wx:for="{{specificationOptions}}" 
              wx:key="value"
              class="filter-option-item {{advancedFilters.specification === item.value ? 'active' : ''}}"
              catchtap="selectSpecification"
              data-spec="{{item.value}}"
            >
              {{item.label}}
            </view>
          </view>
          
          <!-- 蛋黄类型筛选 -->
          <view wx:if="{{selectedFilterCategory === 'yolkType'}}" class="filter-options">
            <view 
              wx:for="{{yolkTypeOptions}}" 
              wx:key="value"
              class="filter-option-item {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
              catchtap="selectYolkType"
              data-yolk="{{item.value}}"
            >
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 侧边栏按钮 -->
  <view 
    class="sidebar-btn {{sidebarBtnHidden ? 'hidden' : ''}}" 
    style="top: {{sidebarBtnTop}}rpx;"
    bindtouchstart="handleTouchStart"
    bindtouchmove="handleTouchMove"
    bindtouchend="handleTouchEnd"
  >
    <!-- 侧边栏内容区域 -->
    <view class="sidebar-btn-content" bindtap="toggleSidebar">
      <text class="sidebar-text-black">招商</text>
      <text class="sidebar-text-black">入驻</text>
    </view>
    
    <!-- 箭头按钮 -->
    <view class="sidebar-arrow" bindtap="toggleSidebarBtn">
      <text class="arrow-icon {{sidebarBtnHidden ? 'arrow-right' : 'arrow-left'}}">《</text>
    </view>
  </view>
  
  <!-- 商品列表区域 -->
  <view class="goods-section">
    <scroll-view 
      class="goods-list" 
      id="goodsScrollView"
      bindscrolltolower="onReachBottom" 
      bindscroll="onScroll"
      scroll-y="true"
      refresher-enabled="{{true}}"
      refresher-triggered="{{isRefreshing}}"
      refresher-default-style="black"
      refresher-background="transparent"
      bindrefresherrefresh="onPullDownRefresh"
      bindrefresherrestore="onRestore"
    >
      <view class="goods-list-container">
        <!-- 功能按钮区域 -->
        <view class="function-buttons">
          <view class="function-btn" bindtap="navigateToSettlement">
            <text class="function-btn-icon">🏠</text>
            <text class="function-btn-text">入驻</text>
          </view>
          <view class="function-btn" bindtap="navigateToCooperation">
            <text class="function-btn-icon">📣</text>
            <text class="function-btn-text">招商</text>
          </view>
        </view>
        
        <!-- 广告走马灯轮播图 -->
        <view class="ad-carousel">
          <swiper 
            class="ad-swiper" 
            indicator-dots="{{true}}" 
            autoplay="{{true}}" 
            interval="3000" 
            duration="500"
            circular="{{true}}"
            indicator-color="rgba(255, 255, 255, 0.5)"
            indicator-active-color="#ffffff"
          >
            <swiper-item wx:for="{{adCarouselList}}" wx:key="index">
              <image 
                class="ad-image" 
                src="{{item.imageUrl}}" 
                mode="aspectFill"
                bindtap="onAdClick"
                data-ad="{{item}}"
                data-index="{{index}}"
              />
            </swiper-item>
          </swiper>
        </view>
        
        <!-- 网格布局 -->
        <view class="grid-container">
          <view 
            class="grid-item" 
            wx:for="{{filteredGoods}}" 
            wx:key="id" 
            data-item="{{item}}"
            bindtap="viewGoodsDetail"
            wx:if="{{!item.isAd}}"
          >
            <view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}" style="position: relative;">
              <!-- 售空商品白色覆盖层 - 覆盖整个卡片 -->
              <view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay-full"></view>
              <view class="product-image-wrapper">
                <!-- 视频处理：根据mediaItems中的类型字段判断 -->
                <video 
                  wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}" 
                  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>
                <!-- 图片处理 -->
                <image 
                  wx:else
                  class="product-media" 
                  src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : '/images/default-avatar.png'}}" 
                  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')}}">
                    {{item.sourceType || ''}}
                  </view>
                  <text class="product-title {{item.isViewed ? 'viewed' : ''}}">{{item.name}}</text>
                  <text class="product-description {{item.isViewed ? 'viewed' : ''}}">{{item.description || ''}}</text>
                </view>
                <view class="product-stock-row">
                  <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-location">{{item.region || ''}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view wx:if="{{loadingMore}}" class="loading-more">
          <view class="loading-spinner"></view>
          <text class="loading-text">加载中...</text>
        </view>
        
        <!-- 无更多数据 -->
        <view wx:if="{{!hasMoreData && filteredGoods.length > 0}}" class="no-more-data">
          <text>货源正在快马加鞭的赶来</text>
        </view>
        
        <!-- 无商品时显示 -->
        <view wx:if="{{filteredGoods.length === 0 && !isLoading}}" class="empty-goods">
          <view class="empty-icon">📦</view>
          <text class="empty-text">暂无商品数据</text>
          <text class="empty-hint">下拉刷新试试</text>
        </view>
      </view>
    </scroll-view>
  </view>
</view>