124 lines
6.1 KiB
Plaintext
124 lines
6.1 KiB
Plaintext
<scroll-view scroll-y class="page-scroll">
|
||
<view class="page-container">
|
||
<!-- 加载中 -->
|
||
<view wx:if="{{loading}}" class="loading-container">
|
||
<view class="loading-spinner"></view>
|
||
<text>加载中...</text>
|
||
</view>
|
||
|
||
<block wx:else>
|
||
<!-- PDF 文件卡片 - 点击可选择保存或分享 -->
|
||
<view class="card pdf-card" bindtap="handlePdfTap" wx:if="{{pdfUrl}}">
|
||
<view class="section-title">
|
||
<view class="title-content">PDF 文件</view>
|
||
</view>
|
||
<view class="pdf-card-content">
|
||
<view class="file-icon">
|
||
<view class="pdf-icon">PDF</view>
|
||
</view>
|
||
<view class="file-info">
|
||
<text class="file-name">{{fileName}}</text>
|
||
<text class="file-size">{{fileSize}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- PDF 使用说明卡片：仅当有 PDF 时展示，位置在 PDF 与“我的答案”之间 -->
|
||
<view class="card instruction-card" wx:if="{{pdfUrl}}">
|
||
<view class="section-title">
|
||
<view class="title-content">PDF 使用说明</view>
|
||
</view>
|
||
<view class="instruction-content">
|
||
<view class="instruction-item">
|
||
点击上方 PDF 文件可分享或者下载。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 题目描述：仅当有 description 时展示 -->
|
||
<view class="card description-card" wx:if="{{description}}">
|
||
<view class="section-title">
|
||
<view class="title-content">题目描述</view>
|
||
</view>
|
||
<view class="description-content">{{description}}</view>
|
||
</view>
|
||
|
||
<!-- 我的答案卡片 -->
|
||
<view class="card answer-card" wx:if="{{!hasSubmitted}}">
|
||
<view class="section-title">
|
||
<view class="title-content">我的答案</view>
|
||
<view class="{{statusClass}}">{{statusText}}</view>
|
||
</view>
|
||
|
||
<!-- 图片列表和上传按钮区域 -->
|
||
<view class="images-container">
|
||
<!-- 已上传的图片 -->
|
||
<view class="image-item" wx:for="{{tempImages}}" wx:key="index">
|
||
<image src="{{item}}" mode="aspectFill" class="answer-img" bindtap="previewImage" data-url="{{item}}" />
|
||
<view class="delete-btn" bindtap="deleteImage" data-index="{{index}}">×</view>
|
||
</view>
|
||
|
||
<!-- 上传按钮，跟随在图片后面 -->
|
||
<view class="upload-btn" bindtap="chooseImage" wx:if="{{(!hasSubmitted || allowResubmit) && tempImages.length < 6}}">
|
||
<text class="plus-icon">+</text>
|
||
<text class="upload-text">上传图片</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<button class="submit-btn" bindtap="submitAnswer">提交答案</button>
|
||
</view>
|
||
<view class="card answer-card" wx:else>
|
||
<view class="section-title">
|
||
<view class="title-content">我的答案</view>
|
||
<view class="{{statusClass}}">{{statusText}}</view>
|
||
</view>
|
||
|
||
<!-- 图片列表和上传按钮区域 -->
|
||
<view class="images-container">
|
||
<!-- 已上传的图片（使用显式别名与字符串数组 key） -->
|
||
<view class="image-item" wx:for="{{submittedImages}}" wx:for-item="img" wx:key="*this">
|
||
<image src="{{img}}" mode="aspectFill" class="answer-img" bindtap="previewImage" data-url="{{img}}" />
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 重新提交按钮 -->
|
||
<button class="resubmit-btn" bindtap="handleResubmit">重新提交</button>
|
||
</view>
|
||
|
||
<!-- 老师批复卡片 -->
|
||
<view class="card review-card" wx:if="{{reviewImages.length > 0 || reviewComment!=''}}">
|
||
<view class="section-title">
|
||
<view class="title-content">老师批复</view>
|
||
</view>
|
||
<!-- 批复时间 -->
|
||
<view class="review-time" wx:if="{{reviewTime}}">
|
||
批复时间：{{reviewTime}}
|
||
</view>
|
||
|
||
<!-- 批复文字内容 -->
|
||
<view class="review-comment" wx:if="{{reviewComment}}">
|
||
{{reviewComment}}
|
||
</view>
|
||
|
||
<!-- 批复图片展示 -->
|
||
<view class="review-images" wx:if="{{reviewImages.length > 0}}">
|
||
<image wx:for="{{reviewImages}}" wx:key="index" src="{{item}}" mode="aspectFill" class="review-image" bindtap="previewReviewImage" data-url="{{item}}" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 使用说明卡片 -->
|
||
<view class="card instruction-card">
|
||
<view class="section-title">
|
||
<view class="title-content">使用说明</view>
|
||
</view>
|
||
<view class="instruction-content">
|
||
<view class="instruction-item">1. 请按照要求上传清晰的答案图片</view>
|
||
<view class="instruction-item">2. 支持上传多张图片，最多6张</view>
|
||
<view class="instruction-item">3. 图片上传完成后点击提交答案</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view> |