TaicangPopulationApp2/pages/work/index.vue

<template>
	<navigation-general :isBack="false" title="预警中心">
		<scroll-view scroll-y="true" :style="{height: `calc(100% - ${boxTop}rpx)`}" @scrolltolower="scrolltolower">
			<div class="building-list">
				<view class="building-item" v-for="(item,index) in buildingList" :key="index"
					@click="handlerCilck(item)">
					<text class="building-name">{{item.pname }}</text>
					<color-item :item="item"></color-item>
					<text class="building-name">已 <text style="color: red;">{{item.daycount }}</text>天未更新</text>
				</view>
			</div>
			<u-loadmore :status="status" :load-text="loadText" />
		</scroll-view>
	</navigation-general>
</template>
<script>
	import {
		getWarningList
	} from '@/api/taicangpop/data.js' //预警
	import {
		mapGetters
	} from "vuex";
	import {
		handleColor
	} from '@/utils/handlerColor.js'
	export default {
		computed: {
			...mapGetters(["dept", "deptId"])
		},
		data() {
			return {
				total: 0,
				boxTop: 0,
				buildingList: [],
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了~'
				},
				queryParams: {
					xiaoquId: undefined,
					deptId: undefined,
					pageNum: 1,
					pageSize: 24,
				},
			}
		},

		onShow() {
			const systemData = this.$u.sys()
			this.boxTop = (systemData.statusBarHeight + 44) * 2
			this.queryParams.xiaoquId = this.dept.xiaoquId
			this.queryParams.deptId = this.deptId
			this.queryParams.pageNum = 1
			this.buildingList = []
			this.getWarnList()
		},
		methods: {
			handlerCilck(item) {
				console.log(item)

				this.$u.route({
					url: 'pages/house/house',
					params: {
						buildingId: item.buildingId,
						houseId: item.houseId,
						deptId: item.deptId,
						houseName: item.housename
					}
				})
			},
			// 触底加装更多
			scrolltolower() {
				if (this.buildingList.length >= this.total) {
					this.status = 'nomore';
					return
				}
				this.getWarnList()
			},
			//获取预警列表
			async getWarnList() {
				this.status = 'loading';
				const res = await getWarningList(this.queryParams)
				let list = handleColor(res.rows)
				this.buildingList = [...this.buildingList, ...list]
				this.total = res.total
				uni.setTabBarBadge({
					index: 1,
					text: this.total.toString()
				})
				this.queryParams.pageNum = this.queryParams.pageNum + 1
				this.status = 'loadmore';
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.app-container {
		height: 100%;
	}

	.building-list {
		box-sizing: border-box;
		padding: 20rpx;
		display: grid;
		/* 启用 Grid 布局 */
		grid-template-columns: repeat(3, 1fr);
		/* 创建三列，列宽相等 */
		gap: 25rpx;

		.building-item {
			/* 背景色，方便查看 */
			padding: 20rpx;
			/* 内边距 */
			text-align: center;
			/* 文本居中 */
			background-color: #fff;
			box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
			border-radius: 3px;
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				font-size: 28rpx;
			}

		}

		/* 设置列之间的间隙 */
	}
</style>