pet-system-merchant-app/pages/service/review/index.vue

<template>
	<view class="service-review-page">
		<view class="summary-bar">
			<text class="avg-score">4.8</text>
			<text class="avg-label">综合评分</text>
			<text class="total-count">共 {{ reviews.length }} 条评价</text>
		</view>
		<view class="review-list">
			<view class="review-card" v-for="item in reviews" :key="item.id">
				<view class="review-header">
					<view class="user-info">
						<view class="user-avatar"><text>{{ item.userName[0] }}</text></view>
						<text class="user-name">{{ item.userName }}</text>
					</view>
					<text class="stars">{{ '★'.repeat(item.rating) }}{{ '☆'.repeat(5 - item.rating) }}</text>
				</view>
				<text class="review-content">{{ item.content }}</text>
				<text class="review-time">{{ item.time }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import reviewMockData from '@/mock/review.json'

const reviews = ref(reviewMockData)
</script>

<style lang="scss" scoped>
.service-review-page {
	min-height: 100vh;
	background: #f7f8fa;
}

.summary-bar {
	background: #fff;
	padding: 40rpx;
	display: flex;
	align-items: baseline;
	gap: 16rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.avg-score {
	font-size: 56rpx;
	font-weight: 900;
	color: #ff9500;
}

.avg-label {
	font-size: 26rpx;
	color: #333;
}

.total-count {
	font-size: 24rpx;
	color: #999;
	margin-left: auto;
}

.review-list {
	padding: 24rpx;
}

.review-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 28rpx;
	margin-bottom: 20rpx;
}

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

.user-info {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.user-avatar {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: #e3f2fd;
	color: #2196f3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 28rpx;
}

.user-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
}

.stars {
	color: #f7ca3e;
	font-size: 26rpx;
}

.review-content {
	display: block;
	font-size: 28rpx;
	color: #555;
	line-height: 1.6;
	margin-bottom: 12rpx;
}

.review-time {
	display: block;
	font-size: 24rpx;
	color: #bbb;
}
</style>