school-miniprogram/src/pages/act/index.wxml

<view class="page">
  <view class="page-header">
    <view class="search">
      <image class="icon" src="{{imageUrl}}icon1.png?t={{Timestamp}}"></image>
      <view class="content">请搜索你想要的内容</view>
    </view>
    <view class="options">
      <view class="tabs">
        <view
          class="tab {{index === currentLevelIndex && 'active'}}"
          wx:for="{{levelTabs}}"
          wx:key="id"
          data-index="{{index}}"
          bind:tap="handleLevelChange"
        >
          {{item.name}}
        </view>
      </view>
      <view class="filter-btn" bind:tap="handleFilterOpen">
        <image class="icon" src="{{imageUrl}}icon4.png?t={{Timestamp}}"></image>
        筛选
      </view>
    </view>
  </view>

  <!-- 分类列表 -->
  <view class="type-list">
    <view
      class="type {{item.isSelected && 'active'}}"
      wx:for="{{typeList}}"
      wx:key="id"
      data-id="{{item.id}}"
      bind:tap="handleTypeChange"
    >
      <image class="icon" src="{{item.icon}}"></image>
      <image class="icon-active" src="{{item.iconActive}}"></image>
      <view class="name">{{item.name}}</view>
    </view>
  </view>

  <!-- Banner -->
  <swiper class="banner">
    <swiper-item>
      <image class="b-img" mode="aspectFill" src="{{imageUrl}}bg1.png?t={{Timestamp}}"></image>
    </swiper-item>
  </swiper>

  <!-- 活动列表 -->
  <view class="list">
    <view class="card" wx:for="{{activityList}}" wx:key="id" data-id="{{item.id}}" bind:tap="handleDetail">
      <view class="photo">
        <view class="status status{{item.activityStatus}}" wx:if="{{item.activityStatusName}}">
          <image class="icon" src="{{imageUrl}}icon89.png?t={{Timestamp}}"></image>
          {{item.activityStatusName}}
        </view>
        <image
          class="p-img"
          src="{{item.mainImages[0] || '{{imageUrl}}bg1.png?t={{Timestamp}}'}}"
          mode="aspectFill"
        ></image>
        <view class="user" wx:if="{{item.regCount}}">{{item.regCount}}人已报名</view>
      </view>
      <view class="wrap">
        <view class="title">{{item.name}}</view>
        <view class="date">
          <image class="icon" src="{{imageUrl}}icon3.png?t={{Timestamp}}"></image>
          <view class="content">{{item.startAt}} - {{item.endAt}}</view>
        </view>
        <view class="site">
          <image class="icon" src="{{imageUrl}}icon15.png?t={{Timestamp}}"></image>
          <view class="content">{{item.location}}</view>
        </view>
      </view>
    </view>

    <!-- 分页组件 -->
    <pagination pagination="{{pagination}}" />
  </view>
</view>

<!-- 活动申请按钮 -->
<view class="aside-bar" bind:tap="handleApply">
  <image class="icon" src="{{imageUrl}}icon16.png?t={{Timestamp}}"></image>
  <view class="name">活动申请</view>
</view>

<!-- 筛选弹窗 -->
<van-popup show="{{ filterShow }}" position="bottom" round bind:close="handlePopupClose">
  <view class="popup">
    <view class="popup-line"></view>
    <view class="row">
      <view class="r-title">活动开始时间</view>
      <view class="select">
        <view
          class="s-item {{index === selectedTimeIndex && 'active'}}"
          wx:for="{{timeOptions}}"
          wx:key="id"
          data-index="{{index}}"
          bind:tap="handleTimeOptionChange"
        >
          {{item.name}}
        </view>
      </view>
    </view>
    <view class="row" wx:if="{{selectedTimeIndex === 4}}">
      <view class="r-title">时间范围</view>
      <view class="date-raneg">
        <picker class="date" mode="date" value="{{customStartTime}}" bindchange="handleStartTimeChange">
          <view class="content">
            {{customStartTime || '请选择'}}
            <image class="icon" src="{{imageUrl}}icon17.png?t={{Timestamp}}"></image>
          </view>
        </picker>
        <view class="line">-</view>
        <picker class="date" mode="date" value="{{customEndTime}}" bindchange="handleEndTimeChange">
          <view class="content">
            {{customEndTime || '请选择'}}
            <image class="icon" src="{{imageUrl}}icon17.png?t={{Timestamp}}"></image>
          </view>
        </picker>
      </view>
    </view>
    <view class="popup-footer">
      <view class="cancel" bind:tap="handleFilterCancel">取消</view>
      <view class="sure" bind:tap="handleFilterConfirm">确定</view>
    </view>
  </view>
</van-popup>