{ | { | ||||
"root": "subpackage/personal-center", //个人中心 | "root": "subpackage/personal-center", //个人中心 | ||||
"pages": [ | "pages": [ | ||||
{ | |||||
"path": "trajectory/trajectory", | |||||
"style": { | |||||
"navigationBarTitleText": "我的通行" | |||||
} | |||||
}, | |||||
{ | |||||
"path": "trajectory/trajectory-map", | |||||
"style": { | |||||
"navigationBarTitleText": "我的轨迹" | |||||
} | |||||
}, | |||||
{ | { | ||||
"path": "vehicle-information", | "path": "vehicle-information", | ||||
"style": { | "style": { |
<text class="val">{{state.monthFlowingVo.num}}次</text> | <text class="val">{{state.monthFlowingVo.num}}次</text> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="detail">查看通行轨迹</view> | |||||
<view class="detail" @click="$util.navTo('/subpackage/personal-center/trajectory/trajectory', true)">查看通行轨迹</view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="cars box"> | <view class="cars box"> |
} from "@/utils/network/request"; | } from "@/utils/network/request"; | ||||
import { | import { | ||||
appId, | appId, | ||||
getToken | |||||
getToken, | |||||
wechatAppID | |||||
} from "@/utils/network/api"; | } from "@/utils/network/api"; | ||||
import { | import { | ||||
stringToJson | stringToJson | ||||
data: { | data: { | ||||
deviceId: "", | deviceId: "", | ||||
code: code, | code: code, | ||||
loginSource: "69af303ba2eb4608a099163f0d2a5dbd" | |||||
loginSource: "69af303ba2eb4608a099163f0d2a5dbd", | |||||
'wxOpenid':wechatAppID, | |||||
}, | }, | ||||
method: "POST", | method: "POST", | ||||
showLoading: false, | showLoading: false, | ||||
return new Promise(async (resolve, reject) => { | return new Promise(async (resolve, reject) => { | ||||
const res = await request(getToken, options); | const res = await request(getToken, options); | ||||
const data = stringToJson(res.bizContent); | const data = stringToJson(res.bizContent); | ||||
console.log("data",data) | |||||
this.saveToken(data.accessToken); | this.saveToken(data.accessToken); | ||||
this.saveOpenId(data.openId); | this.saveOpenId(data.openId); | ||||
console.log('输出内容', data.openId) | console.log('输出内容', data.openId) |
<template> | |||||
<view class="charts-box"> | |||||
<!-- <qiun-data-charts | |||||
type="map" | |||||
:opts="state.opts" | |||||
:chartData="state.chartData" | |||||
/> --> | |||||
<qiun | |||||
type="map" | |||||
:opts="state.opts" | |||||
:chartData="state.chartData" | |||||
/> | |||||
</view> | |||||
<view class="describe"> | |||||
<view> | |||||
<view class="all">您共到访过<text class="num">5</text>个城市</view> | |||||
<view>您的足迹已踏遍1500%的国土超过了99%的九州ETC用户</view> | |||||
</view> | |||||
<image class="car" src="../../../static/image/home-on.png" mode="aspectFit"></image> | |||||
</view> | |||||
</template> | |||||
<script lang="ts" setup> | |||||
import { reactive } from "vue"; | |||||
import {request} from "@/utils/network/request.js"; | |||||
import {stringToJson} from "@/utils/network/encryption.js"; | |||||
import { onLoad} from "@dcloudio/uni-app"; | |||||
import mapChina from "@/datas/mapChina.json"; | |||||
import qiun from "@/subpackage/service/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"; | |||||
const state = reactive({ | |||||
chartData: {}, | |||||
opts: { | |||||
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], | |||||
padding: [0,0,0,0], | |||||
dataLabel: true, | |||||
enableScroll: false, | |||||
extra: { | |||||
map: { | |||||
border: true, | |||||
borderWidth: 1, | |||||
borderColor: "#666666", | |||||
fillOpacity: 0.6, | |||||
activeBorderColor: "#F04864", | |||||
activeFillColor: "#FACC14", | |||||
activeFillOpacity: 1 | |||||
} | |||||
} | |||||
} | |||||
}) | |||||
onLoad((option : any) => { | |||||
getServerData(); | |||||
}) | |||||
const getServerData=()=>{ | |||||
console.log("111") | |||||
//模拟从服务器获取数据时的延时 | |||||
setTimeout(() => { | |||||
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接 | |||||
let res = {series:mapChina.features}; | |||||
console.log("111") | |||||
state.chartData = JSON.parse(JSON.stringify(res)); | |||||
console.log("state.chartData",state.chartData) | |||||
}, 500); | |||||
} | |||||
</script> | |||||
<style scoped> | |||||
.charts-box { | |||||
width: 100%; | |||||
height: 300px; | |||||
} | |||||
.describe{ | |||||
display: flex; | |||||
width: 90%; | |||||
margin: 20rpx auto; | |||||
padding: 30rpx 30rpx 60rpx 30rpx; | |||||
box-sizing: border-box; | |||||
background-color: #f6f6f6; | |||||
border-radius: 20rpx; | |||||
font-size: 30rpx; | |||||
} | |||||
.describe>view{ | |||||
flex: 5; | |||||
} | |||||
.describe>image{ | |||||
flex: 3; | |||||
} | |||||
.car{ | |||||
width: 150rpx; | |||||
height: 150rpx; | |||||
display: inline-block; | |||||
} | |||||
.all{ | |||||
font-size: 36rpx; | |||||
margin-bottom: 20rpx; | |||||
margin-left: 20rpx; | |||||
} | |||||
.num{ | |||||
font-size: 38rpx; | |||||
font-weight: bold; | |||||
} | |||||
</style> |
<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">0km</view> | |||||
<view>高速通行总里程</view> | |||||
</view> | |||||
</view> | |||||
<view class="left-item"> | |||||
<image src="../../static/image/home-on.png" ></image> | |||||
<view> | |||||
<view class="data">0元</view> | |||||
<view>高速通行总金额</view> | |||||
</view> | |||||
</view> | |||||
<view class="left-item"> | |||||
<image src="../../static/image/home-on.png" ></image> | |||||
<view> | |||||
<view class="data">0次</view> | |||||
<view>高速通行总消费次数</view> | |||||
</view> | |||||
</view> | |||||
<view class="left-item"> | |||||
<image src="../../static/image/home-on.png" ></image> | |||||
<view> | |||||
<view class="data">5个</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">暂无</view> | |||||
<view>您最喜爱的目的地,曾累计到访过0次</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="right"> | |||||
<view>您超过了1%的九州ETC用户</view> | |||||
<image src="../../../static/image/home-on.png" mode="" ></image> | |||||
<view class="see" @click="see()">查看我的轨迹图</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="record"> | |||||
<view class="current"> | |||||
<text>6月通行</text> | |||||
<view class="more">查看历史月度统计 <image src="../../../static/image/icon-back.png"></image></view> | |||||
</view> | |||||
<view class="detail">木月九州EC比你通行了0次高速通行查看历史月度统计要消费0元要通行</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.js"; | |||||
import { onLoad} from "@dcloudio/uni-app"; | |||||
import {} from "@/utils/network/api.js"; | |||||
const state = reactive({ | |||||
array: ['贵Z11111', '贵Z22222'], | |||||
index: 0, | |||||
}) | |||||
onLoad((option : any) => { | |||||
}) | |||||
const bindPickerChange=(e)=> { | |||||
console.log('picker发送选择改变,携带值为', e.detail.value) | |||||
state.index = e.detail.value | |||||
} | |||||
const see=()=>{ | |||||
uni.navigateTo({ | |||||
url:"/subpackage/personal-center/trajectory/trajectory-map" | |||||
}) | |||||
} | |||||
</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> |