zhywpt-sp/subpackage/personal-center/trajectory/trajectory.vue

<template>
	<view class="content">
		<view class="des">请查收您的通行记忆，让每段行程都有意义。</view>
		<view class="choice-content">
			<view class="choice-car">
				<picker @change="bindPickerChange" :value="state.index" :range="state.array">
					<view class="uni-input">{{state.array[state.index]}}</view>
				</picker>
			</view>
			<view class="content-det">
				<view class="left">
					<view class="left-item">
						<image src="../../static/image/home-on.png" ></image>
						<view>
							<view class="data">{{state.msg.mileages}}km</view>
							<view>高速通行总里程</view>
						</view>
					</view>
					<view class="left-item">
						<image src="../../static/image/home-on.png" ></image>
						<view>
							<view class="data">{{state.msg.amounts/100}}元</view>
							<view>高速通行总金额</view>
						</view>
					</view>
					<view class="left-item">
						<image src="../../static/image/home-on.png" ></image>
						<view>
							<view class="data">{{state.msg.frequencys}}次</view>
							<view>高速通行总消费次数</view>
						</view>
					</view>
					<view class="left-item">
						<image src="../../static/image/home-on.png" ></image>
						<view>
							<view class="data">{{state.msg.cityQuantitys}}个</view>
							<view>高速通行曾抵达过的城市教</view>
						</view>
					</view>
					<view class="left-item" style="margin-bottom: 30rpx;">
						<image src="../../static/image/home-on.png"></image>
						<view>
							<view class="data">{{state.msg.frequenteds}}</view>
							<view>您最喜爱的目的地，曾累计到访过{{state.msg.frequentedQuantitys}}次</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view>您超过了{{state.msg.ranking}}%的九州ETC用户</view>
					<image src="../../../static/image/home-on.png" mode="" ></image>
					<view class="see" @click="see()">查看我的轨迹图</view>
				</view>
			</view>
		</view>
		<view class="record" v-for="item in [state.msg.myTrajectoryStatisticsVos][0]">
			<view class="current">
				<text>{{item.accountDate}}月通行</text>
				<view class="more" @click="seeMonth()">查看历史月度统计 <image src="../../../static/image/icon-back.png"></image></view>
			</view>
			<view class="detail">本月九州ETC通行了{{item.frequency}}次高速通行查看历史月度统计要消费{{item.amount/100}}元要通行</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import {request} from "@/utils/network/request.js";
	import {stringToJson} from "@/utils/network/encryption";
	import { onLoad} from "@dcloudio/uni-app";
	import {orderList,queryTrajectory} from "@/utils/network/api.js";
	import {getItem,StorageKeys} from "@/utils/storage";
	const state = reactive({
		array: [],
		index: 0,
		arrayVehicleId:[],  //要传给后端的vehicleId
		msg:'',
	})
	onLoad((option : any) => {
		quanCheckActionTrue().then((item: any) => {
			for(var i=0;i<item.data.length;i++){
				state.array.push(item.data[i].vehiclePlate)
				state.arrayVehicleId.push(item.data[i].vehicleId)
			}
			getVehicleMsg();
		})
	})
	const quanCheckActionTrue = () => {
		var data = {
			opId: getItem(StorageKeys.OpenId),
			source: 'WECHAT', //渠道为小程序
			tabIndex: '0', //0全部
			orderStep: '11', //11 为已完成”
		};
		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 bindPickerChange=(e)=> {
		state.index = e.detail.value;
		getVehicleMsg();
	}
	const see=()=>{
		// const aa="41,51"
		uni.navigateTo({
			url:`/subpackage/service/trajectory-map?data=${state.msg.provinces}&&mileages=${state.msg.mileages}&&ranking=${state.msg.ranking}`
		})
	}
	const seeMonth=()=>{
		uni.navigateTo({
			url:`./see-month?data=${encodeURIComponent(JSON.stringify(state.msg.myTrajectoryStatisticsVos))}`
		})
	}
	const getVehicleMsg = () => {
		const options = {
			type: 2,
			data: {
				vehicleId: state.arrayVehicleId[state.index],
			},
			method: "POST",
			showLoading: true,
		};
		request(queryTrajectory, options).then((res) => {
			const result = stringToJson(res.bizContent)
			state.msg=result
			console.log("getVehicleMsg",result);
	
		})
	};
</script>

<style scoped>
	.content{
		font-size: 32rpx;
	}
	.des{
		margin: 20rpx 0 20rpx 40rpx;
	}
	.choice-content{
		width:90%;
		margin: 0 auto;
		min-height:500rpx;
		box-shadow:  0px 0px 8px 2px rgb(218, 247, 247) inset;
		overflow: hidden;
	}
	.choice-car{
		width: 180rpx;
		background-color: rgb(158, 247, 247);
		margin-top: 30rpx;
		padding: 10rpx;
	}
	.left-item{
		display: flex;
		margin-bottom: 50rpx;
	}
	.left-item>image{
		width: 70rpx;
		height: 70rpx;
		display: inline-block;
		margin-right: 30rpx;
		flex-shrink: 0;
	}
	.data{
       font-weight: bold;
	}
	.content-det{
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
	}
	.right>image{
		width: 120rpx;
		height: 120rpx;
		display: inline-block;
		margin: 30rpx auto;
		margin-left: 40rpx;
	}
	.see{
		background-color: rgb(158, 247, 247);
		border-radius: 20rpx;
		text-align: center;
		height: 54rpx;
		line-height: 54rpx;
		font-size: 28rpx;
	}
	.left{
		flex: 2;
		
	}
	.right{
		flex: 1;
	}
	.record{
		width: 90%;
		min-height: 220rpx;
		box-shadow:  0px 0px 8px 2px rgb(218, 247, 247) inset;
		margin: 20rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.current{
		border-bottom: 1rpx solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
	}
	.more>image{
		transform: rotate(180deg);
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}
	.detail{
		margin-top: 20rpx;
		line-height: 40rpx;
	}
</style>