146 lines
9.6 KiB
Plaintext
146 lines
9.6 KiB
Plaintext
<view class="camp-container">
|
||
<!-- 自定义导航栏（放在 page-container 外，点击返回仍走 onNavBackTap） -->
|
||
<view class="custom-nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||
<view class="nav-bar-content" style="height: {{navBarHeight}}px;">
|
||
<view class="nav-back-btn" bindtap="onNavBackTap">
|
||
<view class="nav-back-arrow"></view>
|
||
</view>
|
||
<view class="nav-bar-title">{{navBarTitle}}</view>
|
||
<view class="nav-bar-right"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用 page-container 包裹主内容，拦截右滑/边框返回，与点击返回统一逻辑 -->
|
||
<page-container
|
||
show="{{pageContainerShow}}"
|
||
overlay="{{false}}"
|
||
position="center"
|
||
round="{{false}}"
|
||
custom-style="position:absolute;left:0;right:0;top:{{navTotalHeight}}px;bottom:0;width:100%;height:100%;"
|
||
bindbeforeleave="onPageContainerBeforeLeave"
|
||
>
|
||
<view class="page-container-inner" style="width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;">
|
||
<view wx:if="{{loading}}" class="loading">
|
||
<view class="loading-spinner"></view>
|
||
<text>加载中...</text>
|
||
</view>
|
||
|
||
<block wx:else>
|
||
<!-- 统一的顶部区域 -->
|
||
<view class="banner" style="height: {{videoHeight}}px;width: {{screenWidth}}px;" wx:if="{{topContentType !== 'INTRO_TYPE_NONE' && topContent}}">
|
||
|
||
<block wx:if="{{topContentType === 'INTRO_TYPE_VIDEO'}}">
|
||
<!-- 视频播放器 -->
|
||
<video wx:if="{{!online && showVideo && topContent}}"
|
||
id="bannerVideo"
|
||
class="banner-video"
|
||
src="{{topContent}}"
|
||
title="{{videoTitle}}"
|
||
controls="{{true}}"
|
||
show-fullscreen-btn="{{true}}"
|
||
show-play-btn="{{true}}"
|
||
show-center-play-btn="{{true}}"
|
||
enable-progress-gesture="{{true}}"
|
||
bindended="onVideoEnded"
|
||
binderror="onVideoError"
|
||
bindplay="onVideoPlay"
|
||
bindpause="onVideoPause"
|
||
bindtimeupdate="onVideoTimeUpdate"
|
||
bindloadedmetadata="onVideoLoadedMetadata"
|
||
bindcanplay="onVideoCanPlay"
|
||
></video>
|
||
</block>
|
||
<block wx:elif="{{topContentType === 'INTRO_TYPE_IMAGE_TEXT'}}">
|
||
<view class="banner-image-container">
|
||
<image class="banner-image" mode="aspectFill" src="{{topContent}}"></image>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- 打卡卡片 - 根据是否已加入营地显示不同背景 -->
|
||
<block wx:if="{{hasJoined}}">
|
||
<block wx:if="{{campStatus == 'Completed'}}">
|
||
<view class="highlight-card important" bindtap="toggleCardType"></view>
|
||
</block>
|
||
<block wx:elif="{{campStatus == 'InProgress'}}">
|
||
<view class="highlight-card inProgress" bindtap="toggleCardType"></view>
|
||
</block>
|
||
<block wx:else>
|
||
<view class="highlight-card inProgress" bindtap="toggleCardType"></view>
|
||
</block>
|
||
</block>
|
||
<block wx:if="{{!hasJoined}}">
|
||
<view class="highlight-card normal" bindtap="toggleCardType"></view>
|
||
</block>
|
||
|
||
|
||
<!-- 章节列表 - 使用scroll-view确保可滚动 -->
|
||
<scroll-view scroll-y class="section-scroll" wx:if="{{courseList.length > 0}}">
|
||
<view class="section-list">
|
||
<block wx:for="{{courseList}}" wx:key="id" wx:for-item="course" wx:for-index="idx">
|
||
<!-- 课程项 -->
|
||
<view class="section-item {{hasJoined && course.is_completed ? 'pink-border' : (hasJoined && course.id == currentSectionId ? 'blue-border' : 'gray-border')}}">
|
||
<view class="section-header" bindtap="toggleSection" data-index="{{idx}}" data-course="{{course}}">
|
||
<view class="section-title">{{course.title}}</view>
|
||
<block wx:if="{{course.is_started}}">
|
||
<view class="section-arrow {{sections[idx].expanded ? 'up' : 'down'}}"></view>
|
||
</block>
|
||
<block wx:else>
|
||
<block wx:if="{{course.price_fen > 0}}">
|
||
<block wx:if="{{course.is_purchased}}">
|
||
<view class="task-status-icon already-pay"></view>
|
||
</block>
|
||
<block wx:if="{{!course.is_purchased}}">
|
||
<view class="task-status-icon no-pay"></view>
|
||
</block>
|
||
</block>
|
||
<block wx:else="">
|
||
<!-- <image class="unlock-icon" src="https://duiduiminiprogram.oss-cn-hangzhou.aliyuncs.com/mini/unlock.png" mode="aspectFit"></image> -->
|
||
</block>
|
||
|
||
</block>
|
||
<view wx:if="{{sectionUnlockTexts[idx]}}" class="section-unlock-countdown">{{sectionUnlockTexts[idx]}}</view>
|
||
</view>
|
||
|
||
<!-- 动态任务列表 - 只在展开状态显示 -->
|
||
<view class="task-list {{sections[idx].expanded ? 'expanded' : 'collapsed'}}">
|
||
<!-- 课程任务列表 -->
|
||
<block wx:if="{{course.tasks && course.tasks.length > 0}}">
|
||
<view wx:for="{{course.tasks}}" wx:key="id" wx:for-item="task" class="task-item{{currentSelectedTaskId === task.id ? ' selected' : ''}}{{task.can_start === false ? ' locked' : ''}}{{sectionUnlockTexts[idx] ? ' task-item-section-locked' : ''}}" wx:if="{{true}}" bindtap="handleTaskClick" data-is-started="{{course.is_started}}" data-is-current="{{course.is_current}}" data-section-id="{{course.id}}" data-number="{{course.section_number}}" data-is-status="{{task.status}}" data-task-id="{{task.id}}" data-type="{{task.task_type}}" data-task="{{task}}" data-task-title="{{task.title || task.task_title || '任务'}}" data-camp-id="{{campId}}">
|
||
<view class="task-number">{{index + 1}}.</view>
|
||
<view class="task-title{{task.can_start === false ? ' task-title-locked' : ''}}">
|
||
<text>{{task.title || task.task_title || '任务'}}</text>
|
||
</view>
|
||
<view class="task-status-icon">
|
||
|
||
<!-- 加载中动画 -->
|
||
<view wx:if="{{tasksLoading[idx]}}" class="task-status-icon loading-spinner"></view>
|
||
<!-- 锁定状态 -->
|
||
<view wx:elif="{{task.can_start === false}}" class="task-status-icon locked-icon"></view>
|
||
<!-- 状态icon -->
|
||
<view wx:elif="{{task.status === 'Completed'}}" class="task-status-icon completed"></view>
|
||
<view wx:elif="{{task.status === 'InProgress'}}" class="task-status-icon in-progress"></view>
|
||
<view wx:elif="{{task.status === 'Reviewing'}}" class="task-status-icon reviewing"></view>
|
||
<view wx:elif="{{task.status === 'Rejected'}}" class="task-status-icon rejected"></view>
|
||
<view wx:else class="task-status-icon not-started"></view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view wx:elif="{{!campDetail.is_user_join}}" class="empty-state">
|
||
<text>请先加入营地</text>
|
||
</view>
|
||
|
||
<view wx:else class="empty-state">
|
||
<text>暂无课程数据</text>
|
||
</view>
|
||
|
||
</block>
|
||
</view>
|
||
</page-container>
|
||
</view> |