学生资助-修复图片文件预览问题

pages/finance/knzzZzq/apply.vue

@@ -92,19 +92,24 @@
                         </view>
                         <view class="form-item">
                             <label class="form-label"><span class="red-tip">*</span>证件照</label>
-                            <view class="upload-container">
-                                <view class="upload-btn" @click="handlePhotoUpload" :class="{ 'upload-disabled': type === 'detail' }">
+                            <!-- 编辑模式显示上传组件 -->
+                            <view class="upload-container" v-if="type !== 'detail'">
+                                <view class="upload-btn" @click="handlePhotoUpload">
                                     <text class="upload-icon">+</text>
-                                    <text>{{ type === 'detail' ? '已上传证件照' : '上传文件' }}</text>
+                                    <text>上传文件</text>
                                 </view>
                                 <view class="file-list" v-if="photoFiles.length">
                                     <view class="file-item" v-for="(file, index) in photoFiles" :key="index">
                                         <text class="file-name" @click="previewPhoto">{{ file.name }}</text>
-                                        <uni-icons type="trash-filled" size="30" @click="deletePhoto" v-if="type !== 'detail'" class="delete-btn"></uni-icons>
+                                        <uni-icons type="trash-filled" size="30" @click="deletePhoto" class="delete-btn"></uni-icons>
                                     </view>
                                 </view>
                                 <view class="upload-tip">请上传电子版一寸照，支持JPG、PNG格式</view>
                             </view>
+                            <!-- 详情模式显示照片预览 -->
+                            <view class="photo-preview-container" v-if="formData.pic && type === 'detail'">
+                                <image :src="getFullImageUrl(formData.pic)" mode="aspectFill"></image>
+                            </view>
                         </view>
                     </view>
                 </view>
@@ -306,7 +311,7 @@ import config from "@/config.js";
                 // 签名图片
                 signImg: '',
                 // 基础URL
-                baseUrl: uni.getStorageSync('baseUrl'),
+                baseUrl: config.baseUrl || '',
                 // 选项卡状态
                 activeTab: 0,
                 // 表单滚动高度
@@ -346,6 +351,18 @@ import config from "@/config.js";
         onResize() {
             this.calculateFormHeight();
         },
+        computed: {
+            filePickerValue() {
+                if (this.formData.pic) {
+                    return [{
+                        url: this.getFullImageUrl(this.formData.pic),
+                        name: '证件照',
+                        size: 0
+                    }];
+                }
+                return [];
+            }
+        },
         methods: {
             // 计算表单高度
             calculateFormHeight() {
@@ -464,13 +481,16 @@ import config from "@/config.js";
                         // 从文件路径中提取文件名
                         const fileName = data.pic.split('/').pop();
                         // 构造完整的URL
-                        const fullUrl = this.baseUrl + data.pic;
-                        // 更新 photoFiles 数组，使 uni-file-picker 组件显示已有的证件照
+                        const fullUrl = this.getFullImageUrl(data.pic);
+                        // 更新 photoFiles 数组，使编辑模式下能够预览图片
                         this.photoFiles = [{
                             name: fileName,
                             path: data.pic,
                             url: fullUrl
                         }];
+                        console.log('处理证件照，formData.pic:', this.formData.pic);
+                        console.log('fullUrl:', fullUrl);
+                        console.log('photoFiles:', this.photoFiles);
                     }
                     
                     // 处理证明材料
@@ -601,6 +621,27 @@ import config from "@/config.js";
                     icon: 'success'
                 });
             },
+            // 获取完整图片URL
+            getFullImageUrl(path) {
+                if (!path) return '';
+                // 调试信息
+                console.log('getFullImageUrl调用，path:', path);
+                // 如果已经是完整URL，则直接返回
+                if (path.startsWith('http://') || path.startsWith('https://')) {
+                    return path;
+                }
+                // 使用配置文件中的baseUrl
+                const currentBaseUrl = config.baseUrl || '';
+                console.log('当前baseUrl:', currentBaseUrl);
+                // 处理baseUrl，确保结尾没有斜杠
+                const baseUrlClean = currentBaseUrl.replace(/\/$/, '');
+                // 处理path，确保开头没有斜杠
+                const pathClean = path.replace(/^\//, '');
+                // 拼接URL
+                const fullUrl = `${baseUrlClean}/${pathClean}`;
+                console.log('拼接后的完整URL:', fullUrl);
+                return fullUrl;
+            },
             
             // 预览证件照
             previewPhoto() {
@@ -1445,4 +1486,16 @@ import config from "@/config.js";
         margin-top: 10rpx;
         line-height: 1.4;
     }
+    
+    /* 照片预览容器 */
+    .photo-preview-container {
+        margin-top: 20rpx;
+        border-radius: 8rpx;
+        overflow: hidden;
+    }
+    .photo-preview-container image {
+        width: 200rpx;
+        height: 200rpx;
+        border-radius: 8rpx;
+    }
 </style>