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">{{ item.title }}</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,filterApplicationBgColor } from '@/lib/util'

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




<style lang="scss">
	.feedback-list-view {
		height: calc(100% - 60rpx);
		overflow-y: auto;
		background-color: #F6F7F8;
		.feedback-list {
			padding: 32rpx 40rpx 40rpx;
			background-color: #F6F7F8;
			.loop-list-item {
				min-height: 200rpx;
				margin-bottom: 24rpx;
				border-radius: 10rpx;
				background: #fff;
				padding: 30rpx 40rpx 20rpx;
				.item-content {
					.item-title{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.title-company {
							padding: 12rpx 16rpx;
							border-radius: 8rpx;
							font-size: 24rpx;
							&.yellow {
								background-color: #fef5fa;
								color: #FD9F48;
							}
							&.blue {
								background-color: #e7f2fe;
								color: #1E92F0;
							}
							&.green {
								background-color: #e4f7f0;
								color: #00B578;
							}
						}
					}
					.part-line {
						border: 1px solid #EFEFEF;
						margin: 8rpx 0 18rpx;
					}
					.text-content {
						display: flex;
						flex-direction: column;
						.other-loop-item {
							margin-bottom: 10rpx;
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-weight: 350;
							.textTitle {
								color: #9B9B9B;
								margin-right: 24rpx;
							}
							.textValue {
								color: #3D3D3D;
							}
							&:last-child { 
								margin-bottom: 0; 
							}
						}
					}
				}
			}
		}
	}
</style>