Mini-Program/pages/index/index.wxml

<view class="container">
  <!-- 顶部搜索区域容器 - 始终固定显示 -->
  <view class="top-section-container {{headerElementsHidden ? 'hidden-elements' : 'show-elements'}}">
    
    <!-- 广告走马灯轮播图 -->
    <view class="ad-carousel" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;">
      <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="function-buttons" style="transform: translateY({{headerElementsHidden ? '-100%' : '0'}}); opacity: {{headerElementsHidden ? '0' : '1'}}; transition: transform 0.3s ease, opacity 0.3s ease;">
      <view class="function-btn" bindtap="navigateToSettlement">
        <text class="function-btn-text">入驻</text>
      </view>
      <view class="function-btn" bindtap="navigateToCooperation">
        <text class="function-btn-text">招商</text>
      </view>
      <view class="function-btn" bindtap="navigateToGoods">
        <text class="function-btn-text">管理</text>
      </view>
    </view>
    
    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-bar" style="width: 693rpx; display: flex; box-sizing: border-box">
        <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 
    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 wx:if="{{showSidebar}}" class="sidebar-overlay" bindtap="toggleSidebar"></view>
  
  <!-- 高级筛选弹出层 -->
  <view wx:if="{{showAdvancedFilter}}" class="sidebar-overlay" bindtap="closeAdvancedFilter"></view>
  
  <!-- 回到顶部按钮 -->
  <view 
    class="back-to-top-btn {{showBackToTop ? 'visible' : ''}}" 
    bindtap="scrollToTop"
  >
    <text class="back-to-top-text">top</text>
  </view>
  
  <!-- 高级筛选底部弹出层 -->
  <view wx:if="{{showAdvancedFilter}}" class="sidebar bottom-popup advanced-filter-sidebar">
    <view class="sidebar-title">高级筛选</view>
    
    <!-- 筛选内容区域 -->
    <view class="filter-content">
      <!-- 左侧分类列表 -->
      <view class="filter-left">
        <view 
          wx:for="{{filterCategories}}" 
          wx:key="index"
          class="filter-category-item {{selectedFilterCategory === item.value ? 'active' : ''}}"
          bindtap="selectFilterCategory"
          data-category="{{item.value}}"
        >
          {{item.label}}
        </view>
      </view>
      
      <!-- 右侧内容区域 -->
      <view class="filter-right">
        <!-- 地区选择内容 -->
        <view wx:if="{{selectedFilterCategory === 'region'}}" class="filter-right-content">
          <view class="filter-option all-option {{advancedFilters.region === 'all' ? 'active' : ''}}" bindtap="selectRegion" data-region="all">
            全部
          </view>
          <view 
            wx:for="{{regionOptions}}" 
            wx:key="index"
            class="filter-option {{advancedFilters.region === item.value ? 'active' : ''}}"
            bindtap="selectRegion"
            data-region="{{item.value}}"
          >
            {{item.label}}
          </view>
        </view>
        
        <!-- 蛋壳颜色内容 -->
        <view wx:if="{{selectedFilterCategory === 'shellColor'}}" class="filter-right-content">
          <view class="filter-option all-option {{advancedFilters.shellColor === 'all' ? 'active' : ''}}" bindtap="selectShellColor" data-color="all">
            全部颜色
          </view>
          <view 
            wx:for="{{shellColorOptions}}" 
            wx:key="index"
            class="filter-option {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
            bindtap="selectShellColor"
            data-color="{{item.value}}"
          >
            {{item.label}}
          </view>
        </view>
        
        <!-- 商品名称内容 -->
        <view wx:if="{{selectedFilterCategory === 'productName'}}" class="filter-right-content">
          <view class="filter-option all-option {{advancedFilters.productName === 'all' ? 'active' : ''}}" bindtap="selectProductName" data-name="all">
            全部商品
          </view>
          <view 
            wx:for="{{productNameOptions}}" 
            wx:key="index"
            class="filter-option {{advancedFilters.productName === item.value ? 'active' : ''}}"
            bindtap="selectProductName"
            data-name="{{item.value}}"
          >
            {{item.label}}
          </view>
        </view>
        
        <!-- 规格内容 -->
        <view wx:if="{{selectedFilterCategory === 'specification'}}" class="filter-right-content">
          <view class="filter-option all-option {{advancedFilters.specification === 'all' ? 'active' : ''}}" bindtap="selectSpecification" data-spec="all">
            全部规格
          </view>
          <view 
            wx:for="{{specificationOptions}}" 
            wx:key="index"
            class="filter-option {{advancedFilters.specification === item.value ? 'active' : ''}}"
            bindtap="selectSpecification"
            data-spec="{{item.value}}"
          >
            {{item.label}}
          </view>
        </view>
        
        <!-- 蛋黄类型内容 -->
        <view wx:if="{{selectedFilterCategory === 'yolkType'}}" class="filter-right-content">
          <view class="filter-option all-option {{advancedFilters.yolkType === 'all' ? 'active' : ''}}" bindtap="selectYolkType" data-yolk="all">
            全部蛋黄
          </view>
          <view 
            wx:for="{{yolkTypeOptions}}" 
            wx:key="index"
            class="filter-option {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
            bindtap="selectYolkType"
            data-yolk="{{item.value}}"
          >
            {{item.label}}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="filter-actions">
      <view class="filter-action-btn reset" bindtap="resetAdvancedFilter">重置</view>
      <view class="filter-action-btn apply" bindtap="applyAdvancedFilter">应用</view>
    </view>
  </view>
  
  <!-- 骨架屏加载 - 只在初始加载时显示，筛选时不显示 -->
  <view wx:if="{{isLoading && goods.length === 0}}" class="skeleton-container">
    <view class="skeleton-grid">
      <view class="skeleton-grid-item" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index">
        <view class="skeleton-image"></view>
        <view class="skeleton-title"></view>
        <view class="skeleton-title short"></view>
        <view class="skeleton-footer">
          <view class="skeleton-price"></view>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 商品列表区域 -->
  <view class="goods-section {{headerElementsHidden ? 'with-hidden-header' : ''}}">
    <scroll-view 
      class="goods-list" 
      id="goodsScrollView"
      bindscrolltolower="onReachBottom" 
      bindscroll="onScroll"
      scroll-y="true"
      scroll-top="{{scrollTop}}"
      refresher-enabled="{{true}}"
      refresher-triggered="{{isRefreshing}}"
      refresher-default-style="black"
      refresher-background="transparent"
      bindrefresherrefresh="onPullDownRefresh"
      bindrefresherrestore="onRestore"
      style="padding-top: {{headerElementsHidden ? '175rpx' : '580rpx'}}; transition: padding-top 0.3s ease;"
    >
      <view class="goods-list-container">
        <!-- 网格布局 -->
        <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' : ''}}">
              <!-- 售空商品半透明覆盖层 -->
              <view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay"></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 wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">
    <view class="auth-modal-container">
      <view class="auth-modal-title">授权登录</view>
      <view class="auth-modal-content">授权您的手机号后才能查看商品详情</view>
      <view class="auth-modal-buttons">
        <button 
          class="auth-primary-button" 
          open-type="getPhoneNumber" 
          bindgetphonenumber="onPhoneNumberResult"
        >
          授权手机号
        </button>
        <button 
          class="auth-cancel-button" 
          bindtap="closeOneKeyLoginModal"
        >
          取消
        </button>
      </view>
    </view>
  </view>
  
  
  <!-- 用户信息填写弹窗 -->
  <view wx:if="{{showUserInfoForm}}" class="modal-overlay">
    <view class="modal-container">
      <view class="modal-title">
        <text>完善个人信息</text>
      </view>
      
      <!-- 头像选择 -->
      <view class="avatar-section">
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image class="avatar" src="{{avatarUrl}}"></image>
        </button>
      </view>
      
      <!-- 昵称输入 -->
      <form bindsubmit="getUserName">
        <view class="form-group">
          <view class="form-label">昵称</view>
          <input placeholder="请输入昵称" type="nickname" name="name" maxlength="32" class="form-input"></input>
        </view>
        
        <!-- 提交按钮 -->
        <view class="form-actions">
          <button form-type="submit" class="confirm-button">确定</button>
        </view>
      </form>
      
      <!-- 取消按钮 -->
      <view class="modal-buttons">
        <button class="cancel-button" bindtap="cancelUserInfoForm">取消</button>
      </view>
    </view>
  </view>
  
  <!-- 图片预览弹窗 -->
  <view wx:if="{{showImagePreview}}" class="image-preview-mask" catchtouchmove="true" bindtap="closeImagePreview">
    <swiper 
      class="image-preview-swiper" 
      current="{{previewImageIndex}}" 
      bindchange="onPreviewImageChange"
      indicator-dots="true"
      indicator-color="rgba(255, 255, 255, 0.5)"
      indicator-active-color="#fff"
      autoplay="false"
      duration="300"
    >
      <block wx:for="{{previewImageUrls}}" wx:key="*this">
        <swiper-item>
          <image 
            class="preview-image" 
            src="{{item}}" 
            mode="aspectFit"
            bindtap="closeImagePreview"
          ></image>
        </swiper-item>
      </block>
    </swiper>
    
    <!-- 关闭按钮 -->
    <view class="image-preview-close" bindtap="closeImagePreview">
      <text class="close-icon">✕</text>
    </view>
  </view>
</view>