Mini-Program/pages/index/index.wxml

<view class="container">
  <view class="title">中国最专业的鸡蛋现货交易平台</view>
  <!-- 滚动图片区域 -->
  <view class="swiper-container">
    <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="1000" circular="{{true}}" style="width: 100%; height: 300rpx;">
      <swiper-item>
        <image src="/images/轮播图1.jpg" style="width: 100%; height: 100%;" mode="aspectFill"></image>
      </swiper-item>
      <swiper-item>
        <image src="/images/轮播图2.jpg" style="width: 100%; height: 100%;" mode="aspectFill"></image>
      </swiper-item>
      <swiper-item>
        <image src="/images/轮播图3.jpg" style="width: 100%; height: 100%;" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <!-- 图片提示框 -->
    <view class="swiper-hint">
      <text class="hint-text">💡 提示：您可以将自己的图片替换到 /images/ 目录下，命名为轮播图1.jpg、轮播图2.jpg、轮播图3.jpg</text>
    </view>
  </view>
  <!-- 按钮区域 -->
  <view class="buttons-section">
    <!-- 第一行 -->
    <view class="btn-row">
      <button class="btn message-btn" bindtap="navigateToChat">消息中心</button>
      <button class="btn settlement-btn" bindtap="navigateToSettlement">立即入驻</button>
    </view>
    <!-- 第二行 -->
    <view class="btn-row full-width">
      <button class="btn service-btn" bindtap="navigateToCustomerService" data-type="seller">我要买蛋</button>
      <button class="btn service-btn" bindtap="navigateToCustomerService" data-type="buyer">我要卖蛋</button>
    </view>
  </view>
  <view class="desc" style="margin: 30rpx 0; text-align: center; padding: 0 20rpx;">
    
  </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>