<!--pages/index/index.wxml-->
|
<view class="container">
|
<!-- 搜索栏 - 暂时隐藏 -->
|
<view class="search-bar" style="display: none;">
|
<view class="search-input-wrapper">
|
<input
|
class="search-input"
|
placeholder="搜索赛事..."
|
value="{{searchKeyword}}"
|
bindinput="onSearchInput"
|
bindconfirm="onSearchSubmit"
|
/>
|
<view class="search-icon">🔍</view>
|
<view wx:if="{{searchKeyword}}" class="clear-icon" bindtap="onSearchClear">✕</view>
|
</view>
|
</view>
|
|
<!-- 轮播图 -->
|
<view class="banner-section" wx:if="{{banners.length > 0}}">
|
<swiper
|
class="banner-swiper"
|
indicator-dots="{{true}}"
|
autoplay="{{true}}"
|
interval="{{3000}}"
|
duration="{{500}}"
|
bindchange="onBannerChange"
|
>
|
<swiper-item
|
wx:for="{{banners}}"
|
wx:key="id"
|
bindtap="onBannerTap"
|
data-index="{{index}}"
|
>
|
<!-- 如果有媒体文件，显示第一个媒体文件 -->
|
<view wx:if="{{item.mediaFiles && item.mediaFiles.length > 0}}" class="banner-media">
|
<view wx:if="{{item.mediaFiles[0].type === 'image'}}" class="banner-image-wrapper">
|
<image class="banner-image" src="{{item.mediaFiles[0].url}}" mode="aspectFill" />
|
</view>
|
<view wx:elif="{{item.mediaFiles[0].type === 'video'}}" class="banner-video-wrapper">
|
<image class="banner-video-thumb" src="{{item.mediaFiles[0].thumbUrl || item.mediaFiles[0].url}}" mode="aspectFill" />
|
<view class="banner-video-play-btn">
|
<view class="play-icon">▶</view>
|
</view>
|
</view>
|
</view>
|
<!-- 如果没有媒体文件，显示封面图片或占位符 -->
|
<view wx:elif="{{item.coverImage && item.coverImage.fullUrl}}" class="banner-image-wrapper">
|
<image class="banner-image" src="{{item.coverImage.fullUrl}}" mode="aspectFill" />
|
</view>
|
<view wx:else class="banner-placeholder">
|
<text class="placeholder-text">{{item.title}}</text>
|
</view>
|
|
<view class="banner-overlay">
|
<view class="banner-title">{{item.title}}</view>
|
<view class="banner-desc">{{item.content}}</view>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
|
<!-- 筛选栏 -->
|
<view class="filter-bar">
|
<view class="filter-tabs">
|
<view
|
class="filter-tab {{filterStatus === 'all' ? 'active' : ''}}"
|
bindtap="onFilterChange"
|
data-status="all"
|
>
|
全部
|
</view>
|
<view
|
class="filter-tab {{filterStatus === 'SIGNUP' ? 'active' : ''}}"
|
bindtap="onFilterChange"
|
data-status="SIGNUP"
|
>
|
报名中
|
</view>
|
<view
|
class="filter-tab {{filterStatus === 'PLAYING' ? 'active' : ''}}"
|
bindtap="onFilterChange"
|
data-status="PLAYING"
|
>
|
进行中
|
</view>
|
<view
|
class="filter-tab {{filterStatus === 'ENDED' ? 'active' : ''}}"
|
bindtap="onFilterChange"
|
data-status="ENDED"
|
>
|
已结束
|
</view>
|
</view>
|
</view>
|
|
<!-- 赛事列表 -->
|
<view class="activity-list">
|
<view
|
class="activity-card card"
|
wx:for="{{activities}}"
|
wx:key="id"
|
bindtap="onActivityTap"
|
data-index="{{index}}"
|
>
|
<!-- 赛事封面 -->
|
<view class="activity-cover">
|
<image wx:if="{{item.coverImage && item.coverImage.fullUrl}}" class="cover-image" src="{{item.coverImage.fullUrl}}" mode="aspectFill" />
|
<view wx:else class="cover-placeholder">
|
<text class="cover-placeholder-text">{{item.nameText}}</text>
|
</view>
|
<view class="status-badge {{getStatusClass(item.state)}}">
|
{{item.stateName}}
|
</view>
|
</view>
|
|
<!-- 赛事信息 -->
|
<view class="activity-info">
|
<view class="activity-title">{{item.name}}</view>
|
<view class="activity-desc">{{item.description}}</view>
|
|
<!-- 时间信息 -->
|
<view class="time-info">
|
<view class="time-item">
|
<text class="time-label">活动时间：</text>
|
<text class="time-value">{{formatDate(item.matchTime)}}</text>
|
</view>
|
<view class="time-item" wx:if="{{item.signupDeadline}}">
|
<text class="time-label">报名截止：</text>
|
<text class="time-value">{{formatDate(item.signupDeadline)}}</text>
|
</view>
|
</view>
|
|
<!-- 地点信息 -->
|
<view class="location-info" wx:if="{{item.address}}">
|
<text class="location-icon">📍</text>
|
<text class="location-text">{{item.address}}</text>
|
</view>
|
|
<!-- 报名进度和操作按钮 -->
|
<view class="bottom-info">
|
<view class="registration-info" wx:if="{{item.playerMax > 0}}">
|
<text class="progress-text">报名人数：{{item.playerCount}}/{{item.playerMax}}</text>
|
<view class="progress-bar">
|
<view
|
class="progress-fill"
|
style="width: {{getRegistrationProgress(item.playerCount, item.playerMax)}}%"
|
></view>
|
</view>
|
</view>
|
<view class="activity-actions">
|
<view class="action-btn btn btn-primary" wx:if="{{canRegister(item)}}">
|
立即报名
|
</view>
|
<view class="action-btn btn btn-secondary" wx:else>
|
查看详情
|
</view>
|
</view>
|
</view>
|
|
<!-- 标签 -->
|
<view class="tags" wx:if="{{item.tags && item.tags.length > 0}}">
|
<text class="tag" wx:for="{{item.tags}}" wx:key="*this">{{item}}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 加载状态 -->
|
<view class="loading-wrapper" wx:if="{{loading}}">
|
<view class="loading"></view>
|
<text class="loading-text">加载中...</text>
|
</view>
|
|
<!-- 没有更多数据 -->
|
<view class="no-more" wx:if="{{!hasMore && activities.length > 0}}">
|
<text class="no-more-text">没有更多数据了</text>
|
</view>
|
|
<!-- 空状态 -->
|
<view class="empty-state" wx:if="{{!loading && activities.length === 0}}">
|
<view class="empty-icon">📋</view>
|
<view class="empty-text">暂无赛事信息</view>
|
<view class="empty-desc">请稍后再试或联系管理员</view>
|
</view>
|
</view>
|
</view>
|
