56 lines
1.7 KiB
Plaintext
56 lines
1.7 KiB
Plaintext
|
<view class="step-page" wx:if="{{course}}">
|
||
|
|
<!-- 顶部进度 -->
|
||
|
|
<view class="step-header">
|
||
|
|
<view class="step-progress-bar">
|
||
|
|
<view class="step-progress-fill" style="width:{{progressPercent}}%"></view>
|
||
|
|
</view>
|
||
|
|
<view class="step-counter">
|
||
|
|
<text class="step-current">第 {{currentStepIndex + 1}} 步</text>
|
||
|
|
<text class="step-total">共 {{totalSteps}} 步</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 主内容滚动区 -->
|
||
|
|
<scroll-view class="step-body" scroll-y>
|
||
|
|
<!-- 步骤标题 -->
|
||
|
|
<view class="step-title-wrap">
|
||
|
|
<view class="step-badge">步骤 {{currentStepIndex + 1}}</view>
|
||
|
|
<text class="step-name">{{currentStep.title}}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 示意图区域 -->
|
||
|
|
<view class="step-image-wrap">
|
||
|
|
<view class="step-image-placeholder" style="background:{{course.coverColor}}">
|
||
|
|
<text class="step-image-emoji">{{currentStep.imageEmoji}}</text>
|
||
|
|
<text class="step-image-hint">示意图</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 讲解文字 -->
|
||
|
|
<view class="step-desc-wrap card">
|
||
|
|
<text class="step-desc-title">📖 步骤说明</text>
|
||
|
|
<text class="step-desc">{{currentStep.desc}}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 关键提示 -->
|
||
|
|
<view class="step-tip-wrap">
|
||
|
|
<text class="step-tip">{{currentStep.tip}}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view style="height:200rpx"></view>
|
||
|
|
</scroll-view>
|
||
|
|
|
||
|
|
<!-- 底部操作按钮 -->
|
||
|
|
<view class="step-footer">
|
||
|
|
<button
|
||
|
|
class="step-btn btn-prev {{currentStepIndex === 0 ? 'disabled' : ''}}"
|
||
|
|
bindtap="onPrevStep"
|
||
|
|
disabled="{{currentStepIndex === 0}}"
|
||
|
|
>上一步</button>
|
||
|
|
<button
|
||
|
|
class="step-btn btn-next"
|
||
|
|
bindtap="onNextStep"
|
||
|
|
>{{isLastStep ? '完成本课 🎉' : '下一步 →'}}</button>
|
||
|
|
</view>
|
||
|
|
</view>
|