xunjian_app/scan_pages/checkpoint/checkpoint.vue

<template>
	<view class="u-flex f-d-c m-w" style="border-top: 1px solid #CCCCCC;">
		<!-- <view style="background: #FFFFFF;" class="m-w u-p-l-20 u-p-r-20 u-p-t-24  u-p-b-24 ">
			<cSearch placeholder="查询" @serbtn="setrch()"  ></cSearch>
		</view> -->
		<view class="m-w">
			<cDropdow :options="options1" title="全部巡检路线" @getroomList="getCheckRooms"></cDropdow>
		</view>
		<!-- <u-dropdown style="width: 50%;">
			<u-dropdown-item v-model="value1" title="全部巡检路线" :options="options1"></u-dropdown-item>
		</u-dropdown> -->
		<scroll-view @scrolltolower="lazyGetRooms()" :scroll-y="true" class="sc-view u-p-l-10 u-p-r-10">
			<u-cell-group style="width: 100%;">
				<navigator class="u-border-bottom" style="border: solid 3rpx #FFFFFF;" hover-class="none" :url="`../checkdetail/checkdetail?id=${item.id}&routeId=${item.routeId}`"
					v-for="(item,index) in cellmenu" :key="item.number">
					<u-cell-item  :border-top="false" :border-bottom="false" bg-color="#ffffff" :key="index"
						:label-style="{'fontSize':'28rpx', 'color':'rgba(80, 80, 80, 1)'}"
						:icon-style="{'color':'#B3B3B3'}"
						:title-style="{'color':'#000','fontSize':'32rpx','fontWeight':' blod'}" :arrow="false"
						:label="item.name" :title="item.number">
						<u-icon name="arrow-right" slot="right-icon" color="#B3B3B3" size="38"></u-icon>
					</u-cell-item>
					<!-- <view style=" height: 3rpx;width: 100%; background: #FFFFFF;"></view> -->
				</navigator>
			</u-cell-group>
			<view style="overflow: hidden;">
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
		</scroll-view>
		<u-toast ref="chckToast"></u-toast>
	</view>
</template>

<script>
	import cSearch from '@/components/c-search/index'
	import cDropdow from '../components/c-dropdown/index'
	import debounce from '@/util/debounce/debounce.js'
	import {
		checkOption,
		checkRooms
	} from '@/api/index.js'
	export default {
		name: "checkpoint",
		components: {
			cSearch,
			cDropdow
		},
		data() {
			return {
				option_name: '',//子组件传的路线选项值
				options1: [], //路线选项数组
				cellmenu: [], //房间数组
				//请求数据
				queryform: {
					pageSize: 10,
					currPage: 1,
					pointName: ""
				},
				currentPage: 0,//当前页
				totalCount: -1,//总个数
				//下拉加载配置
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		onLoad() {
			this.getCheckOption()
			this.getCheckRooms(null, -1)
		},
		methods: {
			//获取巡检路线选项
			async getCheckOption() {
				let {
					data
				} = await checkOption()
				this.options1.length = 0;
				data.forEach(i => {
					let obj = new Object;
					obj.label = i.name;
					obj.value = i.id;
					this.options1.push(obj)
				})
				this.options1.push({
					label: '全部巡检路线',
					value: null
				})
			},
			//获取路线所有房间
			async getCheckRooms(option_name, index) {
				this.option_name = option_name
				if (index == -1 || this.totalCount == -1) {
					this.cellmenu = []
					this.currentPage = 1
					if (option_name) {
						let {
							data
						} = await checkRooms({
							id: option_name,
							page: 1,
							size: 10,
						})
						this.cellmenu = data.list
						this.totalCount = data.total
					} else {
						let {
							data
						} = await checkRooms({
							page: 1,
							size: 10,
						})
						this.cellmenu = data.list
						this.totalCount = data.total
					}
				} else {
					let curPage = this.currentPage + 1
					if (this.cellmenu.length < this.totalCount) {
						if (option_name) {
							let {
								data
							} = await checkRooms({
								id: option_name,
								page: curPage,
								size: 10,
							})
							data.list.forEach(i => {
								this.cellmenu.push(i)
							})
							this.currentPage = this.currentPage + 1
						} else {
							let {
								data
							} = await checkRooms({
								page: curPage,
								size: 10,
							})
							data.list.forEach(i => {
								this.cellmenu.push(i)
							})
							this.currentPage = this.currentPage + 1
						}
					} else if (this.cellmenu.length = this.totalCount) {
						this.$refs.chckToast.show({
							title: '没有更多了',
							type: 'info',
						})
					}
				}
			},
			//懒加载房间数据
			lazyGetRooms() {
				let timer = null
				return (() => {
					if (this.cellmenu.length == this.totalCount) this.status = 'nomore';
					this.status = 'loading';
					if(timer) {
						 clearTimeout(timer)
					}
				 timer = setTimeout(() => {
					 this.getCheckRooms(this.option_name,1)
					 if (this.cellmenu.length == this.totalCount) this.status = 'nomore';
					 else this.status = 'loading';
				 }, 2000)
				})()
			}
		}
	}
</script>

<style>
	page {
		background: #ffffff;
	}

	.sc-view {
		height: calc(100vh - 84rpx);
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 6rpx 0px rgba(6, 0, 1, 0.26);
		border-radius: 10rpx 10rpx 0px 0px;
	}
</style>