hwnc/pagesD/pages/inspection/inspection.vue

<template>
	<view :class="[AppTheme]" class="all_box">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-sticky offset-top="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offset-top="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="navbar">
					<u-tabs ref="uTabs" @click="tabsChange" :list="titlelist" :scrollable="false" lineWidth="30"
						:lineColor="primary" :current="current" :activeStyle="{
				         color: primary,
				         transform: 'scale(1.05)'
				     }" :inactiveStyle="{
				         color: '#606266',
				         transform: 'scale(1)'
				     }">
					</u-tabs>
				</view>
			</u-sticky>
			<swiper class="swiper_item" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item v-for="(item, index) in swimglist" :key="index" @touchmove="stopTouchMove">
					<scroll-view class="scroll_bar" scroll-y  @scrolltolower="handle"
					:refresher-enabled="true" :refresher-triggered="triggered"
						@refresherrefresh="refresh">
						<view class="merchant_box" v-for="(item,index2) in storelist" :key="index2">
							<view class="text_area">
								<view class="shop_name">
									<!-- <image :src="item.farm_logo" :lazy-load="true" class="shop_thumbnail"></image> -->
									<view class="right_shop_mess">
										<view class="shop_line">
											<view class="shop_line_p1">{{item.ntime}}

											</view>
											<view class="shop_line_p2">
												{{item.soil_name}} {{item.name}}
											</view>
											<view v-if="item.status==0" class="shop_line_p3">
												{{item.statustitle}}
											</view>


										</view>
										<view v-if="item.status==0" class="shop_line_fl bg-primary"  @click="gostoredetail(item)">
											<view  >立即巡检</view>
										</view>
										<view v-if="item.status==1" class="shop_line_f2">
											<view>{{item.statustitle}}</view>
										</view>

									</view>
									<view v-if="item.status==1" class="shop_line_p4">
										<view>完成时间</view>
										<view>{{item.etime}}</view>
									</view>
								</view>
							</view>
							<view class="">
								<u-album singleSize="50" :urls="item.detail_img" maxCount="4" :showMore='true'
									rowCount="4"></u-album>
							</view>
						</view>
						<view v-if="storelist.length>0">
						<u-loadmore style="margin-top: 30rpx;" :status="loadingType" />	
						</view>
						 
						<u-empty v-if="storelist.length<=0"  text="无数据" color="#c0c4cc" icon-color="#c0c4cc" margin-top="70" mode="list">
						</u-empty>
						<!-- <view style="height: 40rpx;"></view> -->
						<!-- <u-loadmore :line="true" :status="loadmore" /> -->
					</scroll-view>
				</swiper-item>
			</swiper>
			
	</view>
</template>
<script>
	import mineApi from "@/api/mine/index.js"
	export default {
		data() {
			return {
				_freshing: false,
				triggered: true,
				page: 1,
				pagesize: 5,
				primary: this.$theme.primary,
				loadingType: 'more',
				settingFile: getApp().globalData.siteinfo,
				loadmore: '',
				titlelist: [{
						name: '待巡检'
					},
					{
						name: '已完成'
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				couponlist: [],
				// tabs组件的current值，表示当前活动的tab选项
				current: 0,
				// swiper组件的current值，表示当前那个swiper-item是活动的
				swiperCurrent: 0,
				//轮播图数组
				swimglist: [1, 2, 3, 4],
				swierheight: 0,
				storelist: [], //店铺列表
				longitude: '',
				latitude: '',
				position: false,
				shipping_address: '', //收货地址
				 
				listtype: 0 //店铺列表分页的排序类型
			}
		},
		onLoad() {
			if (this.$config && this.$config.app.position == 1) {
				this.position = true;
			}
			this.vueinit()
			this.inspection()
		},
		onPullDownRefresh() {
			this.vueinit()
			this.getlist(function() {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			console.log("上拉加载了")
		},
		methods: {
			refresh() { //自定义下拉刷新
				console.log('下拉刷新了')
				if (this._freshing) return;
				this._freshing = true;
			
				//调用获取数据的函数
				// this.getData();
				if (!this.triggered)
					//界面下拉触发，triggered可能不是true，要设为true
					this.triggered = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					uni.stopPullDownRefresh()
				}, 2000);
			},
			preview(url, idx) { //预览图片
				uni.previewImage({
					current: idx,
					urls: url,
					success: function(res) {
						console.log(res, '预览')
					}
				})
			},
			getlocation() { //获取当前位置
				let that = this
				// #ifdef MP-WEIXIN || APP-PLUS
				that.$until.chooseLocation(function(res) {
					that.shipping_address = res.address
					that.longitude = res.longitude
					that.latitude = res.latitude
					that.storelist = []
					that.inspection()
				});
				// #endif
			},
			gostoredetail(farmid) { // 
			     
				uni.redirectTo({
					url: "/pagesD/pages/inspection/index?item=" + JSON.stringify(farmid)
				})
			},




			inspection(fun) { //店铺列表
			let  that=this
				let data = {
					type: that.listtype,
					p: that.page,
					longitude: that.longitude,
					latitude: that.latitude
				}
				that.loadmore = 'loading'
				mineApi.inspection(data)
					.then(res => {
						
						if (res.status == 1) {
						 if (res.data.length >= that.pagesize) {
						 	that.loadingType = 'more';
						 	that.page++;
						 } else {
						 	that.page++;
						 	that.loadingType = 'nomore';
						 }
						 that.storelist = that.storelist.concat(res.data);
							// this.storelist = res.data;
						 }else{
							 	this.loadingType = 'more';
						 }
						 
					})
					 
			},
			//初始化方法
			vueinit() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.swierheight = res.windowWidth * 0.9 * 0.65 * 2
					}
				})
			},
			// tabs通知swiper切换并更改数据


			tabsChange(e) {
				this.storelist = []
				this.pages = 1
				this.swiperCurrent = e.index
				this.listtype = e.index
				this.inspection()
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx
				// this.$refs.uTabs.setDx(dx)
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current
				// this.$refs.uTabs.setFinishCurrent(current)
				this.swiperCurrent = current
				this.current = current
			},
			// //展开底部，可以查看全部信息
			expandbottom() {
				this.pages++
				this.inspection()
			},
			// //阻止用户手动滑动
			stopTouchMove() {
				return true
			},
			handle() {
				console.log('上拉加载了')
				this.loadingType = 'loading';
				// this.p++;
				this.inspection(this.swiperCurrent);
			},
		},
	
		// onReachBottom() {
		// 	console.log('到底了');
		// },
		// onPullDownRefresh() {
		 
		// 	this.page = 1;
		// 	this.inspection();
		// 	setTimeout(() => {
		// 		uni.stopPullDownRefresh();
		// 	}, 600);
		// }
	}
</script>
<style scoped lang="scss">
	page{
		height: 101%;
	}
	.all_box {
		width: auto;
		background-color: #fcfcfc;
		height: 100%;

		.navbar {
			background-color: #fff;
			width: 100%;
			z-index: 99;
		}

		.swiper_item {
			height: calc(100vh - 44px);

			.chooseaddress {
				box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
				background-color: #ffffff;
				padding: 20rpx 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 15rpx 20rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;

				.chooseaddress_p1 {
					display: flex;
					align-items: center;

					.chdress_p1txt {
						color: #999;
						font-size: 24rpx;
					}
				}
			}

			.merchant_box {
				padding: 20rpx;
				margin: 25rpx 20rpx;
				border-radius: 10rpx;
				box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
				background-color: #ffffff;

				.text_area {


					.shop_thumbnail {
						width: 135rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.right_shop_mess {
						// width: calc(100% - 120rpx);
						display: flex;
						justify-content: space-between;
						align-items: center;

						.shop_line {
                              width: 70%;
							display: flex;
							flex-direction: column;
							padding: 10rpx;

							.shop_line_p1 {

								font-size: 28rpx;

							}

							.shop_line_p2 {
								 
								font-size: 32rpx;
								font-weight: 600;
								margin-top: 2vh;
								-webkit-line-clamp: 1;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;


							}

							.shop_line_p3 {
								font-size: 28rpx;
								margin-top: 2vh;
								color: red;
							}

						}

						.shop_line_fl {

						 
							line-height: 65rpx;
							width: 180rpx;
							text-align: center;
							border-radius: 40rpx;
							font-size: 30rpx;
							color: #fff;
							float: right;
						}

						.shop_line_f2 {
							font-size: 30rpx;
								 color: #999;
						}

					}

					.shop_line_p4 {
						margin-top: 1vh;
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						padding: 10rpx;
					}

				}

				.display_diagram {
					width: 100%;
					white-space: nowrap;
					margin: 10rpx 0;

					.display_diagram_item {
						width: 200rpx;
						height: 200rpx;
						margin: 0 15rpx 0 0;
						border-radius: 7.5%;
					}
				}
			}

			.scroll_bar {
				height: 100%;
			}
		}
	}
</style>