detection-business/pages/evaluation/evaluation.vue

<template>
	<view class="comment-list">
		<headersVue titles="用户评价" style="position: static !important;">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue>
		<view style="padding: 20rpx;">
			<!-- 顶部标题 -->
			<view class="header">
				<text class="title">用户评价</text>
				<text class="total">共{{total}}条评价</text>
			</view>

			<!-- 评价列表 -->
			<scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" v-if="comments.length > 0">
				<view class="comment-item" v-for="(item, index) in comments" :key="index"
					@click="goDetail(item.inspectionInfoId)">
					<!-- 用户信息 -->
					<view class="user-info">
						<image class="avatar" :src="item.userImg" mode="aspectFill"></image>
						<view class="info-right">
							<text class="name">{{item.realName}}</text>
							<view class="star-rating">
								<uni-rate :value="item.commentStar" :size="14" :readonly="true" :margin="2" />
								<text class="time">{{item.commentTime}}</text>
							</view>
						</view>
					</view>

					<!-- 评价内容 -->
					<view class="comment-content">
						<text>{{item.commentDesc}}</text>
					</view>

					<!-- 关联商品 -->
					<view class="related-goods" v-if="item.goodsTitle">
						<text>相关商品：{{item.goodsTitle}}</text>
					</view>

					<!-- 分隔线 -->
					<view class="divider"></view>
				</view>

				<!-- 加载更多提示 -->
				<view class="load-more">
					<text v-if="loading">加载中...</text>
					<text v-else-if="noMore">没有更多了</text>
				</view>
			</scroll-view>

			<!-- 空状态 -->
			<view class="empty" v-else>
				<image src="/static/images/empty-comment.png" mode="aspectFit"></image>
				<text>暂无评价</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 修改为正确的路径
	import uniRate from '@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue'
	import headersVue from '../../components/header/headers.vue';
	import request from '../../utils/request';
	// import {
	// 	formatTime
	// } from '@/utils/util.js'

	export default {
		components: {
			uniRate,
			headersVue
		},
		data() {
			return {
				comments: [], // 评价列表数据
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页数量
				total: 0, // 总评价数
				loading: false, // 加载状态
				noMore: false // 是否没有更多数据
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			// 格式化时间
			formatTime(time) {
				return formatTime(time, 'yyyy-MM-dd hh:mm')
			},

			goDetail(id) {
				console.log('当前检测id', id);
				if (id == null || id == undefined || !id) {
					uni.showToast({
						title: '暂时无法查看该订单！',
						icon: "none"
					})
					return
				}
				uni.navigateTo({
					url: `/pages/index/orderdetails?inspectionInfoId=${id}`
				})
			},

			// 获取评价列表
			async getList() {
				if (this.loading || this.noMore) return

				this.loading = true
				try {
					const res = await request({
						url: '/orderApi/getCommentOrderList',
						methods: 'GET',
						params: {
							pageNum: this.pageNum,
							pageSize: this.pageSize
						}
					})

					if (res.code === 200) {
						this.total = res.data.total
						this.comments = [...this.comments, ...res.data.records]

						// 判断是否还有更多数据
						if (res.data.records.length < this.pageSize) {
							this.noMore = true
						} else {
							this.pageNum++
						}
					}
				} catch (error) {
					console.error('获取评价列表失败:', error)
				} finally {
					this.loading = false
				}
			},

			// 加载更多
			loadMore() {
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment-list {
		// padding: 20rpx;
		background-color: #f7f7f7;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.total {
				font-size: 24rpx;
				color: #999;
			}
		}

		.scroll-view {
			height: calc(85vh - 80rpx);
		}

		.comment-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;

			.user-info {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.info-right {
					flex: 1;

					.name {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 8rpx;
						display: block;
					}

					.star-rating {
						display: flex;
						align-items: center;

						.time {
							font-size: 22rpx;
							color: #999;
							margin-left: 15rpx;
						}
					}
				}
			}

			.comment-content {
				font-size: 26rpx;
				color: #333;
				line-height: 1.6;
				margin-bottom: 20rpx;
			}

			.related-goods {
				font-size: 24rpx;
				color: #999;
				padding: 10rpx 0;
			}

			.divider {
				height: 1rpx;
				background-color: #eee;
				margin: 20rpx -24rpx 0;
			}
		}

		.load-more {
			text-align: center;
			padding: 20rpx;
			font-size: 24rpx;
			color: #999;
		}

		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 60vh;

			image {
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 30rpx;
			}

			text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>