feat:新增投诉列表与投诉详情

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);
 				}
 			}