door-uniapp-240802/service-uniapp-client/components/review/reviewList/reviewList.vue

<template>
	<view class="review-list">
		<view v-for="(item,index) in list" :key="index" class="review-item">
			<view class="user-info">
				<view class="left box-s">
					<view class="img-box">
						<image src="" mode="aspectFill"></image>
					</view>
					<view class="user-name-and-time box-s">
						<view class="user-name">
							<text class="name">匿名用户</text>
							<text class="server-name">皇家尊享spa</text>
						</view>
						<view class="peview-time">
							{{ item.createTime }}
						</view>
					</view>
				</view>
				<view class="more">
					<van-icon name="weapp-nav" size="40rpx" color="#DDDADA" />
				</view>
			</view>
			<view class="mark">
				<van-rate v-model="item.serviceNum" size="25rpx" color="#FCD618" />
				<text class="desc">{{ getSatisfaction(item.serviceNum) }}</text>
			</view>
			<view class="tags">
				<view class="tag" v-for="(t) in item.labelText.split(',')">
					{{ t }}
				</view>
			</view>
			<view class="comment-content">
				<view class="content">
					{{ item.content }}
				</view>
				<!-- <view class="like already-liked">
					{{ item.num | 0 }}
					<van-icon v-if="false" name="good-job-o" />
					<van-icon name="good-job-o" color="#FC9A37" size="40rpx" />
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mark: 3
			}
		},
		props: {
			list: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		methods: {
			//获取满意度
			getSatisfaction(num){
				let satisfaction = ['不满意','不满意','较满意','满意','非常满意']
				
				return satisfaction[num - 1]
			}
		}
	}
</script>

<style lang="scss">
	.review-list {
		.box-s {
			box-sizing: border-box;
		}

		.review-item {
			background: #F5F5F5;
			padding: 15rpx 25rpx;
			border-radius: 15rpx;
			margin-bottom: 20rpx;

			.user-info {
				display: flex;

				.left {
					width: calc(100% - 40rpx);
					display: flex;

					.img-box {
						width: 100rpx;
						height: 100rpx;
						background: #ccc;
						border-radius: 50rpx;
					}

					.user-name-and-time {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						padding: 10rpx 15rpx;

						.user-name {
							display: flex;
							align-items: center;
							font-size: 30rpx;
							
							.server-name {
								background: #FEF4F5;
								color: #EF8D95;
								font-size: 20rpx;
								padding: 8rpx 15rpx;
								border-radius: 5rpx;
							}
						}

						.peview-time {
							font-size: 24rpx;
							color: #D1CDCD;
						}
					}
				}
			}

			.mark {
				display: flex;
				align-items: center;

				.desc {
					margin-left: 5rpx;
					color: #D1CDCD;
					font-size: 26rpx;
				}
			}
			.tags {
				padding-top: 15rpx;
				display: flex;
				.tag {
					background: #ECFCF1;
					color: #55B16E;
					font-size: 22rpx;
					padding: 5rpx 20rpx;
					border-radius: 10rpx;
					margin-right: 5px;
				}
			}
			.comment-content {
				font-size: 22rpx;
				margin-top: 15rpx;

				.content {
					color: #474441;
				}

				.like {
					display: flex;
					color: #BDBCBC;
					justify-content: flex-end;
					align-items: center;
					padding: 10rpx 0rpx;
				}

				.already-liked {
					color: #FC9A37;
				}
			}
		}
	}
</style>