bigDataApp/pages/cb/index/index.vue

<template>
	<view class="">	
		<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 class="content">
			<template v-for="(item,index) in equipArr[active].list" >
				<equipItem @click.native="itemClick(item)" v-bind:item="item" :key="index"></equipItem>
			</template>
		</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
			}
		},
		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)
		},
		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"
				})
			}
		},
		components:{
			equipItem,
			uniNavBar
		}
	}
</script>

<style lang="scss">
page {
	background:$uni-bg-color-grey;
	.content{padding:0 20rpx 20rpx 20rpx;}
}
image{
	width:100%;
}
.tab-box{
	display:flex;
	justify-content: space-around;
	font-size:30rpx;
	line-height:80rpx;
	.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;
		}
	}
}
</style>