zhywpt-sp/subpackage/search/refund-info-run-water/list.vue

<template>
	<navBar title="ETC通行流水查询" :scrollTop="scrollTop" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
	<view class="guding">
		<view class="bg-img">
			<image class="icon image" :src="`${$imgUrl}order/bg-order.png`" mode="scaleToFill"></image>
		</view>
		<view class="content">
			<view class="title">填写查询条件</view>
			<view style="line-height: 70rpx; color: #01243A; margin-bottom: 24rpx;">
				车牌：
				<carNumberInput @numberInputResult="carNumber"></carNumberInput>
			</view>
			<uni-datetime-picker ref="filterDate" v-model="state.range" type="daterange"  :clear-icon="false"/>
			<view class="search-btns">
				<button type="default" class="ui-btn search-btn" @click="getList()" style="width: auto;">
					查询
				</button>
				<button type="default" class="ui-btn search-btn" @click="apply(false)" style="width: auto;">
					单独申请
				</button>
				<button type="default" class="ui-btn-normal search-btn" @click="exportData()" style="width: auto;">
					导出
				</button>
			</view>
		</view>
	</view>
	
	<view class="page-content">
		<view class="list-title">查询结果列表</view>
		
		<template v-if="state.list && state.list.length > 0">
			<view class="list">
				<view
					class="item"
					v-for="(item, index) in state.list"
					:key="index">
					<view class="head">
						{{ item.enTollStationName }}  - {{ item.exTollStationName }}
					</view>
					<view class="list-main">
						<view class="left">
							<view class="money-out">金额：<text class="money"><text class="unit">￥</text>{{ item.tollAmount }}</text></view>
							<view class="start-time">入口时间：{{ item.enTime }}</view>
							<view>出口时间：{{ item.exTime }}</view>
						</view>
					</view>
					<view class="bottom">
						<view class="right-state" @click="apply(item)">申请退费</view>
					</view>
				</view>
			</view>
			<view style="text-align: center;margin: 20rpx;font-size: 30rpx; color: #999999;">我是有底线的~</view>
		</template>
		<no-data-view v-else :text="state.isSearch ? '暂无通行流水信息' : '请输入车牌号和日期进行查询'"></no-data-view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { onLoad,onPageScroll,onReachBottom} from "@dcloudio/uni-app";
	import { requestNew } from "@/utils/network/request.js";
	import { getProvinceEtcTransactionFlow, exportProvinceEtcTransactionFlow } from '@/utils/network/api.js'
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import FixedFooter from "@/components/common/FixedFooter";
	import { getFirstDayOfMonth, getLastDayOfMonth } from '@/utils/utils'
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	
	const scrollTop = ref(0); //滚动距离
	const filterDate = ref(null)
	const showExpot = ref(false)
	
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	
	const state = reactive({
		vehicleNum: '',
		searchForm: {
			exVehPlate: '',
			start: '',
			end: '',
			// exVehPlate: '贵BXE005', 测试数据
			// start: '2024-04-02',
			// end: '2024-04-03'
		},
		vehiclePlateColor: '',
		range: [],
		list: [],
		isSearch: false
	})
	
	/*
	** 页面接受参数
	*/
	interface pageParams {
		vehicleId: string, // 车牌号
	}
	
	onLoad((option: pageParams) => {
		let { vehicleId } = option
		if (vehicleId) {
			let vehicleArr = vehicleId.split('_')
			state.searchForm.exVehPlate = decodeURIComponent(vehicleArr[0])
			state.vehiclePlateColor = vehicleArr[1]
			state.searchForm.start = getFirstDayOfMonth()
			state.searchForm.end = getLastDayOfMonth()
			state.range = [getFirstDayOfMonth(), getLastDayOfMonth()]
			getList()
		}
	})
	
	const getList = () => {
		let params = state.searchForm
		if (!params.exVehPlate) {
			uni.showToast({
				title: '请输入车牌号进行查询',
				icon: 'none'
			})
			return false
		} else if (state.range && state.range.length === 0) {
			uni.showToast({
				title: '请输入开始结束时间进行查询',
				icon: 'none'
			})
			return false
		}
		let option = {
			type: 2,
			data: {
				exVehPlate: params.exVehPlate,
				start: state.range[0],
				end: state.range[1]
			},
			method: "POST",
			showLoading: true,
		}
		state.isSearch = true
		requestNew(getProvinceEtcTransactionFlow, option).then(res => {
			state.list = res.modelList
		})
	}
	
	const exportData = () => {
		uni.showModal({
			title: '数据到处',
			content: '确认到处当前筛选数据吗？',
			success: (res) => {
				if (res.confirm) {
					let params = {
						type: 2,
						data: state.searchForm,
						method: "POST",
						showLoading: true,
					}
					requestNew(exportProvinceEtcTransactionFlow, params).then(res => {
						
					})
				}
			}
		})
	}
	
	// aloneApply 1: 单独申请
	const apply = (item: any) => {
		if (item) {
			uni.navigateTo({
				url: '/subpackage/search/refund-info-run-water/apply?jsonData=' + JSON.stringify(item)
			})
		} else { // 单独申请
			let data = {
				exVehPlate: state.searchForm.exVehPlate
			}
			// onlyApply： 1：单独申请
			uni.navigateTo({
				url: '/subpackage/search/refund-info-run-water/apply?onlyApply=1&jsonData=' + JSON.stringify(data)
			})
		}
	}
	
	const clearFilter = () => {
		filterDate.value.clear()
		this.getList()
	}
	
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	
	//车牌号输入
	const carNumber = (val : any) => {
		state.searchForm.exVehPlate = val.trim();
	};
</script>

<style lang="scss" scoped>
	.guding{
		position: fixed;
		width: 100%;
	}
	.bg-img {
		width: 100%;
		position: absolute;
		z-index:0;
		.icon {
			width: 100%;
			height: 534rpx;
		}
	}
	
	.content {
		position: relative;
		color: white;
		padding:30rpx ;
		background-color: white;
		margin: 0 34rpx;
		margin-top: 200rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		.title {
			font-weight: 400;
			font-size: 30rpx;
			color: #01243A;
			margin-bottom: 20rpx;
		}
	}
	.search-btns{
		display: flex;
		justify-content: space-between;
		margin-top: 32rpx;
		.search-btn{
			flex: 1;
			margin: 0 12rpx;
		}
		.clear-form{
			color: #004576;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			border: 1px #004576 solid;
			border-radius: 80rpx;
			padding: 0 28rpx;
		}
	}
	.page-content{
		padding-top: 730rpx;
	}
	.list-title{
		padding: 0 32rpx 24rpx;
	}
	.list{
		border-radius: 12rpx;
		.item{
			background-color: #FFFFFF;
			border-radius: 12rpx;
			margin: 0 32rpx 24rpx;
			font-size: 26rpx;
		}
		.head{
			background: linear-gradient(to bottom, #FFFFFF, #E1EDFF);
			height: 96rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			border-radius: 12rpx 12rpx 0 0;
			font-size: 30rpx;
			color: #01243A;
			font-weight: bold;
		}
		.list-main{
			padding: 24rpx;
			color: #999999;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.money-out{
				margin-bottom: 12rpx;
			}
			.start-time{
				margin-bottom: 12rpx;
			}
			.money{
				font-size: 36rpx;
				color: #01243A;
				.unit{
					font-size: 26rpx;
				}
			}
		}
		.right-state{
			width: 130rpx;
			height: 60rpx;
			border-radius: 60rpx;
			line-height: 60rpx;
			background: linear-gradient(90deg, #01253B 0%, #004576 100%);
			color: #FFFFFF;
			font-size: 26rpx;
			text-align: center;
			margin-left: 12rpx;
			padding: 0 28rpx;
		}
		.bottom{
			display: flex;
			flex-direction: row-reverse;
			border-top: 1px #DCDCDC solid;
			padding: 24rpx 0;
			margin: 0 24rpx;
		}
	}
</style>