75 lines
2.8 KiB
Plaintext
75 lines
2.8 KiB
Plaintext
|
<view class="detail-page" wx:if="{{course}}">
|
||
|
|
<!-- 封面 -->
|
||
|
|
<view class="detail-cover" style="background:{{course.coverColor}}">
|
||
|
|
<text class="cover-emoji">{{course.coverEmoji}}</text>
|
||
|
|
<view class="cover-overlay">
|
||
|
|
<text class="cover-title">{{course.title}}</text>
|
||
|
|
</view>
|
||
|
|
<!-- 收藏按钮 -->
|
||
|
|
<view class="fav-btn" bindtap="onToggleFavorite">
|
||
|
|
<text>{{isFavorite ? '❤️' : '🤍'}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<scroll-view class="detail-body" scroll-y>
|
||
|
|
<!-- 基本信息 -->
|
||
|
|
<view class="info-section card">
|
||
|
|
<view class="info-badges">
|
||
|
|
<text class="badge badge-blue">{{course.difficulty}}</text>
|
||
|
|
<text class="badge badge-orange">{{course.lessons}}节课</text>
|
||
|
|
<text class="badge badge-green">⏱ {{course.duration}}</text>
|
||
|
|
</view>
|
||
|
|
<text class="info-desc">{{course.desc}}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 课程详情 -->
|
||
|
|
<view class="meta-section card">
|
||
|
|
<view class="meta-item">
|
||
|
|
<text class="meta-label">🎯 学习目标</text>
|
||
|
|
<text class="meta-value">{{course.target}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="divider"></view>
|
||
|
|
<view class="meta-item">
|
||
|
|
<text class="meta-label">👤 适合人群</text>
|
||
|
|
<text class="meta-value">{{course.suitable}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="divider"></view>
|
||
|
|
<view class="meta-item">
|
||
|
|
<text class="meta-label">🖌 所需工具</text>
|
||
|
|
<text class="meta-value">{{course.tools}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 步骤列表 -->
|
||
|
|
<view class="steps-section">
|
||
|
|
<text class="steps-title">课程步骤（{{course.steps.length}}步）</text>
|
||
|
|
<view class="steps-list">
|
||
|
|
<view class="step-item" wx:for="{{course.steps}}" wx:key="index">
|
||
|
|
<view class="step-num {{progress.completed || progress.currentStep > index ? 'done' : progress.currentStep === index ? 'current' : ''}}">
|
||
|
|
<text wx:if="{{progress.completed || progress.currentStep > index}}">✓</text>
|
||
|
|
<text wx:else>{{index + 1}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="step-content">
|
||
|
|
<text class="step-name">{{item.title}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view style="height:200rpx"></view>
|
||
|
|
</scroll-view>
|
||
|
|
|
||
|
|
<!-- 底部按钮 -->
|
||
|
|
<view class="detail-footer">
|
||
|
|
<view class="progress-hint" wx:if="{{hasStarted && !progress.completed}}">
|
||
|
|
<text>已学到第{{progress.currentStep + 1}}步，继续加油！</text>
|
||
|
|
</view>
|
||
|
|
<view class="progress-hint completed-hint" wx:if="{{progress.completed}}">
|
||
|
|
<text>✅ 已完成本课，可重新学习</text>
|
||
|
|
</view>
|
||
|
|
<button class="btn-primary start-btn" bindtap="onStartLearning">
|
||
|
|
{{progress.completed ? '再学一遍' : hasStarted ? '继续学习' : '开始学习'}}
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|