qiubinghui
/
zhywpt-sp
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

我的轨迹

yxb
DESKTOP-2IO5MST\huting 1 ano atrás
pai
4635eafe7a
commit
52719a5a8d
6 arquivos alterados com 294 adições e 3 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 1
    0
      datas/mapChina.json
  2. 12
    0
      pages.json
  3. 1
    1
      pages/user/user.vue
  4. 5
    2
      stores/user.js
  5. 101
    0
      subpackage/personal-center/trajectory/trajectory-map.vue
  6. 174
    0
      subpackage/personal-center/trajectory/trajectory.vue

+ 1
- 0
datas/mapChina.json
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 12
- 0
pages.json Ver arquivo

@@ -1129,6 +1129,18 @@
{
"root": "subpackage/personal-center", //个人中心
"pages": [
{
"path": "trajectory/trajectory",
"style": {
"navigationBarTitleText": "我的通行"
}
},
{
"path": "trajectory/trajectory-map",
"style": {
"navigationBarTitleText": "我的轨迹"
}
},
{
"path": "vehicle-information",
"style": {

+ 1
- 1
pages/user/user.vue Ver arquivo

@@ -139,7 +139,7 @@
<text class="val">{{state.monthFlowingVo.num}}次</text>
</view>
</view>
<view class="detail">查看通行轨迹</view>
<view class="detail" @click="$util.navTo('/subpackage/personal-center/trajectory/trajectory', true)">查看通行轨迹</view>
</view>
</view>
<view class="cars box">

+ 5
- 2
stores/user.js Ver arquivo

@@ -12,7 +12,8 @@ import {
} from "@/utils/network/request";
import {
appId,
getToken
getToken,
wechatAppID
} from "@/utils/network/api";
import {
stringToJson
@@ -54,7 +55,8 @@ export const useUserStore = defineStore("userStore", {
data: {
deviceId: "",
code: code,
loginSource: "69af303ba2eb4608a099163f0d2a5dbd"
loginSource: "69af303ba2eb4608a099163f0d2a5dbd",
'wxOpenid':wechatAppID,
},
method: "POST",
showLoading: false,
@@ -63,6 +65,7 @@ export const useUserStore = defineStore("userStore", {
return new Promise(async (resolve, reject) => {
const res = await request(getToken, options);
const data = stringToJson(res.bizContent);
console.log("data",data)
this.saveToken(data.accessToken);
this.saveOpenId(data.openId);
resolve(data);

+ 101
- 0
subpackage/personal-center/trajectory/trajectory-map.vue Ver arquivo

@@ -0,0 +1,101 @@
<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>

+ 174
- 0
subpackage/personal-center/trajectory/trajectory.vue Ver arquivo

@@ -0,0 +1,174 @@
<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>

Escrever Pré-visualização
Carregando…
Cancelar
Salvar