ybxf-security-uniapp/pagesA/fire/zlgztzs/zlgztzs.vue

<template>
	<view>
		<view class="main"  v-if="list.length>0 && isLoaded">
			<view v-for="(item, index) in list" :key="index">
				<uni-card>
					<view>
						<view class="main-item">
							<view class="name-align-zlzgtzs">单位名称：</view>
							<view class="conts">{{ item.dwmc }}</view>
						</view>
						<view class="main-item">
							<view class="name-align-zlzgtzs">被检查单位：</view>
							<view class="conts">{{ item.bjcdw }}</view>
						</view>
						<view class="main-item">
							<view class="name-align-zlzgtzs">检查日期：</view>
							<view class="conts">{{ item.jcrq }}</view>
						</view>
						<view class="an-niu" @click.native="onClick(item.id)" link>
							<text class="detail">查看</text>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
		<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>
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>

<script>
	import {
		getZlgztzsPage
	} from '@/api/zlgztzs';
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				tan90: `${baseUrlImg}/tan90.png`,
				list: [],
				isLoaded:false,
				loading:false,
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				// 总条数
				total: 0,
			}
		},
		onShow() {
			this.list=[]
			this.getData()
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		methods: {
			getData() {
				this.loading = true
				getZlgztzsPage(this.queryParams).then(response => {
					this.isLoaded = true;
					this.list = [...this.list, ...response.data.list]
					this.loading = false
					console.log(this.list, 'reponse');
					// this.list = reponse.data.list
				})
			},
			onClick(val){
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/zlgztzs/see_zlgztzs/see_zlgztzs?id=${val}`
				});
			}
		},
		// 触底的事件
		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" scope>
	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;
	}

	.main {
		margin-left: 5%;
		margin-top: 30rpx;
		width: 90%;

		.main-item {
			display: flex;
			margin-bottom: 15rpx;
			color: #728f90;
		}
	}

	.an-niu {
		float: right;
		font-size: 10px;
		text-align: center;
		display: flex;
		color: #fff;
        margin-bottom:20rpx;
		.detail {
			width: 72px;
			height: 60rpx;
			border-radius: 30px;
			background-color: #f7c41e;
			margin-right: 20rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}
</style>