pasd_app/pages/work/sidebar/filingLog/index.vue

<template>
	<view class="work-container">
		
		<uni-card  v-for="(item,index) of dataList" class="parent">
			<template v-slot:title>
				<h3 class="title">{{item.declarationLabel}}</h3>
			</template>
			<h3>{{item.requirementDescription}}</h3>
			<h3>{{item.occurTime}}</h3>
			<view class="card-actions-item" @click="actionsClick(item.id)">
				<button size="mini">详情</button>
			</view>
		</uni-card>
		<uni-load-more status="已经没有更多数据了"></uni-load-more>
		</uni-section>
	</view>
</template>

<script>
	import {
		listData
	} from '@/api/system/dict/data.js'
	import {
		listSafetyDeclaration
	} from "@/api/sidebar/sidebar.js"
	import formatTime from '@/utils/formatTime.js'

	export default {
		name: "FilingLog",
		data() {
			return {
				dataList: [],
				queryParams: {
					pageNum: 1, // 初始页码设为1  
					pageSize: 10
				},
				isLoading: false, // 添加一个标志位，用于防止重复请求 
				typeDataList: [],
				total: 0
			}
		},
		methods: {
			actionsClick(e) {
				uni.navigateTo({
					url: `/pages/work/sidebar/safetyDeclaratio/index?id=` + e
				})
			},
			async getList() {
				if (this.isLoading) return; // 如果已经在加载中，则不执行  
				this.isLoading = true;
				const res = await listSafetyDeclaration(this.queryParams);
				if (this.typeDataList.length == 0) {
					this.typeDataList = await listData({
						dictType: "hs_declaration_type"
					});
				}
				this.total = res.total
				let processedDataList = res.rows.map(item => {
					const matchedType = this.typeDataList.rows.find(type => type.dictValue == item.declarationType);
					const time = formatTime(item.occurTime);
					return {
						...item,
						occurTime: time,
						declarationLabel: matchedType ? matchedType.dictLabel : "未知类型"
					};
				});
				// 合并新旧数据
				this.dataList = [...this.dataList, ...processedDataList];
			},
			onLoad(options) {
				this.getList();
			},
		},
		onReachBottom() {
			this.isLoading = false;
			//上拉到底时触发，onReachBottom函数跟生命周期同级
			let allTotal = this.queryParams.pageNum * this.queryParams.pageSize
			console.log("allTotal",allTotal);
			console.log("this.total",this.total);
			if (allTotal < this.total) {
				this.queryParams.pageNum++;
				// this.queryParams.page++//当前条数小于总条数 则增加请求页数
				this.getList() //调用加载数据方法
				setTimeout(() => {
					//结束下拉刷新
					uni.stopPullDownRefresh();
				}, 1000);
			} else {
				console.log('已加载全部数据')
			}
		},
		onPullDownRefresh() {
			this.queryParams.pageNum=1;
			this.isLoading = false;
			//下拉刷新触发，onPullDownRefresh函数跟生命周期同级
			this.dataList = []
			this.getList().then(res=>{
				setTimeout(() => {
					//结束下拉刷新
					uni.stopPullDownRefresh();
				}, 1000);
			})
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}
	

	.work-container {
		margin-left: 4px
	}


	.parent {
		position: relative;

		h3 {
			margin-bottom: 5px;
			font-weight:600;
			color: rgb(153, 153, 153);
		}

		.title {
			font-weight:bold;
			padding: 3rpx;
			color: black;
		}
	}

	.card-actions-item {
		display: inline-block;
		flex-direction: row;
		align-items: center;
		position: absolute;
		bottom: 5px;
		right: 30px;
		button {
			border-radius: 10px;
		}
	}
</style>