yijianbao_user_uniapp/components/evaluateItem.vue

<template>
	<view class="comment-item">
		<!-- 头像 + 昵称 -->
		<view class="header">
			<image class="avatar"
				:src="item.userAvatar || 'https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/my_heads_icon.png'"
				mode="aspectFill" />
			<text class="nick ellipsis">{{item.nickName}}</text>
			<text class="date">{{item.createTime}}</text>
		</view>

		<!-- 星级 -->
		<view class="stars">
			<u-rate active-color="#FF6633" :count="item.rating" v-model="item.rating" readonly size="14"></u-rate>
		</view>

		<!-- 文字评价 -->
		<text class="content ellipsis2">{{item.content}}</text>

		<!-- 图片缩略图 -->
		<view class="pics" v-if="item.imageUrl && item.imageUrl.length">
			<image v-for="(img,idx) in item.imageUrl.split(',')" :key="idx" class="pic" :src="img" mode="aspectFill"
				@tap="preview(item.imageUrl,idx)" />
		</view>
		<view class="merchantReply" v-show="item.merchantReply">
			商家回复： {{item.merchantReply}}
		</view>
		<view v-show="showLine!=0">
			<u-line margin="20rpx 0rpx"></u-line>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item','showLine'],
		data() {
			return {

			}
		},
		methods: {
			preview(img, current) {
				const urls = img.split(',')
				uni.previewImage({
					urls,
					current
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.merchantReply {
		padding: 20rpx;
		font-size: 28rpx;
		color: #999;
		background: #f5f5f5;
		margin-top: 6rpx;
		border-radius: 10rpx;
	}
	.comment-item {
		margin-bottom: 20rpx;
		background-color: #ffff;
		border-radius: 10rpx;

		.header {
			display: flex;
			align-items: center;
		}

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

		.nick {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			display: block;
		}

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

		.stars {
			margin: 12rpx 0;
		}

		.content {
			font-size: 30rpx;
			color: #555;
			margin-top: 12rpx;
			line-height: 1.6;
		}

		.pics {
			display: flex;
			flex-wrap: wrap;
			margin-top: 16rpx;
		}

		.pic {
			width: 160rpx;
			height: 160rpx;
			margin-right: 12rpx;
			margin-bottom: 12rpx;
			border-radius: 8rpx;
		}
	}
</style>