mrr.sj.front/pages/evaluate/evaluationList.vue

<template>
	<view class="evaluationList">
		<custom-navbar title="评价列表" :showBack="true" borderBottom="none"></custom-navbar>
		<view class="evaluationList-tabs">
			<view class="evaluationList-tabs-tab" :class="{active:formData.search_type==item.value}"
				v-for="item in tabList" :key="item.value" @tap="changeTab(item.value)">
				{{ item.text }}
				<text v-if="item.value" class="evaluationList-tabs-tab-num">
					{{ getNumber(item.count) }}
				</text>
			</view>
		</view>
		<CommonList ref="groupRef" apiUrl="/user/orderEvaluate/list"
			:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 220}rpx)`" @load-success-all="loadSuccessAll">
			<template #listData="{ list }">
				<view class="lists">
					<evaluationDetail v-for="(item,index) in list" :key="index" :evaluateObj="item" @goDetail="goDetail"
						isAllImg></evaluationDetail>
				</view>

			</template>

			<!-- 空数据状态 -->
			<template #empty>
				<noData></noData>
			</template>
		</CommonList>
	</view>
</template>

<script>
	import request from "@/utils/request";
	import CommonList from "@/components/common/CommonList.vue";
	import evaluationDetail from "./components/evaluationDetail.vue"
	export default {
		components: {
			evaluationDetail,
			CommonList
		},
		data() {
			return {
				statusBarHeight: 0,
				formData: {
					search_type: 0, //0或不传为全部 1有图 2好评 3差评
				},
				evaluateList: [],
				tabList: [{
						text: "全部",
						value: 0
					},
					{
						text: "有图",
						value: 1
					},
					{
						text: "好评",
						value: 2
					},
					{
						text: "差评",
						value: 3
					}
				]
			};
		},
		// props: {
		// 	// 被评人id
		// 	evaluated_id: {
		// 		type: Number,
		// 	},
		// 	// 类型 1手艺人 2商家 3用户
		// 	evaluated_type: {
		// 		type: Number,
		// 	},
		// 	// 服务id/工时id/工位id
		// 	order_shop_id: {
		// 		type: Number,
		// 	},
		// 	// 服务id/工时id/工位id
		// 	order_shop_type: {
		// 		type: Number,
		// 	},
		// 	// 订单id
		// 	order_id: {
		// 		type: Number,
		// 	},
		// 	// 服务id/工时id/工位id
		// 	search_type: {
		// 		type: Number,
		// 	},
		// },
		watch: {
			// order_shop_id(newData) {
			// 	this.formData.order_shop_id = this.order_shop_id
			// }
		},
		onLoad(options) {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			if (options.order_shop_id) {
				this.formData.order_shop_id = options.order_shop_id
			}
			if (options.order_shop_type) {
				this.formData.order_shop_type = options.order_shop_type
			}
			if (options.evaluated_type) {
				this.formData.evaluated_type = options.evaluated_type
			}
			if (options.evaluated_id) {
				this.formData.evaluated_id = options.evaluated_id
			}
			if (options.order_id) {
				this.formData.order_id = options.order_id
			}
			if (options.search_type) {
				this.formData.search_type = options.search_type
			}

			this.$nextTick(() => {
				this.search();
			});
		},
		methods: {
			changeTab(value) {
				this.formData.search_type = value
				this.search();
			},
			search() {
				// 触发列表刷新
				this.$refs.groupRef.manualRefresh(this.formData);
			},
			goDetail(data) {
				uni.navigateTo({
					 url: `/pages/evaluate/evaluationDetails?data=${encodeURIComponent(JSON.stringify(data))}`
				});
			},
			loadSuccessAll(res) {
				this.$set(this.tabList[1], 'count', res.data.count1);
				this.$set(this.tabList[2], 'count', res.data.count2);
				this.$set(this.tabList[3], 'count', res.data.count3);
			},
			getNumber(value) {
				if (value > 1000) {
					return "1000+"
				}
				return value
			}
		}
	};
</script>

<style lang="less">
	.evaluationList {
		.evaluationList-tabs {
			display: flex;
			justify-content: space-between;
			padding: 25rpx 32rpx;
			background: #fff;

			.evaluationList-tabs-tab {
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;

				.evaluationList-tabs-tab-num {
					margin-left: 6rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.active {
				color: #FF4767;
			}
		}

		.lists {
			background-color: transparent;
			overflow: hidden;
			margin: 10rpx 24rpx;
			border-radius: 16rpx;
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
		}
	}

	.common-list {
		background: transparent!important;
	}

	::v-deep .list-container {
		padding: 0!important;
	}
</style>