transport_integrated_app/pages/highWay/runData/list.vue

<template>
	<view class="page">
		<view class="list_box" v-for="(item,index) in data" :key="index">
			<view class="list_top">
				<view class="unit_tags">管理单位</view>
				<view class="unit_name">{{item.organizationName}}</view>
			</view>
			<view class="report_time">{{item.statDate}}<text style="margin-left:16rpx;">{{item.statPeriod}}</text></view>
			<uni-collapse>
				<uni-collapse-item titleBorder="none" show-arrow="false" border="false" :show-animation="true">
					<template v-slot:title>
						<view class="list_item">
							<view class="list_item_label">收费站名称：</view>
							<view class="list_item_cnt">仁兆收费站</view>
						</view>
					</template>
					<view class="content">
						<view class="list_item">
							<view class="list_item_label">高速公路名称：</view>
							<view class="list_item_cnt">仁兆收费站</view>
						</view>
						<view class="list_item">
							<view class="list_item_label">收费站入口车辆数：</view>
							<view class="list_item_cnt">仁兆收费站</view>
						</view>
						<view class="list_item">
							<view class="list_item_label">收费站出口车辆数：</view>
							<view class="list_item_cnt">仁兆收费站</view>
						</view>
						<view class="list_item">
							<view class="list_item_label">免收通行费车辆数：</view>
							<view class="list_item_cnt">仁兆收费站</view>
						</view>
						<view class="list_item">
							<view class="list_item_label">免收通行费金额：</view>
							<view class="list_item_cnt">仁兆收费站</view>
						</view>
						<view class="list_item">
							<view class="list_item_label">出口通行费：</view>
							<view class="list_item_cnt">仁兆收费站</view>
						</view>
						<view class="list_item">
							<view class="list_item_label">报送人员及联系方式：</view>
							<view class="list_item_cnt">仁兆收费站</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 按钮 -->
			<view class="act_btn_box">
				<view class="act_btn blue">编辑</view>
				<view class="act_btn" style="margin-left: 30rpx;">查看详情</view>
			</view>
		</view>
		<uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore"
			:contentText="contentText"></uni-load-more>
			<!-- 筛选 -->
		<view class="foot_btn_box">
			<view @click="goPage('/pages/highway/runData/form')" class="act_btn"><uni-icons type="plusempty" size="30" color="#fff"></uni-icons>新建</view>
			<view @click="showSearch" class="act_btn btn1"><uni-icons type="search" size="30" color="#2D8CF0"></uni-icons>查询</view>
		</view>
		<!-- 筛选 -->
		<uni-popup ref="search" type="bottom">
						
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				data: [],
				current: 0,
				size: 10,
				hasMore: true,
				status: '',
				query: {
					statDateStart: '',
					statDateEnd: '',
					statPeriod: ''
				},
				contentText: {
					contentdown: "点击查看更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				},
			}
		},
		onLoad() {
			this.loadMore();
		},
		onUnload() {
			this.hasMore = true;
			this.data = [];
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.data = [];
			this.current = 0;
			this.hasMore = true;
			this.loadMore();
		},
		methods: {
			//查询
			showSearch() {
				this.showSearch = true;
			},
			loadMore() {
				if (this.hasMore) {
					this.current = this.current + 1;
					this.status = 'loading';
					let params = '';
					Object.keys(this.query).map(key => {
						params = params + '&' + key + '=' + this.query[key]
					})
					this.$request(getApp().globalData.baseUrl + '/api/biz/highwayParentDataController/list?page=' + this.current +
						'&pageSize=' + this.size + '&_t=' + Date.parse(new Date()) + params, {}, 'GET').then(res => {
						if (res.code == 200) {
							this.data = this.data.concat(res.data.list);
							if (res.data.list.length == 0 || res.data.totalCount < this.size) {
								this.hasMore = false;
								this.status = 'nomore';
							} else {
								this.status = 'more';
							}
							uni.stopPullDownRefresh();
						} else {
							this.status = 'more';
							uni.stopPullDownRefresh();
						}
					}).catch(() => {
						this.status = 'more';
						uni.stopPullDownRefresh();
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		min-height: 100vh;
		padding: 30rpx 30rpx 0;
	}
	.list_box {
		width: 100%;
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		.list_top{
			display: flex;
			.unit_tags{
				color: #E37616;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				background: #FFF7E4;
				border-radius: 10rpx;
				border: 1rpx solid #EF9A4F;
				padding: 5rpx 11rpx;
			}
			.unit_name{
				color: #333333;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				line-height: 48rpx;
				margin-left: 20rpx;
				word-break: break-all;
			}
			.report_time{
				color: #999999;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				text-align: center;
				margin: 30rpx auto;
			}
		}
		.list_item{
			display: flex;
			align-items: center;
			justify-content: space-around;
			.list_item_label{
				color: #666666;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
			}
			.list_item_cnt{
				color: #333333;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				text-align: right;
				margin-left: 20rpx;
				word-break: break-all;
			}
		}
		.act_btn_box{
			display: flex;
			flex-direction: row-reverse;
			margin: 10rpx 0;
			
			.act_btn{
				width: 180rpx;
				color: #666666;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 70rpx;
				background: #FFFFFF;
				border-radius: 100rpx;
				border: 1rpx solid #C1C1C1;
				text-align: center;
				&.blue{
					color:#fff;
					background: #2D8CF0;
					border-color: #2D8CF0;
				}
			}
		}
		.foot_btn_box{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 20rpx;
			display: flex;
			justify-content: space-around;
			.act_btn{
				width: 329rpx;
				line-height: 90rpx;
				display: flex;
				justify-content: center;
				color: #FFFFFF;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				background: #2D8CF0;
				border-radius: 100rpx;
				border: 1px solid #2D8CF0;
				.txt{
					margin-left: 9rpx;
				}
				&.btn1{
					color: #2D8CF0;
					background: #F6F6F6;
				}
			}
		}
	}
</style>