From e09f1371d65c406a4d445444c17e988a1aa964e6 Mon Sep 17 00:00:00 2001
From: davy <davy@example.com>
Date: Mon, 7 Apr 2025 18:35:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96myWineReview=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2UI=E8=AE=BE=E8=AE=A1=EF=BC=9A=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E7=82=B9=E8=B5=9E=E6=95=B0=E9=87=8F=E4=BD=8D=E7=BD=AE=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=9D=E7=95=99=E4=B8=80=E4=BD=8D=E5=B0=8F=E6=95=B0=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pagesMy/myWineReview.vue | 511 +++++++++++++++++++++++++++++++--------
 1 file changed, 413 insertions(+), 98 deletions(-)

diff --git a/pagesMy/myWineReview.vue b/pagesMy/myWineReview.vue
index 8c281a0..e9b2eb8 100644
--- a/pagesMy/myWineReview.vue
+++ b/pagesMy/myWineReview.vue
@@ -1,38 +1,105 @@
 <template>
-	<view class="page-content">
-		<scroll-view v-if="myReviewList.length > 0" style="height: 100%;" scroll-y="true" @scrolltolower="changePage">
-		<view class="review-item" v-for="(item, index) in myReviewList" :key="index">
-			<view class="flex margin-bottom-sm">
-				<!-- <image src="" class="avatar"></image> -->
-				<view class="flex flex-col">
-					<text class="beerName">{{ item.userName}}</text>
-					<text class="time">{{ item.createTime.slice(0,10)}}</text>
-				</view>
+	<view class="page">
+		<!-- 排序选项 -->
+		<view class="sort-options">
+			<view 
+				class="sort-item" 
+				:class="{ active: sortType === 'time' }" 
+				@tap="changeSortType('time')"
+			>
+				<text class="cuIcon-time"></text>
+				<text>最新酒评</text>
 			</view>
-			<view class="margin-bottom flex ">
-				<text class="word-all flex-1">
-					{{ item.reviewContent }}
-				</text>
-				<image v-if="item.reviewImg" :src="item.reviewImg" style="width: 200rpx;height:200rpx;flex-shrink: 0;margin-left: 20rpx;"></image>
-			</view>
-			<view class="flex align-center justify-between">
-				<view class="flex align-center justify-start">
-					<image src="@/static/vector.png" class="icon"></image>
-					<text style="color:#5F5F63;margin-right: 40rpx;">{{ item.overallRating }}</text>
-					<!-- <image src="@/static/message.png" class="icon"></image>
-					<text style="color:#979797">(100)</text> -->
-				</view>
-
-
-				<view class="cu-btn btn" @click="delReview(item)">删除</view>
-
+			<view 
+				class="sort-item" 
+				:class="{ active: sortType === 'score' }" 
+				@tap="changeSortType('score')"
+			>
+				<text class="cuIcon-favorfill"></text>
+				<text>评分排序</text>
 			</view>
 		</view>
+
+		<!-- 评价列表 -->
+		<scroll-view 
+			v-if="myReviewList.length > 0" 
+			class="review-list" 
+			scroll-y="true" 
+			@scrolltolower="changePage"
+		>
+			<view class="review-item" v-for="(item, index) in myReviewList" :key="index">
+				<!-- 酒款信息头部 -->
+				<view class="review-header">
+					<view class="beer-info">
+						<view class="beer-meta">
+							<text class="beer-name">{{item.beerName || '未知酒款'}}</text>
+							<view class="rating-row">
+								<uni-rate 
+									:value="item.overallRating" 
+									:readonly="true"
+									:size="16"
+									:touchable="false"
+									color="#ECECEC"
+									active-color="#FEE034"
+								/>
+								<text class="score-text">{{item.overallRating.toFixed(1)}}分</text>
+								<view class="like-count">
+									<image src="/static/like.png" class="like-icon"></image>
+									<text class="count-text">{{item.reviewLike || 0}}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="review-meta">
+						<text class="review-time">{{item.createTime.slice(0,10)}}</text>
+						<view class="review-tag">我的评价</view>
+					</view>
+				</view>
+
+				<!-- 评论内容区域 -->
+				<view class="review-content">
+					<!-- 评论文本 -->
+					<view class="review-text">{{item.reviewContent}}</view>
+					
+					<!-- 底部区域：图片和删除按钮 -->
+					<view class="bottom-section">
+						<!-- 评论图片区域 -->
+						<scroll-view v-if="item.reviewImg" class="image-scroll" scroll-x="true">
+							<view class="image-container">
+								<image 
+									v-for="(img, imgIndex) in item.reviewImg.split(',')" 
+									:key="imgIndex"
+									:src="img"
+									class="review-image"
+									mode="aspectFill"
+									@tap="previewImage(item.reviewImg.split(','), imgIndex)"
+								></image>
+							</view>
+						</scroll-view>
+						
+						<!-- 操作区域 -->
+						<view class="action-section">
+							<!-- 删除按钮 -->
+							<view class="action-btn delete-btn" @click="delReview(item)">
+								<text class="cuIcon-delete"></text>
+								<text>删除</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 加载更多 -->
+			<view class="load-more" v-if="myReviewList.length < total">
+				<text class="load-text">加载更多...</text>
+			</view>
 		</scroll-view>
-		<template v-else>
-			<view class="flex align-center justify-center"
-				style="height: 140rpx;width: 100%;color: #747783;font-size: 24rpx;">暂无评价</view>
-		</template>
+		
+		<!-- 空状态 -->
+		<view v-else class="empty-state">
+			<text class="cuIcon-info"></text>
+			<text class="empty-text">暂无评价</text>
+		</view>
 	</view>
 </template>
 
@@ -48,35 +115,17 @@
 				total: 0,
 				queryForm: {
 					pageNum: 1,
-					pageSize: 10
-				}
+					pageSize: 10,
+					sortType: 'time' // 添加排序类型参数
+				},
+				sortType: 'time'
 			}
 		},
 		onLoad() {
-			// 测试接口
-			console.log('开始测试接口...')
-			
-			// 测试获取我的酒评列表
-			listMyReview({
-				pageNum: 1,
-				pageSize: 10
-			}).then(res => {
-				console.log('获取我的酒评列表测试成功:', res)
-			}).catch(err => {
-				console.error('获取我的酒评列表失败:', err)
-			})
-			
-			// 测试删除酒评接口(需要有效的ID)
-			// delReview('xxx').then(res => {
-			//     console.log('删除酒评测试成功:', res)
-			// }).catch(err => {
-			//     console.error('删除酒评失败:', err)
-			// })
-			
-			// 原有的数据加载
 			this.getMyReviewList()
 		},
 		methods: {
+			// 获取酒评列表
 			getMyReviewList() {
 				listMyReview(this.queryForm).then(res => {
 					this.total = res.total
@@ -85,9 +134,10 @@
 							this.myReviewList.push(item)
 						})
 					}
-					// this.myReviewList = res.rows
 				})
 			},
+			
+			// 删除酒评
 			delReview(item) {
 				uni.showModal({
 					title: '提示',
@@ -103,70 +153,335 @@
 									icon: 'success'
 								})
 							})
-							
-						} else if (res.cancel) {
-							console.log('用户点击取消');
 						}
 					}
 				})
 			},
+			
+			// 加载更多
 			changePage() {
 				if(this.myReviewList.length < this.total) {
 					this.queryForm.pageNum++
 					this.getMyReviewList()
 				}
-				
+			},
+			
+			// 预览图片
+			previewImage(urls, current) {
+				uni.previewImage({
+					urls: urls,
+					current: urls[current]
+				})
+			},
+			
+			// 切换排序方式
+			changeSortType(type) {
+				if (this.sortType === type) return
+				this.sortType = type
+				this.queryForm.sortType = type
+				this.queryForm.pageNum = 1
+				this.myReviewList = []
+				this.getMyReviewList()
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.page-content {
-		padding: 32rpx;
-		background: #FDFDFD;
-		height: 100vh;
+.page {
+	min-height: 100vh;
+	background: #F7F7F7;
+	padding-bottom: 32rpx;
 
-		.review-item {
-			width: 100%;
-			// height: 200rpx;
-			padding: 24rpx 0;
-			border-radius: 16rpx;
-			border-bottom: 1px solid rgba(242, 242, 242, 0.9);
-
-			.avatar {
-				width: 60rpx;
-				height: 60rpx;
-				border-radius: 50%;
-				margin-right: 36rpx;
+	.sort-options {
+		display: flex;
+		background: #FFFFFF;
+		padding: 24rpx 32rpx;
+		margin: 24rpx 32rpx;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+		border-radius: 16rpx;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		
+		.sort-item {
+			margin-right: 48rpx;
+			padding: 12rpx 24rpx;
+			border-radius: 8rpx;
+			transition: all 0.3s ease;
+			display: flex;
+			align-items: center;
+			
+			.cuIcon-time, .cuIcon-favorfill {
+				font-size: 28rpx;
+				margin-right: 8rpx;
 			}
-
-			.beerName {
-				font-size: 24rpx;
-				font-weight: bold;
-				color: #32343E;
-				margin-bottom: 8rpx;
+			
+			text {
+				font-size: 28rpx;
+				color: #666666;
 			}
-
-			.time {
-				font-size: 24rpx;
-				color: #9C9BA6;
+			
+			&.active {
+				background: rgba(25, 54, 122, 0.1);
+				
+				text {
+					color: #19367A;
+					font-weight: 600;
+				}
+				
+				.cuIcon-time, .cuIcon-favorfill {
+					color: #19367A;
+				}
 			}
-
-			.icon {
-				width: 40rpx;
-				height: 40rpx;
-				margin-right: 10rpx;
+			
+			&:active {
+				transform: scale(0.95);
 			}
 		}
-		.btn {
-			width: 118rpx;
-			height: 42rpx;
-			font-size: 20rpx;
-			border-radius: 12rpx;
-			box-sizing: border-box;
-			border: 1px solid #979797;
-			background: #fff;
-		}
 	}
+
+	.review-list {
+		height: calc(100vh - 180rpx);
+		padding: 0 32rpx;
+	}
+
+	.review-item {
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		margin-bottom: 24rpx;
+		padding: 32rpx;
+		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+		position: relative;
+		overflow: hidden;
+		transition: all 0.3s ease;
+		
+		&:active {
+			transform: translateY(2rpx);
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+		}
+		
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 8rpx;
+			height: 100%;
+			background: linear-gradient(to bottom, #19367A, #4A6FCC);
+			border-radius: 4rpx 0 0 4rpx;
+		}
+		
+		.review-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			// margin-bottom: 24rpx;
+			padding-bottom: 24rpx;
+			// border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+			
+			.beer-info {
+				flex: 1;
+				
+				.beer-meta {
+					.beer-name {
+						font-size: 32rpx;
+						font-weight: 600;
+						color: #333333;
+						margin-bottom: 12rpx;
+						display: block;
+					}
+					
+					.rating-row {
+						display: flex;
+						align-items: center;
+						
+						.score-text {
+							font-size: 24rpx;
+							color: #FFB800;
+							margin-left: 8rpx;
+							font-weight: 600;
+						}
+						
+						.like-count {
+							display: flex;
+							align-items: center;
+							margin-left: 16rpx;
+							padding: 4rpx 12rpx;
+							background: rgba(25, 54, 122, 0.05);
+							border-radius: 20rpx;
+							transition: all 0.3s ease;
+							
+							&:active {
+								transform: scale(0.95);
+								background: rgba(25, 54, 122, 0.1);
+							}
+							
+							.like-icon {
+								width: 24rpx;
+								height: 24rpx;
+								margin-right: 4rpx;
+							}
+							
+							.count-text {
+								font-size: 22rpx;
+								color: #666666;
+								font-weight: 500;
+							}
+						}
+					}
+				}
+			}
+			
+			.review-meta {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				
+				.review-time {
+					font-size: 24rpx;
+					color: #999999;
+					margin-bottom: 8rpx;
+				}
+				
+				.review-tag {
+					font-size: 20rpx;
+					color: #FFFFFF;
+					background: linear-gradient(to right, #19367A, #4A6FCC);
+					padding: 4rpx 12rpx;
+					border-radius: 20rpx;
+					box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.2);
+				}
+			}
+		}
+		
+		.review-content {
+			margin-bottom: 24rpx;
+			
+			.review-text {
+				font-size: 28rpx;
+				color: #666666;
+				line-height: 1.6;
+				margin-bottom: 24rpx;
+				position: relative;
+				padding: 16rpx 24rpx;
+				word-break: break-all;
+				white-space: pre-wrap;
+				overflow-wrap: break-word;
+				background: rgba(25, 54, 122, 0.02);
+				border-radius: 12rpx;
+				box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
+				
+				&::before {
+					content: '"';
+					position: absolute;
+					left: 16rpx;
+					top: -8rpx;
+					font-size: 40rpx;
+					color: rgba(25, 54, 122, 0.2);
+					font-family: serif;
+				}
+			}
+			
+			.bottom-section {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 16rpx;
+				padding-top: 16rpx;
+				// border-top: 1rpx solid rgba(0, 0, 0, 0.05);
+				
+				.image-scroll {
+					flex: 1;
+					width: 70%;
+					white-space: nowrap;
+					
+					.image-container {
+						display: inline-flex;
+						
+						.review-image {
+							width: 160rpx;
+							height: 160rpx;
+							border-radius: 12rpx;
+							margin-right: 16rpx;
+							object-fit: cover;
+							box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+							transition: all 0.3s ease;
+							
+							&:active {
+								transform: scale(0.98);
+							}
+							
+							&:last-child {
+								margin-right: 0;
+							}
+						}
+					}
+				}
+				
+				.action-section {
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					width: 30%;
+					
+					.action-btn {
+						display: flex;
+						align-items: center;
+						padding: 8rpx 16rpx;
+						border-radius: 8rpx;
+						transition: all 0.3s ease;
+						
+						&:active {
+							transform: scale(0.95);
+						}
+						
+						text {
+							font-size: 24rpx;
+						}
+						
+						&.delete-btn {
+							background: rgba(255, 77, 79, 0.1);
+							color: #FF4D4F;
+							box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.1);
+							
+							.cuIcon-delete {
+								margin-right: 8rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 120rpx 0;
+		
+		.cuIcon-info {
+			font-size: 64rpx;
+			color: #CCCCCC;
+			margin-bottom: 24rpx;
+		}
+		
+		.empty-text {
+			font-size: 28rpx;
+			color: #999999;
+		}
+	}
+
+	.load-more {
+		text-align: center;
+		padding: 24rpx 0;
+		
+		.load-text {
+			font-size: 24rpx;
+			color: #999999;
+		}
+	}
+}
 </style>
\ No newline at end of file