商品评价列表展示组件 - Uni-app

<template>
	<view class='evaluate-list'>
		<view class='evaluate-list-item' v-for='(item,idx) in listData' :key='idx'>
			<view class='title'>
				<view class='name'>{{item.userName}}</view>
				<view class='rate'>
					<uni-rate v-model='item.score' class='rate-star'/>
				</view>
			</view>
			<view class='con'>{{item.comment}}</view>
			<view class='date'>{{item.insertTime}}</view>
			<!-- <view class='back-con'>
				<view class='con'>客户回复</view>
				<view class='back-date'>时间</view>
			</view> -->
		</view>
		<uni-load-more :status='status' :icon-size='16' :content-text='contentText' />
	</view>
</template>
<script>
	export default {
		data() {
		return {
			listData: [],
			spudId: '',
			reload: false,//是否下拉重新加载
			status: 'more',
			size: 30,
			current: 1,
			total: 0,
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			},
		};
	},
	onLoad(option) {
		this.spuId = option.spuId;
		this.reload = true;
		// 发起请求
		this.getList();
	},
		onPullDownRefresh() {
		this.reload = true;
		this.getList();
	},
		onReachBottom() {
		this.status = this.listData.length >= this.total ? '' : 'more';
		this.getList();
	},
		methods: {
			getList() {
				uni.stopPullDownRefresh();
				if (this.listData.length != 0 && this.listData.length == this.total) return;
				if (this.listData.length < this.total) {
					this.current = this.reload ? 1 : this.current + 1;
				}
				let query = `?spuId=${this.spuId}&current=${this.current}&size=${this.size}`;
				this.ajax.get(this.jk.evaluateList + query).then(res => {
					this.total = res.data.total;
					let list = res.data.records;
					this.listData = this.reload ? list : this.listData.concat(list);
					if (list.length < this.size) this.status = '';
					this.reload = false;
				})
			},
			toUrl(url) {
				this.common.UnavigateTo(url)
			}
		}
	}
</script>
<style lang='less'>
.evaluate-list {
	.evaluate-list-item {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-bottom: 20rpx;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.con {
			margin: 30rpx 0;
		}
		.date {
			color: #999999;
			font-size: 24rpx;
		}
		.back-con {
			color: #FF9800;
		}
	}
}
</style>
<p>'spuId' 是商品的唯一标识符，用于获取该商品的评价列表信息。在这个代码中，通过路由传递的参数 'option.spuId' 来获取该值，并在发起请求时使用。</p>