ykz-wx/pages/feedback/FeedbackList.vue

<template>
	<view class="feedback-list-view">
		<pub-list-scroll ref="pubListScrollRef" @next="onScrollTolower" :loaded="loaded" :text="loadText" :status="status">
			<view class="no-data" v-if="!listArray || listArray.length == 0">
				<image mode="heightFix" src="/static/image/no-data.png" />
				暂无数据
			</view>
			<view class="feedback-list" v-else>
				<view v-for="(item,index) in listArray" :key="index" class="loop-list-item" @click="onClick(item)">
					<view class="item-content">
						<view class="item-title">
							<view class="title-line">{{ filterApplicationType(item.fklx) }}</view>
							<view class="title-company" :class="filterApplicationBgColor(item.fkzt)">{{ filterApplicationStatus(item.fkzt) }}</view>
						</view>
						<view class="part-line"></view>
						<view class="text-content">
							<view v-for="(textItem,textIndex) in item.formattedData" :key="textIndex" class="other-loop-item">
								<view class="textTitle">{{ textItem.title }}</view>
								<view class="textValue">{{ textItem.value }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</pub-list-scroll>
	</view>
</template>

<script setup lang="ts">
	import { defineProps,ref } from "vue";
	import { 
		filterApplicationStatus,
		filterApplicationType,
		filterApplicationBgColor,
	} from '@/lib/util'

	const emit = defineEmits(['click','nextPage']) // 定义 success 事件，用于操作成功后的回调
	// 定义 props 类型
	const props = defineProps({
		listArray: {
			type: Object,
			default: () => {}
		},
		status: {
			type: String,
			default: "loading"
		}
	});
	const pubListScrollRef = ref(null)
	const loaded = ref(false)
	const loadText = ref('数据加载中...')
	
	const onScrollTolower = ()=> {
		console.log("下一页了？")
		emit("nextPage")
	}
	const onClick = (item:any)=> {
		emit("click",item)
	}
</script>




<style lang="scss">
	.feedback-list-view {
		background-color: #F6F7F8;
		height: 100%;
		.feedback-list {
			padding: 32rpx 40rpx 0rpx;
			background-color: #F6F7F8;
			.loop-list-item {
				min-height: 200rpx;
				margin-bottom: 24rpx;
				border-radius: 10rpx;
				background: #fff;
				padding: 14rpx 0 20rpx;
				.item-content {
					.item-title{
						padding: 0 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.title-line {
							font-weight: 600;
							font-size: 28rpx;
							color: #363A44;
						}
						.title-company {
							padding: 12rpx 20rpx;
							border-radius: 8rpx;
							font-size: 24rpx;
							&.yellow {
								background-color: #FEF6ED;
								color: #FD9F48;
							}
							&.blue {
								background-color: #EDF2FD;
								color: #1E92F0;
							}
							&.green {
								background-color: #E8F7F1;
								color: #00B578;
							}
						}
					}
					.part-line {
						border-top: 1px solid #EFEFEF;
						margin: 10rpx 0 20rpx;
					}
					.text-content {
						padding: 0 20rpx;
						display: flex;
						flex-direction: column;
						.other-loop-item {
							margin-bottom: 10rpx;
							display: flex;
							align-items: center;
							font-size: 28rpx;
							font-weight: 400;
							.textTitle {
								color: #9B9B9B;
								margin-right: 24rpx;
							}
							.textValue {
								color: #363A44;
							}
							&:last-child { 
								margin-bottom: 0; 
							}
						}
					}
				}
			}
			
		}
		
		::v-deep .scroll-view {
			height: calc(100%);
			background-color: transparent !important;
		}

		::v-deep .no-data {
			margin-top: 0;
			padding-top: 160rpx;
		}
		
	}
</style>