TaicangPopulationApp2/pages/index.vue

<template>
	<navigation-general :isBack="false" title="首页">
		<u-dropdown>
			<u-dropdown-item v-model="queryParams.deptId" :title="selectTitle" :options="selectList"
				@change="selctChange"></u-dropdown-item>
		</u-dropdown>
		<scroll-view scroll-y="true" :style="{height: `calc(100% - ${boxTop}rpx)`}" @scrolltolower="scrolltolower">
			<div class="building-list">
				<view class="building-item" v-for="item in buildingList" :key="item.id" @click="handlerBuilding(item)">
					<text class="building-name">{{item.deptname}}{{item.name }}</text>
					<text class="yipaimo">已排查0户</text>
					<text class="weipaimo">未排查0户</text>
				</view>

			</div>
			<u-loadmore :status="status" :load-text="loadText" />
		</scroll-view>
	</navigation-general>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		appDeptname,
		listBuilding
	} from '@/api/taicangpop/building.js'
	export default {
		data() {
			return {
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了~'
				},
				total: 0,
				boxTop: 0,
				queryParams: {
					xiaoquId: undefined,
					deptId: undefined,
					pageNum: 1,
					pageSize: 24,
				},
				selectList: [],
				selectTitle: '选择苑',
				buildingList: [],
			}
		},
		created() {


			const systemData = this.$u.sys()
			this.boxTop = (systemData.statusBarHeight + 44) * 2 + 80

		},

		onLoad: function() {
			this.queryParams.xiaoquId = this.dept.xiaoquId
			this.queryParams.deptId = this.dept.deptId
			this.setBar()
			this.getSelectList()
			this.getBuildList()
		},
		methods: {
			//跳转楼栋页面
			handlerBuilding(item) {
				this.$u.route({
					url: 'pages/building/building',
					params: {
						buildingId: item.id,
						deptname: item.name
					}
				})
			},

			//更新tabar
			setBar() {
				this.$store.commit('SET_DEPT_ID', this.queryParams.deptId)
				this.$store.dispatch('getWarnNum', {
					deptId: this.queryParams.deptId
				}).then((res) => {
					uni.setTabBarBadge({
						index: 1,
						text: res.toString()
					})
				})
			},
			//触底加载更多
			scrolltolower() {
				if (this.buildingList.length >= this.total) {
					this.status = 'nomore';
					return
				}
				this.getBuildList()
			},
			//重置
			reset() {
				this.queryParams.pageNum = 1
				this.total = 0
				this.buildingList = []
				this.getBuildList()
			},
			//获取楼层
			async getBuildList() {
				this.status = 'loading';
				const res = await listBuilding(this.queryParams)
				this.buildingList = [...this.buildingList, ...res.rows]
				this.total = res.total
				this.queryParams.pageNum = this.queryParams.pageNum + 1
				this.status = 'loadmore';
			},

			//下拉框变化
			selctChange(value) {
				const selectItem = this.selectList.find(item => item.value == value)
				this.selectTitle = selectItem.label
				this.setBar()
				this.reset()
			},
			// 获取下拉菜单数据
			async getSelectList() {
				const res = await appDeptname({
					xiaoquId: this.queryParams.xiaoquId
				})
				this.selectList = res.data.map(item => {
					if (item.deptId == this.dept.deptId) this.selectTitle = item.deptName
					return {
						label: item.deptName,
						value: item.deptId
					}
				})
			}
		},
		computed: {
			...mapGetters(["dept", ]),
		},
	}
</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;
			}

			.yipaimo {
				color: green;
			}

			.weipaimo {
				color: red;
			}
		}

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