bigdata_WX/pages/expertDiagnosis/wormcase.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 40px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" :title="title"></uni-nav-bar>
			</view>
			<view class="bases_search">
				<view class="tabs">
					<view class="tab_item" :class="{'active':tabIndex == 0}" @click="changeTab(0)">虫情百科</view>
					<view class="tab_item" :class="{'active':tabIndex == 1}" @click="changeTab(1)">病害百科</view>
				</view>
				<view class="bases_search_text">
					<u-icon name="search" class="search" @click="search"></u-icon>
					<input type="text" v-model="inputdata" :placeholder="placeholder" @input="searchinput" />
				</view>
			</view>
			<view class="particulars">
				<view class="particulars_item" v-for="(item,index) in content" :key="index" @click="introduce(item.id)">
					<view class="imgs">
						<image :src="$imageURL+'/bigdata_app'+'/image/cb/jiazai.ui.gif'" mode="" class="imgbg"></image>
						<image :src="item.img_urls" mode="" class="imgs_img"></image>
					</view>
					<p class="info">{{item.name}}</p>
				</view>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="$imageURL+'/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode=""></image>
		</view>
	</view>
</template>
<script>
	import {
		Debounce,
		Throttle
	} from "../../util/anitthro.js"
	export default {
		data() {
			return {
				title: '',
				tabIndex: 0,
				content: [],
				data: {
					code: null,
					page: null
				},
				isTop:false,
				inputdata:"",
				placeholder:""
			}
		},
		methods: {
			// http://8.136.98.49:8002/api/api_gateway?method=pest.pests.pests_search
			async getCooperation(data) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.pests_search',
					data: {
						code: data.code,
						page: data.page,
						name: data.name
					}
				})
				this.content = this.content.concat(res.data)
			},
			clickLeft() {
				uni.navigateBack({
					delta:1
				})
			},
			introduce(id) {
				uni.navigateTo({
					url: "./introduce?id=" + id + "&title=" + this.title
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			searchinput() { //搜索
				Debounce(() => {
					this.search()
				}, 1000)()
			},
			changeTab(index) {
				this.tabIndex = index
				if(index == 0){
					this.title = "虫情百科"
				}else{
					this.title = "病害百科"
				}
				this.search()
			},
			search() { //搜索按钮
				this.content = []
				if (this.title == "虫情百科") {
					this.data.code = 2
					this.data.page = 1
					this.data.name = this.inputdata
					this.getCooperation(this.data)
				} else {
					this.data.code = 1
					this.data.page = 1
					this.data.name = this.inputdata
					this.getCooperation(this.data)
				}
			},
		},
		onLoad(option) {
			this.title = option.name
			if (option.name == "虫情百科") {
				this.tabIndex = 0
				this.data.code = 2
				this.data.page = 1
				this.data.name = this.inputdata
				this.getCooperation(this.data)
				this.placeholder = "请输入害虫名称"
			} else {
				this.tabIndex = 1
				this.data.code = 1
				this.data.page = 1
				this.data.name = this.inputdata
				this.getCooperation(this.data)
				this.placeholder = "请输入病害名称"
			}
		},
		onReachBottom() {
			this.data.page++
			this.getCooperation(this.data)
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
	}
</script>
<style lang="scss">
	.particulars {
		width: 100%;
		position: relative;
		top: 140rpx;
		display: flex;
		flex-wrap: wrap;
			.particulars_item {
			width: 50%;
			padding: 20rpx;
			box-sizing: border-box;

			.imgs {
				width: 100%;
				height: 220rpx;
				position: relative;

				.imgbg {
					width: 50%;
					height: 50%;
					position: absolute;
					top: 25%;
					left: 25%;
				}

				.imgs_img {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			.info {
				font-size: 28rpx;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
	.bases_search {
		width: 100%;
		position: fixed;
		top: 80px;
		z-index: 100;
		background-color: #FFFFFF;
		.tabs {
			width: 100%;
			display: flex;
			justify-content: space-around;
			margin: 20rpx 0 30rpx;
			.tab_item {
				width: 45%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 30rpx;
				background-color: #F8F8F8;
			}
			.tab_item.active {
				background-color: #18B566;
				color: #fff;
			}
		}
		.bases_search_text {
			width: 95%;
			margin: 0 auto;
			background-color: #F8F8F8;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			line-height: 60rpx;
			margin-bottom: 20rpx;
			.search {
				padding: 0 20rpx;
				font-size: 34rpx;
			}
	
			input {
				width: 80%;
				margin-top: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;

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