164 lines
7.8 KiB
Plaintext
164 lines
7.8 KiB
Plaintext
<view class="container">
|
||
<view wx:if="{{loading}}" class="loading-container">
|
||
<view class="loading-content">
|
||
<view class="loading-spinner">
|
||
<view class="spinner-circle"></view>
|
||
</view>
|
||
<text class="loading-text">加载中</text>
|
||
</view>
|
||
</view>
|
||
|
||
<block wx:else>
|
||
<!-- 试题详情：背景层资料（根据当前题目的 material_id 显示）+ 前置问题面板（可上下滑动，左右滑题目） -->
|
||
<view class="detail-wrap" style="height: {{swiperHeight}}px;">
|
||
<!-- 背景层：仅当当前题目有关联材料时显示 -->
|
||
<view class="layer-back" wx:if="{{currentQuestionMaterial}}" style="height: {{swiperHeight}}px;">
|
||
<view class="material-title-fixed">
|
||
<text class="section-title">资料</text>
|
||
<view class="section-title-underline"></view>
|
||
</view>
|
||
<scroll-view scroll-y
|
||
class="material-scroll-below-title"
|
||
style="height: {{materialScrollHeight}}px;"
|
||
enhanced="{{true}}"
|
||
show-scrollbar="{{true}}"
|
||
bounces="{{true}}">
|
||
<view class="section section-material">
|
||
<view class="material-body">
|
||
<rich-text nodes="{{currentQuestionMaterial.content}}" selectable="{{true}}" class="material-rich"></rich-text>
|
||
</view>
|
||
</view>
|
||
<view class="material-placeholder"></view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 前置层：问题面板，仅通过顶部拖拽条上下拖动，题目区域可正常点击 -->
|
||
<view class="movable-area panel-area" style="height: {{movableAreaHeight}}px;">
|
||
<view class="movable-panel question-panel-wrap" style="height: {{panelHeight}}px; transform: translateY({{panelY}}px);">
|
||
<!-- 仅当有材料时显示拖拽条，无材料时隐藏 -->
|
||
<view class="panel-drag-handle"
|
||
wx:if="{{currentQuestionMaterial}}"
|
||
bindtouchstart="onPanelDragStart"
|
||
catchtouchmove="onPanelDragMove"
|
||
bindtouchend="onPanelDragEnd"
|
||
bindtouchcancel="onPanelDragEnd">
|
||
<view class="panel-drag-bar"></view>
|
||
</view>
|
||
<view class="section section-question">
|
||
<swiper class="content-swiper question-content-swiper"
|
||
current="{{currentQuestionIndex}}"
|
||
bindchange="onQuestionChange"
|
||
bindanimationfinish="onQuestionAnimationFinish">
|
||
<swiper-item wx:for="{{questions}}"
|
||
wx:key="id"
|
||
wx:for-index="qIndex"
|
||
wx:for-item="q"
|
||
class="content-swiper-item">
|
||
<view class="question-body">
|
||
<question-display
|
||
question="{{q}}"
|
||
question-index="{{qIndex}}"
|
||
answers="{{answers}}"
|
||
option-markers="{{optionMarkers}}"
|
||
show-analysis="{{false}}"
|
||
show-answer-icon="{{false}}"
|
||
clickable="{{true}}"
|
||
bind:optionclick="handleOptionClick"
|
||
bind:swipehorizontal="onQuestionSwipeHorizontal">
|
||
</question-display>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部工具栏 -->
|
||
<view class="toolbar">
|
||
<view class="timer-container" bindtap="togglePause">
|
||
<image class="pause-icon" src="{{isPaused ? '/assets/icons/play.png' : '/assets/icons/pause.png'}}"></image>
|
||
<text class="timer">{{timerText}}</text>
|
||
</view>
|
||
<view class="question-card-btn" bindtap="showQuestionCard">
|
||
<image class="card-icon" src="/assets/icons/courses.png"></image>
|
||
<text class="card-text">答题卡</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 答题卡弹窗 -->
|
||
<view class="question-card-popup {{showQuestionCard ? 'show' : ''}}">
|
||
<view class="popup-mask" bindtap="hideQuestionCard"></view>
|
||
<view class="popup-content">
|
||
<view class="popup-header">
|
||
<text>答题卡</text>
|
||
<view class="close-btn" bindtap="hideQuestionCard">×</view>
|
||
</view>
|
||
<view class="question-status">
|
||
<view class="status-item">
|
||
<view class="status-dot answered"></view>
|
||
<text>已答题</text>
|
||
</view>
|
||
<view class="status-item">
|
||
<view class="status-dot"></view>
|
||
<text>未答题</text>
|
||
</view>
|
||
<view class="status-item">
|
||
<view class="status-dot current"></view>
|
||
<text>当前题</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="numbers-grid">
|
||
<view class="grid-container">
|
||
<view class="number-item {{questionAnsweredStatus[index] ? 'answered' : ''}} {{currentQuestionIndex === index ? 'current' : ''}}"
|
||
wx:for="{{questions}}"
|
||
wx:key="id"
|
||
data-index="{{index}}"
|
||
bindtap="jumpToQuestion">
|
||
<text>{{index + 1}}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="submit-btn" bindtap="submitAnswers">交卷</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 暂停遮罩 -->
|
||
<pause-mask
|
||
show="{{isPaused}}"
|
||
timer-text="{{timerText}}"
|
||
bind:resume="togglePause" />
|
||
|
||
<!-- 自定义加载动画 -->
|
||
<view class="custom-loading {{loading ? 'show' : ''}}" wx:if="{{loading}}">
|
||
<view class="loading-wrapper">
|
||
<view class="loading-spinner">
|
||
<view class="loading-dot" wx:for="{{12}}" wx:key="index"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 自定义确认弹窗 -->
|
||
<view wx:if="{{showCustomModal}}" class="custom-modal-mask">
|
||
<view class="custom-modal">
|
||
<view class="custom-modal-title">提示</view>
|
||
<view class="custom-modal-content">还有未作答的题目，是否确认提交？</view>
|
||
<view class="custom-modal-actions">
|
||
<button class="custom-modal-btn cancel" bindtap="onCustomModalCancel">再检查一下</button>
|
||
<button class="custom-modal-btn confirm" bindtap="onCustomModalConfirm">确认提交</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<style>
|
||
.material-section-wrapper {
|
||
transition: height 0.2s cubic-bezier(.4,0,.2,1);
|
||
will-change: height;
|
||
}
|
||
.material-section-wrapper.resizing {
|
||
transition: none;
|
||
}
|
||
</style>
|