pet-front-order/pages_order/components/RecentReviews/RecentReviews.vue

<template>
	<view class="recent-reviews">
		<uni-card :is-shadow="false" padding="0" margin="10px">
			<view class="service-new-title" slot="title">
				<view class="service-new-title-left">
					<view class="service-new-flag"></view>
					<view>近期评价({{reviewCount}}条)</view>
				</view>
			</view>
			<view class="split-line"></view>
			<view class="recent-reviews-content">
				<view v-for="(item, index) in reviewList" :key="index" class="review-item">
					<view class="review-header">
						<view class="reviewer-info">
							<u-avatar :src="item.member.avatar || defaultAvatar" size="40" shape="circle"></u-avatar>
							<view class="reviewer-details">
								<view class="reviewer-name">{{item.member.nickname}}</view>
								<view class="review-date">{{item.createTime}}</view>
							</view>
						</view>
						<view class="rating-stars">
							<uni-rate :readonly="true" size="18" :value="item.num" />
						</view>
					</view>
					<view class="review-content">
						{{item.content}}
					</view>
				</view>
				<!-- 空状态 -->
				<view v-if="!reviewList || reviewList.length === 0" class="empty-state">
					<view class="empty-text">暂无评价</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
export default {
	name: 'RecentReviews',
	props: {
		// 评价列表数据
		reviewList: {
			type: Array,
			default: () => []
		},
		// 默认头像
		defaultAvatar: {
			type: String,
			default: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png'
		},
		// 是否显示评价数量
		showCount: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		// 计算评价数量
		reviewCount() {
			return this.reviewList ? this.reviewList.length : 0;
		}
	},
	methods: {
		// 点击评价项事件
		onReviewClick(review, index) {
			this.$emit('reviewClick', { review, index });
		},
		// 点击用户头像事件
		onAvatarClick(review, index) {
			this.$emit('avatarClick', { review, index });
		}
	}
};
</script>

<style lang="scss" scoped>
.recent-reviews {
	width: 100%;
	padding-bottom: 10px;

	.service-new-title {
		display: flex;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		margin: 42rpx 0 30rpx;
		justify-content: space-between;

		.service-new-title-left {
			display: flex;
			align-items: center;

			.service-new-flag {
				width: 8rpx;
				height: 32rpx;
				background: #FFBF60;
				border-radius: 30rpx;
				margin-right: 10rpx;
			}
		}
	}

	.split-line {
		width: 100%;
		height: 1rpx;
		background: #EFEFEF;
	}

	.recent-reviews-content {
		padding: 20rpx;

		.review-item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EFEFEF;

			&:last-child {
				border-bottom: none;
			}

			.review-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

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

					.reviewer-details {
						margin-left: 20rpx;

						.reviewer-name {
							font-size: 28rpx;
							font-weight: 500;
							color: #333333;
							line-height: 32rpx;
						}

						.review-date {
							font-size: 24rpx;
							color: #7D8196;
							margin-top: 8rpx;
							line-height: 28rpx;
						}
					}
				}

				.rating-stars {
					display: flex;
					align-items: center;
				}
			}

			.review-content {
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin-left: 80rpx;
			}
		}

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

			.empty-text {
				font-size: 28rpx;
				color: #7D8196;
			}
		}
	}
}
</style>