From baae0090175996b8b26a6457fa18378570beffc2 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Fri, 22 Aug 2025 17:10:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mobile/src/pages/xskh/khsq/form.vue | 1957 +++++++++++++++++++++++----
 1 file changed, 1727 insertions(+), 230 deletions(-)

diff --git a/mobile/src/pages/xskh/khsq/form.vue b/mobile/src/pages/xskh/khsq/form.vue
index e126123f..3c753725 100644
--- a/mobile/src/pages/xskh/khsq/form.vue
+++ b/mobile/src/pages/xskh/khsq/form.vue
@@ -8,7 +8,17 @@
         </u-navbar>
 
         <!-- 页面内容 -->
-        <view class="page-content" v-loading="pageLoading">
+        <view class="page-content">
+            <!-- 全屏loading效果 -->
+            <u-loading-page
+                :loading="pageLoading"
+                loading-text="数据加载中..."
+                bg-color="rgba(255, 255, 255, 0.8)"
+                color="#0051d9"
+                icon-size="50"
+                font-size="14"
+            ></u-loading-page>
+
             <!-- 基础信息区域 -->
             <view class="form-section">
                 <view class="section-title">基础信息</view>
@@ -94,6 +104,7 @@
                                                 type="number"
                                                 placeholder="请输入分数"
                                                 :maxlength="10"
+                                                :disabled="isAnyLoading"
                                                 style="width: 200rpx; text-align: right"
                                                 @change="handleSelfScoreChange"
                                             ></u-input>
@@ -143,6 +154,7 @@
                         type="primary"
                         shape="round"
                         size="small"
+                        :disabled="isAnyLoading"
                         style="width: 160rpx; flex-shrink: 0"
                         @click="addBonusItem"
                     >
@@ -162,6 +174,7 @@
                                 type="error"
                                 shape="round"
                                 size="mini"
+                                :disabled="isAnyLoading"
                                 style="width: 100rpx; flex-shrink: 0; margin-left: auto"
                                 @click="removeBonusItem(index)"
                             >
@@ -224,7 +237,7 @@
                             <view class="form-item full-width">
                                 <text class="form-label">附件:</text>
                                 <view class="upload-area">
-                                    <!-- 图片附件展示 -->
+                                    <!-- 图片展示区域 -->
                                     <view
                                         v-if="getImageFiles(item).length > 0"
                                         class="image-section"
@@ -232,9 +245,10 @@
                                         <view class="image-title">图片附件</view>
                                         <view class="image-grid">
                                             <view
-                                                v-for="image in getImageFiles(item)"
-                                                :key="image.uid"
+                                                v-for="(image, index) in getImageFiles(item)"
+                                                :key="image.uid || index"
                                                 class="image-item"
+                                                @click="handleImageClick(image, index, $event)"
                                             >
                                                 <!-- 图片容器 -->
                                                 <view class="image-container">
@@ -242,9 +256,10 @@
                                                         :src="image.blobUrl || image.url"
                                                         class="attachment-image"
                                                         mode="aspectFill"
-                                                    />
+                                                        @error="handleImageError"
+                                                    ></image>
 
-                                                    <!-- 状态遮罩 -->
+                                                    <!-- 上传状态遮罩 -->
                                                     <view
                                                         v-if="image.status === 'uploading'"
                                                         class="upload-overlay"
@@ -253,12 +268,13 @@
                                                             mode="circle"
                                                             size="24"
                                                             color="#fff"
-                                                        />
+                                                        ></u-loading-icon>
                                                         <text class="upload-text">
                                                             {{ image.progress || 0 }}%
                                                         </text>
                                                     </view>
 
+                                                    <!-- 错误状态遮罩 -->
                                                     <view
                                                         v-if="image.status === 'error'"
                                                         class="error-overlay"
@@ -267,10 +283,11 @@
                                                             name="close-circle"
                                                             size="24"
                                                             color="#fff"
-                                                        />
+                                                        ></u-icon>
                                                         <text class="error-text">上传失败</text>
                                                     </view>
 
+                                                    <!-- 成功状态角标 -->
                                                     <view
                                                         v-if="image.status === 'success'"
                                                         class="success-badge"
@@ -279,19 +296,22 @@
                                                             name="checkmark-circle-fill"
                                                             size="18"
                                                             color="#52c41a"
-                                                        />
+                                                        ></u-icon>
                                                     </view>
                                                 </view>
 
-                                                <!-- 操作按钮 -->
-                                                <view class="image-actions">
+                                                <!-- 图片操作按钮 -->
+                                                <view class="image-actions" @click.stop>
                                                     <u-button
                                                         v-if="image.status === 'success'"
                                                         size="mini"
                                                         type="primary"
                                                         shape="round"
                                                         plain
-                                                        @click="handleDownload(image)"
+                                                        @tap="handleImageDownload(image)"
+                                                        @click.stop.prevent="
+                                                            handleImageDownloadClick(image, $event)
+                                                        "
                                                     >
                                                         下载
                                                     </u-button>
@@ -301,7 +321,9 @@
                                                         type="warning"
                                                         shape="round"
                                                         plain
-                                                        @click="retryUpload(image, item)"
+                                                        @click.stop.prevent="
+                                                            retryUploadFile(image, $event)
+                                                        "
                                                     >
                                                         重试
                                                     </u-button>
@@ -311,13 +333,20 @@
                                                         type="error"
                                                         shape="round"
                                                         plain
-                                                        @click="handleDelete(image, item)"
+                                                        @tap="handleImageDelete(image, index)"
+                                                        @click.stop.prevent="
+                                                            handleImageDeleteClick(
+                                                                image,
+                                                                index,
+                                                                $event,
+                                                            )
+                                                        "
                                                     >
                                                         删除
                                                     </u-button>
                                                 </view>
 
-                                                <!-- 文件名 -->
+                                                <!-- 文件名显示 -->
                                                 <view class="image-name">
                                                     <text>{{ getShortFileName(image.name) }}</text>
                                                 </view>
@@ -325,17 +354,17 @@
                                         </view>
                                     </view>
 
-                                    <!-- 文档附件展示 -->
+                                    <!-- 自定义文件列表（用于显示非图片文件和上传状态） -->
                                     <view
-                                        v-if="getNonImageFiles(item).length > 0"
                                         class="custom-file-list"
+                                        v-if="getNonImageFiles(item).length > 0"
                                     >
                                         <view class="file-title">文档附件</view>
                                         <view class="file-grid">
                                             <view
-                                                v-for="file in getNonImageFiles(item)"
-                                                :key="file.uid"
                                                 class="file-card"
+                                                v-for="(file, index) in getNonImageFiles(item)"
+                                                :key="file.uid"
                                             >
                                                 <!-- 文件图标容器 -->
                                                 <view class="file-icon-container">
@@ -346,19 +375,68 @@
                                                                 : 'folder'
                                                         "
                                                         size="50"
-                                                        :color="getFileIconColor(file.status)"
+                                                        :color="
+                                                            file.status === 'error'
+                                                                ? '#fa3534'
+                                                                : file.status === 'success'
+                                                                ? '#19be6b'
+                                                                : '#909399'
+                                                        "
                                                     />
+
+                                                    <!-- 上传状态遮罩 -->
+                                                    <view
+                                                        v-if="file.status === 'uploading'"
+                                                        class="upload-overlay"
+                                                    >
+                                                        <u-loading-icon
+                                                            mode="circle"
+                                                            size="24"
+                                                            color="#fff"
+                                                        ></u-loading-icon>
+                                                        <text class="upload-text">
+                                                            {{ file.progress || 0 }}%
+                                                        </text>
+                                                    </view>
+
+                                                    <!-- 错误状态遮罩 -->
+                                                    <view
+                                                        v-if="file.status === 'error'"
+                                                        class="error-overlay"
+                                                    >
+                                                        <u-icon
+                                                            name="close-circle"
+                                                            size="24"
+                                                            color="#fff"
+                                                        ></u-icon>
+                                                        <text class="error-text">上传失败</text>
+                                                    </view>
+
+                                                    <!-- 成功状态角标 -->
+                                                    <view
+                                                        v-if="file.status === 'success'"
+                                                        class="success-badge"
+                                                    >
+                                                        <u-icon
+                                                            name="checkmark-circle-fill"
+                                                            size="18"
+                                                            color="#52c41a"
+                                                        ></u-icon>
+                                                    </view>
                                                 </view>
 
-                                                <!-- 操作按钮 -->
-                                                <view class="file-actions">
+                                                <!-- 文件操作按钮 -->
+                                                <view class="file-actions" @click.stop>
                                                     <u-button
                                                         v-if="file.status === 'success'"
                                                         size="mini"
                                                         type="primary"
                                                         shape="round"
                                                         plain
-                                                        @click="handleDownload(file)"
+                                                        @tap="handleDownloadFile(file)"
+                                                        @click.stop.prevent="
+                                                            handleDownloadFileClick(file, $event)
+                                                        "
                                                     >
                                                         下载
                                                     </u-button>
@@ -368,7 +446,9 @@
                                                         type="warning"
                                                         shape="round"
                                                         plain
-                                                        @click="retryUpload(file, item)"
+                                                        @click.stop.prevent="
+                                                            retryUploadFile(file, $event)
+                                                        "
                                                     >
                                                         重试
                                                     </u-button>
@@ -378,13 +458,20 @@
                                                         type="error"
                                                         shape="round"
                                                         plain
-                                                        @click="handleDelete(file, item)"
+                                                        @tap="handleRemoveFile(file, index)"
+                                                        @click.stop.prevent="
+                                                            handleRemoveFileClick(
+                                                                file,
+                                                                index,
+                                                                $event,
+                                                            )
+                                                        "
                                                     >
                                                         删除
                                                     </u-button>
                                                 </view>
 
-                                                <!-- 文件名 -->
+                                                <!-- 文件名显示 -->
                                                 <view class="file-name-display">
                                                     <text>{{ getShortFileName(file.name) }}</text>
                                                 </view>
@@ -392,28 +479,30 @@
                                         </view>
                                     </view>
 
-                                    <!-- 上传按钮 -->
-                                    <view v-if="!isViewMode" class="upload-buttons">
-                                        <u-button
-                                            type="primary"
-                                            shape="round"
-                                            @click="handleChooseImage(item)"
-                                        >
-                                            选择图片
-                                        </u-button>
+                                    <!-- 统一附件上传按钮 -->
+                                    <view v-if="!isViewMode" class="doc-upload-section">
                                         <u-button
                                             type="info"
                                             shape="round"
-                                            @click="handleChooseFile(item)"
+                                            icon="plus"
+                                            plain
+                                            :loading="uploadLoading"
+                                            :disabled="uploadLoading"
+                                            @click="handleDocUpload(item)"
+                                            style="margin-top: 20rpx; width: 100%"
                                         >
-                                            选择文件
+                                            {{ uploadLoading ? '上传中...' : '添加证明材料' }}
                                         </u-button>
                                     </view>
 
-                                    <!-- 上传提示 -->
-                                    <view class="upload-tip">
-                                        <text>
-                                            支持图片、视频、PDF、Word文档等格式，单个文件大小不超过10MB，最多上传15个文件。
+                                    <!-- 上传提示信息 -->
+                                    <view class="upload-tips">
+                                        <text class="tip-item">
+                                            • 支持格式：JPG、PNG、PDF、Word等 • 单个文件不超过10MB •
+                                            最多上传15个文件
+                                        </text>
+                                        <text class="tip-item">
+                                            • 图片文件将以图片形式展示，支持预览和下载
                                         </text>
                                     </view>
                                 </view>
@@ -495,18 +584,53 @@
         </view>
 
         <!-- 底部操作按钮 -->
-        <view class="bottom-actions" v-if="!isViewMode">
-            <u-button type="primary" shape="round" @click="handleSave">保存</u-button>
-            <u-button type="success" shape="round" @click="handleSubmit">提交</u-button>
-            <u-button v-if="form.id" type="error" shape="round" @click="handleDelete">
-                删除
+        <view class="bottom-actions" v-if="!isViewMode && form.status !== '6'">
+            <u-button
+                v-if="
+                    form.status === '1' ||
+                    !form.status ||
+                    form.status === '2' ||
+                    form.status === '3'
+                "
+                type="primary"
+                shape="round"
+                :loading="saveLoading"
+                :disabled="saveLoading || submitLoading || deleteLoading"
+                @click="handleSave"
+            >
+                {{ saveLoading ? '保存中...' : '保存' }}
+            </u-button>
+            <u-button
+                v-if="
+                    form.status === '1' ||
+                    !form.status ||
+                    form.status === '2' ||
+                    form.status === '3'
+                "
+                type="success"
+                shape="round"
+                :loading="submitLoading"
+                :disabled="saveLoading || submitLoading || deleteLoading"
+                @click="handleSubmit"
+            >
+                {{ submitLoading ? '提交中...' : '提交' }}
+            </u-button>
+            <u-button
+                v-if="form.id && (form.status === '1' || !form.status)"
+                type="error"
+                shape="round"
+                :loading="deleteLoading"
+                :disabled="saveLoading || submitLoading || deleteLoading"
+                @click="handleDelete"
+            >
+                {{ deleteLoading ? '删除中...' : '删除' }}
             </u-button>
         </view>
     </view>
 </template>
 
 <script>
-import { request, smartUploadFile } from '@/common/request.js';
+import { request, smartUploadFile, downloadFile } from '@/common/request.js';
 import { getDictLabel, getDictTagType, getDict } from '@/common/dict.js';
 
 export default {
@@ -516,6 +640,25 @@ export default {
             pageLoading: false,
             pageTitle: '考核申请表单',
 
+            // 操作按钮loading状态
+            saveLoading: false,
+            submitLoading: false,
+            deleteLoading: false,
+
+            // 文件上传loading状态
+            uploadLoading: false,
+
+            // 是否有任何操作正在进行
+            get isAnyLoading() {
+                return (
+                    this.pageLoading ||
+                    this.saveLoading ||
+                    this.submitLoading ||
+                    this.deleteLoading ||
+                    this.uploadLoading
+                );
+            },
+
             // 表单数据
             form: {
                 id: undefined,
@@ -582,6 +725,11 @@ export default {
         // 初始化数据
         await this.initData();
     },
+
+    onUnload() {
+        // 清理blob URL，防止内存泄漏
+        this.cleanupBlobUrls();
+    },
     methods: {
         // 返回上一页
         goBack() {
@@ -723,6 +871,15 @@ export default {
                             }
                         }
                     }
+
+                    // 处理图片文件以确保正确显示
+                    await this.processAllImageFiles();
+
+                    // 强制刷新组件显示
+                    this.$nextTick(() => {
+                        // 预加载图片以确保能正确显示
+                        this.preloadAllImages();
+                    });
                 }
             } catch (error) {
                 console.error('获取申请详情失败:', error);
@@ -785,20 +942,49 @@ export default {
                 });
 
                 if (response.code === 200 && response.data) {
-                    const attachmentFiles = response.data.map((ossFile, index) => ({
-                        uid: `existing_${index}_${Date.now()}`,
-                        name: ossFile.originalName || `附件${index + 1}`,
-                        url: ossFile.url,
-                        ossId: ossFile.ossId,
-                        status: 'success',
-                        response: {
-                            code: 200,
-                            data: {
-                                url: ossFile.url,
-                                ossId: ossFile.ossId,
+                    const attachmentFiles = response.data.map((ossFile, index) => {
+                        // 使用fileSuffix字段判断文件类型
+                        const fileType = this.getFileTypeBySuffix(ossFile.fileSuffix);
+                        const isImage = this.isImageFile({
+                            name: ossFile.originalName,
+                            type: fileType,
+                        });
+
+                        // 处理图片URL - 确保有正确的API前缀
+                        let processedUrl = ossFile.url;
+                        if (isImage && ossFile.url && ossFile.url.startsWith('/resource/')) {
+                            // 图片文件需要添加/api前缀
+                            processedUrl = `/api${ossFile.url}`;
+                        }
+
+                        // 构造完整的文件名（包含扩展名）
+                        let fullFileName = ossFile.originalName || `附件${index + 1}`;
+                        if (
+                            ossFile.fileSuffix &&
+                            !fullFileName
+                                .toLowerCase()
+                                .endsWith(`.${ossFile.fileSuffix.toLowerCase()}`)
+                        ) {
+                            fullFileName = `${fullFileName}.${ossFile.fileSuffix}`;
+                        }
+
+                        return {
+                            uid: `existing_${index}_${Date.now()}`,
+                            name: fullFileName,
+                            url: processedUrl,
+                            ossId: ossFile.ossId,
+                            status: 'success',
+                            type: fileType,
+                            size: ossFile.fileSize || 0,
+                            response: {
+                                code: 200,
+                                data: {
+                                    url: processedUrl,
+                                    ossId: ossFile.ossId,
+                                },
                             },
-                        },
-                    }));
+                        };
+                    });
 
                     item.fileList = attachmentFiles;
                 } else {
@@ -893,137 +1079,1046 @@ export default {
         removeBonusItem(index) {
             this.form.bonusApprovalList.splice(index, 1);
             this.calculateTotalScore();
+
+            // 🔥 关键修复：删除附加分项目后立即更新evidenceFile字段
+            this.updateAttachmentEvidenceFile();
         },
 
-        // 选择图片
-        handleChooseImage(item) {
-            const maxCount = 15 - this.getTotalFileCount(item);
-            if (maxCount <= 0) {
+        // 统一附件上传方法（支持图片和文档）
+        handleDocUpload(item) {
+            console.log('=== 统一附件上传方法 ===');
+
+            // 检查文件数量限制
+            if (this.getTotalFileCount(item) >= 15) {
                 uni.showToast({
-                    title: '最多上传15个文件',
+                    title: '最多只能上传15个文件',
                     icon: 'none',
                 });
                 return;
             }
 
-            uni.chooseImage({
-                count: maxCount,
-                sourceType: ['album', 'camera'],
+            // 显示选择文件类型的操作菜单
+            uni.showActionSheet({
+                itemList: ['选择图片'],
                 success: (res) => {
-                    this.uploadFiles(res.tempFilePaths, 'image', item);
+                    switch (res.tapIndex) {
+                        case 0:
+                            this.chooseDocuments(item);
+                            break;
+                    }
                 },
-                fail: (error) => {
-                    uni.showToast({ title: '选择图片失败', icon: 'none' });
+                fail: () => {
+                    console.log('用户取消选择');
                 },
             });
         },
 
-        // 选择文件 (H5端)
-        handleChooseFile(item) {
-            // #ifdef H5
-            const input = document.createElement('input');
-            input.type = 'file';
-            input.multiple = true;
-            input.accept = '.pdf,.doc,.docx,.txt,.mp4,.avi,.mov';
-            input.onchange = (event) => {
-                const files = Array.from(event.target.files);
-                this.uploadFiles(files, 'file', item);
-            };
-            input.click();
-            // #endif
+        // 选择文档文件
+        chooseDocuments(item) {
+            // 使用uni.chooseFile选择文档
+            if (typeof uni.chooseFile === 'function') {
+                uni.chooseFile({
+                    count: Math.min(5, 15 - this.getTotalFileCount(item)),
+                    success: (res) => {
+                        console.log('选择文档成功:', res);
+                        if (res.tempFiles && res.tempFiles.length > 0) {
+                            this.handleFileUpload(
+                                {
+                                    tempFiles: res.tempFiles,
+                                },
+                                item,
+                            );
+                        }
+                    },
+                    fail: (err) => {
+                        console.error('选择文档失败:', err);
+                        uni.showToast({
+                            title: '选择文档失败',
+                            icon: 'none',
+                        });
+                    },
+                });
+            } else {
+                // 降级方案：跳转到备用上传方式
+                this.handleBackupUpload(item);
+            }
         },
 
-        // 上传文件
-        async uploadFiles(files, type, item) {
-            if (!item.fileList) {
-                item.fileList = [];
+        // 备用上传方法（用户可见）
+        handleBackupUpload(item) {
+            console.log('=== 备用上传方法 ===');
+
+            // 先检查平台支持情况
+            uni.showActionSheet({
+                itemList: ['选择图片', '选择视频', '选择文档'],
+                success: (res) => {
+                    if (res.tapIndex === 0) {
+                        // 选择图片
+                        uni.chooseImage({
+                            count: 5,
+                            sizeType: ['original', 'compressed'],
+                            sourceType: ['album', 'camera'],
+                            success: (imageRes) => {
+                                console.log('选择图片成功 - 完整响应:', imageRes);
+                                console.log('tempFilePaths:', imageRes.tempFilePaths);
+                                console.log('tempFiles:', imageRes.tempFiles);
+
+                                const files = imageRes.tempFilePaths.map((path, index) => {
+                                    const fileName =
+                                        path.split('/').pop() || `image_${Date.now()}_${index}.jpg`;
+                                    const tempFile = imageRes.tempFiles?.[index];
+                                    const fileObj = {
+                                        name: fileName,
+                                        path: path,
+                                        url: path,
+                                        tempFilePath: path,
+                                        size: tempFile?.size || 0,
+                                        type: tempFile?.type || 'image/jpeg',
+                                    };
+                                    console.log(`创建图片文件对象 ${index}:`, fileObj);
+                                    console.log(`对应的tempFile:`, tempFile);
+                                    return fileObj;
+                                });
+
+                                // 检查文件大小
+                                const validFiles = files.filter((file) => {
+                                    if (!this.checkFileSize(file)) {
+                                        return false;
+                                    }
+                                    return true;
+                                });
+
+                                if (validFiles.length > 0) {
+                                    this.handleFileUpload({ tempFiles: validFiles }, item);
+                                } else {
+                                    console.log('所有文件都超过大小限制，取消上传');
+                                }
+                            },
+                            fail: (err) => {
+                                console.error('选择图片失败:', err);
+                                uni.showToast({
+                                    title: '选择图片失败',
+                                    icon: 'none',
+                                });
+                            },
+                        });
+                    } else if (res.tapIndex === 1) {
+                        // 选择视频
+                        uni.chooseVideo({
+                            sourceType: ['album', 'camera'],
+                            maxDuration: 60,
+                            success: (videoRes) => {
+                                console.log('选择视频成功:', videoRes);
+                                const file = {
+                                    name: `video_${Date.now()}.mp4`,
+                                    path: videoRes.tempFilePath,
+                                    url: videoRes.tempFilePath,
+                                    tempFilePath: videoRes.tempFilePath,
+                                    size: videoRes.size || 0,
+                                    type: 'video/mp4',
+                                };
+
+                                // 检查文件大小
+                                if (this.checkFileSize(file)) {
+                                    this.handleFileUpload({ tempFiles: [file] }, item);
+                                }
+                            },
+                            fail: (err) => {
+                                console.error('选择视频失败:', err);
+                                uni.showToast({
+                                    title: '选择视频失败',
+                                    icon: 'none',
+                                });
+                            },
+                        });
+                    } else if (res.tapIndex === 2) {
+                        // 选择文档
+                        this.handleDocUpload(item);
+                    }
+                },
+            });
+        },
+
+        // 文件上传
+        handleFileUpload(event, item) {
+            console.log('文件上传事件触发:', event);
+
+            // 设置上传loading状态
+            this.uploadLoading = true;
+
+            // 显示用户提示
+            uni.showToast({
+                title: '文件选择成功，开始上传...',
+                icon: 'loading',
+                duration: 2000,
+            });
+
+            // 兼容不同的事件格式
+            let files = [];
+
+            // uview2 upload组件的after-read事件格式
+            if (event.file) {
+                files = Array.isArray(event.file) ? event.file : [event.file];
+                console.log('✅ uview2 upload格式解析结果:', files);
+            }
+            // 直接传递的tempFiles格式（文档上传等）
+            else if (event.tempFiles) {
+                files = event.tempFiles;
+                console.log('✅ tempFiles格式解析结果:', files);
+            }
+            // tempFilePaths格式（兼容旧版本）
+            else if (event.tempFilePaths) {
+                files = event.tempFilePaths.map((path, index) => ({
+                    url: path,
+                    path: path,
+                    tempFilePath: path,
+                    name: `文件${index + 1}`,
+                    type: '',
+                }));
+                console.log('✅ tempFilePaths格式解析结果:', files);
+            }
+            // 单文件格式处理
+            else if (event.url || event.path || event.tempFilePath) {
+                files = [event];
+                console.log('✅ 单文件格式解析结果:', files);
             }
 
-            for (let i = 0; i < files.length; i++) {
-                const file = files[i];
-                const fileObj = {
-                    uid: `file_${Date.now()}_${i}`,
-                    name: file.name || `文件${i + 1}`,
+            console.log('📋 最终解析得到的文件列表:', files);
+
+            if (files.length === 0) {
+                console.error('❌ 没有获取到文件数据');
+                this.uploadLoading = false; // 清除loading状态
+                uni.showToast({
+                    title: '未获取到文件，请重试',
+                    icon: 'none',
+                });
+                return;
+            }
+
+            // 检查文件数量限制
+            if (this.getTotalFileCount(item) + files.length > 15) {
+                console.warn('⚠️ 文件数量超过限制');
+                this.uploadLoading = false; // 清除loading状态
+                uni.showToast({
+                    title: '最多只能上传15个文件',
+                    icon: 'none',
+                });
+                return;
+            }
+
+            // 检查文件大小限制
+            const validFiles = files.filter((file) => {
+                const isValid = this.checkFileSize(file);
+                console.log(
+                    `文件大小检查 - ${file.name || '未知文件'}:`,
+                    isValid ? '✅ 通过' : '❌ 超限',
+                );
+                return isValid;
+            });
+
+            if (validFiles.length === 0) {
+                console.log('❌ 所有文件都超过大小限制，取消上传');
+                this.uploadLoading = false; // 清除loading状态
+                return;
+            }
+
+            if (validFiles.length < files.length) {
+                const filteredCount = files.length - validFiles.length;
+                console.log(`⚠️ 已过滤 ${filteredCount} 个超限文件`);
+                uni.showToast({
+                    title: `已过滤 ${filteredCount} 个超限文件`,
+                    icon: 'none',
+                    duration: 2000,
+                });
+            }
+
+            // 处理有效文件
+            const newFiles = validFiles.map((file, index) => {
+                console.log(`🔍 处理文件 ${index + 1}:`, file);
+
+                // uview2 upload组件返回的文件通常有url属性作为临时路径
+                const filePath = file.url || file.tempFilePath || file.path;
+
+                if (!filePath) {
+                    console.error(`❌ 文件 ${index + 1} 缺少有效路径`);
+                }
+
+                const fileName =
+                    file.name || filePath?.split('/').pop() || `证明材料${Date.now()}_${index}.jpg`;
+
+                const processedFile = {
+                    ...file,
+                    uid: `upload_${Date.now()}_${index}`,
+                    name: fileName,
+                    url: filePath,
+                    path: filePath, // 确保path属性存在
+                    tempFilePath: filePath, // 确保tempFilePath属性存在
                     status: 'uploading',
-                    progress: 0,
+                    ossId: null,
+                    type: file.type || this.getFileTypeByName(fileName),
                 };
 
-                item.fileList.push(fileObj);
+                console.log(`✅ 文件 ${index + 1} 处理完成:`, processedFile);
+                return processedFile;
+            });
 
-                try {
-                    const formData = { bizType: 'assessment_bonus_attachment' };
-                    const result = await smartUploadFile('/resource/oss/upload', file, formData);
+            console.log('📊 处理后的新文件数量:', newFiles.length);
 
-                    if (result.code === 200) {
-                        fileObj.status = 'success';
-                        fileObj.url = result.data.url;
-                        fileObj.ossId = result.data.ossId;
-                    } else {
-                        fileObj.status = 'error';
-                        uni.showToast({ title: result.msg || '上传失败', icon: 'none' });
-                    }
-                } catch (error) {
-                    fileObj.status = 'error';
-                    uni.showToast({ title: '上传失败', icon: 'none' });
-                }
+            // 确保item有fileList属性
+            if (!item.fileList) {
+                // 🔥 使用Vue.set确保响应式
+                this.$set(item, 'fileList', []);
             }
+
+            // 添加到附件列表 - 使用splice确保Vue检测到数组变化
+            item.fileList.splice(item.fileList.length, 0, ...newFiles);
+
+            // 显示上传提示
+            uni.showToast({
+                title: `开始上传 ${newFiles.length} 个文件`,
+                icon: 'loading',
+                duration: 1500,
+            });
+
+            // 🚀 关键步骤：上传文件到服务器
+            console.log('🚀 开始逐个上传文件到服务器...');
+
+            let completedUploads = 0;
+            const totalUploads = newFiles.length;
+
+            newFiles.forEach((file, index) => {
+                console.log(`🚀 准备上传第 ${index + 1} 个文件: ${file.name}`);
+
+                // 立即调用上传方法
+                this.uploadFileToServer(file)
+                    .then(() => {
+                        console.log(`✅ 文件 ${file.name} 上传完成`);
+                        completedUploads++;
+
+                        // 当所有文件上传完成时，清除loading状态
+                        if (completedUploads === totalUploads) {
+                            this.uploadLoading = false;
+                        }
+                    })
+                    .catch((error) => {
+                        console.error(`❌ 文件 ${file.name} 上传失败:`, error);
+                        completedUploads++;
+
+                        // 即使有文件上传失败，也要在所有文件处理完成后清除loading状态
+                        if (completedUploads === totalUploads) {
+                            this.uploadLoading = false;
+                        }
+                    });
+            });
         },
 
-        // 重试上传
-        async retryUpload(file, item) {
-            file.status = 'uploading';
-            file.progress = 0;
+        // 检查文件大小是否超过限制
+        checkFileSize(file) {
+            const maxSize = 10 * 1024 * 1024; // 10MB
+            const fileSize = file.size || 0;
 
+            console.log('=== 检查文件大小 ===');
+            console.log('文件大小:', fileSize, '字节');
+            console.log('最大限制:', maxSize, '字节');
+            console.log('是否超过限制:', fileSize > maxSize);
+
+            if (fileSize > maxSize) {
+                const fileSizeMB = (fileSize / (1024 * 1024)).toFixed(2);
+                uni.showToast({
+                    title: `文件大小 ${fileSizeMB}MB，超过10MB限制`,
+                    icon: 'none',
+                    duration: 3000,
+                });
+                return false;
+            }
+            return true;
+        },
+
+        // 上传文件到服务器
+        async uploadFileToServer(file) {
             try {
-                const formData = { bizType: 'assessment_bonus_attachment' };
-                const result = await smartUploadFile('/resource/oss/upload', file.raw, formData);
+                console.log('🚀 === 开始上传文件到服务器 ===');
+                console.log('📁 待上传文件对象:', file);
 
-                if (result.code === 200) {
-                    file.status = 'success';
-                    file.url = result.data.url;
-                    file.ossId = result.data.ossId;
-                } else {
+                // 更新文件状态
+                file.status = 'uploading';
+
+                // 确定正确的文件路径 - uview2通常使用url属性
+                const filePath = file.url || file.tempFilePath || file.path;
+                console.log('🎯 文件路径优先级选择:', {
+                    url: file.url,
+                    tempFilePath: file.tempFilePath,
+                    path: file.path,
+                    selected: filePath,
+                });
+
+                if (!filePath) {
+                    const error = new Error('文件路径不存在');
+                    console.error('❌ 上传失败 - 文件路径为空:', file);
                     file.status = 'error';
-                    uni.showToast({ title: result.msg || '上传失败', icon: 'none' });
+                    throw error;
+                }
+
+                console.log(`💫 开始上传文件: ${file.name}`);
+
+                // 🚀 使用智能上传方法，自动处理微信环境兼容性问题
+                const response = await smartUploadFile('/resource/oss/upload', file, {
+                    bizType: 'assessment_bonus_attachment',
+                });
+
+                console.log('📡 上传API响应:', response);
+
+                if (response && response.code === 200) {
+                    // 上传成功
+                    file.url = response.data.url;
+                    file.ossId = response.data.ossId;
+                    file.status = 'success';
+
+                    console.log('✅ 文件上传成功:', {
+                        fileName: file.name,
+                        ossId: file.ossId,
+                        url: file.url,
+                    });
+
+                    // 🔥 关键修复：立即更新附件列表的evidenceFile字段
+                    this.updateAttachmentEvidenceFile();
+
+                    // 🔥 关键修复：强制触发Vue响应式更新
+                    this.$forceUpdate();
+
+                    uni.showToast({
+                        title: '上传成功',
+                        icon: 'success',
+                        duration: 1500,
+                    });
+
+                    return response;
+                } else {
+                    // 上传失败
+                    file.status = 'error';
+                    const errorMsg = response?.msg || '上传失败';
+                    console.error('❌ 上传失败 - API返回错误:', {
+                        response: response,
+                        fileName: file.name,
+                        errorMsg: errorMsg,
+                    });
+
+                    uni.showToast({
+                        title: errorMsg,
+                        icon: 'none',
+                        duration: 3000,
+                    });
+
+                    throw new Error(errorMsg);
                 }
             } catch (error) {
+                console.error('❌ uploadFileToServer执行失败:', error);
+
                 file.status = 'error';
-                uni.showToast({ title: '上传失败', icon: 'none' });
+
+                // 更详细的错误提示
+                let errorMessage = '上传失败';
+                if (error.message) {
+                    if (error.message.includes('file is not present')) {
+                        errorMessage = '文件格式不支持或文件损坏';
+                    } else if (error.message.includes('timeout')) {
+                        errorMessage = '上传超时，请检查网络连接';
+                    } else if (error.message.includes('网络')) {
+                        errorMessage = '网络连接失败，请检查网络';
+                    } else if (error.message.includes('文件路径')) {
+                        errorMessage = '文件选择异常，请重新选择';
+                    } else {
+                        errorMessage = error.message;
+                    }
+                }
+
+                console.error('❌ 最终错误消息:', errorMessage);
+
+                uni.showModal({
+                    title: '上传失败',
+                    content: `文件"${file.name}"上传失败：${errorMessage}`,
+                    showCancel: true,
+                    cancelText: '取消',
+                    confirmText: '重试',
+                    success: (res) => {
+                        if (res.confirm) {
+                            console.log('🔄 用户选择重试上传');
+                            // 重置状态并重试
+                            file.status = 'pending';
+                            this.uploadFileToServer(file);
+                        } else {
+                            console.log('🚫 用户取消重试');
+                            // 从相应项目的fileList中移除失败的文件
+                            if (this.form.bonusApprovalList) {
+                                for (const item of this.form.bonusApprovalList) {
+                                    if (item.fileList) {
+                                        const index = item.fileList.findIndex(
+                                            (f) => f.uid === file.uid,
+                                        );
+                                        if (index > -1) {
+                                            item.fileList.splice(index, 1);
+                                            console.log('🗑️ 已从附件列表中移除失败文件');
+                                            break;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    },
+                });
+
+                throw error;
             }
         },
 
-        // 下载附件
-        async handleDownload(file) {
-            let downloadUrl = file.ossId || file.url;
+        // 图片点击处理（智能判断是预览还是操作按钮）
+        handleImageClick(image, index, event) {
+            // 检查点击目标是否是操作按钮区域
+            const target = event.target;
+            const isActionButton =
+                target.closest('.image-actions') ||
+                target.closest('u-button') ||
+                target.tagName === 'BUTTON';
 
-            if (!downloadUrl) {
-                uni.showToast({ title: '无法获取文件下载地址', icon: 'none' });
+            if (!isActionButton && image.status === 'success') {
+                // 点击图片本身，进行预览
+                this.handleImagePreview(image, index);
+            }
+        },
+
+        // 图片预览
+        handleImagePreview(image, index) {
+            if (image.status !== 'success') {
+                uni.showToast({
+                    title: '图片尚未上传完成',
+                    icon: 'none',
+                });
+                return;
+            }
+
+            // 获取所有成功上传的图片URL - 从所有附加分项目中收集
+            let imageUrls = [];
+            if (this.form.bonusApprovalList) {
+                for (const item of this.form.bonusApprovalList) {
+                    if (item.fileList) {
+                        const itemImageUrls = item.fileList
+                            .filter((file) => this.isImageFile(file) && file.status === 'success')
+                            .map((file) => file.blobUrl || file.url);
+                        imageUrls.push(...itemImageUrls);
+                    }
+                }
+            }
+
+            if (imageUrls.length === 0) {
+                uni.showToast({
+                    title: '暂无可预览的图片',
+                    icon: 'none',
+                });
+                return;
+            }
+
+            // 找到当前图片在成功列表中的索引
+            const currentUrl = image.blobUrl || image.url;
+            const currentIndex = imageUrls.findIndex((url) => url === currentUrl);
+
+            uni.previewImage({
+                urls: imageUrls,
+                current: currentIndex >= 0 ? currentIndex : 0,
+                success: () => {
+                    // 预览成功
+                },
+                fail: (error) => {
+                    console.error('图片预览失败:', error);
+                    uni.showToast({
+                        title: '预览失败',
+                        icon: 'none',
+                    });
+                },
+            });
+        },
+
+        // 图片下载（带重试机制）
+        async handleImageDownload(image, event, retryCount = 0) {
+            if (image.status !== 'success') {
+                uni.showToast({
+                    title: '图片尚未上传完成',
+                    icon: 'none',
+                });
+                return;
+            }
+
+            // 显示下载进度提示
+            uni.showLoading({
+                title: '正在下载图片...',
+                mask: true,
+            });
+
+            try {
+                // 如果有ossId，通过API下载
+                if (image.ossId) {
+                    const downloadUrl = `/resource/oss/download/${image.ossId}`;
+
+                    // 调用下载接口并等待完成
+                    const response = await downloadFile(downloadUrl, image.name);
+
+                    if (response.statusCode === 200) {
+                        uni.hideLoading();
+                        uni.saveFile({
+                            tempFilePath: response.tempFilePath,
+                            success: function (res) {
+                                uni.showToast({
+                                    title: '下载成功',
+                                    icon: 'success',
+                                });
+                            },
+                            fail: function () {
+                                uni.showToast({
+                                    title: '保存失败',
+                                    icon: 'none',
+                                });
+                            },
+                        });
+                    }
+                }
+            } catch (error) {
+                console.error('图片下载过程出错:', error);
+
+                // 确保隐藏loading状态
+                uni.hideLoading();
+
+                // 重试机制（最多重试2次）
+                if (retryCount < 2) {
+                    // 显示重试提示
+                    uni.showToast({
+                        title: `下载失败，正在重试(${retryCount + 1}/2)...`,
+                        icon: 'none',
+                        duration: 1500,
+                    });
+
+                    setTimeout(() => {
+                        this.handleImageDownload(image, event, retryCount + 1);
+                    }, 1500); // 延迟1.5秒后重试
+
+                    return;
+                }
+
+                // 超过重试次数，显示最终错误信息
+                const errorMsg = error.message?.includes('网络')
+                    ? '网络连接失败，请检查网络后重试'
+                    : error.message?.includes('timeout')
+                    ? '下载超时，请重试'
+                    : '下载失败，已重试2次，请检查网络或稍后重试';
+
+                uni.showToast({
+                    title: errorMsg,
+                    icon: 'none',
+                    duration: 3000,
+                });
+            }
+        },
+
+        // 图片下载按钮点击处理（更强的事件处理）
+        handleImageDownloadClick(image, event) {
+            // 强制阻止事件冒泡和默认行为
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+
+            // 调用实际的下载方法
+            this.handleImageDownload(image, event);
+        },
+
+        // 删除按钮点击处理（更强的事件处理）
+        handleImageDeleteClick(image, index, event) {
+            console.log('删除按钮被点击:', image, index);
+
+            // 强制阻止事件冒泡和默认行为
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+
+            // 调用实际的删除方法
+            this.handleImageDelete(image, index);
+        },
+
+        // 图片删除
+        handleImageDelete(image, index, event) {
+            // 强制阻止事件冒泡和默认行为
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            uni.showModal({
+                title: '确认删除',
+                content: '确定要删除这张图片吗？删除后无法恢复。',
+                confirmColor: '#ff5722',
+                success: (res) => {
+                    if (res.confirm) {
+                        console.log('🗑️ === 开始删除图片 ===', {
+                            imageName: image.name,
+                            imageOssId: image.ossId,
+                            imageUid: image.uid,
+                            imageUrl: image.url,
+                        });
+
+                        // 从相应项目的fileList中删除
+                        let deletedFromItem = null;
+                        if (this.form.bonusApprovalList) {
+                            for (let i = 0; i < this.form.bonusApprovalList.length; i++) {
+                                const item = this.form.bonusApprovalList[i];
+                                if (item.fileList) {
+                                    console.log(
+                                        `🔍 检查附加分项目 ${i + 1} (${
+                                            item.bonusName
+                                        }) 的文件列表:`,
+                                        item.fileList.map((f) => ({
+                                            name: f.name,
+                                            ossId: f.ossId,
+                                            uid: f.uid,
+                                        })),
+                                    );
+
+                                    const attachmentIndex = item.fileList.findIndex(
+                                        (file) =>
+                                            file.uid === image.uid ||
+                                            (file.ossId && file.ossId === image.ossId) ||
+                                            (file.url && file.url === image.url),
+                                    );
+
+                                    if (attachmentIndex >= 0) {
+                                        console.log(
+                                            `✅ 在附加分项目 ${
+                                                i + 1
+                                            } 找到要删除的文件，索引: ${attachmentIndex}`,
+                                        );
+
+                                        const deletedFile = item.fileList[attachmentIndex];
+                                        console.log('🗑️ 被删除的文件信息:', {
+                                            name: deletedFile.name,
+                                            ossId: deletedFile.ossId,
+                                            uid: deletedFile.uid,
+                                            status: deletedFile.status,
+                                        });
+
+                                        item.fileList.splice(attachmentIndex, 1);
+                                        deletedFromItem = i + 1;
+
+                                        console.log(
+                                            `✅ 文件已从附加分项目 ${
+                                                i + 1
+                                            } 的fileList中删除，剩余文件数: ${
+                                                item.fileList.length
+                                            }`,
+                                        );
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+
+                        if (deletedFromItem) {
+                            console.log(`✅ 图片已从附加分项目 ${deletedFromItem} 中删除`);
+                        } else {
+                            console.warn('⚠️ 未找到要删除的图片');
+                        }
+
+                        // 清理blob URL，防止内存泄漏
+                        if (image.blobUrl && image.blobUrl.startsWith('blob:')) {
+                            URL.revokeObjectURL(image.blobUrl);
+                        }
+
+                        // 🔥 关键修复：删除文件后立即更新evidenceFile字段
+                        this.updateAttachmentEvidenceFile();
+
+                        uni.showToast({
+                            title: '删除成功',
+                            icon: 'success',
+                        });
+                    }
+                },
+                fail: (err) => {
+                    console.error('删除确认对话框显示失败:', err);
+                },
+            });
+        },
+
+        // 文件下载（微信小程序专用版本）
+        async handleDownloadFile(file, event) {
+            if (!file.ossId) {
+                uni.showToast({
+                    title: '文件未上传完成',
+                    icon: 'none',
+                });
                 return;
             }
 
             try {
-                uni.showLoading({ title: '正在下载文件...', mask: true });
-
-                await request({
-                    url: `/resource/oss/download/${downloadUrl}`,
-                    method: 'GET',
-                    responseType: 'arraybuffer',
+                uni.showLoading({
+                    title: `正在下载${file.name}...`,
+                    mask: true,
                 });
 
-                uni.hideLoading();
-                uni.showToast({ title: '下载成功', icon: 'success' });
+                // 构建下载URL
+                const downloadUrl = `/resource/oss/download/${file.ossId}`;
+
+                if (this.isImageFile(file)) {
+                    // 图片文件：下载并保存到相册
+                    await this.downloadAndSaveImage(downloadUrl, file.name);
+                } else {
+                    // 非图片文件：下载并直接打开预览
+                    await this.downloadAndOpenDocument(downloadUrl, file.name);
+                }
             } catch (error) {
+                console.error('下载过程发生异常:', error);
                 uni.hideLoading();
-                uni.showToast({ title: '下载失败，请稍后重试', icon: 'none' });
+
+                let errorMsg = '下载失败，请重试';
+                if (error.message.includes('timeout')) {
+                    errorMsg = '下载超时，请检查网络后重试';
+                } else if (error.message.includes('network')) {
+                    errorMsg = '网络错误，请检查网络连接';
+                } else if (error.message.includes('404')) {
+                    errorMsg = '文件不存在，请联系管理员';
+                } else if (error.message.includes('500')) {
+                    errorMsg = '服务器错误，请稍后重试';
+                }
+
+                uni.showModal({
+                    title: '下载失败',
+                    content: errorMsg,
+                    showCancel: true,
+                    cancelText: '取消',
+                    confirmText: '重试',
+                    success: (res) => {
+                        if (res.confirm) {
+                            this.handleDownloadFile(file);
+                        }
+                    },
+                });
             }
         },
 
-        // 删除附件
-        handleDelete(file, item) {
-            const index = item.fileList.findIndex((f) => f.uid === file.uid);
-            if (index > -1) {
-                item.fileList.splice(index, 1);
-                uni.showToast({ title: '文件删除成功', icon: 'success' });
+        // 下载图片并保存到相册
+        async downloadAndSaveImage(downloadUrl, fileName) {
+            return new Promise(async (resolve, reject) => {
+                // 调用下载接口并等待完成
+                const response = await downloadFile(downloadUrl, fileName);
+
+                if (response.statusCode === 200) {
+                    uni.hideLoading();
+                    uni.saveFile({
+                        tempFilePath: response.tempFilePath,
+                        success: function (res) {
+                            uni.showToast({
+                                title: '下载成功',
+                                icon: 'success',
+                            });
+                        },
+                        fail: function () {
+                            uni.showToast({
+                                title: '保存失败',
+                                icon: 'none',
+                            });
+                        },
+                    });
+                }
+                uni.hideLoading();
+                resolve();
+            });
+        },
+
+        // 下载文档并打开预览
+        async downloadAndOpenDocument(downloadUrl, fileName) {
+            return new Promise(async (resolve, reject) => {
+                // 调用下载接口并等待完成
+                const response = await downloadFile(downloadUrl, fileName);
+
+                if (response.statusCode === 200) {
+                    uni.hideLoading();
+                    uni.saveFile({
+                        tempFilePath: response.tempFilePath,
+                        success: function (res) {
+                            uni.showToast({
+                                title: '下载成功',
+                                icon: 'success',
+                            });
+                        },
+                        fail: function () {
+                            uni.showToast({
+                                title: '保存失败',
+                                icon: 'none',
+                            });
+                        },
+                    });
+                }
+                uni.hideLoading();
+                resolve();
+            });
+        },
+
+        // 文件下载按钮点击处理（更强的事件处理）
+        handleDownloadFileClick(file, event) {
+            // 强制阻止事件冒泡和默认行为
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+
+            // 调用实际的下载方法
+            this.handleDownloadFile(file, event);
+        },
+
+        // 文件删除按钮点击处理（更强的事件处理）
+        handleRemoveFileClick(file, index, event) {
+            console.log('文档删除按钮被点击:', file, index);
+
+            // 强制阻止事件冒泡和默认行为
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+
+            // 调用实际的删除方法
+            this.handleRemoveFile(file, index);
+        },
+
+        // 移除文件
+        handleRemoveFile(file, index, event) {
+            // 安全的事件处理
+            if (event) {
+                event.stopPropagation();
+            }
+
+            uni.showModal({
+                title: '确认删除',
+                content: '确定要删除这个文件吗？删除后无法恢复。',
+                confirmColor: '#ff5722',
+                success: (res) => {
+                    if (res.confirm) {
+                        console.log('🗑️ === 开始删除文件 ===', {
+                            fileName: file.name,
+                            fileOssId: file.ossId,
+                            fileUid: file.uid,
+                            fileStatus: file.status,
+                        });
+
+                        // 从相应项目的fileList中删除
+                        let deletedFromItem = null;
+                        if (this.form.bonusApprovalList) {
+                            for (let i = 0; i < this.form.bonusApprovalList.length; i++) {
+                                const item = this.form.bonusApprovalList[i];
+                                if (item.fileList) {
+                                    console.log(
+                                        `🔍 检查附加分项目 ${i + 1} (${
+                                            item.bonusName
+                                        }) 的文件列表:`,
+                                        item.fileList.map((f) => ({
+                                            name: f.name,
+                                            ossId: f.ossId,
+                                            uid: f.uid,
+                                        })),
+                                    );
+
+                                    const fileIndex = item.fileList.findIndex(
+                                        (f) => f.uid === file.uid,
+                                    );
+                                    if (fileIndex > -1) {
+                                        console.log(
+                                            `✅ 在附加分项目 ${
+                                                i + 1
+                                            } 找到要删除的文件，索引: ${fileIndex}`,
+                                        );
+
+                                        const deletedFile = item.fileList[fileIndex];
+                                        console.log('🗑️ 被删除的文件信息:', {
+                                            name: deletedFile.name,
+                                            ossId: deletedFile.ossId,
+                                            uid: deletedFile.uid,
+                                            status: deletedFile.status,
+                                        });
+
+                                        item.fileList.splice(fileIndex, 1);
+                                        deletedFromItem = i + 1;
+
+                                        console.log(
+                                            `✅ 文件已从附加分项目 ${
+                                                i + 1
+                                            } 的fileList中删除，剩余文件数: ${
+                                                item.fileList.length
+                                            }`,
+                                        );
+
+                                        // 清理blob URL，防止内存泄漏
+                                        if (file.blobUrl && file.blobUrl.startsWith('blob:')) {
+                                            URL.revokeObjectURL(file.blobUrl);
+                                        }
+
+                                        // 🔥 关键修复：删除文件后立即更新evidenceFile字段
+                                        this.updateAttachmentEvidenceFile();
+
+                                        uni.showToast({
+                                            title: '文件删除成功',
+                                            icon: 'success',
+                                        });
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+
+                        if (deletedFromItem) {
+                            console.log(`✅ 文件已从附加分项目 ${deletedFromItem} 中删除`);
+                        } else {
+                            console.warn('⚠️ 未找到要删除的文件');
+                        }
+                    }
+                },
+                fail: (err) => {
+                    console.error('删除确认对话框显示失败:', err);
+                },
+            });
+        },
+
+        // 重试上传
+        async retryUploadFile(file, event) {
+            console.log('=== 重试上传文件 ===', file);
+
+            // 强制阻止事件冒泡和默认行为
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            // 重置文件状态
+            file.status = 'uploading';
+            file.progress = 0;
+
+            try {
+                // 普通文件重新上传
+                await this.uploadFileToServer(file);
+
+                uni.showToast({
+                    title: '重新上传成功',
+                    icon: 'success',
+                    duration: 1500,
+                });
+            } catch (error) {
+                console.error('重试上传失败:', error);
+                file.status = 'error';
+                file.progress = 0;
+
+                uni.showToast({
+                    title: '重试失败，请稍后再试',
+                    icon: 'none',
+                    duration: 2000,
+                });
             }
         },
 
@@ -1042,20 +2137,67 @@ export default {
         // 判断是否为图片文件
         isImageFile(file) {
             const imageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
-            return (
-                imageTypes.includes(file.raw?.type) ||
-                (file.url && /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file.name))
-            );
+
+            // 优先使用文件MIME类型判断
+            if (file.type) {
+                return imageTypes.includes(file.type);
+            }
+
+            // 通过文件名判断
+            const fileName = file.name || file.url || '';
+            return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(fileName);
         },
 
-        // 获取文件图标颜色
-        getFileIconColor(status) {
-            const colorMap = {
-                uploading: '#909399',
-                success: '#19be6b',
-                error: '#fa3534',
-            };
-            return colorMap[status] || '#909399';
+        // 根据文件名获取文件类型
+        getFileTypeByName(fileName) {
+            if (!fileName) return '';
+            const ext = fileName.split('.').pop()?.toLowerCase();
+            const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+            if (imageTypes.includes(ext)) {
+                // 修正MIME类型映射
+                const mimeTypeMap = {
+                    jpg: 'image/jpeg',
+                    jpeg: 'image/jpeg',
+                    png: 'image/png',
+                    gif: 'image/gif',
+                    bmp: 'image/bmp',
+                    webp: 'image/webp',
+                };
+                return mimeTypeMap[ext] || `image/${ext}`;
+            }
+            return `file/${ext}`;
+        },
+
+        // 根据文件后缀获取文件类型
+        getFileTypeBySuffix(fileSuffix) {
+            if (!fileSuffix) return '';
+
+            // 移除点号，转换为小写
+            const ext = fileSuffix.replace('.', '').toLowerCase();
+
+            // 图片类型判断
+            const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+            if (imageTypes.includes(ext)) {
+                // 修正MIME类型映射
+                const mimeTypeMap = {
+                    jpg: 'image/jpeg',
+                    jpeg: 'image/jpeg',
+                    png: 'image/png',
+                    gif: 'image/gif',
+                    bmp: 'image/bmp',
+                    webp: 'image/webp',
+                };
+                return mimeTypeMap[ext] || `image/${ext}`;
+            }
+
+            // 文档类型判断
+            const documentTypes = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'];
+            if (documentTypes.includes(ext)) {
+                return `file/${ext}`;
+            }
+
+            // 其他类型
+            return `file/${ext}`;
         },
 
         // 获取总文件数量
@@ -1069,23 +2211,162 @@ export default {
 
             const lastDotIndex = fileName.lastIndexOf('.');
             if (lastDotIndex === -1) {
+                // 没有后缀的文件名
                 return fileName.length > 12 ? fileName.substring(0, 12) + '...' : fileName;
             }
 
             const name = fileName.substring(0, lastDotIndex);
-            const ext = fileName.substring(lastDotIndex);
+            const ext = fileName.substring(lastDotIndex); // 包含点号的后缀
 
             if (name.length <= 8) {
-                return fileName;
+                return fileName; // 文件名较短，直接返回
             }
 
+            // 文件名较长，缩写中间部分，保留后缀
             return name.substring(0, 8) + '...' + ext;
         },
 
+        // 图片加载错误处理
+        handleImageError(event) {
+            console.warn('图片加载失败:', event);
+        },
+
+        // 处理所有图片文件，获取blob数据以确保正确显示
+        async processAllImageFiles() {
+            console.log('=== 处理所有图片文件 ===');
+
+            if (this.form.bonusApprovalList) {
+                for (const item of this.form.bonusApprovalList) {
+                    if (item.fileList) {
+                        const imageFiles = item.fileList.filter((file) => this.isImageFile(file));
+                        for (const file of imageFiles) {
+                            if (file.url && !file.blobUrl) {
+                                try {
+                                    console.log(`处理考核申请图片文件: ${file.name}`);
+                                    const blobUrl = await this.getImageBlobUrl(file.url);
+                                    if (blobUrl) {
+                                        file.blobUrl = blobUrl;
+                                        file.fileType = 'image';
+                                        file.type =
+                                            file.type && file.type.startsWith('image')
+                                                ? file.type
+                                                : 'image';
+                                        file.isImage = true;
+                                        console.log(
+                                            `考核申请图片文件处理成功: ${file.name} - ${blobUrl}`,
+                                        );
+                                    }
+                                } catch (error) {
+                                    console.error(`处理考核申请图片文件失败: ${file.name}`, error);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+
+        // 预加载所有图片以确保能正确显示
+        async preloadAllImages() {
+            console.log('=== 预加载所有图片 ===');
+
+            if (this.form.bonusApprovalList) {
+                for (const item of this.form.bonusApprovalList) {
+                    if (item.fileList) {
+                        const imageFiles = item.fileList.filter((file) => this.isImageFile(file));
+                        for (const file of imageFiles) {
+                            if (file.url) {
+                                try {
+                                    console.log(`预加载考核申请图片: ${file.name} - ${file.url}`);
+                                    const img = new Image();
+                                    img.onload = () => {
+                                        console.log(`考核申请图片预加载成功: ${file.name}`);
+                                    };
+                                    img.onerror = () => {
+                                        console.error(
+                                            `考核申请图片预加载失败: ${file.name} - ${file.url}`,
+                                        );
+                                    };
+                                    img.src = file.blobUrl || file.url;
+                                } catch (error) {
+                                    console.error(`预加载考核申请图片出错: ${file.name}`, error);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+
+        // 获取图片的blob数据
+        async getImageBlobUrl(imageUrl) {
+            try {
+                console.log(`获取图片blob数据: ${imageUrl}`);
+
+                // 处理图片URL路径
+                let apiUrl = imageUrl;
+                if (imageUrl.startsWith('/api/')) {
+                    // 移除/api前缀，因为request会自动添加baseURL
+                    apiUrl = imageUrl.replace('/api', '');
+                } else if (imageUrl.startsWith('/resource/')) {
+                    // 直接使用相对路径
+                    apiUrl = imageUrl;
+                } else if (imageUrl.startsWith('http')) {
+                    // 完整URL，需要特殊处理
+                    console.log('检测到完整URL，直接返回原URL');
+                    return imageUrl;
+                }
+
+                console.log(`API请求URL: ${apiUrl}`);
+
+                // 使用request方法获取图片数据
+                const response = await request({
+                    url: apiUrl,
+                    method: 'GET',
+                    responseType: 'arraybuffer', // 设置响应类型为arraybuffer
+                    header: {
+                        isToken: true, // 图片请求可能不需要token验证
+                    },
+                });
+
+                // 将arraybuffer转换为blob
+                const blob = new Blob([response]);
+                const blobUrl = URL.createObjectURL(blob);
+
+                console.log(`成功创建blob URL: ${blobUrl}`);
+                return blobUrl;
+            } catch (error) {
+                console.error(`获取图片blob数据失败: ${imageUrl}`, error);
+                // 如果请求失败，返回原始URL作为备用方案
+                return imageUrl;
+            }
+        },
+
+        // 清理blob URL，防止内存泄漏
+        cleanupBlobUrls() {
+            console.log('=== 清理blob URL ===');
+            if (this.form.bonusApprovalList) {
+                for (const item of this.form.bonusApprovalList) {
+                    if (item.fileList) {
+                        item.fileList.forEach((file) => {
+                            if (file.blobUrl && file.blobUrl.startsWith('blob:')) {
+                                try {
+                                    URL.revokeObjectURL(file.blobUrl);
+                                    console.log(`已清理blob URL: ${file.name}`);
+                                } catch (error) {
+                                    console.error(`清理blob URL失败: ${file.name}`, error);
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+        },
+
         // 保存申请
         async handleSave() {
             try {
-                uni.showLoading({ title: '保存中...', mask: true });
+                this.saveLoading = true;
 
                 // 处理附件数据
                 this.processAttachmentData();
@@ -1115,14 +2396,14 @@ export default {
                 console.error('保存失败:', error);
                 uni.showToast({ title: '保存失败', icon: 'none' });
             } finally {
-                uni.hideLoading();
+                this.saveLoading = false;
             }
         },
 
         // 提交申请
         async handleSubmit() {
             try {
-                uni.showLoading({ title: '提交中...', mask: true });
+                this.submitLoading = true;
 
                 // 处理附件数据
                 this.processAttachmentData();
@@ -1158,7 +2439,7 @@ export default {
                 console.error('提交失败:', error);
                 uni.showToast({ title: '提交失败', icon: 'none' });
             } finally {
-                uni.hideLoading();
+                this.submitLoading = false;
             }
         },
 
@@ -1172,6 +2453,8 @@ export default {
                     content: '是否确认删除该考核申请？',
                 });
 
+                this.deleteLoading = true;
+
                 await request({
                     url: `/assessment/application/delete/${this.form.id}`,
                     method: 'DELETE',
@@ -1187,22 +2470,88 @@ export default {
                     console.error('删除失败:', error);
                     uni.showToast({ title: '删除失败', icon: 'none' });
                 }
+            } finally {
+                this.deleteLoading = false;
             }
         },
 
         // 处理附件数据
         processAttachmentData() {
+            console.log('💾 === 保存时处理附件数据 ===');
             if (this.form.bonusApprovalList && this.form.bonusApprovalList.length > 0) {
-                for (const item of this.form.bonusApprovalList) {
+                for (let i = 0; i < this.form.bonusApprovalList.length; i++) {
+                    const item = this.form.bonusApprovalList[i];
+                    console.log(`💾 处理附加分项目 ${i + 1}: ${item.bonusName}`);
+
                     if (item.fileList && item.fileList.length > 0) {
+                        // 🔥 关键修复：使用与updateAttachmentEvidenceFile相同的过滤条件
                         const ossIds = item.fileList
-                            .filter((file) => file.ossId)
+                            .filter((file) => file.ossId && file.status === 'success')
                             .map((file) => file.ossId)
                             .join(',');
+
+                        console.log(
+                            `💾 附加分项目 ${i + 1} - 保存前evidenceFile: "${item.evidenceFile}"`,
+                        );
+                        console.log(`💾 附加分项目 ${i + 1} - 保存时evidenceFile: "${ossIds}"`);
+
                         item.evidenceFile = ossIds;
+                    } else {
+                        console.log(`💾 附加分项目 ${i + 1} - 无文件，清空evidenceFile`);
+                        item.evidenceFile = '';
                     }
                 }
             }
+            console.log('✅ 保存时附件数据处理完成');
+        },
+
+        // 🔥 新增方法：实时更新附件的evidenceFile字段
+        updateAttachmentEvidenceFile() {
+            console.log('🔄 === 实时更新附件evidenceFile字段 ===');
+            if (this.form.bonusApprovalList && this.form.bonusApprovalList.length > 0) {
+                for (let i = 0; i < this.form.bonusApprovalList.length; i++) {
+                    const item = this.form.bonusApprovalList[i];
+                    console.log(`🔍 检查附加分项目 ${i + 1}:`, {
+                        bonusName: item.bonusName,
+                        fileListLength: item.fileList ? item.fileList.length : 0,
+                        currentEvidenceFile: item.evidenceFile,
+                    });
+
+                    if (item.fileList && item.fileList.length > 0) {
+                        // 详细日志：显示所有文件的状态
+                        item.fileList.forEach((file, fileIndex) => {
+                            console.log(`📄 文件 ${fileIndex + 1}: ${file.name}`, {
+                                ossId: file.ossId,
+                                status: file.status,
+                                uid: file.uid,
+                                willInclude: !!(file.ossId && file.status === 'success'),
+                            });
+                        });
+
+                        const ossIds = item.fileList
+                            .filter((file) => file.ossId && file.status === 'success')
+                            .map((file) => file.ossId)
+                            .join(',');
+
+                        console.log(
+                            `📎 附加分项目 ${i + 1} - 更新前evidenceFile: "${item.evidenceFile}"`,
+                        );
+                        console.log(`📎 附加分项目 ${i + 1} - 更新后evidenceFile: "${ossIds}"`);
+
+                        // 使用Vue.set确保响应式更新
+                        this.$set(item, 'evidenceFile', ossIds);
+                    } else {
+                        console.log(`📎 附加分项目 ${i + 1} - 无文件，清空evidenceFile`);
+                        // 如果没有文件，清空evidenceFile
+                        this.$set(item, 'evidenceFile', '');
+                    }
+                }
+            }
+
+            console.log('✅ evidenceFile字段更新完成');
+
+            // 强制触发Vue响应式更新
+            this.$forceUpdate();
         },
 
         // 准备请求数据
@@ -1224,6 +2573,12 @@ export default {
             return String(id);
         },
 
+        // ===== 按钮显示逻辑说明 =====
+        // 1. 新建、草稿状态(status='1'或!status)：保存、提交、删除三个按钮都显示
+        // 2. 已提交、班主任审核状态(status='2'或'3')：保存、提交显示，删除不显示
+        // 3. 已完成状态(status='6')：保存、提交、删除三个按钮都不显示
+        // 整个按钮区域在已完成状态下完全隐藏，防止误操作
+
         // 获取附加分状态文本
         getBonusStatusText(status) {
             const statusMap = {
@@ -1535,66 +2890,70 @@ $radius-lg: 16rpx;
     gap: $spacing-md;
 }
 
-// 附件样式
+// 附件样式（参考违纪撤销申请界面的完整样式）
 .upload-area {
-    margin-top: $spacing-sm;
-    width: 100%;
+    padding: 20rpx 0;
 }
 
-.image-section,
-.custom-file-list {
-    margin-bottom: $spacing-lg;
+.doc-upload-section {
+    margin-top: 20rpx;
+    padding: 20rpx 0;
+    border-top: 2rpx dashed #e0e0e0;
 }
 
-.image-title,
-.file-title {
+// 图片展示区域样式
+.image-section {
+    margin-bottom: 30rpx;
+}
+
+.image-title {
     font-size: 28rpx;
-    color: $text-secondary;
-    font-weight: 500;
-    margin-bottom: $spacing-sm;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 20rpx;
+    padding-left: 10rpx;
+    border-left: 4rpx solid #2979ff;
 }
 
-.image-grid,
-.file-grid {
+.image-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: $spacing-md;
+    grid-template-columns: repeat(auto-fill, minmax(280rpx, 1fr));
+    gap: 20rpx;
 }
 
-.image-item,
-.file-card {
-    background-color: $background-color;
-    border-radius: $radius-md;
-    padding: $spacing-md;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: $spacing-xs;
-    border: 1px solid $border-color;
-}
-
-.image-container,
-.file-icon-container {
+.image-item {
     position: relative;
-    width: 120rpx;
-    height: 120rpx;
-    background-color: #fff;
-    border-radius: $radius-sm;
-    border: 1px solid $border-color;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    background: #fff;
+    border-radius: 12rpx;
     overflow: hidden;
+    border: 2rpx solid #f0f0f0;
+    transition: all 0.3s ease;
+    /* 确保图片容器的点击事件不影响按钮 */
+    cursor: pointer;
+}
+
+.image-item:active {
+    transform: scale(0.98);
+    border-color: #2979ff;
+}
+
+.image-container {
+    position: relative;
+    width: 100%;
+    height: 200rpx;
+    border-radius: 8rpx;
+    overflow: hidden;
+    cursor: pointer;
 }
 
 .attachment-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    background-color: #f5f5f5;
 }
 
-.upload-overlay,
-.error-overlay {
+.upload-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -1603,58 +2962,196 @@ $radius-lg: 16rpx;
     background-color: rgba(0, 0, 0, 0.6);
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    color: #fff;
+}
+
+.upload-text {
+    font-size: 24rpx;
+    margin-top: 8rpx;
+    font-weight: 500;
+}
+
+.error-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(250, 53, 52, 0.8);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     color: #fff;
 }
 
-.upload-text,
 .error-text {
-    font-size: 20rpx;
-    margin-top: $spacing-xs;
+    font-size: 24rpx;
+    margin-top: 8rpx;
+    font-weight: 500;
 }
 
 .success-badge {
     position: absolute;
-    top: $spacing-xs;
-    right: $spacing-xs;
-    background-color: #fff;
+    top: 8rpx;
+    right: 8rpx;
+    background-color: rgba(255, 255, 255, 0.9);
     border-radius: 50%;
     padding: 4rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.image-actions {
+    display: flex;
+    gap: 6rpx;
+    padding: 8rpx 12rpx;
+    background: #fafafa;
+    border-top: 1rpx solid #f0f0f0;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    /* 确保按钮区域能正确处理点击事件 */
+    position: relative;
+    z-index: 10;
+    pointer-events: auto;
+}
+
+.image-actions .u-button {
+    flex: 1;
+    min-width: 60rpx;
+    font-size: 24rpx !important;
+    /* 确保按钮可点击 */
+    pointer-events: auto;
+    position: relative;
+    z-index: 11;
+}
+
+.image-name {
+    padding: 8rpx 12rpx;
+    background: #fff;
+    font-size: 22rpx;
+    color: #666;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+// 自定义文件列表样式
+.custom-file-list {
+    margin-top: 20rpx;
+}
+
+.file-title {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 20rpx;
+    padding-left: 10rpx;
+    border-left: 4rpx solid #2979ff;
+}
+
+.file-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280rpx, 1fr));
+    gap: 20rpx;
+}
+
+.file-card {
+    position: relative;
+    background: #fff;
+    border-radius: 12rpx;
+    overflow: hidden;
+    border: 2rpx solid #f0f0f0;
+    transition: all 0.3s ease;
+}
+
+.file-card:active {
+    transform: scale(0.98);
+    border-color: #2979ff;
+}
+
+.file-icon-container {
+    position: relative;
+    width: 100%;
+    height: 200rpx;
+    border-radius: 8rpx;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8f9fa;
 }
 
-.image-actions,
 .file-actions {
     display: flex;
-    gap: $spacing-xs;
-    flex-wrap: wrap;
-    justify-content: center;
+    gap: 6rpx;
+    padding: 8rpx 12rpx;
+    background: #fafafa;
+    border-top: 1rpx solid #f0f0f0;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+}
+
+.file-actions .u-button {
+    flex: 1;
+    min-width: 60rpx;
+    font-size: 24rpx !important;
 }
 
-.image-name,
 .file-name-display {
-    font-size: 24rpx;
-    color: $text-secondary;
+    padding: 8rpx 12rpx;
+    background: #fff;
+    font-size: 22rpx;
+    color: #666;
     text-align: center;
-    word-break: break-all;
-    line-height: 1.2;
-    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-.upload-buttons {
-    display: flex;
-    gap: $spacing-md;
-    margin-bottom: $spacing-md;
+.upload-tips {
+    margin-top: 20rpx;
+    padding: 15rpx;
+    background: #f8f9fa;
+    border-radius: 8rpx;
+    border-left: 4rpx solid #17a2b8;
 }
 
-.upload-tip {
+.tip-item {
+    display: block;
     font-size: 24rpx;
-    color: $text-placeholder;
-    line-height: 1.4;
-    background-color: $background-color;
-    padding: $spacing-sm;
-    border-radius: $radius-sm;
-    border: 1px solid $border-color;
+    color: #666;
+    line-height: 1.5;
+    margin-bottom: 8rpx;
+}
+
+// 响应式适配
+@media screen and (max-width: 750rpx) {
+    .file-grid {
+        grid-template-columns: repeat(auto-fill, minmax(240rpx, 1fr));
+        gap: 15rpx;
+    }
+
+    .file-icon-container {
+        height: 160rpx;
+    }
+
+    .image-grid {
+        grid-template-columns: repeat(auto-fill, minmax(240rpx, 1fr));
+        gap: 15rpx;
+    }
+
+    .image-container {
+        height: 160rpx;
+    }
+
+    .file-actions .u-button,
+    .image-actions .u-button {
+        font-size: 22rpx !important;
+        padding: 6rpx 12rpx;
+    }
 }
 
 .score-summary {