87 lines
2.5 KiB
Plaintext
87 lines
2.5 KiB
Plaintext
|
<view class="activity-list-container">
|
||
|
|
<!-- 页面标题 -->
|
||
|
|
<view class="page-header">
|
||
|
|
<text class="page-title">最新活动</text>
|
||
|
|
<text class="page-subtitle">{{filteredActivities.length}}个活动正在进行中</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 搜索框 -->
|
||
|
|
<view class="search-box">
|
||
|
|
<view class="search-icon">
|
||
|
|
<icon type="search" size="24" color="#999"></icon>
|
||
|
|
</view>
|
||
|
|
<input
|
||
|
|
class="search-input"
|
||
|
|
placeholder="搜索活动..."
|
||
|
|
value="{{searchKeyword}}"
|
||
|
|
bindinput="onSearchInput"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 分类标签 -->
|
||
|
|
<view class="category-tabs">
|
||
|
|
<view
|
||
|
|
wx:for="{{categories}}"
|
||
|
|
wx:key="id"
|
||
|
|
class="category-tab {{currentCategory === item.id ? 'active' : ''}}"
|
||
|
|
bindtap="switchCategory"
|
||
|
|
data-category="{{item.id}}"
|
||
|
|
>
|
||
|
|
{{item.name}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 活动列表 -->
|
||
|
|
<view class="activities-grid">
|
||
|
|
<view
|
||
|
|
wx:for="{{filteredActivities}}"
|
||
|
|
wx:key="id"
|
||
|
|
class="activity-card"
|
||
|
|
bindtap="navigateToDetail"
|
||
|
|
data-id="{{item.id}}"
|
||
|
|
>
|
||
|
|
<!-- 活动图片 -->
|
||
|
|
<view class="activity-image-container">
|
||
|
|
<image
|
||
|
|
class="activity-image"
|
||
|
|
src="{{item.imageUrl}}"
|
||
|
|
mode="widthFix"
|
||
|
|
lazy-load
|
||
|
|
></image>
|
||
|
|
<!-- 活动状态标签 -->
|
||
|
|
<view class="activity-tag {{item.status === 'ongoing' ? 'ongoing' : 'upcoming'}}">
|
||
|
|
{{item.status === 'ongoing' ? '进行中' : '即将开始'}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 活动信息 -->
|
||
|
|
<view class="activity-info">
|
||
|
|
<text class="activity-title">{{item.title}}</text>
|
||
|
|
|
||
|
|
<!-- 时间信息 -->
|
||
|
|
<view class="activity-time">
|
||
|
|
<icon type="clock" size="16" color="#666"></icon>
|
||
|
|
<text class="time-text">
|
||
|
|
{{item.startTime}} - {{item.endTime}}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 活动简介 -->
|
||
|
|
<text class="activity-desc">{{item.description}}</text>
|
||
|
|
|
||
|
|
<!-- 参与人数 -->
|
||
|
|
<view class="activity-participants">
|
||
|
|
<icon type="group" size="16" color="#666"></icon>
|
||
|
|
<text class="participants-text">{{item.participants}}人已参与</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 空状态 -->
|
||
|
|
<view wx:if="{{filteredActivities.length === 0}}" class="empty-state">
|
||
|
|
<image src="/images/empty-activities.png" class="empty-image" mode="widthFix"></image>
|
||
|
|
<text class="empty-text">暂无相关活动</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|