kxmall-ui/kxmall-rider-ui/pages/review/review-list.vue

<template>
	<view class="container">
		<!-- 头部统计卡片 -->
		<view class="stats-card">
			<view class="stats-item">
				<text class="stats-value">{{totalReviews}}</text>
				<text class="stats-label">总评价数</text>
			</view>
			<view class="stats-divider"></view>
			<view class="stats-item">
				<text class="stats-value">{{averageRating}}</text>
				<text class="stats-label">平均评分</text>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" 
				  :class="{'active': currentFilter === 'all'}" 
				  @click="changeFilter('all')">
				全部
			</view>
			<view class="filter-item" 
				  :class="{'active': currentFilter === 'good'}" 
				  @click="changeFilter('good')">
				好评
			</view>
			<view class="filter-item" 
				  :class="{'active': currentFilter === 'medium'}" 
				  @click="changeFilter('medium')">
				中评
			</view>
			<view class="filter-item" 
				  :class="{'active': currentFilter === 'bad'}" 
				  @click="changeFilter('bad')">
				差评
			</view>
		</view>

		<!-- 评价列表 -->
		<view class="review-list">
			<view class="review-item" v-for="item in reviewList" :key="item.id">
				<!-- 订单信息 -->
				<view class="order-info">
					<text class="order-number">订单号：{{item.orderId}}</text>
					<text class="order-time">{{formatTime(item.createTime)}}</text>
				</view>

				<!-- 评价内容 -->
				<view class="review-content">
					<!-- 评分星级 -->
					<view class="rating-section flex-rating-section">
						<view class="stars">
							<view class="star" 
								  v-for="i in 5" 
								  :key="i"
								  :class="{'filled': i <= item.score}">
								★
							</view>
						</view>
						<text class="rating-text">{{getRatingText(item.score)}}</text>
            
            <view class="product-name"> {{item.productName}} </view>
					</view>

					<!-- 评价文字 -->
					<view class="review-text" v-if="item.content">
						{{item.content}}
					</view>

					<!-- 评价图片 -->
					<view class="review-images" v-if="item.images && item.images.length > 0">
						<image class="review-image" 
							   v-for="(img, index) in item.images" 
							   :key="index"
							   :src="img" 
							   mode="aspectFill"
							   @click="previewImage(img, item.images)">
						</image>
					</view>

					<!-- 用户信息 -->
					<view class="reviewer-info">
						<image class="avatar" :src="item.userAvatar || '/static/login/logo.png'" mode="aspectFill"></image>
						<view class="user-details">
							<text class="username">{{hideUserName(item.userNickName)}}</text>
							<text class="review-time">{{formatTime(item.createTime)}}</text>
						</view>
					</view>
				</view>

				<!-- 商家回复 -->
				<view class="merchant-reply" v-if="item.reply">
					<view class="reply-header">
						<text class="reply-label">商家回复：</text>
					</view>
					<view class="reply-content">
						{{item.reply}}
					</view>
					<view class="reply-time">
						{{formatTime(item.replyTime)}}
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" @click="loadMore" v-if="hasMore && !loading">
				<text>加载更多</text>
			</view>

			<!-- 加载中 -->
			<view class="loading" v-if="loading">
				<text>加载中...</text>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="!loading && reviewList.length === 0">
				<image class="empty-icon" src="/static/icons/empty-review.png" mode="aspectFit"></image>
				<text class="empty-text">暂无评价数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState(['token', 'userInfo'])
		},
		data() {
			return {
				reviewList: [],
				currentFilter: 'all',
				page: 1,
				pageSize: 10,
				total: 0,
				totalReviews: 0,
				averageRating: 0,
				loading: false,
				hasMore: true
			};
		},
		onLoad() {
			this.initData();
		},
		onPullDownRefresh() {
			this.refreshData();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			initData() {
				this.getReviewStats();
				this.getReviewList(true);
			},

			refreshData() {
				this.page = 1;
				this.hasMore = true;
				this.getReviewStats();
				this.getReviewList(true);
				uni.stopPullDownRefresh();
			},

			changeFilter(filter) {
				this.currentFilter = filter;
				this.page = 1;
				this.hasMore = true;
				this.getReviewList(true);
			},

			getReviewStats() {
				this.request("get", "rider/review/stats", this.token).then(res => {
					if (res.code === 200) {
						this.totalReviews = res.data.totalReviews || 0;
						this.averageRating = (res.data.averageRating || 0);
					}
				});
			},

			getReviewList(refresh = false) {
				if (this.loading) return;
				this.loading = true;

				if (refresh) {
					this.page = 1;
				}

				const params = {
					pageNum: this.page,
					pageSize: this.pageSize
				};

				// 添加筛选条件
				if (this.currentFilter !== 'all') {
					if (this.currentFilter === 'good') {
						params.minRating = 4;
					} else if (this.currentFilter === 'medium') {
						params.minRating = 3;
						params.maxRating = 3;
					} else if (this.currentFilter === 'bad') {
						params.maxRating = 2;
					}
				}

				this.request("get", "rider/review/list", this.token, params).then(res => {
					if (res.code === 200) {
						const newData = res.rows || [];
						this.reviewList = refresh ? newData : [...this.reviewList, ...newData];
						this.total = res.total || 0;
						this.hasMore = this.reviewList.length < this.total;
					}
				}).finally(() => {
					this.loading = false;
				});
			},

			loadMore() {
				if (this.hasMore && !this.loading) {
					this.page++;
					this.getReviewList();
				}
			},

			getRatingText(rating) {
				if (rating >= 4) return '好评';
				if (rating >= 3) return '中评';
				return '差评';
			},

			hideUserName(name) {
				if (!name) return '匿名用户';
				if (name.length <= 2) return name;
				return name.charAt(0) + '*'.repeat(name.length - 2) + name.charAt(name.length - 1);
			},

			formatTime(time) {
				if (!time) return '';
				const date = new Date(time);
				const now = new Date();
				const diff = now.getTime() - date.getTime();
				const diffDays = Math.floor(diff / (1000 * 60 * 60 * 24));
				
				if (diffDays === 0) {
					const diffHours = Math.floor(diff / (1000 * 60 * 60));
					if (diffHours === 0) {
						const diffMinutes = Math.floor(diff / (1000 * 60));
						return diffMinutes + '分钟前';
					}
					return diffHours + '小时前';
				} else if (diffDays === 1) {
					return '昨天';
				} else if (diffDays < 7) {
					return diffDays + '天前';
				} else {
					return date.getFullYear() + '-' + 
						   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
						   String(date.getDate()).padStart(2, '0');
				}
			},

			previewImage(current, urls) {
				uni.previewImage({
					current: current,
					urls: urls
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* 统计卡片 */
	.stats-card {
		display: flex;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.stats-item {
			flex: 1;
			text-align: center;

			.stats-value {
				display: block;
				font-size: 48rpx;
				font-weight: bold;
				color: #ff6b35;
				margin-bottom: 10rpx;
			}

			.stats-label {
				font-size: 26rpx;
				color: #666;
			}
		}

		.stats-divider {
			width: 1rpx;
			background-color: #f0f0f0;
			margin: 0 30rpx;
		}
	}

	/* 筛选栏 */
	.filter-bar {
		display: flex;
		background-color: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 16rpx;
		padding: 10rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.filter-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666;
			border-radius: 12rpx;
			transition: all 0.3s;

			&.active {
				background-color: #437CE8;
				color: #fff;
			}
		}
	}

	/* 评价列表 */
	.review-list {
		margin: 0 20rpx;

		.review-item {
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.order-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				background-color: #f8f9fa;
				border-bottom: 1rpx solid #f0f0f0;

				.order-number {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
				}

				.order-time {
					font-size: 24rpx;
					color: #999;
				}
			}

			.review-content {
				padding: 30rpx;

				.rating-section {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.stars {
						display: flex;
						margin-right: 15rpx;

						.star {
							font-size: 32rpx;
							color: #ddd;
							margin-right: 5rpx;

							&.filled {
								color: #ffa500;
							}
						}
					}

					.rating-text {
						font-size: 26rpx;
						color: #666;
					}
				}

				.review-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
					margin-bottom: 20rpx;
				}

				.review-images {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 20rpx;

					.review-image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 12rpx;
						margin-right: 15rpx;
						margin-bottom: 15rpx;
					}
				}

				.reviewer-info {
					display: flex;
					align-items: center;

					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.user-details {
						flex: 1;

						.username {
							display: block;
							font-size: 26rpx;
							color: #333;
							margin-bottom: 5rpx;
						}

						.review-time {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}

			.merchant-reply {
				background-color: #f8f9fa;
				padding: 20rpx 30rpx;
				border-top: 1rpx solid #f0f0f0;

				.reply-header {
					margin-bottom: 10rpx;

					.reply-label {
						font-size: 26rpx;
						color: #437CE8;
						font-weight: 500;
					}
				}

				.reply-content {
					font-size: 26rpx;
					color: #333;
					line-height: 1.6;
					margin-bottom: 10rpx;
				}

				.reply-time {
					font-size: 22rpx;
					color: #999;
					text-align: right;
				}
			}
		}

		.load-more {
			text-align: center;
			padding: 30rpx 0;
			color: #437CE8;
			font-size: 28rpx;
		}

		.loading {
			text-align: center;
			padding: 30rpx 0;
			color: #999;
			font-size: 28rpx;
		}

		.empty-state {
			text-align: center;
			padding: 100rpx 0;

			.empty-icon {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 30rpx;
			}

			.empty-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
  
  .flex-rating-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .product-name {
      margin-left: auto;
      font-size: 26rpx;
      
    }
  }
  
</style>