Mini-Program/pages/index/index.wxml

<view class="container">
  <!-- 标题 -->
  <view class="title">专业的鸡蛋现货交易平台</view>
  
  <!-- 搜索区域 -->
  <view class="search-section">
    <view class="search-bar">
      <view class="search-input-wrapper">
        <!-- 将地区选择器放在最左边 -->
        <view class="region-selector" bindtap="toggleRegionPicker">
          <text>{{selectedRegion || '全国'}}</text>
          <text class="region-arrow">▼</text>
        </view>
        <!-- 搜索图标和输入框 -->
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          placeholder="搜索商品名称或地区" 
          placeholder-class="search-placeholder"
          value="{{searchKeyword}}"
          bindinput="onSearchInput"
        />
      </view>
      <button class="search-button" bindtap="searchGoods">搜索</button>
    </view>
  </view>
  
  <!-- 地区选择器弹窗 -->
  <view wx:if="{{showRegionPicker}}" class="region-picker-overlay" bindtap="toggleRegionPicker">
    <view class="region-picker-container" bindtap="stopPropagation">
      <view class="region-picker-title">选择地区</view>
      <view class="region-list">
        <view 
          wx:for="{{regions}}" 
          wx:key="index" 
          class="region-item {{selectedRegion === item ? 'active' : ''}}"
          bindtap="selectRegion" 
          data-region="{{item}}"
        >
          {{item}}
        </view>
      </view>
      <button class="confirm-region-btn" bindtap="confirmRegion">确定</button>
    </view>
  </view>
  
  <!-- 品种筛选区域 -->
  <view class="category-section">
    <view class="category-scroll">
      <view 
        class="egg-item {{selectedCategory === '全部' ? 'active' : ''}}" 
        bindtap="selectCategory" 
        data-category="全部"
      >
        <view class="egg-inner">全部</view>
      </view>
      <view 
        class="egg-item {{selectedCategory === '粉壳' ? 'active' : ''}}" 
        bindtap="selectCategory" 
        data-category="粉壳"
      >
        <view class="egg-inner">粉壳</view>
      </view>
      <view 
        class="egg-item {{selectedCategory === '红壳' ? 'active' : ''}}" 
        bindtap="selectCategory" 
        data-category="红壳"
      >
        <view class="egg-inner">红壳</view>
      </view>
      <view 
        class="egg-item {{selectedCategory === '绿壳' ? 'active' : ''}}" 
        bindtap="selectCategory" 
        data-category="绿壳"
      >
        <view class="egg-inner">绿壳</view>
      </view>
      <view 
        class="egg-item {{selectedCategory === '白壳' ? 'active' : ''}}" 
        bindtap="selectCategory" 
        data-category="白壳"
      >
        <view class="egg-inner">白壳</view>
      </view>
    </view>
  </view>
  
  <!-- 侧边栏按钮 -->
  <view 
    class="sidebar-btn" 
    style="top: {{sidebarBtnTop}}rpx;"
    bindtap="toggleSidebar"
    bindtouchstart="handleTouchStart"
    bindtouchmove="handleTouchMove"
    bindtouchend="handleTouchEnd"
  >
    <text class="sidebar-icon">☰</text>
    <text class="sidebar-text">招商入驻</text>
  </view>
  
  <!-- 侧边栏弹出层 -->
  <view wx:if="{{showSidebar}}" class="sidebar-overlay" bindtap="toggleSidebar"></view>
  <view wx:if="{{showSidebar}}" class="sidebar">
    <view class="sidebar-title">招商合作</view>
    <view class="sidebar-menu">
      <view class="sidebar-item" bindtap="navigateToSettlement">
        <text class="sidebar-item-icon">🏠</text>
        <text class="sidebar-item-text">立即入驻</text>
      </view>
      <view class="sidebar-item" bindtap="navigateToSettlement">
        <text class="sidebar-item-icon">🤝</text>
        <text class="sidebar-item-text">成为供应商</text>
      </view>
      <view class="sidebar-item" bindtap="navigateToSettlement">
        <text class="sidebar-item-icon">📢</text>
        <text class="sidebar-item-text">招商合作</text>
      </view>
      <view class="sidebar-item" bindtap="navigateToSettlement">
        <text class="sidebar-item-icon">📞</text>
        <text class="sidebar-item-text">联系我们</text>
      </view>
    </view>
  </view>
  
  <!-- 商品列表区域 -->
  <view class="goods-section">
    <view class="goods-title">精选货源</view>
    <scroll-view 
      class="goods-list" 
      bindscrolltolower="onReachBottom" 
      bindscroll="onScroll"
      scroll-y="true"
      style="height: calc(100% - 60rpx);"
    >
      <view class="goods-list-container">
        <view 
          wx:for="{{filteredGoods}}" 
          wx:key="id" 
          class="goods-item"
          data-item="{{item}}"
          bindtap="viewGoodsDetail"
        >
          <!-- 商品图片 -->
          <view class="goods-image-container">
            <image 
              class="goods-image" 
              src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}" 
              mode="aspectFill"
              bindtap="previewImage"
              data-item="{{item}}"
              data-index="0"
            ></image>
            <view class="goods-tag">{{item.supplyStatus || '现货'}}</view>
          </view>
          <!-- 商品信息 -->
          <view class="goods-info">
            <view class="goods-name">{{item.name}}</view>
            <view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view>
            <view class="goods-price">¥{{item.price}}</view>
            <view class="goods-footer">
              <view class="goods-region">{{item.region}}</view>
              <view class="goods-reserved">已有{{item.reservedCount || 0}}人收藏</view>
            </view>
          </view>
        </view>
        
        <!-- 无商品时显示 -->
        <view wx:if="{{filteredGoods.length === 0}}" class="empty-goods">
          <text>暂无商品数据</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 加载更多 -->
    <view wx:if="{{loadingMore}}" class="loading-more">
      <text>加载中...</text>
    </view>
  </view>
  
  <!-- 未授权登录提示弹窗 -->
  <view wx:if="{{showAuthModal}}" 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" bindtap="showOneKeyLogin">一键登录</button>
        <button class="auth-cancel-button" bindtap="closeAuthModal">取消</button>
      </view>
    </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" bind:getphonenumber="onGetPhoneNumber">授权获取手机号</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>