bigdata_WX/pages/discernRecord/discernRecord.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 v-if="isShow">
			<!-- 虫害 -->
			<view class="plant_ul" v-show="Inv == 0">
				<view class="plant_li" v-for="(item, index) in insectArr" :key="index">
					<u-image width="320rpx" height="200rpx"  class="plant_li_img" :src="$imageURL_58003+'/bigservers/' + item.img"></u-image>

					<view class="plant_liBox">
						<view class="plant_liBox_top">{{ item.name == '' ? '识别失败' : item.name }}</view>
						<view class="plant_liBox_center">识别日期：{{ item.time }}</view>
						<view class="plant_liBox_bottom">
							<u-button @click="details(item.id)" v-if='item.name !== ""' size="mini" shape="circle" :ripple="true" ripple-bg-color="#909399" type="success">详情</u-button>
							<u-button @click="delData(item.id, index)" size="mini" shape="circle" :ripple="true" ripple-bg-color="#909399"
							 type="error">删除</u-button>
						</view>
					</view>
				</view>
			</view>
			<!-- 病害 -->
			<view class="plant_ul" v-show="Inv == 1">
				<view class="plant_li" v-for="(item, index) in plantArr" :key="index">
					<u-image width="320rpx" height="200rpx"  class="plant_li_img" :src="$imageURL_58003+'/bigservers/' + item.img"></u-image>

					<view class="plant_liBox">
						<view class="plant_liBox_top">{{ item.name == '' ? '识别失败' : item.name }}</view>
						<view class="plant_liBox_center">识别日期：{{ item.time }}</view>
						<view class="plant_liBox_bottom">
							<u-button @click="details(item.id)" v-if='item.name !== ""' size="mini" shape="circle" :ripple="true"
							 ripple-bg-color="#909399" type="success">详情</u-button>
							<u-button size="mini" shape="circle" @click="delData(item.id, index)" :ripple="true" ripple-bg-color="#909399"
							 type="error">删除</u-button>
						</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-modal :show-cancel-button="true" @confirm="confirm" @cancel="cancel" v-model="show" :content="content"></u-modal>

		<!-- 提示框 -->
		<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, //返回顶部
				isShow: true, //暂无
				insectArr: [], //害虫
				plantArr: [], //病害
				dataNum: null, //列表总条数
				pageIndex: 1, //当前页数
				pagination: null, //总页码
				numData: 10, //固定每页显示多少条
				content: '是否确定删除该条数据？',
				show: false,
				idData: null, //数据id
				indexData: null, //数据下标
				flag: false,
				listLangth: null, //每次请求数据条数
				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 if (val == 1) {
					//病害
					this.listData('1')
					this.plantArr = []
				}
			},
			insectArr(val) {
				if (val.length == 0) {
					this.isShow = false
				}
			},
			plantArr(val) {
				if (val.length == 0) {
					this.isShow = false
				}
			},
		},
		methods: {
			changeTab(Inv) {
				that.navIdx = Inv;
			},

			// 列表数据
			listData(types) {
				var that = this
				uni.request({
					url: 'check_record',
					method: 'POST',
					data: {
						page: this.pageIndex,
						types,
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					dataType: 'json',
					success(res) {
						if (res.data.num !== 0) {
							that.dataNum = res.data.num
							if (types == '1') {
								that.plantArr = [...that.plantArr, ...res.data.dat]
							} else {
								that.insectArr = [...that.insectArr, ...res.data.dat]
							}
							that.isShow = true
						} else {
							that.isShow = false
						}
						console.log(that.plantArr)
						that.listLength = res.data.dat.length
						that.loadingShow = false
					},
					fail(err) {
						console.log(err)
					},
				})
			},

			// 删除
			delData(id, index) {
				this.idData = id
				this.indexData = index
				this.show = true;
			},

			// 删除确定
			confirm() {
				var that = this
				var index = that.indexData
				uni.request({
					url: 'del_record',
					method: 'POST',
					data: {
						id: that.idData,
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					dataType: 'json',
					success(res) {
						if (res.data == 0) {
							that.$refs.uTips.show({
								title: '删除成功',
								type: 'success',
								duration: '2000'
							})
							if (that.Inv == 0) {
								// 虫害
								that.insectArr.splice(index, 1)
							} else {
								//病害
								that.plantArr.splice(index, 1)
							}
						} else {
							that.$refs.uTips.show({
								title: '删除失败',
								type: 'error',
								duration: '2000'
							})
						}
					},
					fail(err) {
						that.$refs.uTips.show({
							title: '删除失败',
							type: 'error',
							duration: '2000'
						})
					},
				})
			},
			// 删除取消
			cancel() {
				this.show = false
				this.id = null
			},

			// 详情
			details(id) {
				uni.navigateTo({
					url: '/pages/detailsB/detailsB?id=' + id
				})
				
				// uni.navigateTo({
				// 	url: '/pages/detailsB/detailsB'
				// })
			},
		},
		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
					console.log(a)
					console.log(b)
					this.pagination = Math.ceil(c)
				}
				this.pagination--
				// if (this.pagination !== 0) {
				// if (this.listLength == 10) {
				// 	if (this.pagination >= 1) {
				// 		this.pageIndex++
				// 		if (this.Inv == 0) {
				// 			this.listData('2')
				// 		} else if (this.Inv == 1) {
				// 			this.listData('1')
				// 		}
				// 	} else {
				// 		this.flag = true
				// 	}

				// } else if (this.listLength < 10) {
				// 	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 = true
			}
		},
		
		 // 监听下拉动作
		 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;
			justify-content: space-between;
			width: 720rpx;
			margin: 15rpx auto;
			padding: 15rpx 20rpx 15rpx 20rpx;

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

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

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

				.plant_liBox_center {
					color: #9d9d9d;
					font-size: 12px;
					margin-bottom: 20rpx;
				}

				.plant_liBox_bottom {
					button {
						margin: 0 15rpx 0 0;
					}
				}
			}
		}
	}

	// 暂无数据
	.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>