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

pages/finance/aid/apply.vue

@@ -96,19 +96,25 @@
 							<input v-model="formData.sfzhm" placeholder="请输入身份证号码" class="form-input" :disabled="detailMode"></input>
 						</view>
 						<view class="form-item">
-							<label class="form-label"><span class="red-tip">*</span>电子版一寸照</label>
+						<label class="form-label"><span class="red-tip">*</span>电子版一寸照</label>
-							<view class="example-body">
+						<!-- 编辑模式显示上传组件 -->
-								<uni-file-picker 
+						<view class="example-body" v-if="!detailMode">
-									@select="handlePhotoUpload" 
+							<uni-file-picker 
-									@delete="deletePhoto" 
+								@select="handlePhotoUpload" 
-									:auto-upload="false"
+								@delete="deletePhoto" 
-									limit="1"
+								:auto-upload="false"
-									:disabled="detailMode"
+								limit="1"
-									mode="grid"
+								:disabled="detailMode"
-								></uni-file-picker>
+								mode="grid"
-							</view>
+								:value="filePickerValue"
-							<view class="upload-tip" v-if="!detailMode">支持上传jpg/png格式照片，单个文件不超过5MB</view>
+							></uni-file-picker>
 						</view>
+						<view class="upload-tip" v-if="!detailMode">支持上传jpg/png格式照片，单个文件不超过5MB</view>
+						<!-- 详情模式显示照片预览 -->
+						<view class="photo-preview-container" v-if="formData.zp && detailMode">
+							<image :src="getFullImageUrl(formData.zp)" mode="aspectFill"></image>
+						</view>
+					</view>
 						<view class="form-item">
 							<label class="form-label"><span class="red-tip">*</span>二级学院</label>
 							<input v-model="formData.xy" placeholder="请输入二级学院" class="form-input" :disabled="detailMode"></input>
@@ -375,6 +381,7 @@
 	import uploadFile from "@/plugins/upload.js"
 	import { queryAffixs, getAffixItems, uploadFiles, deleteAffix } from '@/api/affix'
 	import { getUserProfile } from '@/api/system/user'
+	import config from '@/config'
 	export default {
 		data() {
 			return {
@@ -402,33 +409,33 @@
 						yb: '',
 						zzls: '',
 						gyhd: '',
-					rkzs: '',
+				rkzs: '',
-					rjnsr: '',
+				rjnsr: '',
-					srly: '',
+				srly: '',
-					dz: '',
+				dz: '',
-					kndj: '',
+				kndj: '',
-					knlx: '',
+				knlx: '',
-					bankCard: '',
+				bankCard: '',
-					bankAddr: '',
+				bankAddr: '',
-					jtcyObj: [
+				jtcyObj: [
-						{
+					{
-							xm: '',
+						xm: '',
-							nl: '',
+						nl: '',
-							gx: '',
+						gx: '',
-							dw: '',
+						dw: '',
-							lxdh: '',
+						lxdh: '',
-							zy: '',
+						zy: '',
-							nsr: '',
+						nsr: '',
-							jkzk: ''
+						jkzk: ''
-						}
+					}
-					],
+				],
-					sqly: '',
+				sqly: '',
-					affixId: null,
+				affixId: null,
-					bjyj: '',
+				bjyj: '',
-					bjyjdj: '',
+				bjyjdj: '',
-					ejxyyj: '',
+				ejxyyj: '',
-					ejxyyjdj: ''
+				ejxyyjdj: ''
-				},
+			},
 				genderOptions: [
 					{ value: '男', text: '男' },
 					{ value: '女', text: '女' }
@@ -438,7 +445,19 @@
 				affixFiles: [],
 				loading: false,
 				signImg: '',
-				baseUrl: uni.getStorageSync('baseUrl') || ''
+				baseUrl: config.baseUrl || ''
+			}
+		},
+		computed: {
+			filePickerValue() {
+				if (this.formData.zp) {
+					return [{
+						url: this.getFullImageUrl(this.formData.zp),
+						name: '证件照',
+						size: 0
+					}];
+				}
+				return [];
 			}
 		},
 		onLoad(option) {
@@ -524,6 +543,12 @@
 						if (this.formData.xsqm) {
 							this.signImg = this.baseUrl + this.formData.xsqm;
 						}
+						// 处理证件照回显
+						if (this.formData.zp) {
+							console.log('证件照路径:', this.formData.zp);
+							console.log('baseUrl:', this.baseUrl);
+							console.log('完整URL:', this.getFullImageUrl(this.formData.zp));
+						}
 					}
 				}).finally(() => {
 					this.loading = false
@@ -884,8 +909,8 @@
 				if (path.startsWith('http://') || path.startsWith('https://')) {
 					return path;
 				}
-				// 直接从存储中获取最新的baseUrl
+				// 使用配置文件中的baseUrl
-				const currentBaseUrl = uni.getStorageSync('baseUrl') || '';
+				const currentBaseUrl = config.baseUrl || '';
 				console.log('当前baseUrl:', currentBaseUrl);
 				// 处理baseUrl，确保结尾没有斜杠
 				const baseUrlClean = currentBaseUrl.replace(/\/$/, '');
@@ -1501,9 +1526,22 @@
 		cursor: pointer;
 	}
 	.sign-disabled {
-		opacity: 0.5;
+			opacity: 0.5;
-		cursor: not-allowed;
+			cursor: not-allowed;
-	}
+		}
+		
+		/* 证件照预览容器样式 */
+		.photo-preview-container {
+			margin-top: 20rpx;
+			border-radius: 8rpx;
+			overflow: hidden;
+		}
+		
+		.photo-preview-container image {
+			width: 200rpx;
+			height: 200rpx;
+			border-radius: 8rpx;
+		}
 	.submit-container {
 		position: fixed;
 		bottom: 0;

pages/finance/knzzGl/apply.vue

@@ -82,20 +82,28 @@
 							<label class="form-label"><span class="red-tip">*</span>入学时间</label>
 							<input v-model="formData.inTime" placeholder="请输入入学时间" class="form-input" :disabled="type === 'detail'" ></input>
 						</view>
-						<!-- <view class="form-item">
+						<view class="form-item">
-							<label class="form-label"><span class="red-tip">*</span>证件照</label>
+								<label class="form-label"><span class="red-tip">*</span>证件照</label>
-							<view class="example-body">
+								<!-- 编辑模式显示上传组件 -->
-								<uni-file-picker 
+								<view class="example-body" v-if="type !== 'detail'">
-									@select="handlePhotoUpload" 
+									<uni-file-picker 
-									@delete="deletePhoto" 
+										@select="handlePhotoUpload" 
-									:auto-upload="false"
+										@delete="deletePhoto" 
-									limit="1"
+										:auto-upload="false"
-									:disabled="type === 'detail'"
+										limit="1"
-									mode="grid"
+										:disabled="type === 'detail'"
-								></uni-file-picker>
+										mode="grid"
+										:value="filePickerValue"
+										preview-full-image
+										image-mode="aspectFill"
+									></uni-file-picker>
+								</view>
+								<view class="upload-tip" v-if="type !== 'detail'">支持上传jpg/png格式照片，单个文件不超过5MB</view>
+								<!-- 详情模式显示照片预览 -->
+								<view class="photo-preview-container" v-if="formData.pic && type === 'detail'">
+									<image :src="getFullImageUrl(formData.pic)" mode="aspectFill"></image>
+								</view>
 							</view>
-							<view class="upload-tip" v-if="type !== 'detail'">支持上传jpg/png格式照片，单个文件不超过5MB</view>
-						</view> -->
 						<view class="form-item">
 							<label class="form-label">曾获资助/奖励</label>
 							<textarea v-model="formData.helpHis" placeholder="请输入曾获资助或奖励情况" class="form-textarea" rows="3" :disabled="type === 'detail'" ></textarea>
@@ -289,6 +297,7 @@
 	import { getOwnSign } from '@/api/workStudy/post';
 	import { getOwnKnrd, getOwnExtraInfo, getOwnInfo as getOwnStuInfo } from '@/api/finance/special';
 	import uploadFile from "@/plugins/upload.js"
+	import config from '@/config'
 	export default {
 		data() {
 			return {
@@ -354,7 +363,7 @@
 				},
 				affixFiles: [],
 				signImg: '',
-				baseUrl: uni.getStorageSync('baseUrl')
+				baseUrl: config.baseUrl || ''
 			};
 		},
 		onLoad(option) {
@@ -382,6 +391,18 @@
 		onShow() {
 			this.calculateFormHeight();
 		},
+		computed: {
+			filePickerValue() {
+				if (this.formData.pic) {
+					return [{
+						url: this.getFullImageUrl(this.formData.pic),
+						name: '证件照',
+						size: 0
+					}];
+				}
+				return [];
+			}
+		},
 		methods: {
 			// 计算表单滚动区域高度
 			calculateFormHeight() {
@@ -639,6 +660,22 @@
 							};
 						});
 					}
+					// 处理证件照
+					if (this.formData.pic) {
+						// 从文件路径中提取文件名
+						const fileName = this.formData.pic.split('/').pop();
+						// 构造完整的图片URL
+						const fullUrl = this.getFullImageUrl(this.formData.pic);
+						// 更新 photoFiles 数组，使 uni-file-picker 组件能够预览图片
+						this.photoFiles = [{
+							name: fileName,
+							path: this.formData.pic,
+							url: fullUrl
+						}];
+						console.log('处理证件照，formData.pic:', this.formData.pic);
+						console.log('fullUrl:', fullUrl);
+						console.log('photoFiles:', this.photoFiles);
+					}
 				}).catch(error => {
 					console.error('获取详情失败:', error);
 					uni.showToast({
@@ -951,7 +988,18 @@
 			
 			// 处理证件照上传
 			handlePhotoUpload(e) {
-				const file = e.tempFile;
+				// 检查事件参数格式
+				console.log('handlePhotoUpload 事件参数:', e);
+				
+				// 从事件参数中获取文件信息
+				const file = e.tempFiles ? e.tempFiles[0] : e.tempFile;
+				if (!file) {
+					uni.showToast({
+						title: '获取文件信息失败',
+						icon: 'none'
+					});
+					return;
+				}
 				
 				// 检查文件大小
 				if (file.size > 5 * 1024 * 1024) {
@@ -974,11 +1022,33 @@
 				
 				uni.showLoading({ title: '上传中...' });
 				
-				uploadFile('/common/upload', file.path).then((res) => {
+				// 获取文件路径
+				const filePath = file.path || file.tempFilePath;
+				if (!filePath) {
+					uni.showToast({
+						title: '获取文件路径失败',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				uploadFile('/common/upload', filePath).then((res) => {
 					uni.hideLoading();
 					const result = typeof res === 'string' ? JSON.parse(res) : res;
 					if (result && result.code === 200) {
 						this.formData.pic = result.fileName || result.savePath;
+						// 构造完整的图片URL
+						const fullUrl = this.getFullImageUrl(this.formData.pic);
+						// 更新 photoFiles 数组，使 uni-file-picker 组件能够预览图片
+						this.photoFiles = [{
+							name: file.name,
+							path: filePath,
+							url: fullUrl
+						}];
+						console.log('上传成功，formData.pic:', this.formData.pic);
+						console.log('fullUrl:', fullUrl);
+						console.log('filePickerValue:', this.filePickerValue);
+						console.log('photoFiles:', this.photoFiles);
 						uni.showToast({
 							title: '证件照上传成功',
 							icon: 'success'
@@ -1006,6 +1076,27 @@
 					title: '证件照已删除',
 					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;
 			}
 		}
 	};
@@ -1231,8 +1322,19 @@
 		}
 		
 		.example-body {
-			margin-top: 10rpx;
+				margin-top: 10rpx;
-		}
+			}
+			
+			.photo-preview-container {
+				margin-top: 20rpx;
+				border-radius: 8rpx;
+				overflow: hidden;
+			}
+			.photo-preview-container image {
+				width: 200rpx;
+				height: 200rpx;
+				border-radius: 8rpx;
+			}
 
 	.sign {
 		width: 200px;

pages/finance/knzzZsg/apply.vue

@@ -228,15 +228,15 @@
 					<textarea v-model="formData.applyReasonExtra" placeholder="请详细描述申请理由" class="form-textarea" rows="4" :disabled="detailMode"></textarea>
 				</view>
 				<view class="form-item">
-						<label class="form-label"><span class="red-tip">*</span>申请人签名</label>
+					<label class="form-label"><span class="red-tip">*</span>申请人签名</label>
-						<view class="sign-img" v-if="signImg">
+					<view class="sign-img" v-if="signImg">
-							<image :src="signImg" mode="aspectFit" style="width: 200px; height: 50px; cursor: pointer;"></image>
+						<image :src="signImg" mode="aspectFit" style="width: 200px; height: 50px; cursor: pointer;" @tap="previewSign"></image>
-							<text @tap="signToggle" class="re-sign-text">重新签名</text>
+						<text @tap="signToggle" class="re-sign-text" v-if="!detailMode">重新签名</text>
-						</view>
-						<view v-else class="sign" @tap="signToggle" :class="{ 'sign-disabled': detailMode }">
-							点击签名
-						</view>
 					</view>
+					<view v-else class="sign" @tap="signToggle" :class="{ 'sign-disabled': detailMode }">
+						点击签名
+					</view>
+				</view>
 					<view class="form-item">
 						<label class="form-label"><span class="red-tip">*</span>中职毕业证</label>
 						<view class="upload-btn" @click="handleDiplomaUpload" :class="{ 'upload-disabled': detailMode }">
@@ -316,6 +316,7 @@
 <script>
 import { add, update, reApply, getOwnSign, getOwnFamily, getStudentInfo, getExtraInfo } from '@/api/finance/knzzZsg';
 import uploadFile from "@/plugins/upload.js"
+import config from '@/config'
 
 export default {
 	data() {
@@ -324,7 +325,7 @@ export default {
 					detailMode: false,
 					formScrollHeight: '',
 					signImg: '',
-					baseUrl: uni.getStorageSync('baseUrl'),
+				baseUrl: config.baseUrl || '',
 					diplomaFiles: [],
 					diplomaAffixId: '',
 			genderOptions: [
@@ -575,9 +576,12 @@ export default {
 			this.formData.applyReasonExtra = item.applyExtraReason || '';
 			
 			// 签名和文件信息
-			this.formData.applySign = item.applySign || '';
+				this.formData.applySign = item.applySign || '';
-			this.formData.diplomaFile = item.diplomaCertificate || '';
+				this.formData.diplomaFile = item.diplomaCertificate || '';
-			this.signImg = item.applySign || '';
+				// 构造完整的签名图片URL
+				this.signImg = item.applySign ? this.getFullImageUrl(item.applySign) : '';
+				console.log('处理签名图片，item.applySign:', item.applySign);
+				console.log('signImg:', this.signImg);
 			
 			// 审核意见
 			this.formData.fdyCmt = item.fdyCmt || '';
@@ -806,9 +810,38 @@ export default {
 					uploadFile('/common/upload', e).then((res) => {
 						const data = JSON.parse(res);
 						this.formData.applySign = data.fileName;
-						this.signImg = data.url || (this.baseUrl + data.fileName);
+						this.signImg = data.url || this.getFullImageUrl(data.fileName);
 					})
 				},
+				// 获取完整图片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;
+				},
+				// 预览签名图片
+				previewSign() {
+					if (this.signImg) {
+						uni.previewImage({
+							urls: [this.signImg]
+						});
+					}
+				},
 				// 处理中职毕业证上传
 				handleDiplomaUpload() {
 					if (this.detailMode) {

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;
+                        const fullUrl = this.getFullImageUrl(data.pic);
-                        // 更新 photoFiles 数组，使 uni-file-picker 组件显示已有的证件照
+                        // 更新 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>