rsmonitoring-app/pages/index/common/hcList.vue

<template>
	<view class="listview">
		<view class="title">当前监测图斑外业举证</view>
		<view class="search">
			<uni-easyinput v-model="queryParams.dkbh" placeholder="请输入图斑编号查询" />
			<uni-icons type="bars" size="30" @click="returnCount"></uni-icons>
		</view>
		<view>
			<scroll-view class="top-menu-view" scroll-x="true" >
				<view class="menu-topic-view" v-for="(item, key) in tabOptions" :id="'tabNum'+key" :key="key"
					@click="tabclick(item.stepState)">
					<view :class="queryParams.stepState==item.stepState ? 'menu-topic-act' : 'menu-topic'">
						<text class="menu-topic-text">{{item.name}}({{hccount[item.prop]}})</text>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- <van-sticky :offset-top="-10">
				<van-tabs sticky v-model="queryParams.stepState" @click="tabclick" class="tabs">
					<van-tab v-for="(item, key) in tabOptions" :key="key" :name="item.stepState"
						:title="`${item.name}(${hccount[item.prop]})`"></van-tab>
				</van-tabs>
			</van-sticky> -->
			<van-list class="hclist" v-model="loading" :finished="finished" :immediate-check="false" :error.sync="error"
				error-text="请求失败，点击重新加载" finished-text="没有更多了~" @load="loadList" @refresh="onRefresh">
				<view class="list-item" v-for="(item, key) in pcsjList" :key="key" @click="goDetail(item)">
					<div class="nameTitle">{{ item.name }}</div>
					<div>{{ item.dkbh }}</div>
					<div>监测面积：{{ item.dkmj }}</div>
					<div>核查截止日期：{{ item.endTime }}</div>
				</view>
			</van-list>
		</view>
	</view>


</template>
<script>
	import {
		hcs
	} from "../config.js";
	import {
		listDkjbxx
	} from "@/api/dkjbxx.js";
	import parse from "wellknown";
	export default {
		name: "list",
		data() {
			return {
				hccount: {},
				tabOptions: hcs,
				showlist: false,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					stepState: 0,
				},
				loading: false,
				finished: false,
				pcsjList: [],
				total: 0,
			};
		},
		onLoad() {},
		created() {},
		mounted() {},
		onReady() {

		},
		methods: {
			golist(a, hccount) {
				if (hccount) this.hccount = hccount;
				this.reset(a.stepState)
				this.tabclick();
			},
			returnCount() {
				this.$emit('returnCount')
			},
			tabclick(stepState) {
				if (stepState != undefined) this.queryParams.stepState = stepState
				this.queryParams.pageNum = 1;
				this.pcsjList = [];
				this.getList();
			},
			getList() {
				this.loading = true;
				listDkjbxx(this.queryParams).then((res) => {
					this.pcsjList = [...this.pcsjList, ...res.rows];
					this.total = res.total;
					this.loading = false;
					this.finished = res.rows.length < 10;
					this.$emit('addmap', this.pcsjList);
				});
			},
			reset(stepState) {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					stepState: stepState || 0,
					dkbh: ''
				}
			},
			//跳转到详情页
			goDetail(value) {
				this.$emit('goDetail', value)
				// uni.setStorage({
				// 	key: "my_param",
				// 	data: value,
				// 	success: () => {
				// 		uni.switchTab({
				// 			url: "/pages/check/index",
				// 		});
				// 	},
				// });
				//   uni.navigateTo({
				//     url: "/pages/check/index?item=" + value,
				//   });
			},
			loadList() {
				this.queryParams.pageNum++;
				this.getList();
			},
			onRefresh() {
				this.pcsjList = [];
				this.finished = false;
				this.loading = true;
				this.reset();
				this.getList();
			},
		},
	};
</script>

<style lang="scss">
	.listview {
		.title {
			position: absolute;
			top: 10rpx;
			width: 100%;
			height: 60rpx;
			//background: #fff;
			line-height: 40rpx;
			padding: 10rpx;
		}

		.search {
			position: absolute;
			top: 70rpx;
			width: 100%;

			.uni-easyinput {
				width: 80%;
				display: inline-block;
				margin-right: 20rpx;
			}

		}

		.tabs {
			margin-bottom: 20rpx;
		}

		.hclist {
			height: 30vh;
			overflow-x: hidden;
			overflow-y: auto;

			.list-item {
				background: #fff;
				padding: 40rpx 20rpx;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				position: relative;

				.nameTitle {
					color: red;
					line-height: 50rpx;
				}
			}
		}
	}
</style>
<style scoped lang="scss">
	@import "./tabs.scss"
</style>