|
|
@@ -10,35 +10,35 @@ |
|
|
|
<view class="content-det"> |
|
|
|
<view class="left"> |
|
|
|
<view class="left-item"> |
|
|
|
<image src="../../static/image/home-on.png" ></image> |
|
|
|
<image :src="`${$imgUrl}user/trajectory1.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> |
|
|
|
<image :src="`${$imgUrl}user/trajectory2.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> |
|
|
|
<image :src="`${$imgUrl}user/trajectory3.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> |
|
|
|
<image :src="`${$imgUrl}user/trajectory4.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> |
|
|
|
<image :src="`${$imgUrl}user/trajectory5.png`"></image> |
|
|
|
<view> |
|
|
|
<view class="data">{{state.msg.frequenteds}}</view> |
|
|
|
<view>您最喜爱的目的地,曾累计到访过{{state.msg.frequentedQuantitys}}次</view> |
|
|
@@ -47,7 +47,7 @@ |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view>您超过了{{state.msg.ranking}}%的九州ETC用户</view> |
|
|
|
<image src="../../../static/image/home-on.png" mode="" ></image> |
|
|
|
<image :src="`${$imgUrl}user/trajectory6.png`" mode=""></image> |
|
|
|
<view class="see" @click="see()">查看我的轨迹图</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
@@ -55,7 +55,9 @@ |
|
|
|
<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 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> |
|
|
@@ -64,16 +66,16 @@ |
|
|
|
|
|
|
|
<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,selectCarInfo} from "@/utils/network/api.js"; |
|
|
|
import {getItem,StorageKeys} from "@/utils/storage"; |
|
|
|
import { request } from "@/utils/network/request.js"; |
|
|
|
import { stringToJson } from "@/utils/network/encryption"; |
|
|
|
import { onLoad } from "@dcloudio/uni-app"; |
|
|
|
import { orderList, queryTrajectory, selectCarInfo } from "@/utils/network/api.js"; |
|
|
|
import { getItem, StorageKeys } from "@/utils/storage"; |
|
|
|
const state = reactive({ |
|
|
|
array: [], |
|
|
|
index: 0, |
|
|
|
arrayVehicleId:[], //要传给后端的vehicleId |
|
|
|
msg:'', |
|
|
|
arrayVehicleId: [], //要传给后端的vehicleId |
|
|
|
msg: '', |
|
|
|
}) |
|
|
|
onLoad((option : any) => { |
|
|
|
quanCheckActionTrue(); |
|
|
@@ -90,33 +92,33 @@ |
|
|
|
//调用方式 |
|
|
|
request(selectCarInfo, options).then((res) => { |
|
|
|
const data = (stringToJson(res.bizContent).vehicleManages) |
|
|
|
for(var i=0;i<data.length;i++){ |
|
|
|
for (var i = 0; i < data.length; i++) { |
|
|
|
state.array.push(data[i].vehiclePlate) |
|
|
|
state.arrayVehicleId.push(data[i].vehicleId) |
|
|
|
} |
|
|
|
getVehicleMsg(); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log('输出内容', err) |
|
|
|
}); |
|
|
|
.catch((err) => { |
|
|
|
console.log('输出内容', err) |
|
|
|
}); |
|
|
|
} |
|
|
|
const bindPickerChange=(e)=> { |
|
|
|
const bindPickerChange = (e) => { |
|
|
|
state.index = e.detail.value; |
|
|
|
getVehicleMsg(); |
|
|
|
} |
|
|
|
const see=()=>{ |
|
|
|
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}` |
|
|
|
url: `/subpackage/service/trajectory-map?data=${state.msg.provinces}&&mileages=${state.msg.mileages}&&ranking=${state.msg.ranking}` |
|
|
|
}) |
|
|
|
} |
|
|
|
const seeMonth=()=>{ |
|
|
|
const seeMonth = () => { |
|
|
|
uni.navigateTo({ |
|
|
|
url:`./see-month?data=${encodeURIComponent(JSON.stringify(state.msg.myTrajectoryStatisticsVos))}` |
|
|
|
url: `./see-month?data=${encodeURIComponent(JSON.stringify(state.msg.myTrajectoryStatisticsVos))}` |
|
|
|
}) |
|
|
|
} |
|
|
|
const getVehicleMsg = () => { |
|
|
|
console.log("state.arrayVehicleId[state.index]",state.arrayVehicleId[state.index]) |
|
|
|
console.log("state.arrayVehicleId[state.index]", state.arrayVehicleId[state.index]) |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
@@ -127,96 +129,111 @@ |
|
|
|
}; |
|
|
|
request(queryTrajectory, options).then((res) => { |
|
|
|
const result = stringToJson(res.bizContent) |
|
|
|
state.msg=result |
|
|
|
console.log("getVehicleMsg",result); |
|
|
|
|
|
|
|
state.msg = result |
|
|
|
console.log("getVehicleMsg", result); |
|
|
|
|
|
|
|
}) |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.content{ |
|
|
|
.content { |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
.des{ |
|
|
|
|
|
|
|
.des { |
|
|
|
margin: 20rpx 0 20rpx 40rpx; |
|
|
|
} |
|
|
|
.choice-content{ |
|
|
|
width:90%; |
|
|
|
|
|
|
|
.choice-content { |
|
|
|
width: 90%; |
|
|
|
margin: 0 auto; |
|
|
|
min-height:500rpx; |
|
|
|
box-shadow: 0px 0px 8px 2px rgb(218, 247, 247) inset; |
|
|
|
min-height: 500rpx; |
|
|
|
box-shadow: 0px 0px 8px 2px rgb(218, 247, 247) inset; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.choice-car{ |
|
|
|
|
|
|
|
.choice-car { |
|
|
|
width: 180rpx; |
|
|
|
background-color: rgb(158, 247, 247); |
|
|
|
background-color: #f1f1f1; |
|
|
|
margin-top: 30rpx; |
|
|
|
padding: 10rpx; |
|
|
|
} |
|
|
|
.left-item{ |
|
|
|
|
|
|
|
.left-item { |
|
|
|
display: flex; |
|
|
|
margin-bottom: 50rpx; |
|
|
|
} |
|
|
|
.left-item>image{ |
|
|
|
|
|
|
|
.left-item>image { |
|
|
|
width: 70rpx; |
|
|
|
height: 70rpx; |
|
|
|
display: inline-block; |
|
|
|
margin-right: 30rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.data{ |
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
.data { |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
.content-det{ |
|
|
|
|
|
|
|
.content-det { |
|
|
|
padding: 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.right>image{ |
|
|
|
|
|
|
|
.right>image { |
|
|
|
width: 120rpx; |
|
|
|
height: 120rpx; |
|
|
|
display: inline-block; |
|
|
|
margin: 30rpx auto; |
|
|
|
margin-left: 40rpx; |
|
|
|
} |
|
|
|
.see{ |
|
|
|
background-color: rgb(158, 247, 247); |
|
|
|
|
|
|
|
.see { |
|
|
|
background-color: #f1f1f1; |
|
|
|
border-radius: 20rpx; |
|
|
|
text-align: center; |
|
|
|
height: 54rpx; |
|
|
|
line-height: 54rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
.left{ |
|
|
|
|
|
|
|
.left { |
|
|
|
flex: 2; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
.right{ |
|
|
|
|
|
|
|
.right { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.record{ |
|
|
|
|
|
|
|
.record { |
|
|
|
width: 90%; |
|
|
|
min-height: 220rpx; |
|
|
|
box-shadow: 0px 0px 8px 2px rgb(218, 247, 247) inset; |
|
|
|
box-shadow: 0px 0px 8px 2px rgb(218, 247, 247) inset; |
|
|
|
margin: 20rpx auto; |
|
|
|
padding: 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
.current{ |
|
|
|
|
|
|
|
.current { |
|
|
|
border-bottom: 1rpx solid #ccc; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding-bottom: 20rpx; |
|
|
|
} |
|
|
|
.more>image{ |
|
|
|
|
|
|
|
.more>image { |
|
|
|
transform: rotate(180deg); |
|
|
|
width: 30rpx; |
|
|
|
height: 30rpx; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
.detail{ |
|
|
|
|
|
|
|
.detail { |
|
|
|
margin-top: 20rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
} |