Mini-Program/pages/buyer/index.wxml

<view class="container" style="align-items: flex-start; padding: 20rpx; width: 100%; max-width: 100vw; overflow-x: hidden; position: relative; box-sizing: border-box;">
<!-- 搜索框 -->
<view class="search-bar">
  <view class="search-container">
    <view class="search-icon">🔍</view>
    <input 
      class="search-input"
      placeholder="输入商品名称或品种" 
      bindinput="onSearchInput" 
      bindconfirm="searchGoods"
      value="{{searchKeyword}}"
    />
    <view wx:if="searchKeyword" class="clear-icon" bindtap="clearSearch">✘</view>
  </view>
</view>

<!-- 商品列表 -->
<view class="goods-list" style="width: 100%; display: flex; flex-direction: column; align-items: flex-start; min-height: 400rpx; margin-top: 120rpx;" bindscrolltolower="onReachBottom" bindscroll="onScroll">
  <view wx:if="{{filteredGoods.length > 0}}" wx:for="{{filteredGoods}}" wx:key="id" wx:for-item="item" wx:for-index="index" class="card" style="width: 100%; margin-top: 0; margin-bottom: 20rpx;">
    <!-- 图片和信息1:1比例并排显示 -->
    <view style="display: flex; width: 100%; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;">
      <!-- 左侧图片区域 50%宽度 -->
      <view style="width: 50%; position: relative;">
        <!-- 第一张图片 -->
        <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-urls="{{item.imageUrls}}" 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-urls="{{item.imageUrls}}" 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>
      
      <!-- 右侧信息区域 50%宽度 -->
      <view style="width: 50%; display: flex; flex-direction: column; background-color: white; border-left: 1rpx solid #f0f0f0;">
        <!-- 上半部分商品信息区域（60%高度），可点击查看详情 -->
        <view style="flex: 0.6; padding: 15rpx; cursor: pointer;" bindtap="showGoodsDetail" data-item="{{item}}">
          <view style="font-size: 28rpx; font-weight: bold; word-break: break-word;">{{item.name}}
            <view style="display: inline-block; margin-left: 10rpx; font-size: 18rpx; color: #fff; background-color: #52c41a; padding: 2rpx 8rpx; border-radius: 10rpx;">已上架</view>
          </view>
          <view style="font-size: 24rpx; color: #666; margin-top: 8rpx;">规格: {{item.spec || '无'}}</view>
          <view style="font-size: 24rpx; color: #666; margin-top: 8rpx;">蛋黄: {{item.yolk || '无'}}</view>
          <view style="color: #f5222d; font-size: 24rpx; margin-top: 8rpx;">件数: {{item.minOrder}}件</view>
          <view style="color: #1677ff; font-size: 24rpx; margin-top: 8rpx;">斤重: {{item.displayGrossWeight}}</view>
          <view style="color: #1677ff; font-size: 24rpx; margin-top: 8rpx;">地区: {{item.region}}</view>
          
          <!-- 预约人数显示 -->
          <view style="text-align: center; margin-top: 10rpx;">
            <text style="color: #52c41a; font-size: 28rpx; font-weight: bold;">已有{{item.reservedCount || 0}}人想要</text>
          </view>
        </view>
        
        <!-- 下半部分按钮区域（40%高度） -->
        <view style="flex: 0.4; display: flex; justify-content: center; align-items: center; gap: 10rpx;">
          <!-- 根据是否已预约显示不同的按钮 -->
          <view wx:if="{{item.isReserved}}" style="background-color: #52c41a; color: white; font-size: 22rpx; padding: 12rpx 25rpx; border-radius: 8rpx; width: 70%; text-align: center;">
            已预约✓
          </view>
          <button 
            wx:else 
            style="background-color: #f74ac3; color: white; font-size: 22rpx; padding: 0 25rpx; line-height: 60rpx; width: 70%;"
            bindtap="onClickWant"
            data-id="{{item.id}}"
          >
            我想要
          </button>
        </view>
      </view>
    </view>
  </view>
</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;">已加载全部商品</text>
</view>


<!-- 自定义弹窗组件 -->
<view class="custom-toast-mask" wx:if="{{showCustomToast}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; z-index: 9999;">
  <view class="custom-toast" style="background: white; padding: 40rpx 60rpx; border-radius: 12rpx; text-align: center; animation: {{toastAnimation}}; transform-origin: center center;">
    <view style="font-size: 28rpx; color: #333;">稍后会有专员和您沟通</view>
  </view>
</view>

<!-- 图片预览弹窗 -->
<view class="image-preview-mask" wx:if="{{showImagePreview}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 10001;" catchtouchmove="true">
  <view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
    <swiper 
      style="width: 100%; height: 100%;" 
      current="{{previewImageIndex}}" 
      bindchange="onPreviewImageChange" 
      indicator-dots="true" 
      indicator-color="rgba(255,255,255,0.5)" 
      indicator-active-color="#fff">
      <block wx:for="{{previewImageUrls}}" wx:key="*this">
        <swiper-item>
          <image 
            src="{{item}}" 
            mode="aspectFit" 
            style="width: 100%; height: 100%; transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px); transition: {{isScaling ? 'none' : 'transform 0.3s'}};" 
            bindtap="handleImageTap" 
            bindtouchstart="handleTouchStart" 
            bindtouchmove="handleTouchMove" 
            bindtouchend="handleTouchEnd" 
            bindtouchcancel="handleTouchEnd"
          ></image>
        </swiper-item>
      </block>
    </swiper>
    <view style="position: absolute; top: 40rpx; right: 40rpx; color: white; font-size: 40rpx;">
      <text bindtap="closeImagePreview" style="background: rgba(0,0,0,0.5); padding: 10rpx 20rpx; border-radius: 50%;">×</text>
    </view>
  </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" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999;">
    <view class="modal-container" style="background: white; padding: 40rpx; border-radius: 16rpx; width: 80%; max-width: 500rpx; text-align: center;">
      <view class="modal-title" style="font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #333;">
        <text>完善个人信息</text>
      </view>
      
      <!-- 头像选择 -->
      <view class="avatar-section" style="margin-bottom: 30rpx;">
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" style="width: 120rpx; height: 120rpx; border-radius: 50%; background: none; padding: 0; margin: 0 auto;">
          <image class="avatar" src="{{avatarUrl}}" style="width: 120rpx; height: 120rpx; border-radius: 50%;"></image>
        </button>
      </view>
      
      <!-- 昵称输入 -->
      <form bindsubmit="getUserName">
        <view class="form-group" style="margin-bottom: 30rpx;">
          <input placeholder="请输入昵称" type="nickname" name="name" maxlength="32" class="form-input" style="width: 100%; padding: 20rpx; border: 1rpx solid #ddd; border-radius: 8rpx; box-sizing: border-box;" />
        </view>
        
        <!-- 提交按钮 -->
        <view class="form-actions">
          <button form-type="submit" class="confirm-button" style="background-color: #1677ff; color: white; font-size: 28rpx; line-height: 80rpx; border-radius: 8rpx; margin-bottom: 20rpx;">确定</button>
        </view>
      </form>
      
      <!-- 取消按钮 -->
      <view class="modal-buttons">
        <button class="cancel-button" style="background-color: #f5f5f5; color: #333; font-size: 28rpx; line-height: 80rpx; border-radius: 8rpx;" bindtap="cancelUserInfoForm">取消</button>
      </view>
    </view>
  </view>
  

  
  <!-- 四分之一页空白区域 -->
  <view class="quarter-page-blank"></view>
</view>