bigdata_WX/pages/identifyPest/collect/collect.vue

<template>
	<view>
		<!-- 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 class="" v-if="isShow">
			<!-- 虫害 -->
			<view class="plant_ul" v-show="Inv == 0">
				<view class="plant_li" v-for="(item, index) in insectArr">
					<u-image shape="square" border-radius="10" width="250rpx" height="200rpx" class="plant_li_img" :src="item.img"></u-image>

					<view class="">
						<view class="plant_liBox">
							<view class="plant_liBox_top">{{ item.name }}</view>
							<view class="plant_liBox_center">所属作物：{{ item.host == "" ? '暂未收录' : item.host }}</view>
							<view class="plant_liBox_bottom">收藏日期：{{ item.time }}</view>
						</view>

						<view class="plant_btmHandle">
							<view class="plant_btmHandle_cancel" @click="noCollect(index, item.id)">
								<image :src="$imageURL_58003+'/bigservers/' + 'images/starA.png'" mode="" class="plant_btmHandle_cancelImg"></image>
								<text class="plant_btmHandle_cancelTxt">取消收藏</text>
							</view>
							<view class="plant_btmHandle_record" @click="defail(item.id)">
								<image :src="$imageURL_58003+'/bigservers/' + 'images/detail_8.png'" class="plant_btmHandle_recordImg" mode=""></image>
								<text class="plant_btmHandle_recordTxt">查看详情</text>
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- 病害 -->
			<view class="plant_ul" v-show="Inv == 1">
				<view class="plant_li" v-for="(item, index) in plantArr">
					<u-image shape="square" border-radius="10" width="250rpx" height="200rpx" class="plant_li_img" :src="item.img"></u-image>

					<view>
						<view class="plant_liBox">
							<view class="plant_liBox_top">{{ item.name }}</view>
							<view class="plant_liBox_center">所属作物：{{ item.host == "" ? '暂未收录' : item.host }}</view>
							<view class="plant_liBox_bottom">收藏日期：{{ item.time }}</view>
						</view>

						<view class="plant_btmHandle">
							<view class="plant_btmHandle_cancel"  @click="noCollect(index, item.id)">
								<image :src="$imageURL_58003+'/bigservers/' + 'images/starA.png'" mode="" class="plant_btmHandle_cancelImg"></image>
								<text class="plant_btmHandle_cancelTxt">取消收藏</text>
							</view>
							<view class="plant_btmHandle_record" @click="defail(item.id)">
								<image :src="$imageURL_58003+'/bigservers/' + 'images/detail_8.png'" class="plant_btmHandle_recordImg" mode=""></image>
								<text class="plant_btmHandle_recordTxt">查看详情</text>
							</view>
						</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>


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

		<!-- 弹框提示 -->
		<u-top-tips ref="uTips"></u-top-tips>

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

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

<script>
	export default {
		data() {
			return {
				Inv: 0,
				scrollTop: 0, //返回顶部
				insectArr: [], //病虫害列表
				plantArr: [],
				isShow: true,
				dataNum: null, //列表总条数
				pageIndex: 1, //当前页数
				pagination: null, //总页码
				numData: 10, //固定每页显示多少条
				listLangth: null, //每次请求数据条数
				flag: false,
				loadingShow: true, //加载
			}
		},
		watch: {
			Inv(val) {
				this.dataNum = null //清空
				console.log(this.pageIndex)
				this.pageIndex = 1 //清空
				this.pagination = null //清空
				this.listLength = null
				this.flag = false
				if (val == 0) {
					//虫害
					this.listData(2)
					this.insectArr = []
				} else {
					//病害
					this.listData(1)
					this.plantArr = []
				}
			},
			insectArr(val) {
				console.log(val)
				if (val.length == 0) {
					this.isShow = false
				}
			},
			plantArr(val) {
				if (val.length == 0) {
					this.isShow = false
				}
			},
		},
		methods: {
			changeTab(Inv) {
				that.navIdx = Inv;
			},

			// 列表数据
			listData(numDat) {
				var that = this
				uni.request({
					url: 'user_collect',
					method: 'get',
					data: {
						page: this.pageIndex,
						ret: numDat
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					dataType: 'json',
					success(res) {
						if (res.data.code !== "10011") {
							that.dataNum = res.data.nums
							if (numDat == '1') {
								that.plantArr = [...that.plantArr, ...res.data.dat]
								var arrayData = that.plantArr
							} else {
								that.insectArr = [...that.insectArr, ...res.data.dat]
								var arrayData = that.insectArr
							}
							// that.insectArr = res.data.dat
							for (var i = 0; i < arrayData.length; i++) {
								let Adata = new Array();
								Adata = arrayData[i].img_urls.split("#");
								arrayData[i].img = Adata[0]
							}
							that.isShow = true
							that.listLength = res.data.dat.length
						} else {
							that.isShow = false
						}
						that.loadingShow = false
					},
					fail(err) {
						console.log(err)
						that.loadingShow = false
					},
					complete(com) {
						// console.log(com)
					}
				})
			},

			defail(id) {
				uni.navigateTo({
					url: '/pages/details/details?id=' + id + '&signboard=1'
				})
			},

			noCollect(index, id) {
				var that = this
				let postData = ({
					id: id,
					ret: 'move'
				})
				uni.request({
					url: 'user_collect',
					method: 'post',
					data: postData,
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success(res) {
						if (res.data.code == 200) {
							that.$refs.uTips.show({
								title: '取消收藏成功',
								type: 'success',
								duration: '1500'
							})
							if (that.Inv == 0) {
								//虫害
								that.insectArr.splice(index, 1)
							} else {
								that.plantArr.splice(index, 1)
							}
						}
					},
					fail(err) {
						that.$refs.uTips.show({
							title: '取消收藏失败',
							type: 'error',
							duration: '1500'
						})
					}
				})
			},
		},
		onLoad() {
			this.listData(2)
		},
		// 滚动到底翻页
		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.pagination !== 0) {
				// 	this.pageIndex++
				// 	console.log(this.pageIndex)
				// 	if (this.Inv == 0) {
				// 		this.listData(2)
				// 	} else if (this.Inv == 1) {
				// 		this.listData(1)
				// 	}
				// } else {
				// 	this.flag = true
				// }

				if (this.listLength == 10) {
					console.log(this.listLength + '_______每次获取到数据的长度-true______')
					if (this.pagination >= 1) {
						console.log(this.pagination + '_______总页码-true______')
						this.pageIndex++
						if (this.Inv == 0) {
							console.log('_______虫害-true______')
							this.listData('2')
						} else if (this.Inv == 1) {
							console.log('_______病害-false______')
							this.listData('1')
						}
					} else {
						console.log(this.pagination + '_______总页码-false______')
						this.flag = true
					}
				} else if (this.listLength < 10) {
					console.log(this.listLength + '_______每次获取到数据的长度-false______')
					this.flag = true
				}

			} else {
				this.flag = false
			}
		},
		
		// 监听下拉动作
		onPullDownRefresh() {
			setTimeout(() => {
						this.insectArr = []
						this.plantArr = []
				if (this.Inv == 0) {
					this.listData('2')
				} else if (this.Inv == 1) {
					this.listData('1')
				}
				uni.stopPullDownRefresh()
			},2000)
		},
		
		// 监听获取滚动条位置
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	}
</script>

<style lang="scss">
	// tab切换
	page {
		background-color: #f7f8fc;
	}

	.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;
	}

	// 内容列表
	.plant_ul {
		.plant_li {
			border-radius: 6px;
			background: #fff;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			display: flex;
			width: 720rpx;
			margin: 15rpx auto;
			padding: 15rpx 20rpx 15rpx 20rpx;

			.plant_li_img {
				width: 250rpx;
				height: 200rpx;
				border-radius: 5px;
			}

			.plant_liBox {
				// border: 1px solid #007AFF;
				padding: 5rpx 0 15rpx 0;
				margin: 0 0 0 35rpx;

				.plant_liBox_top {
					font-weight: 550;
					font-size: 17px;
					margin-bottom: 10rpx;
				}

				.plant_liBox_center {
					color: #9d9d9d;
					font-size: 12px;
					margin-bottom: 10rpx;
					width: 350rpx;
					height: 50rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.plant_liBox_bottom {
					color: #9d9d9d;
					font-size: 12px;
				}
			}

			// 取消收藏and查看详情
			.plant_btmHandle {
				border-top: 1px solid #f2f2f2;
				padding: 5rpx 0 15rpx 0;
				margin: 0 0 0 35rpx;
				display: flex;
				justify-content: center;

				.plant_btmHandle_cancel {
					border-right: 1px solid #f2f2f2;
					padding: 0 20rpx 0 0;
					margin: 10rpx 0 0 0;

					.plant_btmHandle_cancelImg {
						width: 35rpx;
						height: 35rpx;
						margin: -5rpx 0 0 0;
						vertical-align: middle;
					}

					.plant_btmHandle_cancelTxt {
						color: #999999;
						font-size: 13px;
						margin: 0 0 0 5rpx;
					}
				}

				.plant_btmHandle_record {
					padding: 0 0 0 20rpx;
					margin: 10rpx 0 0 0;

					.plant_btmHandle_recordImg {
						width: 30rpx;
						height: 30rpx;
						margin: -5rpx 0 0 0;
						vertical-align: middle;
					}

					.plant_btmHandle_recordTxt {
						color: #999999;
						font-size: 13px;
						margin: 0 0 0 5rpx;
					}
				}
			}
		}
	}

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

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