bigDataApp/pages/monitor/index.vue

<template>
	<view class="">
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="监控系统"></uni-nav-bar>
			<view class="">
				<image src="../../static/image/monitor/banner.png" mode="widthFix"></image>
			</view>
			<view class="content">
				<template v-for="(item,index) in listArr">
					<equipItem @click.native="itemClick(item)" v-bind:item="item" :key="index">
						<view class="type-name">
							<view class="iconfont icon-jiankong"></view>
							<text>
								监控
							</text>
						</view>

					</equipItem>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import equipItem from "../../components/equip-item/equip-item"
	export default {
		data() {
			return {
				listArr: [],
				page: 1,
				accessToken: '',
				counts: ''
			}
		},
		onLoad() {
			this.getEquipList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.listArr = []
			this.getEquipList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)

		},
		onReachBottom() {
			this.page++
			if (this.counts == this.listArr.length) {
				return false
			}
			this.getEquipList()
		},
		methods: {
			async getEquipList() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=camera.camera_manage.list_camera',
					data: {
						page: this.page
					}
				})
				let data = res.data
				let arr = data.map(item => {
					return {
						...item,
						device_status: item.status
					}
				})
				console.log(arr)
				console.log(this.listArr)
				this.listArr = [...this.listArr, ...arr]
				this.accessToken = res.accessToken
				this.counts = res.counts
			},
			clickLeft() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			itemClick(item) {
				// uni.navigateTo({
				// 	url:"/pages/monitor/detail?device_id="+item.device_id+"&accessToken="+this.accessToken
				// })
				uni.navigateTo({
					url: "/pages/webview?device_id=" + item.device_id + "&accessToken=" + this.accessToken
				})
			}
		},
		components: {
			equipItem
		}

	}
</script>

<style lang="scss">
	image {
		width: 100%;
	}

	.type-name {
		color: #999;
		display: flex;
		justify-content: flex-start;
		font-size: 12px;

		text {
			margin-left: 10px;
		}
	}
</style>