YD_Event.miniApp/pages/home/home.wxml

<view class="page-home">
  <scroll-view
    class="home-scroll"
    scroll-y="{{true}}"
    enhanced
    show-scrollbar="{{false}}"
    lower-threshold="100"
    bindscrolltolower="onScrollToLower"
    refresher-enabled="{{true}}"
    refresher-threshold="{{80}}"
    refresher-default-style="black"
    refresher-triggered="{{refresherTriggered}}"
    bindrefresherrefresh="onRefresherRefresh"
  >
    <swiper
      class="banner"
      indicator-dots="{{banners.length > 1}}"
      autoplay="{{banners.length > 1}}"
      interval="4000"
      circular="{{banners.length > 1}}"
      indicator-color="rgba(255,255,255,0.55)"
      indicator-active-color="#1a57b2"
    >
      <block wx:for="{{banners}}" wx:key="_bannerKey">
        <swiper-item>
          <view
            class="banner-item"
            bindtap="onBannerTap"
            data-linktype="{{item.linkType}}"
            data-eventid="{{item.eventId}}"
            data-linkurl="{{item.linkUrl}}"
          >
            <image class="banner-image" src="{{item.imageUrl}}" mode="aspectFill" />
          </view>
        </swiper-item>
      </block>
    </swiper>

    <view class="sticky-header">
      <view class="search-wrap">
        <image class="search-img" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/search-left.png" />
        <input
          class="search-input"
          placeholder="搜索关键字"
          placeholder-class="search-ph"
          value="{{keyword}}"
          confirm-type="search"
          bindconfirm="onSearch"
          bindinput="onKeywordInput"
        />
        <view class="search-btn" bindtap="onSearch">
          <mp-icon icon="search" size="22" color="#ffffff" />
          <text class="search-btn-text">搜索</text>
        </view>  
      </view>

      <view class="section-tabs">
        <view
          class="section-tab {{sectionTab === 'list' ? 'is-active' : ''}}"
          data-tab="list"
          bindtap="onSectionTab"
        >
          <text class="section-tab-text">赛事报名</text>
          <image class="section-tab-img" wx:if="{{sectionTab === 'list'}}" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/home-title-b.png" />
        </view>
        <view
          class="section-tab {{sectionTab === 'registered' ? 'is-active' : ''}}"
          data-tab="registered"
          bindtap="onSectionTab"
        >
          <text class="section-tab-text">已报赛事</text>
          <image class="section-tab-img" wx:if="{{sectionTab === 'registered'}}" src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_miniapp/home-title-b.png" />
        </view>
      </view>

      <view class="status-filters" wx:if="{{sectionTab === 'list'}}">
        <view
          class="status-pill {{status === 1 ? 'is-on' : ''}}"
          data-status="1"
          bindtap="onStatusTap"
        >报名中</view>
        <view
          class="status-pill {{status === 3 ? 'is-1' : ''}}"
          data-status="3"
          bindtap="onStatusTap"
        >比赛中</view>
        <view
          class="status-pill {{status === 4 ? 'is-2' : ''}}"
          data-status="4"
          bindtap="onStatusTap"
        >已结束</view>
      </view>
    </view>

    <view class="list-section">
      <block wx:if="{{sectionTab === 'registered' && !loggedIn}}">
        <view class="login-hint">
          <text class="login-hint-text">登录后可查看已报名赛事</text>
          <button class="login-hint-btn" type="primary" bindtap="goLogin">去登录</button>
        </view>
      </block>

      <block wx:elif="{{rows.length === 0 && !loading}}">
        <view class="empty">暂无数据</view>
      </block>

      <block wx:for="{{rows}}" wx:key="rowKey">
        <view
          class="event-card"
          bindtap="onEventTap"
          data-id="{{item.id}}"
        >
          <view class="event-card-media">
            <image class="event-card-cover" src="{{item.coverImage}}" mode="aspectFill" />
            <view class="addr-pill" wx:if="{{item.address}}">{{item.address}}</view>
            <view class="status-pill-top status-pill-top-{{item.eventStatus}}">{{item.eventStatusText}}</view>
          </view>
          <view class="event-card-body">
            <view class="title-row">
              <text class="event-title">{{item.eventName || '-'}}</text>
              <view class="format-tag" wx:if="{{item.eventFormatText}}">{{item.eventFormatText}}</view>
            </view>
            <block wx:if="{{sectionTab === 'list'}}">
              <view class="meta-line">报名时间：{{item.registrationStartText}}~{{item.registrationEndText}}</view>
              <view class="meta-line">比赛时间：{{item.matchStartText}}~{{item.matchEndText}}</view>
            </block>
            <block wx:else>
              <view class="meta-line">报名时间：{{item.registrationTimeText}}</view>
              <view class="meta-line" wx:if="{{item.projectCount != null}}">已报项目：{{item.projectCount}} 项</view>
            </block>
          </view>

          <view class="card-actions" wx:if="{{sectionTab === 'registered'}}" catchtap>
            <view
              class="action-btn action-btn--ghost"
              catchtap="onUploadMaterialTap"
              data-registrationid="{{item.registrationId}}"
            >上传素材</view>

            <block wx:if="{{item.paymentStatus === 1}}">
              <view class="action-btn action-btn--paid" catchtap>已支付</view>
            </block>
            <block wx:else>
              <view
                class="action-btn action-btn--ghost"
                catchtap="onUploadVoucherTap"
                data-registrationid="{{item.registrationId}}"
              >上传付款凭证</view>
            </block>

            <view class="action-btn action-btn--ghost" catchtap>更改参赛人</view>
            <view
              class="action-btn action-btn--danger"
              wx:if="{{item.canCancel}}"
              catchtap="onCancelRegistrationTap"
              data-registrationid="{{item.registrationId}}"
            >取消报名</view>
          </view>
        </view>
      </block>

      <view class="loading" wx:if="{{loading}}">{{loadingText}}</view>
    </view>
  </scroll-view>
</view>