bigDataApp/pages/cb/index/index.vue

<template>
	<view class="">
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickRight="clickRight" @clickLeft="clickLeft" left-icon="back" left-text="返回" right-icon="search"
				 title="测报灯系统"></uni-nav-bar>
				<view>
					<image src="../../../static/image/cb/banner.jpg" mode="widthFix"></image>
				</view>
				<view class="tab-box">
					<view v-for="(item,index) in equipArr" :key="item.type" @click="tabClick(index)" :class="['tab-item',active==index?'active':'']">
						<text>{{item.name}}</text>
						<text class="bottom-line"></text>
					</view>
				</view>
			</view>
			<view class="" style="position: absolute;top: 180px;width: 100%;">
				<view class="content">
					<template v-for="(item,index) in equipArr[active].list">
						<equipItem @click.native="itemClick(item)" v-bind:item="item" :key="index">
							<view class="date">
								最新上报时间：{{item.addtime|timeFormat}}
							</view>
						</equipItem>
					</template>
				</view>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image src="../../../static/image/6209a98f0cb3b5086f2ca36152c9269.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import equipItem from "../../../components/equip-item/equip-item"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				active: 0, //默认选中虫情测报
				equipArr: [{
					name: '虫情测报',
					type: 3, //3虫情测报灯 7孢子仪 4智能性诱
					list: [],
					pageIndex: 1,
				}, {
					name: '孢子仪',
					type: 7, //3虫情测报灯 7孢子仪 4智能性诱
					list: [],
					pageIndex: 1,
				}, {
					name: '性诱测报',
					type: 4, //3虫情测报灯 7孢子仪 4智能性诱
					list: [],
					pageIndex: 1,
				}],
				device_id: '3', //筛选的设备id
				isTop: false
			}
		},
		onLoad() {
			this.getEquipList(0)
			this.getEquipList(1)
			this.getEquipList(2)
		},
		onShow() {

		},
		onHide() {

		},
		onUnload() {

		},
		onPullDownRefresh() {
			this.equipArr[this.active].pageIndex = 1
			this.equipArr[this.active].list = []
			this.getEquipList(this.active)
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			let act = this.active
			if (this.equipArr[act].list.length < this.equipArr[act].pageIndex * 10) { //判断是否数据请求完
				return false
			}
			this.equipArr[act].pageIndex++;
			this.getEquipList(act)
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.clickLeft();
			return true;
		},
		methods: {
			async getEquipList(act) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
					data: {
						device_type_id: this.equipArr[act].type,
						page: this.equipArr[act].pageIndex,
						page_size: 10,
					}
				})
				console.log(res)
				this.equipArr[act].list = [...this.equipArr[act].list, ...res.data]
				console.log(this.equipArr[act].list)
			},
			tabClick(index) {
				this.active = index;
				this.device_id = this.equipArr[index].type
			},
			clickRight() {
				uni.navigateTo({
					url: "./search?device_id="+this.device_id
				})
			},
			itemClick(item) {
				item.type = this.equipArr[this.active].type
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/cb/equip-detail/equip-detail?info=' + data
				});
			},
			clickLeft() {
				uni.switchTab({
					url: "../../index/index"
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			}
		},
		components: {
			equipItem,
			uniNavBar
		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;

		.content {
			padding: 0 20rpx 20rpx 20rpx;
			box-sizing: border-box;
		}
	}

	image {
		width: 100%;
	}

	.tab-box {
		display: flex;
		justify-content: space-around;
		font-size: 30rpx;
		line-height: 80rpx;
		background-color: #FFFFFF;
		margin-top: -10rpx;

		.tab-item {
			cursor: pointer;
			position: relative;
		}

		;

		.tab-item.active {
			.bottom-line {
				bottom: 0;
				position: absolute;
				display: inline-block;
				width: 90rpx;
				height: 6rpx;
				left: 0;
				right: 0;
				margin: auto;
				background: $uni-color-success;
			}
		}
	}

	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>