fix:修复投诉与建议图片多文件上传bug

2025-12-01 16:45:06 +08:00
parent 65a168daed
commit 8dd95a325b
7 changed files with 221 additions and 142 deletions
@@ -1,18 +1,18 @@
 import request from '../http'

-// 投诉反馈
+// 新增反馈
+// data 参数包含: type, content, phone, files (数组)
 export const addUserFeedback = (data) => {
-	console.log(data);
 	return request({
 		url: '/app/feedback/add',
 		method: 'post',
 		data,
+		hideLoading: true, // 手动控制loading，避免重复显示
 	})
 }

-// 获取投诉记录列表
+// 获取反馈列表
 export const getFeedbackList = (params) => {
-	// GET请求需要将参数拼接到URL上
 	let url = '/app/feedback/list';
 	if (params) {
 		const queryString = Object.keys(params)
@@ -23,12 +23,12 @@ export const getFeedbackList = (params) => {
 		}
 	}
 	return request({
-		url: url,
+		url,
 		method: 'get',
 	})
 }

-// 获取投诉详情
+// 获取反馈详情（含基础信息）
 export const getFeedbackDetail = (id) => {
 	return request({
 		url: `/app/feedback/${id}`,
@@ -36,10 +36,18 @@ export const getFeedbackDetail = (id) => {
 	})
 }

-// 提交投诉回复
-export const submitFeedbackReply = (data) => {
+// 获取反馈对话消息
+export const getFeedbackMessages = (id) => {
 	return request({
-		url: '/app/feedback/reply',
+		url: `/app/feedback/${id}/messages`,
+		method: 'get',
+	})
+}
+
+// 用户追加消息
+export const sendFeedbackMessage = (id, data) => {
+	return request({
+		url: `/app/feedback/${id}/message`,
 		method: 'post',
 		data,
 	})
@@ -1,7 +1,7 @@
 // export const URL = "https://my.gxfs123.com/api" //正式服务器-弃用
-// export const URL = "https://manager.fdzpower.com/api"  //正式服务器
-export const URL = "https://fansdev.gxfs123.com/api"  //测试服务器
-// export const URL = "http://192.168.5.149:8080" 		//本地调试
+export const URL = "https://manager.fdzpower.com/api"  //正式服务器
+// export const URL = "https://fansdev.gxfs123.com/api"  //测试服务器
+// export const URL = "http://192.168.5.30:8080" 		//本地调试
 // export const URL = "http://127.0.0.1:8080" 		//本地调试

 export const appid = "wx2165f0be356ae7a9" //小程序appid 
@@ -335,6 +335,7 @@ export default {
  },

  feedback: {
+    uploading: 'Uploading...',
    title: 'Feedback',
    placeholder: 'Describe the issue',
    submit: 'Submit',
@@ -350,7 +351,7 @@ export default {
    pleaseSelectType: 'Select type',
    pleaseDescribe: 'Describe issue',
    pleaseContact: 'Leave contact',
-    imageUploadFailed: 'Upload failed',
+    imageUploadFailed: 'Image upload failed, please try again',
    deviceFault: 'Device Fault',
    chargingIssue: 'Charging',
    usageSuggestion: 'Suggestion',
@@ -335,6 +335,7 @@ export default {
  },

  feedback: {
+    uploading: '上传中...',
    title: '投诉与建议',
    placeholder: '请详细描述您遇到的问题，以便我们更好地为您解决',
    submit: '提交反馈',
@@ -350,7 +351,7 @@ export default {
    pleaseSelectType: '请选择问题类型',
    pleaseDescribe: '请描述您的问题',
    pleaseContact: '请留下联系方式',
-    imageUploadFailed: '图片上传失败',
+    imageUploadFailed: '图片上传失败，请重试',
    deviceFault: '设备故障',
    chargingIssue: '收费问题',
    usageSuggestion: '使用建议',
@@ -12,11 +12,22 @@
 				</view>
 			</view>

+			<!-- 标题 -->
+			<view class="title-section">
+				<text class="title-text">{{ detail.title || '-' }}</text>
+			</view>
+
 			<!-- 问题描述 -->
 			<view class="content-section">
 				<view class="content-text">{{ detail.content || '-' }}</view>
 			</view>

+			<!-- 联系电话 -->
+			<view class="contact-section" v-if="detail.phone">
+				<text class="contact-label">{{ $t('feedback.contactPhone') }}</text>
+				<text class="contact-value">{{ detail.phone }}</text>
+			</view>
+
 			<!-- 上传图片 -->
 			<view class="image-section" v-if="getImageList(detail).length > 0">
 				<view class="image-list">
@@ -39,14 +50,14 @@
 				<view class="divider-line"></view>
 			</view>
 			<view class="reply-list">
-				<view class="reply-item" v-for="(reply, index) in allReplies" :key="index"
+				<view class="reply-item" v-for="(reply, index) in allReplies" :key="reply.id || index"
 					:class="{ 'reply-platform': reply.isPlatform, 'reply-user': !reply.isPlatform }">
 					<view class="reply-avatar" :class="{ 'avatar-platform': reply.isPlatform, 'avatar-user': !reply.isPlatform }">
 						<text class="avatar-text">{{ reply.isPlatform ? '平台' : '我' }}</text>
 					</view>
 					<view class="reply-content-wrapper">
 						<view class="reply-name-time">
-							<text class="reply-name">{{ reply.isPlatform ? $t('feedback.platform') : $t('feedback.me') }}</text>
+							<text class="reply-name">{{ reply.senderName || (reply.isPlatform ? $t('feedback.platform') : $t('feedback.me')) }}</text>
 							<text class="reply-time">{{ formatTime(reply.createTime) }}</text>
 						</view>
 						<view class="reply-content">{{ reply.content || '-' }}</view>
@@ -56,7 +67,7 @@
 		</view>

 		<!-- 底部输入框 -->
-		<view class="bottom-input-bar" v-if="detail.status === 'processing'">
+		<view class="bottom-input-bar" v-if="canSendMessage">
 			<view class="input-wrapper">
 				<textarea class="reply-input" v-model="replyContent" :placeholder="$t('feedback.replyPlaceholder')"
 					maxlength="500" :auto-height="true"></textarea>
@@ -71,14 +82,16 @@
 <script setup>
 	import {
 		ref,
-		onMounted
+		onMounted,
+		computed
 	} from 'vue';
 	import {
 		onLoad
 	} from '@dcloudio/uni-app';
 	import {
 		getFeedbackDetail,
-		submitFeedbackReply
+		getFeedbackMessages,
+		sendFeedbackMessage
 	} from '../../config/api/feedback.js';
 	import {
 		useI18n
@@ -97,12 +110,15 @@

 	// 初始化状态
 	const detail = ref({});
-	const replyList = ref([]);
-	const userReplyList = ref([]);
 	const allReplies = ref([]);
 	const replyContent = ref('');
 	const feedbackId = ref('');

+	const canSendMessage = computed(() => {
+		const status = detail.value?.status
+		return ['pending', 'in_progress'].includes(status)
+	})
+
 	// 页面加载
 	onLoad(async (options) => {
 		if (options.id) {
@@ -119,33 +135,49 @@
 		}
 	});

-	// 加载详情
-	const loadDetail = async () => {
-		try {
-			uni.showLoading({
-				title: $t('common.loading')
-			});
-
-			const res = await getFeedbackDetail(feedbackId.value);
-			if (res.code === 200 && res.data) {
-				detail.value = res.data;
-
-				// 分离平台回复和用户回复
-				const replies = res.data.replies || res.data.replyList || [];
-				replyList.value = replies.filter(reply => reply.replyType === 'platform' || reply.isPlatform);
-				userReplyList.value = replies.filter(reply => reply.replyType === 'user' || !reply.isPlatform);
-				
-				// 合并所有回复并按时间排序
-				allReplies.value = replies
-					.map(reply => ({
-						...reply,
-						isPlatform: reply.replyType === 'platform' || reply.isPlatform === true
+	const normalizeMessages = (messages = []) => {
+		return (messages || [])
+			.map(message => ({
+				...message,
+				isPlatform: message.senderType === 'staff' || message.senderType === 'platform' || message.isPlatform === true
 			}))
 			.sort((a, b) => {
 				const timeA = new Date(a.createTime || 0).getTime();
 				const timeB = new Date(b.createTime || 0).getTime();
 				return timeA - timeB;
 			});
+	}
+
+	const loadMessages = async (initialMessages) => {
+		try {
+			if (Array.isArray(initialMessages)) {
+				allReplies.value = normalizeMessages(initialMessages);
+				return;
+			}
+			if (!feedbackId.value) return;
+			const res = await getFeedbackMessages(feedbackId.value);
+			if (res.code === 200) {
+				allReplies.value = normalizeMessages(res.data || []);
+			}
+		} catch (error) {
+			console.error('获取对话消息失败:', error);
+		}
+	}
+
+	// 加载详情
+	const loadDetail = async (options = {}) => {
+		const shouldShowLoading = options.showLoading !== false;
+		try {
+			if (shouldShowLoading) {
+				uni.showLoading({
+					title: $t('common.loading')
+				});
+			}
+
+			const res = await getFeedbackDetail(feedbackId.value);
+			if (res.code === 200 && res.data) {
+				detail.value = res.data;
+				await loadMessages(res.data.messages);
 			} else {
 				uni.showToast({
 					title: res.msg || $t('feedback.getDetailFailed'),
@@ -165,8 +197,10 @@
 				uni.navigateBack();
 			}, 1500);
 		} finally {
+			if (shouldShowLoading) {
 				uni.hideLoading();
 			}
+		}
 	};

 	// 提交回复
@@ -184,8 +218,7 @@
 				title: $t('common.submitting')
 			});

-			const res = await submitFeedbackReply({
-				feedbackId: feedbackId.value,
+			const res = await sendFeedbackMessage(feedbackId.value, {
 				content: replyContent.value.trim()
 			});

@@ -195,8 +228,10 @@
 					icon: 'success'
 				});
 				replyContent.value = '';
-				// 重新加载详情
-				await loadDetail();
+				// 重新加载详情和对话
+				await loadDetail({
+					showLoading: false
+				});
 			} else {
 				uni.showToast({
 					title: res.msg || $t('feedback.replyFailed'),
@@ -217,9 +252,9 @@
 	// 获取状态文本
 	const getStatusText = (status) => {
 		const statusMap = {
-			'processing': $t('feedback.processing'),
-			'completed': $t('feedback.completed'),
-			'pending': $t('feedback.pending')
+			'pending': $t('feedback.pending'),
+			'in_progress': $t('feedback.processing'),
+			'resolved': $t('feedback.completed')
 		};
 		return statusMap[status] || $t('feedback.pending');
 	};
@@ -227,9 +262,9 @@
 	// 获取状态样式类
 	const getStatusClass = (status) => {
 		const classMap = {
-			'processing': 'status-processing',
-			'completed': 'status-completed',
-			'pending': 'status-pending'
+			'pending': 'status-pending',
+			'in_progress': 'status-processing',
+			'resolved': 'status-completed'
 		};
 		return classMap[status] || 'status-pending';
 	};
@@ -270,14 +305,17 @@

 	// 获取图片列表（支持字符串或数组）
 	const getImageList = (item) => {
-		if (!item || !item.picturePath) return [];
-		if (Array.isArray(item.picturePath)) return item.picturePath;
-		if (typeof item.picturePath === 'string') {
-			// 如果是逗号分隔的字符串，拆分为数组
-			if (item.picturePath.includes(',')) {
-				return item.picturePath.split(',').filter(img => img.trim());
+		if (!item) return [];
+		const pictureSource = item.pictureUrls ?? item.picturePath;
+		if (!pictureSource) return [];
+		if (Array.isArray(pictureSource)) {
+			return pictureSource.filter(img => !!img);
 		}
-			return [item.picturePath];
+		if (typeof pictureSource === 'string') {
+			if (pictureSource.includes(',')) {
+				return pictureSource.split(',').map(img => img.trim()).filter(img => img);
+			}
+			return pictureSource.trim() ? [pictureSource.trim()] : [];
 		}
 		return [];
 	};
@@ -362,6 +400,17 @@
 				}
 			}

+			// 标题
+			.title-section {
+				margin-bottom: 16rpx;
+
+				.title-text {
+					font-size: 32rpx;
+					font-weight: 600;
+					color: #111;
+				}
+			}
+
 			// 问题描述
 			.content-section {
 				margin-bottom: 20rpx;
@@ -374,6 +423,28 @@
 				}
 			}

+			// 联系方式
+			.contact-section {
+				display: flex;
+				align-items: center;
+				margin-bottom: 20rpx;
+				padding: 16rpx;
+				background: #fafafa;
+				border-radius: 12rpx;
+
+				.contact-label {
+					font-size: 24rpx;
+					color: #999;
+					margin-right: 16rpx;
+				}
+
+				.contact-value {
+					font-size: 28rpx;
+					color: #333;
+					font-weight: 500;
+				}
+			}
+
 			// 图片区域
 			.image-section {
 				margin-bottom: 20rpx;
@@ -71,15 +71,11 @@
 		onLoad
 	} from "@dcloudio/uni-app"
 	import {
-		URL,
-		appid
-	} from '../../config/url'
+		addUserFeedback
+	} from '../../config/api/feedback'
 	import {
 		uploadOssResource
 	} from '../../config/api/user'
-	import {
-		addUserFeedback
-	} from '../../config/api/feedback'
 	import {
 		useI18n
 	} from '@/utils/i18n.js'
@@ -113,7 +109,6 @@
 	const description = ref('')
 	const images = ref([])
 	const contact = ref('')
-	const apiUrl = URL

 	// 方法
 	const selectType = (index) => {
@@ -124,29 +119,10 @@
 	const chooseImage = () => {
 		uni.chooseImage({
 			count: 3 - images.value.length,
-			success: async (res) => {
-				console.log(res);
+			success: (res) => {
+				// 直接保存本地路径，不上传
 				const toUpload = res.tempFilePaths || []
-				for (const localPath of toUpload) {
-					// 先追加本地预览，再上传并替换为远程URL
-					images.value.push(localPath)
-					try {
-						const remoteUrl = await uploadOssResource(localPath)
-						const idx = images.value.indexOf(localPath)
-						if (idx !== -1) {
-							images.value.splice(idx, 1, remoteUrl)
-						}
-					} catch (e) {
-						const idx = images.value.indexOf(localPath)
-						if (idx !== -1) {
-							images.value.splice(idx, 1)
-						}
-						uni.showToast({
-							title: '图片上传失败',
-							icon: 'none'
-						})
-					}
-				}
+				images.value.push(...toUpload)
 			}
 		})
 	}
@@ -187,29 +163,47 @@
 			paramsType.value = 'suggestion'
 		}

+		try {
+			// 显示上传进度
+			uni.showLoading({
+				title: $t('feedback.uploading') || '上传中...',
+				mask: true
+			})
+
+			// 先逐步上传所有文件到OSS
+			const files = []
+			if (images.value.length > 0) {
+				for (let i = 0; i < images.value.length; i++) {
+					const filePath = images.value[i]
+					try {
+						const remoteUrl = await uploadOssResource(filePath)
+						files.push(remoteUrl)
+					} catch (err) {
+						console.error(`文件 ${i + 1} 上传失败:`, err)
+						uni.hideLoading()
+						uni.showToast({
+							title: $t('feedback.imageUploadFailed'),
+							icon: 'none'
+						})
+						return
+					}
+				}
+			}
+
 			// 构建反馈数据
 			const feedbackData = {
 				type: paramsType.value,
 				content: description.value,
 				phone: contact.value,
-			picturePath: images.value[0]
+				files: files
 			}

-		uni.request({
-			url: `${apiUrl}/app/feedback/add`,
-			method: 'POST',
-			data: feedbackData,
-			header: {
-				'Content-Type': 'application/json',
-				'appid': appid,
-				'Authorization': 'Bearer ' + uni.getStorageSync('token'),
-				'Clientid': uni.getStorageSync('client_id')
-			},
-			dataType: 'json',
-			success: (res) => {
-				// 兼容后端返回 { code: 200 } 或 HTTP 200 情况
-				if ((res.statusCode === 200) && ((res.data && res.data.code === 200) || res.data ===
-						true || res.data?.success === true)) {
+			// 调用API提交反馈（使用 hideLoading 避免重复显示loading）
+			const res = await addUserFeedback(feedbackData)
+			uni.hideLoading()
+
+			// 处理响应
+			if (res && (res.code === 200 || res === true || res?.success === true)) {
 				uni.showToast({
 					title: $t('feedback.submitSuccess'),
 					icon: 'success'
@@ -217,23 +211,21 @@
 				setTimeout(() => {
 					uni.navigateBack();
 				}, 1500);
-					return
-				}
+			} else {
 				uni.showToast({
-					title: (res.data && (res.data.msg || res.data.message)) || $t(
-						'feedback.submitFailed'),
-					icon: 'none'
-				})
-			},
-			fail: (err) => {
-				console.error('feedback request failed:', err)
-				uni.showToast({
-					title: $t('error.networkError'),
+					title: (res && (res.msg || res.message)) || $t('feedback.submitFailed'),
 					icon: 'none'
 				})
 			}
+		} catch (err) {
+			console.error('feedback submit failed:', err)
+			uni.hideLoading()
+			uni.showToast({
+				title: $t('error.networkError') || '网络错误，请重试',
+				icon: 'none'
 			})
 		}
+	}
 </script>

 <style lang="scss" scoped>
@@ -365,8 +357,8 @@
 				flex-wrap: wrap;

 				.upload-item {
-					width: 200rpx;
-					height: 200rpx;
+					width: 180rpx;
+					height: 180rpx;
 					margin-right: 20rpx;
 					margin-bottom: 20rpx;
 					position: relative;
@@ -394,8 +386,8 @@
 				}

 				.upload-btn {
-					width: 200rpx;
-					height: 200rpx;
+					width: 180rpx;
+					height: 180rpx;
 					background: #f5f5f5;
 					border-radius: 10rpx;
 					display: flex;
@@ -104,17 +104,23 @@
 			},
 			status: ''
 		},
+		{
+			get text() {
+				return $t('feedback.pending')
+			},
+			status: 'pending'
+		},
 		{
 			get text() {
 				return $t('feedback.processing')
 			},
-			status: 'processing'
+			status: 'in_progress'
 		},
 		{
 			get text() {
 				return $t('feedback.completed')
 			},
-			status: 'completed'
+			status: 'resolved'
 		}
 	]);

@@ -145,8 +151,8 @@
 			loading.value = true;
 			const status = statusTabs[currentTab.value].status;
 			const params = {
-				page: currentPage.value,
-				size: pageSize.value
+				pageNum: currentPage.value,
+				pageSize: pageSize.value
 			};
 			if (status) {
 				params.status = status;
@@ -205,9 +211,9 @@
 	// 获取状态文本
 	const getStatusText = (status) => {
 		const statusMap = {
-			'processing': $t('feedback.processing'),
-			'completed': $t('feedback.completed'),
-			'pending': $t('feedback.pending')
+			'pending': $t('feedback.pending'),
+			'in_progress': $t('feedback.processing'),
+			'resolved': $t('feedback.completed')
 		};
 		return statusMap[status] || $t('feedback.pending');
 	};
@@ -215,9 +221,9 @@
 	// 获取状态样式类
 	const getStatusClass = (status) => {
 		const classMap = {
-			'processing': 'chip-processing',
-			'completed': 'chip-completed',
-			'pending': 'chip-pending'
+			'pending': 'chip-pending',
+			'in_progress': 'chip-processing',
+			'resolved': 'chip-completed'
 		};
 		return classMap[status] || 'chip-pending';
 	};