Mini-Program/pages/index/index.wxml

<view class="container">
  <!-- 导航栏区域，固定在顶部 -->
  <view class="nav-bar">
    <!-- 标题 -->
    <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 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>
  
  <!-- 地区选择器弹窗 -->
  <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="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="card"
          data-item="{{item}}"
        >
          <!-- 图片和信息2:3比例并排显示，整体高度固定 -->
          <view style="display: flex; width: 100%; height: 200rpx; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;">
            <!-- 左侧图片区域 40%宽度（2/5），高度固定 -->
            <view style="width: 40%; position: relative; height: 200rpx;">
              <!-- 第一张图片 -->
              <view wx:if="{{item.imageUrls && item.imageUrls.length > 0}}" style="width: 100%; height: 100%;">
                <image src="{{item.imageUrls[0]}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-item="{{item}}" data-index="0"></image>
              </view>
              <view wx:else style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999;">
                <text>暂无图片</text>
              </view>
              <!-- 剩余图片可滑动区域 -->
              <view wx:if="{{item.imageUrls && item.imageUrls.length > 0}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                <swiper 
                  class="image-swiper" 
                  style="width: 100%; height: 100%;" 
                  current="{{item.currentImageIndex || 0}}" 
                  bindchange="swiperChange" 
                  data-item-id="{{index}}">
                  <block wx:for="{{item.imageUrls}}" wx:for-item="img" wx:for-index="idx" wx:key="idx">
                    <swiper-item>
                      <image src="{{img}}" mode="aspectFill" style="width: 100%; height: 100%;" bindtap="previewImage" data-item="{{item}}" data-index="{{idx}}"></image>
                    </swiper-item>
                  </block>
                </swiper>
                <!-- 显示页码指示器 -->
                <view style="position: absolute; bottom: 10rpx; right: 10rpx; background-color: rgba(0,0,0,0.5); color: white; padding: 5rpx 10rpx; border-radius: 15rpx; font-size: 20rpx;">
                  {{(item.currentImageIndex || 0) + 1}}/{{item.imageUrls.length}}
                </view>
              </view>
            </view>
            
            <!-- 右侧信息区域 60%宽度（3/5），相应调整 -->
            <view style="width: 60%; display: flex; flex-direction: column; background-color: white; border-left: 1rpx solid #f0f0f0;">
              <!-- 上半部分商品信息区域（60%高度），可点击查看详情 -->
              <view style="flex: 0.6; padding: 0rpx 15rpx 15rpx 15rpx; cursor: pointer;" bindtap="showGoodsDetail" data-item="{{item}}">
                <view>
                  <view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx;">
                    <view style="display: flex; align-items: center; flex: 1;">
                      <view style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: {{item.supplyStatus === '现货' ? 'rgba(76, 175, 80, 0.8)' : 'rgba(218, 165, 32, 0.8)'}}; padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -0.1rpx;">{{item.supplyStatus || '暂无状态'}}</view>
                      <text style="font-size: 36rpx; font-weight: bold;">{{item.name}}</text>
                      <span style="vertical-align: middle; font-size: 12rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 10rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span>
                    </view>
                    <!-- 隐藏列表页价格显示，只在详情页显示 -->
                  </view>
                  <view style="font-size: 28rpx; color: #555; font-weight: 600; margin-top: 30rpx;">
                    {{item.specification || '无'}} | {{item.yolk || '无'}} | {{item.minOrder || item.quantity || 1}}件
                  </view>
                </view>

                
              </view>
              
              <!-- 下半部分按钮区域（40%高度） -->
              <view style="flex: 0.4; display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx;">
                <!-- 收藏人数显示，与buyer页面保持一致 -->
                <view style="display: flex; align-items: center;">
                  <text style="color: #999999; font-size: 28rpx; font-weight: normal; margin-right: 8rpx;">已有</text>
                  <text style="color: #d865d8ff; font-size: 28rpx; font-weight: bold;">{{item.reservedCount || 0}}</text>
                  <text style="color: #999999; font-size: 28rpx; font-weight: normal; margin-left: 8rpx;">人收藏</text>
                </view>
                <!-- 根据是否已收藏显示不同的按钮 -->
                <button 
                  wx:if="{{item.isFavorite}}" 
                  style="font-size: 24rpx; font-weight: bold; width: 150rpx; height: 60rpx; border-radius: 24rpx; display: flex; justify-content: center; align-items: center; padding: 0; border: none; margin: 0; transition: all 0.3s ease; position: relative; overflow: hidden; color: #FF6B6B; background: rgba(255, 107, 107, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);"
                  bindtap="cancelFavorite"
                  data-item="{{item}}"
                >
                  已收藏
                </button>
                <button 
                  wx:else 
                  style="font-size: 24rpx; font-weight: bold; width: 150rpx; height: 60rpx; border-radius: 24rpx; display: flex; justify-content: center; align-items: center; padding: 0; border: none; margin: 0; transition: all 0.3s ease; position: relative; overflow: hidden; color: #1677ff; background: rgba(22, 119, 255, 0.15); backdrop-filter: blur(12rpx); -webkit-backdrop-filter: blur(12rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.2), 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.7), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);"
                  bindtap="addFavorite"
                  data-item="{{item}}"
                >
                  收藏
                </button>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 无商品时显示 -->
        <view wx:if="{{filteredGoods.length === 0}}" class="empty-goods">
          <text>暂无商品数据</text>
        </view>
        
        <!-- 搜索结果后添加半页空白区域 -->
        <view class="half-page-blank" style="display: flex; justify-content: center; align-items: flex-start; padding-top: 20rpx;">
          <text style="color: #999; font-size: 26rpx; opacity: 0.8;">{{hasMore ? '下拉加载更多' : '已加载全部商品'}}</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 加载更多 -->
    <view wx:if="{{loadingMore}}" class="loading-more">
      <text>加载中...</text>
    </view>
  </view>
  
  <!-- 回到顶部按钮 -->
  <view 
    wx:if="{{showBackToTop}}" 
    class="back-to-top-btn" 
    bindtap="backToTop"
  >
    <text class="back-to-top-icon">↑</text>
  </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>