ybxf-security-uniapp/pagesA/fire/fire_inspetItem/streetCzfpczl.vue

<template>
	<view class="uni-container">
		<my-search :queryParams="queryParams" :getData="getData" @date-change="onDateChange"></my-search>
		<view class="main-street" v-if="list.length>0 && isLoaded">
			<view v-for="(item, index) in list" :key="index">
				<uni-card>
					<view>
						<view class="main-item">
							<view>填报时间：</view>
							<view class="conts">{{ item.reporttime }}</view>
						</view>
					</view>
					<view class="">
						<view class="an-niu-street" @click.native="delClick(item.id)" link style="margin-left:3px">
							<text class="deletes">删除</text>
						</view>
						<view class="an-niu-street" @click.native="viewClick(item.id)" link>
							<text class="detail">查看</text>
						</view>
						<view class="an-niu-street" @click.native="editClick(item.id)" link>
							<text class="bianji">编辑</text>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
		<!-- tableData为空时显示  -->
		<view v-else-if="list.length==0 && isLoaded" style="text-align: center;">
			<view class="text-gray" style="padding-top: 20px;">
				<img :src="tan90" alt="暂无数据" />
			</view>
		</view>
		<image :src="Group" @click="addClick" class="tiantupian-street"></image>
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>

<script>
	import {
		getCzfpczl,
		delCzfpczl
	}
	from '@/api/fire_inspetItem/index';
	import {
		delSure
	} from '@/utils/common.js'
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	import mySearch from '@/pagesA/components/my-search/index'
	export default {
		components: {
			mySearch
		},
		data() {
			return {
				isLoaded: false,
				kewords: '',
				Group: `${baseUrlImg}/checkActive/Group.png`,
				tan90: `${baseUrlImg}/tan90.png`,
				list: [],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					reporttime: []
				},
				// 总条数
				total: 0,
				loading: false
			}
		},
		onShow() {
			this.list = []
			this.getData()
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		methods: {
			onDateChange(params) {
				this.queryParams = params
				this.loading = true
				this.isLoaded = false
				this.list = []
				this.getData()
			},
			getData() {
				this.loading = true
				getCzfpczl(this.queryParams).then(response => {
					this.isLoaded = true
					this.list = [...this.list, ...response.data.list]
					this.loading = false
					// this.list = reponse.data.list
				})
			},
			viewClick(item) {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/fire_inspetItem/add-street/streetCzfpczl?viewData=${item}`,
				})
			},
			editClick(item) {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/fire_inspetItem/add-street/streetCzfpczl?editData=${item}`,
				})
			},
			delClick(val) {
				delSure(delCzfpczl, val, this)
			},
			addClick() {
				this.isLoaded = false
				uni.navigateTo({
					url: '/pagesA/fire/fire_inspetItem/add-street/streetCzfpczl',
				})
			},
		},
		// 触底的事件
		onReachBottom() {
			// 判断是否还有下一页数据
			if (this.queryParams.pageNo * this.queryParams.pageSize >= this.total)
				return uni.showToast({
					title: `数据加载完毕`
				});
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			if (this.loading) return;
			this.queryParams.pageNo += 1;
			this.getData(this.queryParams.pageNo);
		},
	}
</script>


<style lang="scss" scoped>
	body {
		background-color: #f5f7f9;
	}

	page {
		background-color: #f5f7f9 !important;
	}

	.uni-container {
		height: 100%
	}

	/deep/.uni-card {
		box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
		border-radius: 30rpx;
	}
</style>