emergencyManagement/packageA/pages/camera/index.vue

<template>
	<view class="page-wrap">
		<view class="head">
			<uni-card padding="0" margin="5px 0">
				<uni-search-bar @confirm="search" v-model="keywords" @clear="search"></uni-search-bar>
			</uni-card>
		</view>	
		<view class="pageMain">
			<view class="camerasbox">
				<view class="item" v-for="item in items" :key="item.cameraId">
						<view class="item-card">
							<uni-icons type="videocam-filled" size="40" color="#999" @click="showCamera(item)"></uni-icons>							
							<view class="title" v-if="item.cameraTitle">{{item.cameraTitle}}</view>
						</view>		
					</view>		
				</view>	
			</view>
		</view>	
	</view>
</template>

<script>
	import cameraApi from '@/api/camera.js'					
	export default {
		data() {
			return {
				items:[],
				page:1,
				limit:20,
				total:0,	
				keywords: ""
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			search(){
				this.resetFilter();
				this.getData()
			},
			getData(){
				cameraApi.getByPage({
					page:this.page,
					limit:this.limit,
					keywords:this.keywords
				}).then((res)=>{
					this.items=this.items.concat(res.data)
					this.total=res.total
				})
			},		
			resetFilter(){
				this.page = 1
				this.limit = 20
				this.total = 0
				this.items=[]
			},
			showCamera(item){
				uni.navigateTo({
					url:`/pages/webview/webview?id=${item.cameraId}&title=${item.cameraTitle}`
				})
			},
		},
		onReachBottom() {
			if(this.total>this.limit*this.page){
				this.page++
				this.getData()				
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	padding:0 20rpx;
	.head{
		position: fixed;
		width: 750rpx;
		height: 60px;
		left: 0;
		top: 0;
		background-color: #fff;
	}
	.pageMain{
		margin-top: 70px;
		background-color: #f5f5f5;
		padding-bottom: 50rpx;
		.camerasbox{
			width:100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			background-color: #fff;
			.item{
				width: 50%;		
				padding: 20rpx;
				background-color: #fff;
				box-sizing: border-box;
				.item-card{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					box-shadow: 0 0 1px rgba(0,0,0,0.6);
					padding: 20rpx;
					.title{
						width: 100%;
						font-size: 24rpx;
						color: #424242;
						line-height: 1.4;
						padding-bottom: 15rpx;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						text-align: center;
					}
				}
			}
		}	
	}
}
</style>