baqing-shop/shop-app/components/order/ReviewDoneSummaryCard.vue

<template>
	<view class="review-done-card">
		<view class="review-done-card__goods">
			<image-preview class="review-done-card__pic" :src="item.goodsImage || item.mainPic" />
			<view class="review-done-card__goods-meta">
				<text class="review-done-card__name">{{ item.goodsName }}</text>
				<text v-if="item.specText" class="review-done-card__spec">{{ item.specText }}</text>
			</view>
		</view>
		<view class="review-done-card__review">
			<view class="review-done-card__stars">
				<text
					v-for="n in 5"
					:key="n"
					class="review-done-card__star"
					:class="{ 'review-done-card__star--on': n <= score }"
				>★</text>
				<text class="review-done-card__score">{{ score }}分</text>
			</view>
			<text class="review-done-card__content">{{ contentBrief }}</text>
		</view>
		<view class="review-done-card__foot">
			<text class="review-done-card__time">{{ reviewTime }}</text>
			<text class="review-done-card__link">查看详情</text>
		</view>
	</view>
</template>

<script setup>
defineProps({
	item: {
		type: Object,
		required: true
	},
	score: {
		type: Number,
		default: 0
	},
	contentBrief: {
		type: String,
		default: ''
	},
	reviewTime: {
		type: String,
		default: ''
	}
})
</script>

<style lang="scss" scoped>
.review-done-card {
	padding: 20rpx 24rpx;
	background: #fff;
	border-radius: 12rpx;
}
.review-done-card__goods {
	display: flex;
	align-items: center;
}
.review-done-card__pic {
	width: 96rpx;
	height: 96rpx;
	border-radius: 8rpx;
	background: #eee;
	flex-shrink: 0;
}
.review-done-card__goods-meta {
	flex: 1;
	min-width: 0;
	margin-left: 16rpx;
}
.review-done-card__name {
	display: block;
	font-size: 28rpx;
	color: #333;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.review-done-card__spec {
	display: block;
	margin-top: 4rpx;
	font-size: 22rpx;
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.review-done-card__review {
	margin-top: 12rpx;
	padding: 12rpx 16rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
}
.review-done-card__stars {
	display: flex;
	align-items: center;
}
.review-done-card__star {
	font-size: 22rpx;
	color: #ddd;
	line-height: 1;
}
.review-done-card__star--on {
	color: #ffb400;
}
.review-done-card__score {
	margin-left: 8rpx;
	font-size: 22rpx;
	color: #ffb400;
}
.review-done-card__content {
	display: block;
	margin-top: 6rpx;
	font-size: 24rpx;
	color: #666;
	line-height: 1.45;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.review-done-card__foot {
	margin-top: 12rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.review-done-card__time {
	font-size: 22rpx;
	color: #bbb;
}
.review-done-card__link {
	font-size: 24rpx;
	color: #2e7d32;
}
</style>