| | |
| | | <!--pages/activity/detail.wxml--> |
| | | <view class="container" wx:if="{{!loading && activity}}"> |
| | | <!-- 头部媒体区域 --> |
| | | <view class="media-section"> |
| | | <swiper |
| | | class="media-swiper" |
| | | indicator-dots="{{mediaFiles.length > 1}}" |
| | | autoplay="{{false}}" |
| | | duration="{{500}}" |
| | | > |
| | | <swiper-item |
| | | wx:for="{{mediaFiles}}" |
| | | wx:key="url" |
| | | bindtap="onMediaTap" |
| | | data-index="{{index}}" |
| | | > |
| | | <image |
| | | wx:if="{{item.type === 'image'}}" |
| | | class="media-image" |
| | | src="{{item.url}}" |
| | | mode="aspectFill" |
| | | /> |
| | | <view wx:if="{{item.type === 'video'}}" class="video-wrapper"> |
| | | <image class="video-poster" src="{{item.url}}" mode="aspectFill" /> |
| | | <view class="video-play-btn">▶</view> |
| | | <wxs src="./detail.wxs" module="filters" /> |
| | | |
| | | <view class="container"> |
| | | <view wx:if="{{loading}}" class="loading-wrapper"> |
| | | <view class="loading"></view> |
| | | <text>加载中...</text> |
| | | </view> |
| | | |
| | | <view wx:elif="{{error}}" class="error-wrapper"> |
| | | <text>{{error}}</text> |
| | | </view> |
| | | |
| | | <block wx:else> |
| | | <!-- 顶部 Banner --> |
| | | <swiper class="banner-swiper" indicator-dots="{{true}}" autoplay="{{true}}"> |
| | | <swiper-item wx:if="{{activity.coverImage}}"> |
| | | <image class="banner-image" src="{{activity.coverImage.fullUrl}}" mode="aspectFill" /> |
| | | </swiper-item> |
| | | <swiper-item wx:for="{{activity.images}}" wx:key="index"> |
| | | <image class="banner-image" src="{{item.fullUrl}}" mode="aspectFill" /> |
| | | </swiper-item> |
| | | </swiper> |
| | | |
| | | <!-- 状态标签 --> |
| | | <view class="status-badge {{getStatusClass(activity.state)}}"> |
| | | {{getStatusText(activity.state)}} |
| | | <view class="content-wrapper"> |
| | | <!-- 比赛信息 --> |
| | | <view class="section-card"> |
| | | <view class="section-title main-title">{{activity.name}}</view> |
| | | <view class="info-grid"> |
| | | <view class="info-row"> |
| | | <text class="info-label">报名截止时间</text> |
| | | <text class="info-value">{{filters.formatDateTime(activity.signupDeadline)}}</text> |
| | | </view> |
| | | <view class="info-row"> |
| | | <text class="info-label">比赛开始时间</text> |
| | | <text class="info-value">{{filters.formatDateTime(activity.matchTime)}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 基本信息 --> |
| | | <view class="info-section card"> |
| | | <view class="card-body"> |
| | | <view class="activity-title">{{activity.name}}</view> |
| | | <view class="activity-desc">{{activity.description}}</view> |
| | | |
| | | <!-- 时间信息 --> |
| | | <view class="time-info"> |
| | | <view class="time-item"> |
| | | <view class="time-label">活动时间</view> |
| | | <view class="time-value">{{activity.formattedMatchTime || '待定'}}</view> |
| | | <!-- 比赛阶段 --> |
| | | <view class="section-card" wx:if="{{activity.stages && activity.stages.length > 0}}"> |
| | | <view class="section-title">比赛阶段</view> |
| | | <view class="timeline"> |
| | | <view class="timeline-item" wx:for="{{activity.stages}}" wx:key="id"> |
| | | <view class="timeline-icon"> |
| | | <view class="icon-calendar-bg"></view> |
| | | </view> |
| | | <view class="time-item"> |
| | | <view class="time-label">报名截止</view> |
| | | <view class="time-value">{{activity.formattedSignupDeadline || '待定'}}</view> |
| | | <view class="timeline-content"> |
| | | <view class="stage-name">{{item.name}}</view> |
| | | <view class="stage-date">{{filters.formatDate(item.matchTime)}}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 地点信息 --> |
| | | <view class="location-info" wx:if="{{activity.address}}"> |
| | | <view class="location-label">📍 活动地点</view> |
| | | <view class="location-value"> |
| | | <text class="address">{{activity.address}}</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 报名进度 --> |
| | | <view class="registration-progress" wx:if="{{activity.playerMax > 0}}"> |
| | | <view class="progress-header"> |
| | | <view class="progress-label">报名进度</view> |
| | | <view class="progress-count">{{currentParticipants}}/{{activity.playerMax}}</view> |
| | | </view> |
| | | <view class="progress-bar"> |
| | | <view |
| | | class="progress-fill" |
| | | style="width: {{getRegistrationProgress()}}%" |
| | | ></view> |
| | | </view> |
| | | <view class="progress-percent">{{getRegistrationProgress()}}%</view> |
| | | </view> |
| | | |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | |
| | | <!-- 底部操作栏 --> |
| | | <view class="bottom-actions"> |
| | | <view class="action-left"> |
| | | <view class="share-btn" bindtap="onShareTap"> |
| | | <text class="share-icon">📤</text> |
| | | <text class="share-text">分享</text> |
| | | </view> |
| | | </view> |
| | | <view class="action-right"> |
| | | <!-- 统一的报名按钮 --> |
| | | <view |
| | | class="register-btn btn {{registerButtonDisabled ? 'btn-disabled' : (canRegisterStatus ? 'btn-primary' : 'btn-secondary')}}" |
| | | bindtap="onRegisterTap" |
| | | > |
| | | {{registerButtonText}} |
| | | </view> |
| | | <!-- 比赛介绍 --> |
| | | <view class="section-card" wx:if="{{activity.description}}"> |
| | | <view class="section-title">比赛介绍</view> |
| | | <view class="description-content"> |
| | | <text>{{activity.description}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 加载状态 --> |
| | | <view class="loading-wrapper" wx:if="{{loading}}"> |
| | | <view class="loading"></view> |
| | | <text class="loading-text">加载中...</text> |
| | | <!-- 底部操作栏 --> |
| | | <view class="footer-actions"> |
| | | <button class="register-btn" bindtap="handleRegister" disabled="{{buttonDisabled}}">{{buttonText}}</button> |
| | | </view> |
| | | |
| | | <!-- 视频预览弹窗 --> |
| | | <view class="media-preview-modal" wx:if="{{showMediaPreview}}" bindtap="closeMediaPreview"> |
| | | <view class="modal-content" catchtap=""> |
| | | <video |
| | | class="preview-video" |
| | | src="{{mediaFiles[currentMediaIndex].url}}" |
| | | controls="{{true}}" |
| | | autoplay="{{true}}" |
| | | ></video> |
| | | <view class="close-btn" bindtap="closeMediaPreview">✕</view> |
| | | </view> |
| | | </block> |
| | | </view> |