bigdata_WX/pages/identifyPest/repository/repository.vue

<template>
	<view>
		<!-- 搜索 -->
		<u-search maxlength="20" @search="seek" bg-color="#fff" margin="15rpx auto" :input-style="{width: '20rpx'}"
		 input-align="center" :animation="true" placeholder="搜索虫害或病害名称(按回车键或搜索进行查询)" shape="square" :show-action="false"
		 v-model="keyword"></u-search>

		<!-- tab切换 -->
		<view class="inv-h-w">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">虫害</view>
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">病害</view>
		</view>

		<view v-if="searchShow">
			<view v-if="isShow">
				<!-- 虫害 -->
				<view class="" v-show="Inv == 0">
					<view class="repository_ul">
						<view class="repository_list" @click="defails(item.id)" v-for="(item, index) in insectArr" :key="index">
							<u-image width="320rpx" height="230rpx" class="repository_listImg" :src="item.thumb"></u-image>
							<view class="">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>

				<!-- 病害 -->
				<view class="" v-show="Inv == 1">
					<view class="repository_ul">
						<view class="repository_list" @click="defails(item.id)" v-for="(item, index) in plantArr" :key="index">
							<!-- <image :src="item.thumb" mode=""></image> -->
							<u-image width="320rpx" height="230rpx" class="repository_listImg" :src="item.thumb"></u-image>
							<view class="">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 暂无 -->
			<view class="notDataBox" v-else>
				<image :src="$imageURL_58003+'/bigservers/' + 'images/detail_11.png'" class="notDataBox_img" mode=""></image>
			</view>

			<!--  -->
			<view class="isOver" v-show="flag">
				---- 我是有底线的 ----
			</view>
		</view>

		<!-- 搜索 -->
		<view class="searchBox" v-else>
			<!-- <image class="searchBox_img" :src="$imageURL_58003+'/bigservers/' + 'images/search.gif'" mode=""></image> -->
			<view v-if="isShow">
				<!-- 虫害 -->
				<view class="" v-show="Inv == 0">
					<view class="repository_ul">
						<view class="repository_list" @click="defails(item.id)" v-for="(item, index) in insectArrA" :key="index">
							<u-image width="320rpx" height="230rpx" class="repository_listImg" :src="item.thumb"></u-image>
							<view class="">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>

				<!-- 病害 -->
				<view class="" v-show="Inv == 1">
					<view class="repository_ul">
						<view class="repository_list" @click="defails(item.id)" v-for="(item, index) in plantArrA" :key="index">
							<!-- <image :src="item.thumb" mode=""></image> -->
							<u-image width="320rpx" height="230rpx" class="repository_listImg" :src="item.thumb"></u-image>
							<view class="">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 暂无 -->
			<view class="notDataBox" v-else>
				<image :src="$imageURL_58003+'/bigservers/' + 'images/detail_11.png'" class="notDataBox_img" mode=""></image>
			</view>

			<!--  -->
			<view class="isOver" v-show="flag">
				---- 我是有底线的 ----
			</view>
		</view>

		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>

		<!--loading-->
		<ourLoading v-show="loadingShow" isFullScreen active text="加载中..." />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchShow: true, //搜索
				keyword: '', //搜索
				Inv: 0,
				insectArr: [],
				plantArr: [],
				insectArrA: [], //搜索
				plantArrA: [], //搜索
				dataNum: null, //列表总条数
				pageIndex: 1, //当前页数
				flag: false,
				numData: 10, //固定每页显示多少条
				pagination: null, //总页码
				scrollTop: 0, //返回顶部
				isShow: true, //暂无
				listLangth: null, //每次请求数据条数
				loadingShow: true, //加载
				listLength: null, //数据长度
			}
		},
		// 监听data中的变化
		watch: {
			Inv(val) {
				this.dataNum = null //清空
				this.scrollTop = 0
				this.pageIndex = 1 //清空
				this.pagination = null //清空
				this.insectArr = []
				this.plantArr = []
				this.insectArrA = []
				this.plantArrA = []
				this.listLength = null
				this.flag = false
				this.keyword = ''
				this.scrollTop = 0
				this.listData()
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			keyword(val) {
				if (val == '') {
					this.dataNum = null //清空
					this.pageIndex = 1 //清空
					this.pagination = null //清空
					this.listLength = null
					this.searchShow = true
					this.flag = false
					this.insectArrA = []
					this.plantArrA = []
					this.listData()
				} else if (val !== '') {
					this.dataNum = null //清空
					this.pageIndex = 1 //清空
					this.pagination = null //清空
					this.listLength = null
				}
			}
		},
		methods: {
			changeTab(Inv) {
				that.navIdx = Inv;
			},

			// 列表数据请求
			listData() {
				if (this.Inv == 0) {
					var ret = '2'
				} else if (this.Inv == 1) {
					var ret = '1'
				}
				let postData = ({
					ret: ret,
					page: this.pageIndex,
				});
				// console.log(this.pageIndex)
				let that = this;
				var pages = that.pageIndex
				uni.request({
					url: 'see_dase',
					data: postData,
					method: 'POST',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					dataType: 'json',
					success(res) {
						that.dataNum = res.data.num
						if (res.data.dat.length !== 0) {
							if (ret == '1') {
								if (postData.page == 1 && that.plantArr.length == 10 ) {
									
								} else {
									that.plantArr = [...that.plantArr, ...res.data.dat]
								}
							} else {
								// console.log(that.insectArr)
								if (postData.page == 1 && that.insectArr.length == 10) {
								} else {
									that.insectArr = [...that.insectArr, ...res.data.dat]
								}
								// console.log(that.insectArr)
							}
							// console.log(that.insectArr)
							that.isShow = true
							that.listLength = res.data.dat.length
							that.loadingShow = false
						} else {
							that.isShow = false
						}
					},
					fail(err) {
						console.log(err)
					},
					complete(com) {}
				})
			},

			// 点击进入详情
			defails(id) {
				uni.navigateTo({
					url: '/pages/details/details?id=' + id + '&signboard=1'
				})
			},

			// 搜索
			seek() {
				var that = this
				that.searchShow = false
				// 判断
				if (that.Inv == 0) {
					var ret = '2'
				} else if (that.Inv == 1) {
					var ret = '1'
				}
				uni.request({
					url: 'search',
					data: {
						name: that.keyword,
						ret, //1病  2虫
						page: that.pageIndex
					},
					method: 'POST',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					dataType: 'json',
					success(res) {
						that.dataNum = res.data.num
						if (res.data.dat.length !== 0) {
							if (ret == '1') {
								that.plantArrA = [...that.plantArrA, ...res.data.dat]
							} else {
								that.insectArrA = [...that.insectArrA, ...res.data.dat]
							}
							that.isShow = true
							that.listLength = res.data.dat.length
							that.loadingShow = false
						} else {
							that.isShow = false
						}
					},
					fail(err) {
						console.log(err)
					},
					complete(com) {
						that.searchShow = false
					}
				})
			},
		},

		// 初始化
		onLoad() {
			this.listData()
		},
		// 滚动到底翻页
		onReachBottom() {
			if (this.dataNum !== 0 || this.dataNum !== null) {
				if (this.pagination == null) {
					var a = this.dataNum
					var b = this.numData
					var c = a / b
					this.pagination = Math.ceil(c)
				}
				this.pagination--
				if (this.keyword !== '') {
					// 搜索数据
					if (this.listLength == 10) {
						if (this.pagination >= 1) {
							this.pageIndex++
							this.seek()
						} else {
							this.flag = true
						}
					} else if (this.listLength < 10) {
						this.flag = true
					}
				} else if (this.keyword == '') {
					// 列表数据
					if (this.listLength == 10) {
						if (this.pagination >= 1) {
							this.pageIndex++
							this.listData()
						} else {
							this.flag = true
						}
					} else if (this.listLength < 10) {
						this.flag = true
					}
				}
			} else {
				this.flag = true
			}
		},

		// 监听下拉动作
		onPullDownRefresh() {
			setTimeout(() => {
				// console.log(this.insectArrA)
				this.insectArr = [],
					this.plantArr = [],
					this.plantArrA = [],
					this.insectArrA = [],
					// console.log(this.insectArrA)
					this.pageIndex = 1
				this.pagination = null
				this.keyword = ''
				this.flag = false
				this.listData()
				uni.stopPullDownRefresh()
			}, 2000)
		},

		// 监听获取滚动条位置
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	}
</script>

<style lang="scss">
	// 搜索
	// uni-view,
	// uni-text {
	// 	width: 740rpx;
	// 	margin: 0 auto;
	// }


	// tab切换
	.inv-h-w {
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
	}

	.inv-h {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		color: #C9C9C9;
		height: 100upx;
		line-height: 100upx;
	}

	.inv-h-se {
		color: #20c7a1;
		border-bottom: 4upx solid #20c7a1;
	}

	page {
		background-color: #f7f8fc;
	}


	// 内容
	.repository_ul {
		// border: 1px solid #000;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// width: 750rpx;
		margin: 15rpx 17rpx 15rpx 17rpx;

		.repository_list {
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			width: 350rpx;
			padding: 10rpx 0 0 0;
			background: #fff;
			margin-bottom: 15rpx;
			border-radius: 5px;

			// image {
			// 	width: 320rpx;
			// 	height: 230rpx;
			// 	display: block;
			// 	margin: 0 auto;
			// }

			.repository_listImg {
				width: 320rpx;
				height: 230rpx;
				display: block;
				margin: 0 auto;
			}

			view {
				color: #5e5e5e;
				text-align: left;
				margin-left: 12rpx;
				padding: 5rpx 0 5rpx 0;
			}
		}
	}

	// .repository_ul:after {
	// 	content: "";
	// 	flex: auto;
	// }

	.isOver {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		// background: #fff;
		font-size: 28rpx;
	}

	// 暂无数据
	.notDataBox {
		.notDataBox_img {
			display: block;
			margin: 300rpx auto;
			width: 300rpx;
			height: 300rpx;
		}
	}

	// 搜索动画
	.searchBox {
		.searchBox_img {
			margin: 0 auto;
			display: block;
			width: 350rpx;
			height: 350rpx;
		}
	}
</style>