<!--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>
|
</view>
|
</swiper-item>
|
</swiper>
|
|
<!-- 状态标签 -->
|
<view class="status-badge {{getStatusClass(activity.state)}}">
|
{{getStatusText(activity.state)}}
|
</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>
|
<view class="time-item">
|
<view class="time-label">报名截止</view>
|
<view class="time-value">{{activity.formattedSignupDeadline || '待定'}}</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>
|
</view>
|
</view>
|
|
<!-- 加载状态 -->
|
<view class="loading-wrapper" wx:if="{{loading}}">
|
<view class="loading"></view>
|
<text class="loading-text">加载中...</text>
|
</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>
|
</view>
|
