yicangzongtai_app_240321/components/ld-comment/ld-comment.vue

<template>
	<view class="ct-list">
		<view class="ct-item u-border-one-one pd40" v-for="(v,i) in value" :key="i">
			<view>
				<view class="u-flex-center-sba">
				<view class="u-flex">
					
						<image class="u-avatar83" v-if="v.head_photo":src="v.head_photo"></image>
					<image class="u-avatar83" v-else :src="imgUrl+'/head-on.png'"></image>
					
					
					
					<view class="u-font28 u-1A1A1A u-ml20 avatar-start" >
						<view class="u-text-width">{{v.nickname || '松河生活平台会员'}}</view>
						<view class="comment-start">
							<!-- <uni-rate :max="5" :value="v.level" size="17" readonly="true" color="#B3B3B3" allowHalf='true' margin="4"  activeColor="#FF5112" style="margin: 20rpx 0;" /> -->
							<text v-for="(item,index) in 5" :key="index" class="iconfont2" :class="v.level >=item?'grade-active':'u-B3B3B3'" style="font-size: 35rpx;margin-right: 11.5rpx;">&#xe60f;</text>
						</view>
					</view>
				</view>
				<view class="u-font24 u-999 time">{{v.create_time}}</view>
			</view>
			<view class="ml100">
				<view style="margin-top: 10rpx;" 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="v.reply_list&&v.reply_list.length>0">
				<view class="ml100">
				<view class="u-font28 u-999">商家回复：{{v.reply_list[0].content}}</view>
			
			</view>
			</view>
			
			
		</view>
		<view v-if="value.length==0">
			<view class="no-data">
				<image :src="imgUrl+'/nodata.png'"></image>
				<div>暂无评价~</div>
			</view>
		</view>
	</view>
</template>

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

	}
</script>

<style lang="scss">
	.u-flex-center-sba{
		display: flex;
		flex-direction: row;
		// align-items: center;
		justify-content: space-between;
	}
	.avatar-start {
		display: flex;
		height: 83rpx;
		flex-direction: column;
		justify-content: space-between;
	}
	.comment-start {
		// margin-top: 20rpx;
	}
	.time {
		font-size: 24rpx;
	}
	.ml100 {
		margin-left: 100rpx;
	}

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

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

	.grade-active {
		color: #FFC336;
	}

	.u-B3B3B3 {
		color: #B3B3B3;
	}

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

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