share_h5/components/ld-comment/ld-comment.vue

<template>
	<view class="ct-list">
		<view class="ct-item u-border pd40" v-for="(v,i) in value" :key="i">
			<view class="u-flex-center-sb">
				<view class="u-flex">
					<image class="u-avatar83" :src="v.head_photo"></image>
					<view class="u-font28 u-1A1A1A u-ml20">
						<view>{{v.nickname || '松河生活会员'}}</view>
						<view>
							<text v-for="(item,index) in 5" :key="index" class="iconfont" :class="v.level >item?'grade-active':'u-B3B3B3'">&#xe60a;</text>
						</view>
					</view>
				</view>
				<view class="u-font24 u-999">{{v.create_time}}</view>
			</view>
			<view class="ml100">
				<view class="u-font28 u-999">{{v.content}}</view>
				<view class="u-mt15 ctImg">
					<image class="u-ctImg180" v-for="(imgItem,index) in dealImg(v.img)" :key="index" :src="imgItem"></image>
				</view>
			</view>
		</view>
		<view v-if="value.length==0">
			<view class="no-data">
				<image src="../../static/nodata.png"></image>
				<div>暂无评价~</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				gradeNum: 3,
			}
		},
		methods:{
			dealImg(v){
				let result =[];
				if(v){
					result=v.split(",");
				}
				return result;
			}
		}

	}
</script>

<style lang="scss">
	.ml100 {
		margin-left: 100rpx;
	}

	.pd40 {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.ctImg image:not(:nth-child(3n)) {
		margin-right: 10rpx;
	}

	.grade-active {
		color: #FF5112;
	}

	.u-B3B3B3 {
		color: #B3B3B3;
	}

	.no-data {
		text-align: center;
		padding: 20rpx 0;
		color: #999999;
	}

	.no-data image {
		width: 430rpx;
		height: 278rpx;
	}
</style>