通行流水

pages.json

 						"navigationBarTitleText": "ETC通行流水记录"
 					}
 				},
+				{
+					"path": "search/select-car",
+					"style": {
+						"navigationBarTitleText": "选择车辆"
+					}
+				},
+				{
+					"path": "search/select-card",
+					"style": {
+						"navigationBarTitleText": "选择卡号"
+					}
+				},
 				{
 					"path": "search/unitUser",
 					"style": {

pages/service/service.vue

         <view class="right-content" v-if="activeTab === '查询服务'">
           <view
             class="item-box"
-            @click="toNext('/service/search/etcFlowingWater')"
+            @click="toNext('/service/search/select-car')"
           >
             <view class="item bg-blue" :style="{ '--background': bgBlue }">
               <image :src="`${$imgUrl}service/imgs/etctxls.png`" />

service/search/etcFlowingWater.vue

 		<!-- 背景颜色充满屏 -->
 		<view class="bg-color"></view>
 		<!-- 补卡额订单列表-->
-		<view class="search-box">
-			<image :src="`${$imgUrl}service/icon-search.png`" class="icon"></image>
-			<input class="search" placeholder="请输入充车牌/ETC卡号" v-model="state.keywords" @input="keywordsInput" />
-		</view>
 		<view class="search-time">
 			<view class="search-time-box">
-
 				<view class="show-info">
 					<view class="show-text">
 						<picker class="picker date" mode="date" :value="dataTime.startDate" @change="bindDateStart">
 			</view>
 			<view class="time-btn" @click="search">查询</view>
 		</view>
-		<view class="total-num"><text>金额合计：XXXXXX</text> <text class="total-space">通行次数：XXXXXX</text></view>
-		<view class="list-wrap">
-			<view v-for="item in listData" :key="item.id"
+		<view class="total-num" v-if="state.list.length > 0"><text>金额合计：{{state.aggregatAmout/100}}</text> <text class="total-space">通行次数：{{state.passTotal}}</text></view>
+		<view class="list-wrap" v-if="state.list.length >0">
+			<view v-for="item in state.list" :key="item.listNo"
 				:class="item.status === 3 ? ' card-info finished' : 'card-info'">
 				<view class="info-wrap">
 					<view class="info-left">
 						<view class="info-left-text">
-							<text class="label">流水单号：</text>
-							<text class="val">MA89200010</text>
+							<text class="label">单号:</text>
+							<text class="val">{{item.listNo}}</text>
 						</view>
 						<view>
-							<text class="label">ETC卡号：</text>
-							<text class="val">0110200001</text>
+							<text class="label">卡号:</text>
+							<text class="val">{{item.cardId}}</text>
 						</view>
 					</view>
 					<view class="info-right">
 							交易金额
 						</view>
 						<view class="price-val">
-							<u-icon name="rmb"></u-icon>
-							<text class="price-val-text">104.00</text>
+							<text>￥</text>
+							<text class="price-val-text">{{item.fee/100}}</text>
 						</view>
 					</view>
 				</view>
 				<view class="card-text-wrap">
 					<view class="text-box">
-						<text class="name-text">贵阳西</text>
-						<text class="time-text">12:09</text>
-						<text class="date-text">2023-01-08</text>
+						<text class="name-text">{{item.enName}}</text>
+						<text
+							class="time-text">{{item.enTime.substring(item.enTime.length -8 ,item.enTime.length-3)}}</text>
+						<text class="date-text">{{item.enTime.substring(0,10)}}</text>
 					</view>
 					<view class="arrow-wrap">
-						<text class="arrow-text">粤A12345</text>
+						<text class="arrow-text">{{item.vehiclePlate}}</text>
 						<image class="d-img" :src="`${$imgUrl}order/arrowCard.png`"></image>
 					</view>
 					<view class="text-box">
-						<text class="name-text">XXXXX</text>
-						<text class="time-text">18:52</text>
-						<text class="date-text">2023-01-08</text>
+						<text class="name-text">{{item.exName}}</text>
+						<text
+							class="time-text">{{item.exTime.substring(item.exTime.length -8 ,item.exTime.length-3)}}</text>
+						<text class="date-text">{{item.exTime.substring(0,10)}}</text>
 					</view>
 				</view>
 				<view class="btn-wrap">
 			</view>
 
 		</view>
+		<view class="blank" v-else>
+			<view class="text-center">暂无数据</view>
+		</view>
 	</view>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 	import {
 		reactive,
 		ref
 	import {
 		stringToJson
 	} from "../../utils/network/encryption.js";
-	import { orderDetail, passBills } from "../../utils/network/api.js";
+	import {
+		orderDetail,
+		passBills,
+		passBillCount,
+		downloadBills,
+	} from "../../utils/network/api.js";
 	import {
 		onLoad
 	} from '@dcloudio/uni-app'
 		startDate: "开始时间",
 		endDate: "结束时间"
 	})
-	const listData = reactive([
-		{
-			id: 1,
-			status: 1 // 补卡
-		},
-		{
-			id: 2,
-			status: 2 // 查看进度
-		},
-		{
-			id: 3,
-			status: 3 // 去评价
-		},
-	])
+
 	const state = reactive({
 		list: [],
-		keywords: null,
-
+		cardId: null,
+		passTotal:0,
+		parkTotal:0,
+		aggregatAmout:0,
 	})
 	onLoad((option) => {
-		queryOrderDetail(option.id);
+		state.cardId =option.cardId;
+		// queryOrderDetail(option.cardId);
 	})
 
-	const keywordsInput = (e) => {
-		console.log(e)
-	}
+
 	const search = () => {
-		console.log(state);
-		
+		gePpassBillCount()
+
 		const options = {
 			type: 2,
 			data: {
-				cardId:"52011640230202987050",
-				vehiclePlate:null,
+				cardId: state.cardId,//52011640230202987050
 				beforeDate: dataTime.startDate,
-				afterDate:dataTime.endDate,
-				pageNo:null,
-				pageSize:null,
+				afterDate: dataTime.endDate,
 			},
 			method: "POST",
 			showLoading: true,
 		};
 		request(passBills, options).then((res) => {
 			console.log(res);
+			let result = stringToJson(res.bizContent)
+			console.log(result);
+			state.list = result.data ?? []
+			console.log(result.data);
+			
 			// let orderInfo = JSON.parse(res.bizContent);
 		})
-		
+
+	}
+	const gePpassBillCount = ()=>{
+		const options = {
+			type: 2,
+			data: {
+				// cardId: state.cardId,//52011640230202987050
+				cardId: "52011328220201990321",//52011640230202987050
+				starDate: dataTime.startDate,
+				endDate: dataTime.endDate,
+			},
+			method: "POST",
+			showLoading: true,
+		};
+		request(passBillCount, options).then((res) => {
+			let result = stringToJson(res.bizContent)
+			state.aggregatAmout = result.aggregatAmout??0
+			state.passTotal = result.passTotal??0
+			state.parkTotal = result.parkTotal??0
+			console.log(result);
+		})
 	}
+	
+	
 	const queryOrderDetail = (id) => {
 		const options = {
 			type: 2,
 			showLoading: true,
 		};
 		request(orderDetail, options).then((res) => {
-			console.log(res);
+			// console.log(res);
+			let result = stringToJson(res.bizContent)
+			state.vehiclePlate = result.vehiclePlate ?? null
+			state.cardId = result.cardId ?? null
+			console.log(state);
+			search()
 			// let orderInfo = JSON.parse(res.bizContent);
 		})
 	}
 			url: ""
 		});
 	}
+	
+	//下载按钮事件
+	const doDownload= ()=>{
+		const options = {
+			type: 2,
+			data: {
+				cardId: state.cardId,//52011640230202987050
+				starDate: dataTime.startDate,
+				endDate: dataTime.endDate,
+			},
+			method: "POST",
+			showLoading: true,
+		};
+		request(downloadBills, options).then((res) => {
+			let result = stringToJson(res.bizContent)
+			// state.aggregatAmout = result.DetailDownLoadURL??0
+			download(result.DetailDownLoadURL)
+		})
+	}
+	
+	//下载文件
+	const	download = (attachLink) => {
+		let that = this
+		uni.downloadFile({
+			url: attachLink , //下载地址，后端接口获取的链接
+			success: (data) => {
+				console.log(data.tempFilePath)
+				console.log(JSON.stringify(data))
+				if (data.statusCode === 200) {
+					uni.saveFile({ //文件保存到本地
+						tempFilePath: data.tempFilePath, //临时路径
+						success: function(res) {
+							console.log("下载成功"+res.savedFilePath)
+							console.log(JSON.stringify(res))
+							uni.showToast({
+								icon: 'none',
+								mask: true,
+								title: '文件已保存!', 
+								duration: 3000,
+							});
+							uni.openDocument({
+								//fileType: 'docx',
+								showMenu:true, //关键点,可以转发到微信
+								filePath: res.savedFilePath,
+								success: function(res) {
+									console.log('打开文档成功');
+								}
+							});
+						}
+					});
+				}
+			},
+			fail: (err) => {
+				console.log(err);
+				uni.showToast({
+					icon: 'none',
+					mask: true,
+					title: '失败请重新下载',
+				});
+			},
+		});
+	}
+
 </script>
 
 <style lang="scss" scoped>
 	.u-btn--primary {
 		background: #00B38B;
 	}
+	
+	.blank{
+		font-size: 30rpx;
+		text-align: center;
+	}
 
 	.bg-color {
 		position: fixed;
 		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
 		border-radius: 20rpx;
 		margin-bottom: 30rpx;
-		padding: 30rpx 30px 13rpx 30rpx;
+		padding: 30rpx 20rpx 10rpx 20rpx;
 
 		.info-wrap {
 			display: flex;
 			padding-bottom: 30rpx;
 
 			.info-left-text {
-				margin-bottom: 39rpx;
+				margin-bottom: 15rpx;
 			}
 
 			.label {
 			}
 
 			.price-val-text {
-				font-size: 36rpx;
+				font-size: 32rpx;
 				font-weight: 700;
 				color: #333333;
 				margin-left: 9rpx;

service/search/select-car.vue

+<template>
+	<view class="selectCar-box">
+		<view v-if="state.list.length>0" @click="choose(i,item)" class="item" v-for="(item,i) in state.list" :key="i">
+			<view class="iten-left">
+				<image :src="`${$imgUrl}che.png`" mode=""></image>
+				<text>{{item.vehiclePlate}}</text>
+			</view>
+			<view class="choose-item">
+				<view class="active" v-if="flag==i">
+				</view>
+			</view>
+		</view>
+		<view v-else class="flex">
+			暂无车辆订单信息
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		ref
+	} from "vue"
+	import {
+		navTo
+	} from "@/utils/utils"
+	import {
+		onLoad,
+		onShow
+	} from "@dcloudio/uni-app";
+	import {
+		orderList,
+	} from "@/utils/network/api.js";
+	import {
+		request
+	} from "@/utils/network/request.js";
+	import {
+		msg
+	} from "@/utils/utils";
+	import {
+		getItem,
+		StorageKeys,
+		setItem
+	} from "@/utils/storage";
+	import {
+		stringToJson
+	} from "@/utils/network/encryption";
+
+	const state = reactive({
+		list: [],
+	});
+	onLoad(() => {
+		quanCheckActionTrue().then((item) => {
+			state.list = item.data
+			console.log(item)
+		})
+	});
+
+	const quanCheckActionTrue = () => {
+		var data = {
+			opId: getItem(StorageKeys.OpenId),
+			source: 'WECHAT',
+			tabIndex: '0',
+			orderStep: '11',
+			isValueCard: '2'
+		};
+		const options = {
+			type: 2,
+			data: data,
+			method: "POST",
+			showLoading: true,
+		};
+		return new Promise(async (resolve, reject) => {
+			const res = await request(orderList, options);
+			const data = stringToJson(res.bizContent);
+			resolve(data);
+		}).catch((error) => {
+			reject(error);
+		});
+	}
+	const flag = ref('0')
+
+	const choose = (i, item) => {
+		navTo(`/service/search/select-card?vehicleId=${item.vehicleId}`)
+	}
+	
+</script>
+
+<style>
+	page {
+		width: 100%;
+		height: 100%;
+		background-color: #EEF7F7;
+	}
+</style>
+<style lang="scss" scoped>
+	.flex {
+		display: flex;
+		justify-content: center;
+	}
+
+	.selectCar-box {
+		// width: 100%;
+		height: 100%;
+		padding: 30rpx;
+
+		.item {
+			padding: 20rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 130rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
+			border-radius: 20rpx;
+			margin-bottom: 30rpx;
+
+			.iten-left {
+				display: flex;
+				align-items: center;
+
+				image {
+					width: 150rpx;
+					height: 90rpx;
+
+				}
+
+				text {
+					margin-left: 20rpx;
+					font-size: 32rpx;
+					font-family: Noto Sans S Chinese;
+					font-weight: 400;
+					color: #333333;
+				}
+			}
+
+			.choose-item {
+				width: 44rpx;
+				height: 44rpx;
+				background: #FFFFFF;
+				border: 2rpx solid #00B38B;
+				border-radius: 50%;
+				margin-right: 20rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				box-sizing: content-box;
+			}
+
+			.active {
+				width: 34rpx;
+				height: 34rpx;
+				background: #00B38B;
+				border-radius: 50%;
+			}
+
+		}
+
+
+	}
+</style>

service/search/select-card.vue

+<template>
+	<view class="selectCar-box">
+		<view v-if="state.list.length>0" @click="choose(i,item)" class="item" v-for="(item,i) in state.cards" :key="i">
+			<view class="iten-left">
+				<image :src="`${$imgUrl}card2.png`" mode=""></image>
+				<text>{{item.cardId}}</text>
+			</view>
+			<view class="choose-item">
+				<view class="active" v-if="flag==i">
+				</view>
+			</view>
+		</view>
+		<view v-else class="flex">
+			暂无该车辆卡信息
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		ref
+	} from "vue"
+	import {
+		navTo
+	} from "@/utils/utils"
+	import {
+		onLoad,
+		onShow
+	} from "@dcloudio/uni-app";
+	import {
+		cardList,
+	} from "@/utils/network/api.js";
+	import {
+		request
+	} from "@/utils/network/request.js";
+	import {
+		msg
+	} from "@/utils/utils";
+	import {
+		getItem,
+		StorageKeys,
+		setItem
+	} from "@/utils/storage";
+	import {
+		stringToJson
+	} from "@/utils/network/encryption";
+
+	const state = reactive({
+		cards:[],
+	});
+	onLoad((option) => {
+		getCardList(option.vehicleId)
+	});
+
+	const flag = ref('0')
+
+	const choose = (i, item) => {
+		console.log(item,i)
+		console.log(item.vehicleId);
+		getCardList(item.vehicleId)
+		navTo(`/service/search/etcFlowingWater?cardId=${item.cardId}`)
+	}
+	
+	const getCardList = (vehicleId) => {
+		var data = {
+			vehicleId:vehicleId
+		};
+		const options = {
+			type: 2,
+			data: data,
+			method: "POST",
+			showLoading: true,
+		};
+		request(cardList, options).then((res)=>{
+			let result =stringToJson(res.bizContent);
+			state.cards = result.cards??null;
+			console.log(result.cards);
+		})
+	}
+</script>
+
+<style>
+	page {
+		width: 100%;
+		height: 100%;
+		background-color: #EEF7F7;
+	}
+</style>
+<style lang="scss" scoped>
+	.flex {
+		display: flex;
+		justify-content: center;
+	}
+
+	.selectCar-box {
+		// width: 100%;
+		height: 100%;
+		padding: 30rpx;
+
+		.item {
+			padding: 20rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 130rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
+			border-radius: 20rpx;
+			margin-bottom: 30rpx;
+
+			.iten-left {
+				display: flex;
+				align-items: center;
+
+				image {
+					width: 150rpx;
+					height: 120rpx;
+
+				}
+
+				text {
+					margin-left: 20rpx;
+					font-size: 32rpx;
+					font-family: Noto Sans S Chinese;
+					font-weight: 400;
+					color: #333333;
+				}
+			}
+
+			.choose-item {
+				width: 44rpx;
+				height: 44rpx;
+				background: #FFFFFF;
+				border: 2rpx solid #00B38B;
+				border-radius: 50%;
+				margin-right: 20rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				box-sizing: content-box;
+			}
+
+			.active {
+				width: 34rpx;
+				height: 34rpx;
+				background: #00B38B;
+				border-radius: 50%;
+			}
+
+		}
+
+
+	}
+</style>

utils/network/api.js

 export const  CardBillPlaceOrder= '916' //通行流水欠费补缴支付下单接口
 export const  CardBillPayStatus= '915' //通行流水欠费补缴支付查询接口
 export const  passBills= "925"//BDS-车辆通行流水分页查询接口
+export const  passBillCount= "db62a6c55461498ab2f412868eea6d24"//BDS-账单合计接口
+export const  downloadBills= "558c8a96265445c78b59b4473ad01d42"//BDS-明细下载接口
+export const  cardList= "152"//BDS-卡信息查询接口