From 64c9d933b1937c0b0ab3549e668e357644e6a9fd Mon Sep 17 00:00:00 2001
From: ISFP_T <68358856@qq.com>
Date: Fri, 28 Nov 2025 10:38:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E6=8A=95=E8=AF=89?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=B8=8E=E6=8A=95=E8=AF=89=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/api/feedback.js    |  35 +++
 locale/en-US.js           |  34 ++-
 locale/zh-CN.js           |  34 ++-
 pages.json                |  12 +
 pages/feedback/detail.vue | 574 ++++++++++++++++++++++++++++++++++++++
 pages/feedback/index.vue  |  80 +++++-
 pages/feedback/list.vue   | 487 ++++++++++++++++++++++++++++++++
 7 files changed, 1245 insertions(+), 11 deletions(-)
 create mode 100644 pages/feedback/detail.vue
 create mode 100644 pages/feedback/list.vue

diff --git a/config/api/feedback.js b/config/api/feedback.js
index 931d417..0b89f8e 100644
--- a/config/api/feedback.js
+++ b/config/api/feedback.js
@@ -10,3 +10,38 @@ export const addUserFeedback = (data) => {
 	})
 }
 
+// 获取投诉记录列表
+export const getFeedbackList = (params) => {
+	// GET请求需要将参数拼接到URL上
+	let url = '/app/feedback/list';
+	if (params) {
+		const queryString = Object.keys(params)
+			.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
+			.join('&');
+		if (queryString) {
+			url += `?${queryString}`;
+		}
+	}
+	return request({
+		url: url,
+		method: 'get',
+	})
+}
+
+// 获取投诉详情
+export const getFeedbackDetail = (id) => {
+	return request({
+		url: `/app/feedback/${id}`,
+		method: 'get',
+	})
+}
+
+// 提交投诉回复
+export const submitFeedbackReply = (data) => {
+	return request({
+		url: '/app/feedback/reply',
+		method: 'post',
+		data,
+	})
+}
+
diff --git a/locale/en-US.js b/locale/en-US.js
index a32e62d..7f9ae93 100644
--- a/locale/en-US.js
+++ b/locale/en-US.js
@@ -50,7 +50,8 @@ export default {
     operationFailed: 'Operation failed',
     refresh: 'Refresh',
     pull: 'Pull to refresh',
-    release: 'Release to refresh'
+    release: 'Release to refresh',
+    noMore: 'No more'
   },
 
   nav: {
@@ -267,7 +268,8 @@ export default {
     avatarDownloadFailed: 'Download failed',
     notLoggedIn: 'Not logged in',
     phoneNotBound: 'No phone',
-    balanceDesc: 'Available for rental'
+    balanceDesc: 'Available for rental',
+    feedbackRecord: 'Feedback Records'
   },
 
   auth: {
@@ -352,7 +354,33 @@ export default {
     deviceFault: 'Device Fault',
     chargingIssue: 'Charging',
     usageSuggestion: 'Suggestion',
-    other: 'Other'
+    other: 'Other',
+    recordList: 'Feedback Records',
+    detail: 'Feedback Detail',
+    noRecord: 'No feedback records',
+    getListFailed: 'Failed to get list',
+    getDetailFailed: 'Failed to get detail',
+    processing: 'Processing',
+    completed: 'Completed',
+    pending: 'Pending',
+    complain: 'Complain',
+    suggestion: 'Suggestion',
+    contactPhone: 'Contact Phone',
+    initialSubmit: 'Initial Submit',
+    submitTime: 'Submit Time',
+    uploadedImages: 'Uploaded Images',
+    platformReplies: 'Platform Replies',
+    userReplies: 'User Replies',
+    platform: 'Platform',
+    me: 'Me',
+    replyPlaceholder: 'Enter your reply...',
+    submitReply: 'Submit Reply',
+    replySuccess: 'Reply successful',
+    replyFailed: 'Reply failed',
+    pleaseEnterReply: 'Please enter reply content',
+    idRequired: 'Feedback ID is required',
+    viewRecords: 'View Records',
+    replyHistory: 'Reply History'
   },
 
   help: {
diff --git a/locale/zh-CN.js b/locale/zh-CN.js
index cb2c09c..0838d20 100644
--- a/locale/zh-CN.js
+++ b/locale/zh-CN.js
@@ -50,7 +50,8 @@ export default {
     operationFailed: '操作失败',
     refresh: '刷新',
     pull: '下拉刷新',
-    release: '释放刷新'
+    release: '释放刷新',
+    noMore: '没有更多了'
   },
 
   nav: {
@@ -267,7 +268,8 @@ export default {
     avatarDownloadFailed: '头像下载失败',
     notLoggedIn: '未登录',
     phoneNotBound: '未绑定手机号',
-    balanceDesc: '可用于租借设备'
+    balanceDesc: '可用于租借设备',
+    feedbackRecord: '投诉记录'
   },
 
   auth: {
@@ -352,7 +354,33 @@ export default {
     deviceFault: '设备故障',
     chargingIssue: '收费问题',
     usageSuggestion: '使用建议',
-    other: '其他'
+    other: '其他',
+    recordList: '投诉记录',
+    detail: '投诉详情',
+    noRecord: '暂无投诉记录',
+    getListFailed: '获取列表失败',
+    getDetailFailed: '获取详情失败',
+    processing: '处理中',
+    completed: '已完成',
+    pending: '待处理',
+    complain: '投诉',
+    suggestion: '建议',
+    contactPhone: '联系电话',
+    initialSubmit: '首次提交',
+    submitTime: '提交时间',
+    uploadedImages: '上传图片',
+    platformReplies: '平台回复',
+    userReplies: '用户回复',
+    platform: '平台客服',
+    me: '我',
+    replyPlaceholder: '请输入您的回复...',
+    submitReply: '提交回复',
+    replySuccess: '回复成功',
+    replyFailed: '回复失败',
+    pleaseEnterReply: '请输入回复内容',
+    idRequired: '投诉ID不能为空',
+    viewRecords: '查看记录',
+    replyHistory: '回复记录'
   },
 
   help: {
diff --git a/pages.json b/pages.json
index 80a26be..b5700e1 100644
--- a/pages.json
+++ b/pages.json
@@ -129,6 +129,18 @@
 				"navigationBarTitleText": ""
 			}
 		},
+		{
+			"path": "pages/feedback/list",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/feedback/detail",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
 		{
 			"path": "pages/help/index",
 			"style": {
diff --git a/pages/feedback/detail.vue b/pages/feedback/detail.vue
new file mode 100644
index 0000000..6248f88
--- /dev/null
+++ b/pages/feedback/detail.vue
@@ -0,0 +1,574 @@
+<template>
+	<view class="feedback-detail-container">
+		<!-- 投诉详情卡片 -->
+		<view class="detail-card">
+			<!-- 第一行：问题类型和状态 -->
+			<view class="card-header">
+				<view class="type-badge" :class="getTypeClass(detail.type)">
+					{{ getTypeText(detail.type) }}
+				</view>
+				<view class="status-badge" :class="getStatusClass(detail.status)">
+					{{ getStatusText(detail.status) }}
+				</view>
+			</view>
+
+			<!-- 问题描述 -->
+			<view class="content-section">
+				<view class="content-text">{{ detail.content || '-' }}</view>
+			</view>
+
+			<!-- 上传图片 -->
+			<view class="image-section" v-if="getImageList(detail).length > 0">
+				<view class="image-list">
+					<image v-for="(img, index) in getImageList(detail)" :key="index" :src="img" mode="aspectFill" class="detail-image"
+						@click="previewImage(img, index)"></image>
+				</view>
+			</view>
+
+			<!-- 提交时间 -->
+			<view class="time-section">
+				<text class="time-text">{{ formatTime(detail.createTime) }}</text>
+			</view>
+		</view>
+
+		<!-- 回复列表（合并平台和用户回复，按时间排序） -->
+		<view class="reply-section" v-if="allReplies.length > 0">
+			<view class="section-divider">
+				<view class="divider-line"></view>
+				<text class="divider-text">{{ $t('feedback.replyHistory') }}</text>
+				<view class="divider-line"></view>
+			</view>
+			<view class="reply-list">
+				<view class="reply-item" v-for="(reply, index) in allReplies" :key="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-time">{{ formatTime(reply.createTime) }}</text>
+						</view>
+						<view class="reply-content">{{ reply.content || '-' }}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部输入框 -->
+		<view class="bottom-input-bar" v-if="detail.status === 'processing'">
+			<view class="input-wrapper">
+				<textarea class="reply-input" v-model="replyContent" :placeholder="$t('feedback.replyPlaceholder')"
+					maxlength="500" :auto-height="true"></textarea>
+			</view>
+			<view class="submit-btn" @click="submitReply" :class="{ disabled: !replyContent.trim() }">
+				{{ $t('feedback.submitReply') }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		getFeedbackDetail,
+		submitFeedbackReply
+	} from '../../config/api/feedback.js';
+	import {
+		useI18n
+	} from '@/utils/i18n.js'
+
+	const {
+		t: $t
+	} = useI18n()
+
+	// 设置页面标题
+	onMounted(() => {
+		uni.setNavigationBarTitle({
+			title: $t('feedback.detail')
+		})
+	})
+
+	// 初始化状态
+	const detail = ref({});
+	const replyList = ref([]);
+	const userReplyList = ref([]);
+	const allReplies = ref([]);
+	const replyContent = ref('');
+	const feedbackId = ref('');
+
+	// 页面加载
+	onLoad(async (options) => {
+		if (options.id) {
+			feedbackId.value = options.id;
+			await loadDetail();
+		} else {
+			uni.showToast({
+				title: $t('feedback.idRequired'),
+				icon: 'none'
+			});
+			setTimeout(() => {
+				uni.navigateBack();
+			}, 1500);
+		}
+	});
+
+	// 加载详情
+	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
+					}))
+					.sort((a, b) => {
+						const timeA = new Date(a.createTime || 0).getTime();
+						const timeB = new Date(b.createTime || 0).getTime();
+						return timeA - timeB;
+					});
+			} else {
+				uni.showToast({
+					title: res.msg || $t('feedback.getDetailFailed'),
+					icon: 'none'
+				});
+				setTimeout(() => {
+					uni.navigateBack();
+				}, 1500);
+			}
+		} catch (error) {
+			console.error('获取投诉详情失败:', error);
+			uni.showToast({
+				title: $t('feedback.getDetailFailed'),
+				icon: 'none'
+			});
+			setTimeout(() => {
+				uni.navigateBack();
+			}, 1500);
+		} finally {
+			uni.hideLoading();
+		}
+	};
+
+	// 提交回复
+	const submitReply = async () => {
+		if (!replyContent.value.trim()) {
+			uni.showToast({
+				title: $t('feedback.pleaseEnterReply'),
+				icon: 'none'
+			});
+			return;
+		}
+
+		try {
+			uni.showLoading({
+				title: $t('common.submitting')
+			});
+
+			const res = await submitFeedbackReply({
+				feedbackId: feedbackId.value,
+				content: replyContent.value.trim()
+			});
+
+			if (res.code === 200) {
+				uni.showToast({
+					title: $t('feedback.replySuccess'),
+					icon: 'success'
+				});
+				replyContent.value = '';
+				// 重新加载详情
+				await loadDetail();
+			} else {
+				uni.showToast({
+					title: res.msg || $t('feedback.replyFailed'),
+					icon: 'none'
+				});
+			}
+		} catch (error) {
+			console.error('提交回复失败:', error);
+			uni.showToast({
+				title: $t('feedback.replyFailed'),
+				icon: 'none'
+			});
+		} finally {
+			uni.hideLoading();
+		}
+	};
+
+	// 获取状态文本
+	const getStatusText = (status) => {
+		const statusMap = {
+			'processing': $t('feedback.processing'),
+			'completed': $t('feedback.completed'),
+			'pending': $t('feedback.pending')
+		};
+		return statusMap[status] || $t('feedback.pending');
+	};
+
+	// 获取状态样式类
+	const getStatusClass = (status) => {
+		const classMap = {
+			'processing': 'status-processing',
+			'completed': 'status-completed',
+			'pending': 'status-pending'
+		};
+		return classMap[status] || 'status-pending';
+	};
+
+	// 获取类型文本
+	const getTypeText = (type) => {
+		const typeMap = {
+			'complain': $t('feedback.complain'),
+			'suggestion': $t('feedback.suggestion')
+		};
+		return typeMap[type] || type || '-';
+	};
+
+	// 获取类型样式类
+	const getTypeClass = (type) => {
+		const classMap = {
+			'complain': 'type-complain',
+			'suggestion': 'type-suggestion'
+		};
+		return classMap[type] || 'type-default';
+	};
+
+	// 格式化时间
+	const formatTime = (timeStr) => {
+		if (!timeStr) return '-';
+		try {
+			const date = new Date(timeStr);
+			const year = date.getFullYear();
+			const month = String(date.getMonth() + 1).padStart(2, '0');
+			const day = String(date.getDate()).padStart(2, '0');
+			const hour = String(date.getHours()).padStart(2, '0');
+			const minute = String(date.getMinutes()).padStart(2, '0');
+			return `${year}-${month}-${day} ${hour}:${minute}`;
+		} catch (e) {
+			return timeStr;
+		}
+	};
+
+	// 获取图片列表（支持字符串或数组）
+	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());
+			}
+			return [item.picturePath];
+		}
+		return [];
+	};
+
+	// 预览图片
+	const previewImage = (url, index) => {
+		const imageList = getImageList(detail.value);
+		uni.previewImage({
+			urls: imageList,
+			current: index !== undefined ? index : 0
+		});
+	};
+</script>
+
+<style lang="scss" scoped>
+	.feedback-detail-container {
+		min-height: 100vh;
+		background: #f5f5f5;
+		padding: 20rpx;
+		padding-bottom: 200rpx;
+		box-sizing: border-box;
+
+		// 详情卡片
+		.detail-card {
+			background: #fff;
+			border-radius: 16rpx;
+			padding: 24rpx;
+			margin-bottom: 20rpx;
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+
+			// 第一行：问题类型和状态
+			.card-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 24rpx;
+				padding-bottom: 20rpx;
+				border-bottom: 1rpx solid #f0f0f0;
+
+				.type-badge {
+					padding: 6rpx 16rpx;
+					border-radius: 6rpx;
+					font-size: 24rpx;
+					font-weight: 500;
+
+					&.type-complain {
+						background: #fff3e0;
+						color: #ff9800;
+					}
+
+					&.type-suggestion {
+						background: #e8f5e9;
+						color: #4caf50;
+					}
+
+					&.type-default {
+						background: #f5f5f5;
+						color: #666;
+					}
+				}
+
+				.status-badge {
+					padding: 6rpx 16rpx;
+					border-radius: 6rpx;
+					font-size: 24rpx;
+					font-weight: 500;
+
+					&.status-processing {
+						background: #fff3e0;
+						color: #ff9800;
+					}
+
+					&.status-completed {
+						background: #e8f5e9;
+						color: #4caf50;
+					}
+
+					&.status-pending {
+						background: #f5f5f5;
+						color: #999;
+					}
+				}
+			}
+
+			// 问题描述
+			.content-section {
+				margin-bottom: 20rpx;
+
+				.content-text {
+					font-size: 28rpx;
+					color: #333;
+					line-height: 1.8;
+					word-break: break-all;
+				}
+			}
+
+			// 图片区域
+			.image-section {
+				margin-bottom: 20rpx;
+
+				.image-list {
+					display: flex;
+					flex-wrap: wrap;
+					gap: 12rpx;
+
+					.detail-image {
+						width: 200rpx;
+						height: 200rpx;
+						border-radius: 8rpx;
+						background: #f5f5f5;
+					}
+				}
+			}
+
+			// 提交时间
+			.time-section {
+				padding-top: 16rpx;
+				border-top: 1rpx solid #f0f0f0;
+
+				.time-text {
+					font-size: 24rpx;
+					color: #999;
+				}
+			}
+		}
+
+		// 回复区域
+		.reply-section {
+			margin-bottom: 30rpx;
+
+			.section-divider {
+				display: flex;
+				align-items: center;
+				margin: 30rpx 0 20rpx 0;
+
+				.divider-line {
+					flex: 1;
+					height: 1rpx;
+					background: #e0e0e0;
+				}
+
+				.divider-text {
+					padding: 0 20rpx;
+					font-size: 24rpx;
+					color: #999;
+				}
+			}
+
+			.reply-list {
+				.reply-item {
+					display: flex;
+					margin-bottom: 24rpx;
+
+					&.reply-platform {
+						.reply-content-wrapper {
+							background: #f5f5f5;
+						}
+					}
+
+					&.reply-user {
+						flex-direction: row-reverse;
+
+						.reply-content-wrapper {
+							background: #07c160;
+							color: #fff;
+							margin-right: 16rpx;
+							margin-left: 0;
+
+							.reply-name-time {
+								.reply-name,
+								.reply-time {
+									color: rgba(255, 255, 255, 0.9);
+								}
+							}
+
+							.reply-content {
+								color: #fff;
+							}
+						}
+					}
+
+					.reply-avatar {
+						width: 56rpx;
+						height: 56rpx;
+						border-radius: 50%;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-shrink: 0;
+
+						&.avatar-platform {
+							background: #ff9800;
+						}
+
+						&.avatar-user {
+							background: #07c160;
+						}
+
+						.avatar-text {
+							font-size: 22rpx;
+							color: #fff;
+							font-weight: 500;
+						}
+					}
+
+					.reply-content-wrapper {
+						flex: 1;
+						background: #f5f5f5;
+						border-radius: 12rpx;
+						padding: 16rpx 20rpx;
+						margin-left: 16rpx;
+						max-width: calc(100% - 72rpx);
+
+						.reply-name-time {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							margin-bottom: 8rpx;
+
+							.reply-name {
+								font-size: 24rpx;
+								color: #666;
+								font-weight: 500;
+							}
+
+							.reply-time {
+								font-size: 22rpx;
+								color: #999;
+							}
+						}
+
+						.reply-content {
+							font-size: 28rpx;
+							color: #333;
+							line-height: 1.6;
+							word-break: break-all;
+						}
+					}
+				}
+			}
+		}
+
+		// 底部输入栏
+		.bottom-input-bar {
+			position: fixed;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			padding: 20rpx 30rpx;
+			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+			background: #fff;
+			box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
+			z-index: 10;
+			display: flex;
+			align-items: flex-end;
+			gap: 20rpx;
+
+			.input-wrapper {
+				flex: 1;
+				background: #f5f5f5;
+				border-radius: 20rpx;
+				padding: 16rpx 20rpx;
+				max-height: 200rpx;
+
+				.reply-input {
+					width: 100%;
+					font-size: 28rpx;
+					color: #333;
+					min-height: 40rpx;
+					max-height: 200rpx;
+				}
+			}
+
+			.submit-btn {
+				padding: 16rpx 40rpx;
+				background: #07c160;
+				color: #fff;
+				border-radius: 20rpx;
+				font-size: 28rpx;
+				font-weight: 500;
+				white-space: nowrap;
+
+				&.disabled {
+					background: #ccc;
+					opacity: 0.6;
+				}
+
+				&:active:not(.disabled) {
+					opacity: 0.8;
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages/feedback/index.vue b/pages/feedback/index.vue
index dd5e521..1762f5d 100644
--- a/pages/feedback/index.vue
+++ b/pages/feedback/index.vue
@@ -1,5 +1,17 @@
 <template>
 	<view class="feedback-container">
+		<!-- 投诉记录入口 -->
+		<view class="record-entry" @click="navigateToRecord">
+			<view class="entry-left">
+				<image class="entry-icon" src="/static/complaint.png" mode="aspectFit"></image>
+				<text class="entry-text">{{ $t('feedback.recordList') }}</text>
+			</view>
+			<view class="entry-right">
+				<text class="entry-desc">{{ $t('feedback.viewRecords') }}</text>
+				<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
+			</view>
+		</view>
+
 		<!-- <form> -->
 		<!-- 问题类型选择 -->
 		<view class="type-section">
@@ -75,6 +87,13 @@
 		t: $t
 	} = useI18n()
 
+	// 跳转到投诉记录列表
+	const navigateToRecord = () => {
+		uni.navigateTo({
+			url: '/pages/feedback/list'
+		})
+	}
+
 	onMounted(() => {
 		uni.setNavigationBarTitle({
 			title: $t('feedback.title')
@@ -220,9 +239,54 @@
 <style lang="scss" scoped>
 	.feedback-container {
 		min-height: 100vh;
-		background: #f8f8f8;
+		background: #f7f8fa;
 		padding: 30rpx;
 
+		// 投诉记录入口
+		.record-entry {
+			background: #fff;
+			border-radius: 20rpx;
+			padding: 28rpx 30rpx;
+			margin-bottom: 20rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+			.entry-left {
+				display: flex;
+				align-items: center;
+				flex: 1;
+
+				.entry-icon {
+					width: 40rpx;
+					height: 40rpx;
+					margin-right: 16rpx;
+				}
+
+				.entry-text {
+					font-size: 30rpx;
+					color: #333;
+					font-weight: 500;
+				}
+			}
+
+			.entry-right {
+				display: flex;
+				align-items: center;
+				gap: 8rpx;
+
+				.entry-desc {
+					font-size: 24rpx;
+					color: #999;
+				}
+			}
+
+			&:active {
+				opacity: 0.8;
+			}
+		}
+
 		.section-title {
 			font-size: 30rpx;
 			color: #333;
@@ -235,6 +299,7 @@
 			border-radius: 20rpx;
 			padding: 30rpx;
 			margin-bottom: 20rpx;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 
 			.type-grid {
 				display: flex;
@@ -256,7 +321,7 @@
 
 					&.active {
 						background: #E8F5EE;
-						color: #3EAB64;
+						color: #07c160;
 					}
 				}
 			}
@@ -267,6 +332,7 @@
 			border-radius: 20rpx;
 			padding: 30rpx;
 			margin-bottom: 20rpx;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 
 			.description-input {
 				width: 100%;
@@ -292,6 +358,7 @@
 			border-radius: 20rpx;
 			padding: 30rpx;
 			margin-bottom: 20rpx;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 
 			.upload-grid {
 				display: flex;
@@ -354,7 +421,8 @@
 			background: #fff;
 			border-radius: 20rpx;
 			padding: 30rpx;
-			margin-bottom: 40rpx;
+			margin-bottom: 20rpx;
+			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 
 			.contact-input {
 				width: 100%;
@@ -369,12 +437,12 @@
 		}
 
 		.submit-section {
-			padding: 0 40rpx;
+			padding: 20rpx 0 40rpx 0;
 
 			.submit-btn {
 				width: 100%;
 				height: 88rpx;
-				background: #3EAB64;
+				background: #07c160;
 				color: #fff;
 				border-radius: 44rpx;
 				font-size: 32rpx;
@@ -382,8 +450,10 @@
 				display: flex;
 				align-items: center;
 				justify-content: center;
+				box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
 
 				&:active {
+					opacity: 0.8;
 					transform: scale(0.98);
 				}
 			}
diff --git a/pages/feedback/list.vue b/pages/feedback/list.vue
new file mode 100644
index 0000000..3da63e4
--- /dev/null
+++ b/pages/feedback/list.vue
@@ -0,0 +1,487 @@
+<template>
+	<view class="feedback-list-container">
+		<!-- 状态切换 -->
+		<view class="status-tabs">
+			<view v-for="(tab, index) in statusTabs" :key="index" class="tab-item"
+				:class="{ active: currentTab === index }" @click="switchTab(index)">
+				{{ tab.text }}
+			</view>
+		</view>
+
+		<!-- 投诉列表 -->
+		<scroll-view class="feedback-list" scroll-y @scrolltolower="loadMore" :refresher-enabled="true"
+			:refresher-triggered="refreshing" @refresherrefresh="onRefresh">
+			<view class="empty-state" v-if="feedbackList.length === 0 && !loading">
+				<view class="empty-icon">
+					<image src="/static/suggess.png" mode="aspectFill" class="empty-icon"></image>
+				</view>
+				<text class="empty-text">{{ $t('feedback.noRecord') }}</text>
+			</view>
+
+			<view class="feedback-item" v-for="(item, index) in feedbackList" :key="index"
+				@click="navigateToDetail(item)">
+				<view class="item-header">
+					<view class="header-left">
+						<view class="status-chip" :class="getStatusClass(item.status)">
+							{{ getStatusText(item.status) }}
+						</view>
+						<view class="type-text">{{ getTypeText(item.type) }}</view>
+					</view>
+					<view class="header-right">
+						<text class="time-text">{{ formatTime(item.createTime) }}</text>
+					</view>
+				</view>
+
+				<view class="item-content">
+					<view class="content-text">{{ item.content || '-' }}</view>
+					<view class="content-images" v-if="getImageList(item).length > 0">
+						<image v-for="(img, imgIndex) in getImageList(item)" :key="imgIndex" :src="img" mode="aspectFill" class="content-image"></image>
+					</view>
+				</view>
+
+				<view class="item-footer">
+					<view class="footer-left">
+						<text class="phone-text">{{ $t('feedback.contactPhone') }}：{{ item.phone || '-' }}</text>
+					</view>
+					<view class="footer-right">
+						<uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
+					</view>
+				</view>
+			</view>
+
+			<!-- 加载更多 -->
+			<view class="load-more" v-if="hasMore && feedbackList.length > 0">
+				<text class="load-more-text">{{ $t('common.loading') }}</text>
+			</view>
+			<view class="no-more" v-if="!hasMore && feedbackList.length > 0">
+				<text class="no-more-text">{{ $t('common.noMore') }}</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		onMounted
+	} from 'vue';
+	import {
+		onLoad,
+		onShow
+	} from '@dcloudio/uni-app';
+	import {
+		getFeedbackList
+	} from '../../config/api/feedback.js';
+	import {
+		useI18n
+	} from '@/utils/i18n.js'
+
+	const {
+		t: $t
+	} = useI18n()
+
+	// 设置页面标题
+	onMounted(() => {
+		uni.setNavigationBarTitle({
+			title: $t('feedback.recordList')
+		})
+	})
+
+	// 初始化状态
+	const currentTab = ref(0);
+	const feedbackList = ref([]);
+	const loading = ref(false);
+	const refreshing = ref(false);
+	const hasMore = ref(true);
+	const currentPage = ref(1);
+	const pageSize = ref(10);
+
+	// 状态标签
+	const statusTabs = reactive([{
+			get text() {
+				return $t('common.all')
+			},
+			status: ''
+		},
+		{
+			get text() {
+				return $t('feedback.processing')
+			},
+			status: 'processing'
+		},
+		{
+			get text() {
+				return $t('feedback.completed')
+			},
+			status: 'completed'
+		}
+	]);
+
+	// 页面加载
+	onLoad(async () => {
+		await loadFeedbackList();
+	});
+
+	// 页面显示时刷新
+	onShow(async () => {
+		// 可以在这里刷新列表
+	});
+
+	// 切换标签
+	const switchTab = async (index) => {
+		currentTab.value = index;
+		currentPage.value = 1;
+		feedbackList.value = [];
+		hasMore.value = true;
+		await loadFeedbackList();
+	};
+
+	// 加载投诉列表
+	const loadFeedbackList = async (isLoadMore = false) => {
+		if (loading.value) return;
+
+		try {
+			loading.value = true;
+			const status = statusTabs[currentTab.value].status;
+			const params = {
+				page: currentPage.value,
+				size: pageSize.value
+			};
+			if (status) {
+				params.status = status;
+			}
+
+			const res = await getFeedbackList(params);
+			if (res.code === 200 && res.data) {
+				const records = res.data.records || res.data.list || [];
+				if (isLoadMore) {
+					feedbackList.value = [...feedbackList.value, ...records];
+				} else {
+					feedbackList.value = records;
+				}
+
+				// 判断是否还有更多数据
+				const total = res.data.total || 0;
+				hasMore.value = feedbackList.value.length < total;
+
+				if (hasMore.value) {
+					currentPage.value += 1;
+				}
+			} else {
+				uni.showToast({
+					title: res.msg || $t('feedback.getListFailed'),
+					icon: 'none'
+				});
+			}
+		} catch (error) {
+			console.error('获取投诉列表失败:', error);
+			uni.showToast({
+				title: $t('feedback.getListFailed'),
+				icon: 'none'
+			});
+		} finally {
+			loading.value = false;
+			refreshing.value = false;
+		}
+	};
+
+	// 加载更多
+	const loadMore = () => {
+		if (hasMore.value && !loading.value) {
+			loadFeedbackList(true);
+		}
+	};
+
+	// 下拉刷新
+	const onRefresh = () => {
+		refreshing.value = true;
+		currentPage.value = 1;
+		feedbackList.value = [];
+		hasMore.value = true;
+		loadFeedbackList();
+	};
+
+	// 获取状态文本
+	const getStatusText = (status) => {
+		const statusMap = {
+			'processing': $t('feedback.processing'),
+			'completed': $t('feedback.completed'),
+			'pending': $t('feedback.pending')
+		};
+		return statusMap[status] || $t('feedback.pending');
+	};
+
+	// 获取状态样式类
+	const getStatusClass = (status) => {
+		const classMap = {
+			'processing': 'chip-processing',
+			'completed': 'chip-completed',
+			'pending': 'chip-pending'
+		};
+		return classMap[status] || 'chip-pending';
+	};
+
+	// 获取类型文本
+	const getTypeText = (type) => {
+		const typeMap = {
+			'complain': $t('feedback.complain'),
+			'suggestion': $t('feedback.suggestion')
+		};
+		return typeMap[type] || type || '-';
+	};
+
+	// 格式化时间
+	const formatTime = (timeStr) => {
+		if (!timeStr) return '-';
+		try {
+			const date = new Date(timeStr);
+			const year = date.getFullYear();
+			const month = String(date.getMonth() + 1).padStart(2, '0');
+			const day = String(date.getDate()).padStart(2, '0');
+			const hour = String(date.getHours()).padStart(2, '0');
+			const minute = String(date.getMinutes()).padStart(2, '0');
+			return `${year}-${month}-${day} ${hour}:${minute}`;
+		} catch (e) {
+			return timeStr;
+		}
+	};
+
+	// 获取图片列表（支持字符串或数组）
+	const getImageList = (item) => {
+		if (!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());
+			}
+			return [item.picturePath];
+		}
+		return [];
+	};
+
+	// 跳转到详情页
+	const navigateToDetail = (item) => {
+		uni.navigateTo({
+			url: `/pages/feedback/detail?id=${item.id || item.feedbackId}`
+		});
+	};
+</script>
+
+<style lang="scss" scoped>
+	.feedback-list-container {
+		min-height: 100vh;
+		background: #f7f8fa;
+		padding-bottom: 30rpx;
+
+		// 状态标签栏
+		.status-tabs {
+			display: flex;
+			background: #fff;
+			padding: 0 20rpx;
+			position: sticky;
+			top: 0;
+			z-index: 10;
+			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+			.tab-item {
+				flex: 1;
+				height: 90rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 28rpx;
+				color: #666;
+				position: relative;
+
+				&.active {
+					color: #07c160;
+					font-weight: 500;
+
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: 0;
+						left: 50%;
+						transform: translateX(-50%);
+						width: 40rpx;
+						height: 4rpx;
+						background: #07c160;
+						border-radius: 2rpx;
+					}
+				}
+			}
+		}
+
+		// 投诉列表
+		.feedback-list {
+			height: calc(100vh - 90rpx);
+			padding: 20rpx;
+			box-sizing: border-box;
+
+			// 投诉项
+			.feedback-item {
+				width: 100%;
+				box-sizing: border-box;
+				background: #fff;
+				border-radius: 16rpx;
+				margin-bottom: 20rpx;
+				overflow: hidden;
+				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+				// 头部
+				.item-header {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 24rpx;
+					border-bottom: 1rpx solid #f0f0f0;
+
+					.header-left {
+						display: flex;
+						align-items: center;
+						flex: 1;
+						min-width: 0;
+						margin-right: 16rpx;
+
+						.status-chip {
+							padding: 6rpx 16rpx;
+							border-radius: 8rpx;
+							font-size: 24rpx;
+							margin-right: 16rpx;
+							flex-shrink: 0;
+
+							&.chip-processing {
+								background: rgba(255, 152, 0, 0.12);
+								color: #FF9800;
+							}
+
+							&.chip-completed {
+								background: rgba(76, 175, 80, 0.12);
+								color: #4CAF50;
+							}
+
+							&.chip-pending {
+								background: rgba(158, 158, 158, 0.12);
+								color: #9E9E9E;
+							}
+						}
+
+						.type-text {
+							font-size: 28rpx;
+							color: #333;
+							font-weight: 500;
+							flex: 1;
+							min-width: 0;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+					}
+
+					.header-right {
+						flex-shrink: 0;
+						
+						.time-text {
+							font-size: 24rpx;
+							color: #999;
+							white-space: nowrap;
+						}
+					}
+				}
+
+				// 内容
+				.item-content {
+					padding: 24rpx;
+
+					.content-text {
+						font-size: 28rpx;
+						color: #333;
+						line-height: 1.6;
+						margin-bottom: 16rpx;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+						line-clamp: 2;
+						overflow: hidden;
+					}
+
+					.content-images {
+						display: flex;
+						flex-wrap: wrap;
+						gap: 16rpx;
+
+						.content-image {
+							width: 160rpx;
+							height: 160rpx;
+							border-radius: 8rpx;
+							background: #f5f5f5;
+						}
+					}
+				}
+
+				// 底部
+				.item-footer {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 20rpx 24rpx;
+					background: #fafafa;
+					border-top: 1rpx solid #f0f0f0;
+
+					.footer-left {
+						flex: 1;
+						min-width: 0;
+						margin-right: 16rpx;
+
+						.phone-text {
+							font-size: 24rpx;
+							color: #999;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+					}
+
+					.footer-right {
+						display: flex;
+						align-items: center;
+						flex-shrink: 0;
+					}
+				}
+			}
+
+			// 空状态
+			.empty-state {
+				padding: 100rpx 0;
+				text-align: center;
+
+				.empty-icon {
+					width: 180rpx;
+					height: 180rpx;
+					margin: 0 auto 30rpx;
+					opacity: 0.5;
+				}
+
+				.empty-text {
+					font-size: 28rpx;
+					color: #999;
+				}
+			}
+
+			// 加载更多
+			.load-more,
+			.no-more {
+				padding: 30rpx 0;
+				text-align: center;
+
+				.load-more-text,
+				.no-more-text {
+					font-size: 24rpx;
+					color: #999;
+				}
+			}
+		}
+	}
+</style>