flavorOfTimeSz/subPackages/user/commentList.vue

<template>
	<view class="bg">
		
			<view class="review-item" v-for="(item,i) in reviews" :key="i">
				<view class="flex">
					<image class="avator" :src="item.user.avatar" mode="aspectFill"></image>
					<view class="comment-container">
						<view class="nickname" style="padding-right:20rpx ;">{{item.user.nickname}}</view>
						<view class="iconfont">
							<img src="https://static.ticket.sz-trip.com/dongtai/images/user/star-seld.png"
							 v-for="(item,index) in Number(item.rate)" :key="index"  class="starImg"/>
						</view>
					</view>
					<view style="font-weight: 500;font-size: 24rpx;color: #999999;display: flex;align-items: center;">
					{{item.create_time.slice(0,10)}}
					</view>
				</view>
				<view class="text-overflow" style="font-weight: 500;
				font-size: 31rpx;color: #999999;margin: 22rpx 0 30rpx;">
				{{item.sku_name}}
				</view>
				
				<view class="comment-content">{{item.content}}</view>
				
				<view class="img-box" >
					<image class="imgs" v-for="(img,i) in item.img_list" :key="i"
					 mode="aspectFill" :src="img" @click="viewImg(item)"></image>
					<!-- <view v-if="item.img_list.length>1" class="more-img">+{{item.img_list.length}}</view> -->
				</view>
			</view>
			
			<view class="no-data-zhanwei" v-if="reviews.length<=0">
				<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image>
				<view style="padding:50rpx 0 67rpx">暂无数据</view>
			</view>
	</view>
</template>

<script>
	export default {
		name:"commentList",
		props: ["prodId"],
		data() {
			return {
				id: null,
				total: 0,
				reviews: [],
				finished: false,
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getComments()
		},
		methods: {
			getComments () {
				this.Post({
					product_id: this.id,
				    offset: this.reviews.length,
				    limit: 10,
				},"/api/product/product_comment_list").then((res) => {
					let resData = res.data.list || []
					resData.forEach(v=>{
						v.img_list = v.img_list.split(',')
						// v.img_list = [v.img_list, v.img_list, v.img_list, v.img_list]
					})
				  this.reviews = [...this.reviews, ...resData];
				  this.total = res.data.total;
				  if(resData.length<10) {
					  this.finished = true
				  }
				})
			},
			goCommentList () {
				uni.navigateTo({
					url:`/subPackages/user/commentList?id=${this.prodId}`
				})
			},
			viewImg (item) {
				let imgs = item.img_list
				uni.previewImage({
					urls:imgs
				})
			},
		},
		onReachBottom() {
			setTimeout(() => {
				if(!this.finished) this.getComments()
			},1000)
		}
	}
</script>

<style scoped lang="scss">
.bg{
	background: #FFFFFF;
	min-height: 100vh;
	width: 100%;
	padding: 20rpx 26rpx;
}

	.review-item{
		.avator{
			width: 72rpx;
			height: 72rpx;
			background: #999999;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.starImg{
			width: 23.47rpx;
			height: 23.47rpx;
			margin-right: 6rpx;
		}
		.comment-container{
		    flex: 1;
		    width: 10rpx;
		    padding: 0 45rpx 0 15rpx;
			height: 72rpx;
			font-weight: bold;
			font-size: 31rpx;
			color: #333333;
		}
		.comment-content {
		    width: 100%;
		    font-weight: 500;
		    font-size: 29rpx;
		    color: #000000;
			margin-bottom: 28rpx;
		}
		
		.img-box{
			width: 100%;
			.imgs{
				width: 219rpx;
				height: 219rpx;
				background: #CCCCCC;
				border-radius: 13rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			.imgs:nth-of-type(3n) {
				margin-right: 0;
			}
		}
	}
	.review-item:last-of-type{
		border-bottom: none;
	}

</style>