transport_integrated_app/pages/railway/runStatus/list.vue

<template>
	<view class="page">
		<view class="list_box" v-for="(item,index) in data" :key="index" @click="goPage('/pages/railway/runStatus/form?id='+item.id)">
			<view class="list_top">
				<view class="unit_tags">报送时间</view>
				<view class="unit_name">{{item.statDate || ''}}<text
					style="margin-left:16rpx;">{{item.statPeriodValue || ''}}</text></view>
			</view>
			<view class="unit_station">{{item.carName || ''}}</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/railway/runStatus/form?type=add')" class="act_btn"><uni-icons type="plusempty"
					size="18" color="#fff" style="margin-right: 9rpx;"></uni-icons>新建</view> -->
			<view @click="showSearch" class="act_btn btn1"><uni-icons type="search" size="18" color="#2D8CF0"
					style="margin-right: 9rpx;"></uni-icons>查询
			</view>
		</view>
		<!-- 筛选 -->
		<uni-popup ref="popup" style="width: 100%;" background-color="none">
			<view class="pop_box">
				<view class="pop_title">
					查询条件
					<uni-icons @click="closeSearch" type="closeempty" size="18" color="#666" class="pop_close"></uni-icons>
				</view>
				<view class="popup-content">
					<view class="cont_tit">
						统计起止时间
					</view>
					<view class="time_box">
						<uni-datetime-picker v-model="timeRange" type="daterange" />
					</view>
					<view class="cont_tit picker">
						<view>统计时段</view>
						<view class="picker_select">
							<picker @change="bindPickerChange" :value="index" :range="array" range-key="dictLabel">
								<text class="unselect_txt"
									:style="index?'color:#333;':''">{{index?array[index].dictLabel:'请选择时段'}}</text>
								<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
							</picker>
						</view>
					</view>
				</view>
				<view class="btn_box">
					<p class="btn" @click="searchReset">重置</p>
					<p class="btn" @click="searchList">确认</p>
				</view>
			</view>
		</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: "没有更多数据了",
				},
				timeRange: [], //查询起止日期
				array: [], //时段选择列表
				index: '', //时段选择
			}
		},
		onShow() {
			this.data = [];
			this.current = 0;
			this.hasMore = true;
			this.queryTime();
			this.loadMore();
		},
		onLoad() {
			// this.queryTime();
			// this.loadMore();
		},
		onUnload() {
			this.hasMore = true;
			this.data = [];
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.data = [];
			this.current = 0;
			this.hasMore = true;
			this.loadMore();
		},
		methods: {
			//折叠
			showDetail(index1, index2, flag) {
				this.data[index1].highwaySubDataList[index2].show = flag;
			},
			//搜索时段选择
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			//确认查询
			searchList() {
				this.query = {
					statDateStart: this.timeRange.length > 0 ? this.timeRange[0] : '',
					statDateEnd: this.timeRange.length > 0 ? this.timeRange[1] : '',
					statPeriod: this.index != '' && this.index > -1 ? this.array[this.index].dictValue : ''
				};
				this.data = [];
				this.current = 0;
				this.hasMore = true;
				this.$refs.popup.close();
				this.loadMore();
			},
			//重置搜索
			searchReset() {
				this.timeRange = [];
				this.query = {
					statDateStart: '',
					statDateEnd: '',
					statPeriod: ''
				};
				this.index = '';
			},
			//查询
			showSearch() {
				this.$refs.popup.open('bottom');
			},
			closeSearch() {
				this.$refs.popup.close();
			},
			//时段
			queryTime() {
				this.$request(getApp().globalData.baseUrl + '/api/dict/dictList?dictType=airport_time' + '&_t=' + Date.parse(
					new Date()), {}, 'GET').then(res => {
					this.array = res.data;
				})
			},
			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/railwayRunSituation/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();
					})
				}
			},
			//页面跳转
			goPage(url, param) {
				if (param) {
					uni.navigateTo({
						url: url + '?item=' + JSON.stringify(param)
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding: 30rpx 30rpx 195rpx;
	}

	.list_box {
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;

		.list_top {
			display: flex;

			.unit_tags {
				height: 37rpx;
				line-height: 37rpx;
				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: 0 11rpx;
				margin-right: 16rpx;
			}

			.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;
			}
		}
		.unit_station {
			color: #666;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			text-align: right;
		}

		.report_time {
			color: #999999;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 48rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.list_item_box {
			padding: 30rpx 30rpx 0;
			background: #F8F8F8;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
		}

		.list_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0 30rpx;

			.list_item_label {
				width: 320rpx;
				color: #666666;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
			}

			.list_item_cnt {
				flex: 1;
				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;
			}
		}

		.list_item_shouqi {
			color: #2D8CF0;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			text-align: center;
			line-height: 33rpx;
			padding-bottom: 30rpx;

			.txt {
				margin-left: 12rpx;
			}
		}

		.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: 0;
		display: flex;
		// justify-content: space-around;
		background-color: #F8F8F8;
		padding: 40rpx 30rpx;

		.act_btn {
			width: 690rpx;
			height: 90rpx;
			line-height: 88rpx;
			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: 1rpx solid #2D8CF0;

			.txt {
				margin-left: 9rpx;
			}

			&.btn1 {
				color: #2D8CF0;
				background: #F6F6F6;
			}
		}
	}

	.pop_box {
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		padding: 30rpx;

		.pop_title {
			color: #333333;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			line-height: 45rpx;
			text-align: center;
			margin: 20rpx 0;

			.pop_close {
				float: right;
			}
		}

		.popup-content {
			// display: flex;
			// flex-direction: column;

			.cont_tit {
				width: 100%;
				color: #333333;
				font-size: 26rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				line-height: 37rpx;
				display: flex;
				margin-bottom: 40rpx;

				&.picker {
					display: flex;
					justify-content: space-between;
					margin: 60rpx 0;

					.picker_select {
						color: #D4D4D4;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						text-align: right;
					}
				}
			}

			.time_box {
				width: 690rpx;
				margin: 0 auto;

				/deep/ .uni-date-x--border {
					border-radius: 30rpx;

					.uni-date-x {
						background: transparent;

						.icon-calendar {
							padding-left: 20rpx;
						}
					}
				}

				/deep/ .uni-date-editor--x .uni-date__icon-clear {
					padding-right: 20rpx;
				}
			}

			.picker_box {
				width: 690rpx;
				margin: 0 auto;

				/deep/.input-value-border {
					border-radius: 30rpx;
				}
			}
		}

		.btn_box {
			width: 100%;
			height: 120rpx;
			display: flex;
			margin-top: 20px;
			align-items: center;
			justify-content: space-between;

			.btn {
				width: 290rpx;
				height: 90rpx;
				background: #FFFFFF;
				border-radius: 100rpx;
				border: 1rpx solid #C1C1C1;
				color: #666;
				font-size: 28rpx;
				line-height: 88rpx;
				text-align: center;

				&:last-child {
					background: #2D8CF0;
					color: #FFFFFF;
					border-color: #2D8CF0;
				}
			}
		}
	}
</style>