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:'',//筛选的设备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
			}
		},
		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)
			},
			async searchEquip(){
				const res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.worm_lamp.lamp_list',
					data:{
						device_type_id:this.equipArr[this.active].type,
						device_id:this.device_id,
					}
				})
				this.equipArr[this.active].list=res.data
			},
			tabClick(index){
				this.active=index;
			},
			clickRight(){
				uni.navigateTo({
				    url: '/pages/search/search?device_type_id='+this.equipArr[this.active].type
					})
			},
			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>