3009 lines
98 KiB
Vue
3009 lines
98 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="content">
|
||
<view class="trafficState">
|
||
<view class="newPositionBox">
|
||
<view class="positionItem">
|
||
<view class="itemLeft">
|
||
<view class="itemLeftItem">
|
||
<view class="positionIcon startObj"></view>
|
||
<view class="positionBox" v-if="startEndType === 1">{{
|
||
startObj.name || ""
|
||
}}</view>
|
||
<view class="positionBox" v-if="startEndType !== 1">
|
||
<textarea style="width: 100%" placeholder="请输入目的地" auto-height placeholder-style="font-size: 30rpx"
|
||
v-model="searchPoint" confirm-type="search" @focus="handleEndPlaceFocus" @input="searchPOI"
|
||
@confirm="handleConfirmToSearch"></textarea>
|
||
<!-- @blur="handleEndPlaceBlur" -->
|
||
<!-- @confirm="searchPOI" -->
|
||
|
||
<!-- {{ endObj.name || "" }} -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="itemLeftItem">
|
||
<view class="positionIcon endObj"></view>
|
||
<view class="positionBox noBorderBottom" v-if="startEndType === 1">
|
||
<textarea style="width: 100%" placeholder="请输入目的地" auto-height placeholder-style="font-size: 30rpx"
|
||
v-model="searchPoint" confirm-type="search" @focus="handleEndPlaceFocus" @input="searchPOI"
|
||
@confirm="handleConfirmToSearch"></textarea>
|
||
<!-- @blur="handleEndPlaceBlur" -->
|
||
<!-- @confirm="searchPOI" -->
|
||
|
||
<!-- {{ endObj.name || "" }} -->
|
||
</view>
|
||
<view class="positionBox noBorderBottom" v-if="startEndType !== 1">{{ endObj.name || "" }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="itemRight">
|
||
<image class="reachIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/reachIcon.png"
|
||
@click="handleChangeStartEnd" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="positionBox">
|
||
<view class="startItem" @click="handleChangeService(startObj)">{{
|
||
startObj.name || ""
|
||
}}</view>
|
||
<image
|
||
class="reachIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/reachIcon.png"
|
||
@click="handleChangeStartEnd"
|
||
/>
|
||
<view class="endItem" @click="handleChangeService(endObj)">{{
|
||
endObj.name || ""
|
||
}}</view>
|
||
</view> -->
|
||
<!-- @click="handleTrafficSearch" -->
|
||
<view class="searchBtn" @click="handleConfirmToSearch">路况查询</view>
|
||
</view>
|
||
|
||
<!-- 地名搜索的列表 -->
|
||
<view class="placeSearchListBox" v-if="pointList && pointList.length > 0 && endPlaceFocus">
|
||
<view class="listItem" v-for="(item, index) in pointList" :key="index" @click="handleGoUsMap(item)">
|
||
<view class="topItem">
|
||
<view class="topLeft">
|
||
<image class="listIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/address.png" />
|
||
<span class="listName">{{ item.name || "" }}</span>
|
||
</view>
|
||
<view class="rightDistance">{{
|
||
item.distance ? `${item.distance}km` : ""
|
||
}}</view>
|
||
</view>
|
||
<view class="bottom">{{ item.address || "" }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 下面的信息 -->
|
||
<view class="bottomBox" v-if="!endPlaceFocus">
|
||
<view class="boxTop">
|
||
<view class="leftTop">
|
||
<span class="boldText">{{ detailObj.distanceNumber || "-" }}</span>
|
||
<span class="unit" style="margin: 0 4rpx">公里</span>
|
||
<span class="line"></span>
|
||
<span class="boldText" style="margin-right: 4rpx">{{
|
||
detailObj.hour || "0"
|
||
}}</span>
|
||
<span class="unit" style="margin-right: 8rpx">小时</span>
|
||
<span class="boldText">{{ detailObj.minute || "0" }}</span>
|
||
<span class="unit" style="margin-left: 4rpx">分</span>
|
||
<span class="line"></span>
|
||
<span class="boldText"><span style="font-size: 24rpx; margin-right: 4rpx">¥</span>{{ detailObj.tolls || ""
|
||
}}</span>
|
||
</view>
|
||
|
||
<view class="rightTop" @click="handleToMap(endObj)">
|
||
<image class="navigationIcon" src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png" />
|
||
导航
|
||
</view>
|
||
</view>
|
||
|
||
<view class="roadConditions">
|
||
<view class="roadTop">
|
||
<image class="stateIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/trafficState1.png" />
|
||
<span class="stateText" :style="{ color: '#01a157' }">该路线全线畅通</span>
|
||
</view>
|
||
<view class="progress">
|
||
<view class="have" :style="{
|
||
width:
|
||
detailObj && detailObj.haveProgress
|
||
? detailObj.haveProgress + '%'
|
||
: '',
|
||
}"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 横向线 -->
|
||
<!-- <view class="horizontal"></view> -->
|
||
|
||
<!-- 服务区列表 -->
|
||
<view class="serviceBox">
|
||
<view class="serviceTitle">沿途服务区</view>
|
||
|
||
<view v-if="chaegeBoxList && chaegeBoxList.length > 0">
|
||
<charge-box :serviceAreaList="chaegeBoxList" :pageType="'travelNavigation'" :startObj="startObj"
|
||
:endObj="endObj" />
|
||
</view>
|
||
|
||
<view v-if="false">
|
||
<view class="serviceList" v-if="
|
||
detailObj &&
|
||
detailObj.servicePart &&
|
||
detailObj.servicePart.length > 0
|
||
">
|
||
<view class="serviceItem" v-for="(item, index) in detailObj.servicePart" :key="index" :style="{
|
||
border:
|
||
index + 1 === detailObj.servicePart.length ? 'none' : '',
|
||
marginBottom:
|
||
index + 1 === detailObj.servicePart.length ? '0' : '',
|
||
paddingBottom:
|
||
index + 1 === detailObj.servicePart.length ? '0' : '',
|
||
}" @click="handleGoServiceDetail(item.SERVERPART_ID)">
|
||
<view class="leftItem">
|
||
<view class="leftImgBox">
|
||
<view class="leftImg" :style="{
|
||
backgroundImage: `url(${item.ImageLits && item.ImageLits.length > 0
|
||
? item.ImageLits[0]
|
||
: 'https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png'
|
||
})`,
|
||
}"></view>
|
||
<!-- <image
|
||
class="leftImg"
|
||
:src="
|
||
item.ImageLits && item.ImageLits.length > 0
|
||
? item.ImageLits[0]
|
||
: 'https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png'
|
||
"
|
||
/> -->
|
||
</view>
|
||
<view class="detailBox">
|
||
<view class="detailTop">
|
||
<view class="topLeft">
|
||
<span class="detailName">{{
|
||
item.SERVERPART_NAME
|
||
}}</span>
|
||
<span class="detailState">营业中</span>
|
||
</view>
|
||
<!-- <view class="topRight">
|
||
<span class="chargeType">快充</span>
|
||
<span class="chargeValue">空4/8</span>
|
||
</view> -->
|
||
</view>
|
||
<view class="detailBottom">
|
||
<div class="distanceBox">
|
||
<div class="distanceLeft">
|
||
<image class="distanceIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/address.png" />
|
||
<span class="distanceNumber">{{ item.SERVERPART_DISTANCEGD || "-" }}km</span>
|
||
</div>
|
||
<span class="line"></span>
|
||
<span class="address">{{
|
||
item.SERVERPART_ADDRESS || "-"
|
||
}}</span>
|
||
</div>
|
||
<div class="typeList" v-if="item.ServerpartInfo.SERVERPART_TARGET">
|
||
<div class="typeItem" v-for="(
|
||
subItem, subIndex
|
||
) in item.ServerpartInfo.SERVERPART_TARGET.split(',')" :key="subIndex">
|
||
{{
|
||
SERVERPART_TARGETOBJ && subItem
|
||
? SERVERPART_TARGETOBJ[subItem]
|
||
: ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <span class="label"
|
||
>服务区特色：{{
|
||
item.ServerpartInfo.SERVERPART_INFO || ""
|
||
}}</span
|
||
>
|
||
<span class="value"></span> -->
|
||
</view>
|
||
|
||
<view class="chargeBox" v-if="false">
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<image class="imgIcon"
|
||
src="@https://eshangtech.com/wanmeiyizhanImg/home/https://eshangtech.com/minTestImg/lixiangIcon.png" />
|
||
<span class="chargeTypeName">理想</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{ item.LXHave || "0" }}</span>
|
||
<span class="sum">/{{ item.LiXiang || "0" }}</span>
|
||
</view>
|
||
<!-- <view class="chargeItemLabel">理想</view>
|
||
<view class="chargeItemValue">
|
||
空<span class="empty">0</span
|
||
><span class="sum">/12</span>
|
||
</view> -->
|
||
</view>
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<image class="imgIcon" src="@https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.png" />
|
||
<span class="chargeTypeName">交控新能源</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{ item.SunHave || "0" }}</span>
|
||
<span class="sum">/{{ item.Sun || "0" }}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<image class="imgIcon" src="https://eshangtech.com/minTestImg/chargeAndReplace.png" />
|
||
<span class="chargeTypeName">国网</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{
|
||
item.chargeAndReplace || "0"
|
||
}}</span>
|
||
<span class="sum">/{{ item.chargeAndReplaceSum || "0" }}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="centerItem">
|
||
<!-- 拥有设施的小图标 -->
|
||
<view class="centerConfigItem" v-for="(subItem, index) in item.imgList" :key="index">
|
||
<image v-if="subItem.isShow" class="configImg" :src="subItem.url" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottomItem">
|
||
<view class="chargeBox">
|
||
<!-- 理想 -->
|
||
<view class="chargeItem">
|
||
<view class="chargeIconBox">
|
||
<image class="chargeIcon" src="https://eshangtech.com/minTestImg/LXIcon.png" />
|
||
</view>
|
||
<view class="chargeInfo">
|
||
<span class="empty">空</span>
|
||
<span class="emptyValue">{{
|
||
item.LXDetail && item.LXDetail.LXEmpty
|
||
? item.LXDetail.LXEmpty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
item.LXDetail && item.LXDetail.LXSum
|
||
? item.LXDetail.LXSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 蔚来 -->
|
||
<view class="chargeItem">
|
||
<view class="chargeIconBox">
|
||
<image class="chargeIcon" src="https://eshangtech.com/minTestImg/WLIcon.png" />
|
||
</view>
|
||
<view class="chargeInfo">
|
||
<span class="empty">空</span>
|
||
<span class="emptyValue">{{
|
||
item.WLDetail && item.WLDetail.WLEmpty
|
||
? item.WLDetail.WLEmpty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
item.WLDetail && item.WLDetail.WLSum
|
||
? item.WLDetail.WLSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 交控新能源(阳光) -->
|
||
<view class="chargeItem">
|
||
<view class="chargeIconBox">
|
||
<image class="chargeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg" />
|
||
</view>
|
||
<view class="chargeInfo">
|
||
<span class="empty">空</span>
|
||
<span class="emptyValue">{{
|
||
item.SunDetail && item.SunDetail.SunEmpty
|
||
? item.SunDetail.SunEmpty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
item.SunDetail && item.SunDetail.SunSum
|
||
? item.SunDetail.SunSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 国网(充换电) -->
|
||
<view class="chargeItem">
|
||
<view class="chargeIconBox">
|
||
<image class="chargeIcon" src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
|
||
</view>
|
||
<view class="chargeInfo">
|
||
<span class="empty">空</span>
|
||
<span class="emptyValue">{{
|
||
item.chargeAndReplaceDetail &&
|
||
item.chargeAndReplaceDetail.chargeAndReplace
|
||
? item.chargeAndReplaceDetail.chargeAndReplace
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
item.chargeAndReplaceDetail &&
|
||
item.chargeAndReplaceDetail.chargeAndReplaceSum
|
||
? item.chargeAndReplaceDetail.chargeAndReplaceSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="rightItem" @click="handleToMap(item)">
|
||
<view class="navigationTop">
|
||
<image
|
||
class="navigationIcon"
|
||
src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"
|
||
/>
|
||
导航
|
||
</view>
|
||
<span class="longText"
|
||
>{{ item.SERVERPART_DISTANCEGD }}公里</span
|
||
>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 充换电app跳转 -->
|
||
<view class="goAppBox" @click="handleGo" v-if="false">
|
||
<div class="appLeft">
|
||
<image class="goAppIcon" src="https://eshangtech.com/ShopICO/ahyd-user/images/home/anhuiAPPIcon.png" />
|
||
<span class="appName">安徽充换电APP</span>
|
||
</div>
|
||
|
||
<div class="appRight">
|
||
<span class="search">查看</span>
|
||
<image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.png" />
|
||
</div>
|
||
</view>
|
||
|
||
<!-- <view class="goTest" @click="handleGoTest" v-if="loginType !== 'min'">
|
||
<span>跳转测试页面</span>
|
||
</view> -->
|
||
<!-- <view>{{ JSON.stringify(userInfo) }}</view> -->
|
||
</view>
|
||
<uni-popup ref="popup" :show="isShow" :safe-area="false" @close="handleClosePopup" @maskClick="handleClosePopup">
|
||
<view class="selectPointBox">
|
||
<view class="searchBox">
|
||
<image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/searchIcon.png" />
|
||
<input class="inputBox" v-model="searchPoint" placeholder="搜索地点、服务区" placeholder-style="font-size: 24rpx"
|
||
confirm-type="search" @input="searchPOI" @confirm="searchPOI" />
|
||
<span class="searchBtn" @click="searchPOI">搜索</span>
|
||
</view>
|
||
|
||
<view class="filterBox" v-if="!hideFilterSearch">
|
||
<view class="filterItem" @click="handleAddSearchText('服务区')">
|
||
<view class="filterContent service"> 服务区</view>
|
||
</view>
|
||
<view class="filterItem" @click="handleAddSearchText('加油站')">
|
||
<view class="filterContent gasStation">加油站</view>
|
||
</view>
|
||
<view class="filterItem" @click="handleAddSearchText('收费站')">
|
||
<view class="filterContent tollStation">收费站</view>
|
||
</view>
|
||
<view class="filterItem" @click="handleAddSearchText('充电站')">
|
||
<view class="filterContent chargingStation">充电站</view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="listBox">
|
||
<view class="listItem" v-for="(item, index) in pointList" :key="index" @click="handleGoUsMap(item)">
|
||
<view class="topItem">
|
||
<view class="topLeft">
|
||
<image class="listIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/address.png" />
|
||
<span class="listName">{{ item.name || "" }}</span>
|
||
</view>
|
||
<view class="rightDistance">{{
|
||
item.distance ? `${item.distance}km` : ""
|
||
}}</view>
|
||
</view>
|
||
<view class="bottom">{{ item.address || "" }}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- name -->
|
||
</view>
|
||
</uni-popup>
|
||
<CustomLoading :visible="isLoading" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import serverInfo from "./serverInfo.js";
|
||
import ChargeBox from "../../components/chargeBox.vue";
|
||
import CustomLoading from "../../components/customLoading.vue";
|
||
// uni.requireNativePlugin("myTest");
|
||
// const CryptoJS = require("crypto-js");
|
||
// import md5 from "js-md5";
|
||
import {
|
||
handleGetNearService,
|
||
handleHavePointInMin,
|
||
handleHavePointInApp,
|
||
hanldeHavePointInIos,
|
||
handleGetUserPointInfo,
|
||
handleGetNearThreeService
|
||
} from "../../utils/publicMethods.js";
|
||
|
||
export default {
|
||
components: { ChargeBox, CustomLoading },
|
||
data() {
|
||
return {
|
||
startObj: {}, // 起点的数据对象
|
||
endObj: {}, // 终点的数据对象
|
||
currentService: "", // 当前服务区信息
|
||
howLong: "", // 多少公里
|
||
hour: "", // 花费小时
|
||
minute: "", // 花费分钟
|
||
money: "", // 花费钱
|
||
serviceList: [], // 沿途服务区列表
|
||
detailObj: {
|
||
distanceNumber: "",
|
||
hour: "",
|
||
minutes: "",
|
||
tolls: "",
|
||
haveProgress: "",
|
||
},
|
||
userObj: {
|
||
name: "我的位置",
|
||
seatInfo: {}, // 用户当前的经纬度位置
|
||
},
|
||
endPointObj: {},
|
||
seatInfo: "",
|
||
loginType: "",
|
||
SERVERPART_TARGETOBJ: {},
|
||
userInfo: {}, //用户信息
|
||
context: "",
|
||
isShow: false,
|
||
searchPoint: "", // 搜索地名的值
|
||
pointList: [], // 查询到的地名数组
|
||
chaegeBoxList: [], // 组件要的服务区名称的数组
|
||
hideFilterSearch: false, // 隐藏筛选的小项
|
||
endPlaceFocus: false, // 目的地的聚焦
|
||
startEndType: 1, // 起始的类型 1的时候 代表没交换过 2的时候 代表交换了
|
||
isLoading: false,
|
||
};
|
||
},
|
||
async onLoad() {
|
||
let type = uni.getStorageSync("loginType");
|
||
this.loginType = type;
|
||
console.log("type", type);
|
||
|
||
let _this = this;
|
||
const seatInfo = await handleGetUserPointInfo()
|
||
this.seatInfo = seatInfo
|
||
const serviceInfo = await handleGetNearThreeService()
|
||
|
||
this.endPointObj = {
|
||
...serviceInfo.nearService,
|
||
longitude: serviceInfo.nearService.SERVERPART_X,
|
||
latitude: serviceInfo.nearService.SERVERPART_Y,
|
||
name: serviceInfo.nearService.SERVERPART_NAME,
|
||
};
|
||
this.currentService = serviceInfo.nearService;
|
||
// this.endName = this.currentService.ServerPart_Name;
|
||
this.userObj = {
|
||
...this.userObj,
|
||
longitude: this.seatInfo.longitude,
|
||
latitude: this.seatInfo.latitude,
|
||
};
|
||
// 给起点和终点赋值
|
||
this.startObj = this.userObj;
|
||
this.endObj = this.endPointObj;
|
||
|
||
// if (type === "min") {
|
||
// handleHavePointInMin().then((res) => {
|
||
// _this.handleGetOnLoad();
|
||
// });
|
||
// } else if (type === "android") {
|
||
// handleHavePointInApp().then((res) => {});
|
||
// } else {
|
||
// hanldeHavePointInIos();
|
||
// }
|
||
|
||
let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
|
||
if (SERVERPART_TARGET) {
|
||
this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
|
||
} else {
|
||
// 拿到枚举
|
||
this.handleSERVERPART_TARGETOBJ();
|
||
}
|
||
|
||
// 理想的数据对接的方法
|
||
// this.handleGetLXData();
|
||
},
|
||
async onShow() {
|
||
let _this = this;
|
||
// 判断服务区是否已经改变了
|
||
let res = uni.getStorageSync("currentService");
|
||
// 存在了经纬度
|
||
// if (res) {
|
||
// // 不等于的时候就是改变了
|
||
// if (res.SERVERPART_ID !== this.endObj.SERVERPART_ID) {
|
||
// let res = uni.getStorageSync("currentService");
|
||
|
||
// this.currentService = res;
|
||
// console.log("res", res);
|
||
|
||
// this.seatInfo = JSON.parse(uni.getStorageSync("seatInfo"));
|
||
|
||
// this.userObj = {
|
||
// ...this.userObj,
|
||
// longitude: this.seatInfo.longitude,
|
||
// latitude: this.seatInfo.latitude,
|
||
// };
|
||
|
||
// this.endPointObj = {
|
||
// ...res,
|
||
// longitude: res.SERVERPART_X,
|
||
// latitude: res.SERVERPART_Y,
|
||
// name: res.SERVERPART_NAME,
|
||
// };
|
||
// console.log("seatInfo", this.seatInfo);
|
||
// // 给起点和终点赋值
|
||
// this.startObj = this.userObj;
|
||
// this.endObj = this.endPointObj;
|
||
|
||
// this.handleTrafficSearch();
|
||
// }
|
||
// } else {
|
||
// if (this.loginType === "min") {
|
||
// } else if (this.loginType === "android") {
|
||
// plus.geolocation.getCurrentPosition(
|
||
// async function (position) {
|
||
// let res = position.coords;
|
||
// let seatInfo = {
|
||
// latitude: res.latitude,
|
||
// longitude: res.longitude,
|
||
// };
|
||
// uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
|
||
// uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
|
||
// _this.seat = seatInfo;
|
||
// _this.handleGetOnLoad();
|
||
// },
|
||
// function (error) {
|
||
// // handleHavePointInApp();
|
||
// console.error("获取位置失败:", error.message);
|
||
// }
|
||
// );
|
||
// }
|
||
// }
|
||
|
||
const seatInfo = await handleGetUserPointInfo()
|
||
this.seatInfo = seatInfo
|
||
|
||
this.userObj = {
|
||
...this.userObj,
|
||
longitude: this.seatInfo.longitude,
|
||
latitude: this.seatInfo.latitude,
|
||
};
|
||
|
||
if (this.endObj.longitude && this.endObj.latitude) {
|
||
} else {
|
||
this.endPointObj = {
|
||
name: "请选择目的地",
|
||
};
|
||
this.startObj = this.userObj;
|
||
this.endObj = this.endPointObj;
|
||
}
|
||
|
||
let userInfo = uni.getStorageSync("userInfo");
|
||
this.userInfo = userInfo;
|
||
},
|
||
onShareAppMessage() {
|
||
// let _this = this;
|
||
return {
|
||
title: "出行导航",
|
||
path: "/pages/scanCodeCharge/travelNavigation",
|
||
// imageUrl: _this.good.DEFAULT_IMG,
|
||
};
|
||
},
|
||
onShareTimeline() {
|
||
return {
|
||
title: "出行导航",
|
||
path: "/pages/scanCodeCharge/travelNavigation",
|
||
// imageUrl: _this.good.DEFAULT_IMG,
|
||
};
|
||
},
|
||
methods: {
|
||
// 目的地的聚焦事件
|
||
handleEndPlaceFocus(e) {
|
||
this.endPlaceFocus = true;
|
||
},
|
||
// 失去焦点
|
||
handleEndPlaceBlur() {
|
||
this.endPlaceFocus = false;
|
||
},
|
||
// 直接点击回车 触发搜索
|
||
handleConfirmToSearch() {
|
||
if (!this.endObj.name) {
|
||
uni.showToast({
|
||
title: "请选择目的地",
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (this.pointList && this.pointList.length > 0 && !this.endObj.location) {
|
||
this.handleGoUsMap(this.pointList[0]);
|
||
this.endPlaceFocus = false;
|
||
} else {
|
||
this.handleGoUsMap({
|
||
...this.endObj,
|
||
location: `${this.endObj.longitude},${this.endObj.latitude}`
|
||
});
|
||
this.endPlaceFocus = false;
|
||
}
|
||
},
|
||
// 给搜索框 加上指定文字
|
||
handleAddSearchText(searchType) {
|
||
this.searchPoint += searchType;
|
||
this.hideFilterSearch = true;
|
||
this.searchPOI();
|
||
},
|
||
// 高德的搜索
|
||
searchPOI() {
|
||
if (!this.searchPoint) {
|
||
this.hideFilterSearch = false;
|
||
}
|
||
if (this.startEndType === 1) {
|
||
this.endObj.name = this.searchPoint;
|
||
} else {
|
||
this.startObj.name = this.searchPoint;
|
||
}
|
||
let _this = this;
|
||
const key = "6e96a801bcea5290d3dcbf100358a6b3"; // 在高德开发者平台申请
|
||
const url = `https://restapi.amap.com/v5/place/text?key=${key}&types=&keywords=${this.searchPoint}&offset=10&page=1®ion=合肥市`;
|
||
// radius=5000&types=餐饮服务|购物服务&
|
||
console.log("url", url);
|
||
|
||
// types 010100|010101|010102 加油站 180300|180301|180302 服务区
|
||
|
||
uni.request({
|
||
url,
|
||
success: (res) => {
|
||
console.log("res", res.data.pois);
|
||
let list = res.data.pois;
|
||
|
||
console.log("_this.startObj", _this.startObj);
|
||
if (list && list.length > 0) {
|
||
for (let i = 0; i < list.length; i++) {
|
||
let item = list[i];
|
||
|
||
let [lon2, lat2] = item.location.split(",");
|
||
let distance = _this.getDistance(
|
||
_this.startObj.latitude,
|
||
_this.startObj.longitude,
|
||
lat2,
|
||
lon2
|
||
);
|
||
item.distance = distance;
|
||
}
|
||
}
|
||
|
||
if (list && list.length > 0) {
|
||
for (let i = 0; i < list.length - 1; i++) {
|
||
// 外层循环控制排序趟数
|
||
for (let j = 0; j < list.length - i - 1; j++) {
|
||
if (Number(list[j].distance) > Number(list[j + 1].distance)) {
|
||
let temp = list[j];
|
||
list[j] = list[j + 1];
|
||
list[j + 1] = temp;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
_this.pointList = list;
|
||
console.log("_this.pointList", _this.pointList);
|
||
},
|
||
});
|
||
},
|
||
// 点击高德搜索出来的 导航
|
||
handleGoUsMap(obj) {
|
||
console.log("obj", obj);
|
||
let [lon2, lat2] = obj.location.split(",");
|
||
let newRes = {
|
||
SERVERPART_X: lon2,
|
||
SERVERPART_Y: lat2,
|
||
ServerPart_Name: obj.name,
|
||
name: obj.name,
|
||
longitude: lon2,
|
||
latitude: lat2,
|
||
location: obj
|
||
};
|
||
|
||
if (this.startEndType === 1) {
|
||
this.endObj = newRes;
|
||
} else {
|
||
this.startObj = newRes;
|
||
}
|
||
this.searchPoint = newRes.name;
|
||
this.endPlaceFocus = false;
|
||
this.detailObj = {
|
||
distanceNumber: "",
|
||
hour: "",
|
||
minutes: "",
|
||
tolls: "",
|
||
haveProgress: "",
|
||
servicePart: [],
|
||
};
|
||
this.$refs.popup.close();
|
||
this.isShow = false;
|
||
console.log("startEndType", this.startEndType);
|
||
console.log("endObj", this.endObj);
|
||
console.log("startObj", this.startObj);
|
||
this.handleTrafficSearch();
|
||
|
||
return;
|
||
console.log("obj", obj);
|
||
let [lon, lat] = obj.location.split(",");
|
||
|
||
if (this.loginType === "min") {
|
||
uni.openLocation({
|
||
latitude: lat * 1,
|
||
longitude: lon * 1,
|
||
scale: 16, // 缩放比例
|
||
name: obj.name,
|
||
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||
success(data) {
|
||
console.log(data);
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
} else {
|
||
if (this.seatInfo) {
|
||
const addModule = uni.requireNativePlugin("AMapModule");
|
||
addModule.auth(
|
||
"d773aa156f8ca2160cfb06d5f117dacd",
|
||
(suc) => {
|
||
addModule.reg(
|
||
(suc) => {
|
||
addModule.navfrom(
|
||
this.startObj.latitude,
|
||
this.startObj.longitude,
|
||
"我的位置",
|
||
lat,
|
||
lon,
|
||
obj.name,
|
||
(suc) => {
|
||
console.log(suc);
|
||
},
|
||
(err) => {
|
||
console.log(err);
|
||
}
|
||
);
|
||
},
|
||
(err) => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: "none",
|
||
});
|
||
}
|
||
);
|
||
},
|
||
(err) => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: "none",
|
||
});
|
||
}
|
||
);
|
||
}
|
||
}
|
||
},
|
||
// 计算经纬度的实际距离的方法
|
||
getDistance(lat1, lon1, lat2, lon2) {
|
||
const toRad = (d) => (d * Math.PI) / 180; // 角度转弧度
|
||
const R = 6371.0; // 地球半径（单位：km）
|
||
const dLat = toRad(lat2 - lat1);
|
||
const dLon = toRad(lon2 - lon1);
|
||
const a =
|
||
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||
Math.cos(toRad(lat1)) *
|
||
Math.cos(toRad(lat2)) *
|
||
Math.sin(dLon / 2) *
|
||
Math.sin(dLon / 2);
|
||
|
||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||
return (R * c).toFixed(2); // 返回单位：米
|
||
},
|
||
// 随机给充电桩数据
|
||
handleHaveRandomData() {
|
||
// 理想当前充电的
|
||
let LXHave = 0;
|
||
// 理想的全部充电的
|
||
let LXSum = 0;
|
||
// 阳光当前充电的
|
||
let SunHave = 0;
|
||
// 阳光全部充电的
|
||
let SunSum = 0;
|
||
// 充换电当前充电的
|
||
let chargeAndReplace = 0;
|
||
// 充换电全部充电的
|
||
let chargeAndReplaceSum = 0;
|
||
|
||
// 给理想随机 总数
|
||
LXSum = this.handleGetRandomData(15, 20);
|
||
// 给阳光随机 总数
|
||
SunSum = this.handleGetRandomData(10, 17);
|
||
// 给充换电随机 总数
|
||
chargeAndReplaceSum = this.handleGetRandomData(5, 10);
|
||
|
||
// 理想的随机百分比
|
||
let LXRate = this.handleGetRandomData(0, 60);
|
||
// 阳光的随机百分比
|
||
let SunRate = this.handleGetRandomData(0, 60);
|
||
// 充换电的随机百分比
|
||
let chargeAndReplaceRate = this.handleGetRandomData(0, 60);
|
||
|
||
LXHave = Math.floor(LXSum * (LXRate / 100));
|
||
SunHave = Math.floor(SunSum * (SunRate / 100));
|
||
chargeAndReplace = Math.floor(
|
||
chargeAndReplaceSum * (chargeAndReplaceRate / 100)
|
||
);
|
||
|
||
return {
|
||
LXHave: LXHave,
|
||
LXSum: LXSum,
|
||
SunHave: SunHave,
|
||
SunSum: SunSum,
|
||
chargeAndReplace: chargeAndReplace,
|
||
chargeAndReplaceSum: chargeAndReplaceSum,
|
||
};
|
||
},
|
||
// 生成随机数
|
||
handleGetRandomData(max, min) {
|
||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||
},
|
||
//理想的数据对接的方法
|
||
async handleGetLXData() {
|
||
const LiOperatorSecret = "bGMyYwJFl17BqwD3";
|
||
const LiOperCode = "MA7EBGWBX";
|
||
const LiSigSecret = "V7I6yvHvEk8STt0P";
|
||
const LiDataSecret = "P2S3WjoLv3rqL0hn";
|
||
const LiIV = "ZRlwcrx7k63ihzXF";
|
||
|
||
const OperatorID = "78109626X"; // 组织机构代码（OperatorID）
|
||
const OperatorSecret = "Xh2vLq1Pz9zF7wK3"; // Xh2vLq1Pz9zF7wK3 运营商秘钥（OperatorSecret）
|
||
const SigSecret = "bT8sWn2Aq0Jv6GvD"; // bT8sWn2Aq0Jv6GvD 签名秘钥（SigSecret）
|
||
const DataSecret = "fK7YzAq1R8Vp9hL0"; // fK7YzAq1R8Vp9hL0 数据加密秘钥（DataSecret）
|
||
const DataSecretIV = "z3XnWl8FQ2pTm5Ba"; // z3XnWl8FQ2pTm5Ba 初始化向量（DataSecretIV
|
||
|
||
// 调用token接口拿到数据
|
||
let tokenData = await this.$testApi.$post("/send", {
|
||
url: "https://iot-openapi-ontest-b.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_token",
|
||
data: JSON.stringify({
|
||
OperatorID: OperatorID,
|
||
OperatorSecret: LiOperatorSecret,
|
||
}),
|
||
seq: "001",
|
||
token: "",
|
||
});
|
||
console.log("tokenData", tokenData);
|
||
// token的实际值
|
||
let token = tokenData.Data.AccessToken;
|
||
|
||
// 拿到所有站点的数据
|
||
const allStationList = await this.$testApi.$post("/send", {
|
||
url: "https://iot-openapi-ontest-b.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_stations_info",
|
||
data: JSON.stringify({
|
||
PageNo: 1,
|
||
OperatorSecret: 999,
|
||
}),
|
||
seq: "002",
|
||
token: token,
|
||
});
|
||
console.log("allStationList", allStationList);
|
||
let stationList = allStationList.Data.StationInfos;
|
||
|
||
// 找到匹配 站点id
|
||
let stationId = [];
|
||
|
||
const stationInfo = await this.$testApi.$post("/send", {
|
||
url: "https://iot-openapi-ontest-b.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/notification_stationStatus",
|
||
data: JSON.stringify({
|
||
ConnectorStatusInfo: {
|
||
ConnectorID: 81000251,
|
||
Status: 2,
|
||
},
|
||
}),
|
||
seq: "003",
|
||
token: token,
|
||
});
|
||
console.log("stationInfo", stationInfo);
|
||
},
|
||
// 跳转测试页面
|
||
handleGoTest() {
|
||
uni.scanCode({
|
||
success: function (res) {
|
||
uni.navigateTo({
|
||
url: `/pages/thirdParty/testPage?url=${res.result}`,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
// 跳转安徽充换电
|
||
handleGo() {
|
||
uni.navigateTo({
|
||
url: `/pages/thirdParty/chargAndSwapp`,
|
||
});
|
||
},
|
||
// 跳转地图服务区详情
|
||
handleGoServiceDetail(id) {
|
||
uni.navigateTo({
|
||
url: `/pages/serviceDetail/mapDetail/index?servicePartId=${id}`,
|
||
});
|
||
},
|
||
// 解服务区的一个枚举
|
||
async handleSERVERPART_TARGETOBJ() {
|
||
let SERVERPART_TARGET = await this.$api.$get(
|
||
"/EShangApiMain/FrameWork/GetFieldEnumTree",
|
||
{ FieldExplainField: "SERVERPART_TARGET" }
|
||
);
|
||
let list = this.$utils.wrapTreeNode(SERVERPART_TARGET.Result_Data.List);
|
||
let obj = {};
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
obj[String(item.value)] = item.label;
|
||
});
|
||
}
|
||
console.log("obj", obj);
|
||
uni.setStorageSync("SERVERPART_TARGET", JSON.stringify(obj));
|
||
this.SERVERPART_TARGETOBJ = obj;
|
||
},
|
||
// 把onLoad需要调用的内容变成一个方法 可以方便调用
|
||
async handleGetOnLoad() {
|
||
if (this.seatInfo) {
|
||
} else {
|
||
this.seatInfo = JSON.parse(uni.getStorageSync("seatInfo"));
|
||
}
|
||
let res = uni.getStorageSync("currentService");
|
||
if (res) {
|
||
} else {
|
||
res = await handleGetNearService(this);
|
||
}
|
||
|
||
this.endPointObj = {
|
||
...res,
|
||
longitude: res.SERVERPART_X,
|
||
latitude: res.SERVERPART_Y,
|
||
name: res.SERVERPART_NAME,
|
||
};
|
||
this.currentService = res;
|
||
// this.endName = this.currentService.ServerPart_Name;
|
||
this.userObj = {
|
||
...this.userObj,
|
||
longitude: this.seatInfo.longitude,
|
||
latitude: this.seatInfo.latitude,
|
||
};
|
||
// 给起点和终点赋值
|
||
this.startObj = this.userObj;
|
||
this.endObj = this.endPointObj;
|
||
},
|
||
// 切换出发点和 终点
|
||
handleChangeStartEnd() {
|
||
if (this.startEndType === 1) {
|
||
this.startEndType = 2;
|
||
this.searchPoint = this.endObj.name;
|
||
} else {
|
||
this.startEndType = 1;
|
||
this.searchPoint = this.startObj.name;
|
||
}
|
||
let middleObj = this.endObj;
|
||
this.endObj = JSON.parse(JSON.stringify(this.startObj));
|
||
this.startObj = middleObj;
|
||
console.log("this.startObj", this.startObj);
|
||
console.log("this.endObj", this.endObj);
|
||
},
|
||
// 获取权限
|
||
handleGetPermission() {
|
||
const context = plus.android.runtimeMainActivity();
|
||
const PackageManager = plus.android.importClass(
|
||
"android.content.pm.PackageManager"
|
||
);
|
||
const hasPermission =
|
||
context.checkCallingOrSelfPermission(
|
||
"android.permission.ACCESS_FINE_LOCATION"
|
||
) === PackageManager.PERMISSION_GRANTED;
|
||
|
||
// true 的时候 就是有了位置权限
|
||
if (hasPermission) {
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
if (seatInfo) {
|
||
// return JSON.parse(seatInfo);
|
||
return seatInfo
|
||
} else {
|
||
plus.geolocation.getCurrentPosition(async function (position) {
|
||
console.log("当前位置:", position);
|
||
let res = position.coords;
|
||
let seatInfo = {
|
||
latitude: res.latitude,
|
||
longitude: res.longitude,
|
||
};
|
||
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
|
||
uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
|
||
_this.seat = seatInfo;
|
||
let latitude = res.latitude;
|
||
let longitude = res.longitude;
|
||
return {
|
||
latitude: latitude,
|
||
longitude: longitude,
|
||
};
|
||
});
|
||
}
|
||
} else {
|
||
uni.showModal({
|
||
title: "注意",
|
||
content:
|
||
"拒绝授权位置服务会导致小程序功能无法正常使用，建议授权位置信息",
|
||
confirmText: "去设置",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
const main = plus.android.runtimeMainActivity();
|
||
const Intent = plus.android.importClass("android.content.Intent");
|
||
const Settings = plus.android.importClass(
|
||
"android.provider.Settings"
|
||
);
|
||
const intent = new Intent(
|
||
Settings.ACTION_APPLICATION_DETAILS_SETTINGS
|
||
);
|
||
const uri = plus.android.invoke(
|
||
"android.net.Uri",
|
||
"parse",
|
||
"package:" + main.getPackageName()
|
||
);
|
||
intent.setData(uri);
|
||
main.startActivity(intent);
|
||
uni.switchTab({
|
||
url: "/pages/home/index",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
// 获得高德隐私协议
|
||
handleGetGoDePrivacy() {
|
||
this.myTest.auth(
|
||
this.context,
|
||
"d773aa156f8ca2160cfb06d5f117dacd",
|
||
(suc) => {
|
||
console.log("suc", suc);
|
||
true;
|
||
},
|
||
(err) => {
|
||
console.log("err", err);
|
||
false;
|
||
}
|
||
);
|
||
},
|
||
|
||
// 路况查询
|
||
async handleTrafficSearch() {
|
||
this.chaegeBoxList = [];
|
||
// let privacyRes = this.handleGetGoDePrivacy();
|
||
|
||
// this.myTest.navfrom(
|
||
// 39.904556,
|
||
// 116.427231,
|
||
// "火车站",
|
||
// 39.917337,
|
||
// 116.397056,
|
||
// "博物院",
|
||
// (suc) => {
|
||
// console.log("suc", suc);
|
||
// },
|
||
// (err) => {
|
||
// console.log("err", err);
|
||
// }
|
||
// );
|
||
|
||
// this.myTest.reg(
|
||
// this.context,
|
||
// "d773aa156f8ca2160cfb06d5f117dacd",
|
||
// (res) => {
|
||
// console.log("单次回调：", res);
|
||
// }
|
||
// );
|
||
|
||
// this.myTest.open(this.context, (res) => {
|
||
// console.log("单次回调：", res);
|
||
// });
|
||
// console.log("1111");
|
||
console.log("this.endObj", this.endObj);
|
||
console.log("this.startObj", this.startObj);
|
||
|
||
if (!this.endObj.longitude || !this.endObj.latitude) {
|
||
return;
|
||
}
|
||
|
||
let _this = this;
|
||
console.log("this.seatInfo", this.seatInfo);
|
||
if (!(this.seatInfo.longitude && this.seatInfo.latitude)) {
|
||
console.log("this.loginType", this.loginType);
|
||
const seatInfo = await handleGetUserPointInfo()
|
||
this.seatInfo = seatInfo
|
||
// if (this.loginType === "min") {
|
||
// handleHavePointInMin().then((res) => {
|
||
// _this.handleGetOnLoad();
|
||
// });
|
||
// } else if (this.loginType === "android") {
|
||
// handleHavePointInApp().then((res) => { });
|
||
// } else {
|
||
// hanldeHavePointInIos();
|
||
// }
|
||
// return;
|
||
}
|
||
|
||
this.handleDelete();
|
||
// uni.showLoading({
|
||
// title: "加载中...",
|
||
// });
|
||
this.isLoading = true
|
||
// 高德key
|
||
const key = "6e96a801bcea5290d3dcbf100358a6b3";
|
||
// 起点经纬度
|
||
const start = `${this.startObj.longitude},${this.startObj.latitude}`;
|
||
// const start = `117.202392,31.833196`;
|
||
// 终点经纬度
|
||
const end = `${this.endObj.longitude},${this.endObj.latitude}`;
|
||
// 拿到途径点的所有坐标
|
||
let routePoint = "";
|
||
|
||
// 服务区列表
|
||
let serviceList = [];
|
||
|
||
let storgeList = uni.getStorageSync("serviceList");
|
||
if (storgeList) {
|
||
serviceList = JSON.parse(storgeList);
|
||
} else {
|
||
let req = {
|
||
Province_Code: "340000",
|
||
longitude: this.seatInfo.longitude || "",
|
||
latitude: this.seatInfo.latitude || "",
|
||
ShowService: true,
|
||
};
|
||
let serviceArea = await this.$api.$get(
|
||
"/CommercialApi/BaseInfo/GetServerpartList",
|
||
req
|
||
);
|
||
let serviceList = serviceArea.Result_Data.List;
|
||
uni.setStorageSync("serviceList", JSON.stringify(serviceList));
|
||
}
|
||
// 拿到当前位置 跟服务区的距离
|
||
console.log("serviceList", serviceList);
|
||
console.log("start", start);
|
||
console.log("this.endObj", this.endObj);
|
||
|
||
const data = await new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: `https://restapi.amap.com/v3/direction/driving?key=${key}&origin=${start}&destination=${this.endObj.longitude},${this.endObj.latitude}&extensions=all&strategy=20`,
|
||
method: "GET",
|
||
success(res) {
|
||
console.log("resresresresresresresresresresres", res);
|
||
|
||
if (
|
||
res.data &&
|
||
res.data.route &&
|
||
res.data.route.paths &&
|
||
res.data.route.paths.length > 0
|
||
) {
|
||
resolve(res.data.route.paths[0] || {});
|
||
} else {
|
||
resolve(undefined);
|
||
}
|
||
},
|
||
});
|
||
});
|
||
let distance =
|
||
data && data.distance ? (data.distance / 1000).toFixed(2) : 0; // 公里
|
||
// 耗时
|
||
let duration = data && data.duration ? Math.ceil(data.duration / 60) : 0; // 分钟
|
||
// 收费金额
|
||
let tolls = data && data.tolls ? data.tolls : 0; // 收费金额
|
||
// 转一下时间的格式
|
||
let timeObj = _this.handleChangeTimeRule(duration);
|
||
|
||
// 通畅个数
|
||
let smoothAcount = 0;
|
||
// 全部个数
|
||
let allAcount = 0;
|
||
|
||
//拿到是否通畅的数据
|
||
if (data && data.steps && data.steps.length > 0) {
|
||
data.steps.forEach((item) => {
|
||
if (item.tmcs && item.tmcs.length > 0) {
|
||
item.tmcs.forEach((subItem) => {
|
||
if (subItem.status === "畅通") {
|
||
smoothAcount += 1;
|
||
}
|
||
allAcount += 1;
|
||
});
|
||
}
|
||
if (routePoint) {
|
||
routePoint += `;${item.polyline}`;
|
||
} else {
|
||
routePoint = `${item.polyline}`;
|
||
}
|
||
});
|
||
}
|
||
|
||
let areaList = routePoint.split(";");
|
||
|
||
let newAreaList = [];
|
||
if (areaList && areaList.length > 0) {
|
||
areaList.forEach((item) => {
|
||
let [long, lat] = item.split(",");
|
||
let newLong = this.extractFourDecimals(long);
|
||
let newLat = this.extractFourDecimals(lat);
|
||
newAreaList.push(`${newLong},${newLat}`);
|
||
});
|
||
}
|
||
console.log("newAreaList", newAreaList);
|
||
|
||
console.log("serverInfo.cityCoordinate", serverInfo.cityCoordinate);
|
||
|
||
// 途径的服务区
|
||
let serviceAreaList = [];
|
||
if (serverInfo.cityCoordinate && newAreaList && newAreaList.length > 0) {
|
||
for (const key in serverInfo.cityCoordinate) {
|
||
const [name, coord] = [key, serverInfo.cityCoordinate[key]];
|
||
|
||
const [serviceLng, serviceLat] = coord.split(",");
|
||
newAreaList.forEach((item) => {
|
||
const [arrayLng, arrayLat] = item.split(",");
|
||
// // 检查经度和纬度是否在允许的波动范围内（±0.03）
|
||
const lngDiff = Math.abs(Number(serviceLng) - Number(arrayLng));
|
||
const latDiff = Math.abs(Number(serviceLat) - Number(arrayLat));
|
||
|
||
if (lngDiff <= 0.03 && latDiff <= 0.03) {
|
||
console.log("name", name);
|
||
if (serviceAreaList.indexOf(name) === -1) {
|
||
serviceAreaList.push(name);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// for (let key in serverInfo.cityCoordinate) {
|
||
// if (
|
||
// newAreaList.indexOf(serverInfo.cityCoordinate[key]) !== -1 &&
|
||
// key !== this.endObj.SERVERPART_NAME
|
||
// ) {
|
||
// serviceAreaList.push(key);
|
||
// }
|
||
// }
|
||
}
|
||
|
||
console.log("serviceAreaList", serviceAreaList);
|
||
|
||
// 判断终点服务区 是否在途径服务区里面 在的话 就push到最后面
|
||
if (serviceAreaList.indexOf(this.endObj.ServerPart_Name) === -1) {
|
||
serviceAreaList.push(this.endObj.ServerPart_Name);
|
||
}
|
||
|
||
console.log("serviceAreaListdsads", serviceAreaList);
|
||
this.chaegeBoxList = serviceAreaList;
|
||
_this.detailObj = {
|
||
distanceNumber: distance,
|
||
hour: timeObj.hourStr,
|
||
minutes: timeObj.minuteStr,
|
||
tolls: tolls,
|
||
haveProgress: ((smoothAcount / allAcount) * 100).toFixed(2),
|
||
};
|
||
|
||
// uni.hideLoading();
|
||
|
||
_this.isLoading = false
|
||
return;
|
||
let list = [];
|
||
|
||
if (serviceAreaList && serviceAreaList.length > 0) {
|
||
serviceAreaList.forEach((item) => {
|
||
if (serviceList && serviceList.length > 0) {
|
||
serviceList.forEach((subItem) => {
|
||
if (item === subItem.SERVERPART_NAME) {
|
||
list.push(subItem);
|
||
}
|
||
|
||
// 理想总数
|
||
let LIAUTOCHARGESum = 0;
|
||
// 国网总数
|
||
let STATEGRIDCHARGESum = 0;
|
||
// 充换电总数
|
||
let GACENERGYCHARGESum = 0;
|
||
let HASPANTRY = 0; // 男厕数量
|
||
let HASWIFI = 0; // 女厕数量
|
||
let TOILETCOUNT = 0; // 潮汐厕位
|
||
let HASSHOWERROOM = 0; // 淋浴房
|
||
let HASWATERROOM = 0; // 开水器
|
||
let MICROWAVEOVEN = 0; // 微波炉
|
||
let WASHERCOUNT = 0; // 洗衣机数量
|
||
let SLEEPINGPODS = 0; // 睡眠仓
|
||
let HASPILOTLOUNGE = false; // 有无司机之家
|
||
let SHOWERROOM = 0; // 司机之家淋浴间
|
||
let HASCHILD = false; // 有无车辆维修
|
||
let SMALLPARKING = 0; // 轿车车位
|
||
let PACKING = 0; // 客车车位
|
||
let TRUCKPACKING = 0; // 货车车位
|
||
let DANPACKING = 0; // 危化品车位
|
||
let DININGBXCOUNT = 0; // 商铺数量
|
||
let DININGROOMCOUNT = 0; // 餐饮店
|
||
let HASBACKGROUNDRADIO = 0; // 便利店
|
||
let POINTCONTROLCOUNT = 0; // 客房
|
||
let TOILET_PAPER = 0; // 厕纸巾
|
||
let MABROOMWATER_DISPENSER = 0; // 母婴室饮水机
|
||
let NURSING_TABLE = 0; // 哺乳桌
|
||
let BABY_COT = 0; // 婴儿床
|
||
let CHANGING_TABLE = 0; // 尿布台
|
||
let DROOMWATER_DISPENSER = 0; // 司机之家饮水机
|
||
let UREA_COUNT = 0; // 尿素
|
||
let VEHICLEWATERFILLING = 0; // 加水
|
||
|
||
if (subItem.RegionInfo && subItem.RegionInfo.length > 0) {
|
||
subItem.RegionInfo.forEach((thirdItem) => {
|
||
HASPANTRY += thirdItem.HASPANTRY;
|
||
HASWIFI += thirdItem.HASPANTRY;
|
||
TOILETCOUNT += thirdItem.TOILETCOUNT;
|
||
HASSHOWERROOM += thirdItem.HASSHOWERROOM;
|
||
HASWATERROOM += thirdItem.HASWATERROOM;
|
||
MICROWAVEOVEN += thirdItem.MICROWAVEOVEN;
|
||
WASHERCOUNT += thirdItem.WASHERCOUNT;
|
||
SLEEPINGPODS += thirdItem.SLEEPINGPODS;
|
||
SHOWERROOM += thirdItem.SHOWERROOM;
|
||
SMALLPARKING += thirdItem.SMALLPARKING;
|
||
PACKING += thirdItem.PACKING;
|
||
TRUCKPACKING += thirdItem.TRUCKPACKING;
|
||
DANPACKING += thirdItem.DANPACKING;
|
||
DININGBXCOUNT += thirdItem.DININGBXCOUNT;
|
||
DININGROOMCOUNT += thirdItem.DININGROOMCOUNT;
|
||
HASBACKGROUNDRADIO += thirdItem.HASBACKGROUNDRADIO;
|
||
POINTCONTROLCOUNT += thirdItem.POINTCONTROLCOUNT;
|
||
TOILET_PAPER += thirdItem.TOILET_PAPER;
|
||
MABROOMWATER_DISPENSER += thirdItem.MABROOMWATER_DISPENSER;
|
||
NURSING_TABLE += thirdItem.NURSING_TABLE;
|
||
BABY_COT += thirdItem.BABY_COT;
|
||
CHANGING_TABLE += thirdItem.CHANGING_TABLE;
|
||
DROOMWATER_DISPENSER += thirdItem.DROOMWATER_DISPENSER;
|
||
UREA_COUNT += thirdItem.UREA_COUNT;
|
||
VEHICLEWATERFILLING += thirdItem.VEHICLEWATERFILLING;
|
||
|
||
if (thirdItem.HASPILOTLOUNGE) {
|
||
HASPILOTLOUNGE = true;
|
||
}
|
||
if (thirdItem.HASCHILD) {
|
||
HASCHILD = true;
|
||
}
|
||
|
||
LIAUTOCHARGESum += Number(thirdItem.LIAUTOCHARGE || 0);
|
||
STATEGRIDCHARGESum += Number(thirdItem.STATEGRIDCHARGE || 0);
|
||
GACENERGYCHARGESum += Number(thirdItem.GACENERGYCHARGE || 0);
|
||
});
|
||
}
|
||
subItem.LiXiang = LIAUTOCHARGESum;
|
||
subItem.Sun = STATEGRIDCHARGESum;
|
||
subItem.chargeAndReplaceSum = GACENERGYCHARGESum;
|
||
|
||
// 判断小图标是否有值
|
||
subItem.imgList = [
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/manWCIcon.svg",
|
||
isShow: HASPANTRY > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/womanWCIcon.svg",
|
||
isShow: HASWIFI > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/tideToiletSeat.svg",
|
||
isShow: TOILETCOUNT > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg",
|
||
isShow: HASSHOWERROOM > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg",
|
||
isShow: HASWATERROOM > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/microwave.svg",
|
||
isShow: MICROWAVEOVEN > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg",
|
||
isShow: WASHERCOUNT > 0,
|
||
},
|
||
// {
|
||
// url:"https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg",
|
||
// isShow: SLEEPINGPODS>0
|
||
// },
|
||
// {
|
||
// url:"https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg",
|
||
// isShow: HASPILOTLOUNGE>0
|
||
// },
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg",
|
||
isShow: SHOWERROOM > 0,
|
||
},
|
||
,
|
||
// {
|
||
// url:"https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg",
|
||
// isShow: HASCHILD>0
|
||
// },
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/carIcon.svg",
|
||
isShow: SMALLPARKING > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/bus.svg",
|
||
isShow: PACKING > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/train.svg",
|
||
isShow: TRUCKPACKING > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg",
|
||
isShow: DANPACKING > 0,
|
||
},
|
||
// {
|
||
// url:"https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg",
|
||
// isShow: DININGROOMCOUNT>0
|
||
// },
|
||
// {
|
||
// url:"https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg",
|
||
// isShow: HASBACKGROUNDRADIO>0
|
||
// },
|
||
// {
|
||
// url:"https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg",
|
||
// isShow: POINTCONTROLCOUNT>0
|
||
// },
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/toiletPaperTowels.svg",
|
||
isShow: TOILET_PAPER > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/waterDispenser.svg",
|
||
isShow: MABROOMWATER_DISPENSER > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/nursingTable.svg",
|
||
isShow: NURSING_TABLE > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/crib.svg",
|
||
isShow: BABY_COT > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/changingTable.svg",
|
||
isShow: BABY_COT > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg",
|
||
isShow: DROOMWATER_DISPENSER > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/urea.svg",
|
||
isShow: UREA_COUNT > 0,
|
||
},
|
||
{
|
||
url: "https://eshangtech.com/wanmeiyizhanImg/home/watering.svg",
|
||
isShow: VEHICLEWATERFILLING > 0,
|
||
},
|
||
];
|
||
// 理想的随机百分比
|
||
let LXRate = this.handleGetRandomData(0, 60);
|
||
// 阳光的随机百分比
|
||
let SunRate = this.handleGetRandomData(0, 60);
|
||
// 充换电的随机百分比
|
||
let chargeAndReplaceRate = this.handleGetRandomData(0, 60);
|
||
|
||
subItem.LXHave = Math.floor(subItem.LiXiang * (LXRate / 100));
|
||
subItem.SunHave = Math.floor(subItem.Sun * (SunRate / 100));
|
||
subItem.chargeAndReplace = Math.floor(
|
||
subItem.chargeAndReplaceSum * (chargeAndReplaceRate / 100)
|
||
);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
// 下面的距离变成高速实际距离 不再是直线距离
|
||
if (list && list.length > 0) {
|
||
for (let i = 0; i < list.length; i++) {
|
||
let itemEnd = `${list[i].SERVERPART_X},${list[i].SERVERPART_Y}`;
|
||
await new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
resolve();
|
||
}, 300);
|
||
});
|
||
|
||
const res = await new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: `https://restapi.amap.com/v3/direction/driving?key=${key}&origin=${start}&destination=${itemEnd}&strategy=0`,
|
||
method: "GET",
|
||
success(res) {
|
||
if (
|
||
res.data &&
|
||
res.data.route &&
|
||
res.data.route.paths &&
|
||
res.data.route.paths.length > 0
|
||
) {
|
||
console.log("res1", res);
|
||
|
||
resolve(res.data.route.paths[0] || {});
|
||
} else {
|
||
resolve(undefined);
|
||
}
|
||
},
|
||
});
|
||
});
|
||
console.log("itemEnd", itemEnd);
|
||
console.log("res", res);
|
||
|
||
if (res) {
|
||
list[i].SERVERPART_DISTANCEGD = (
|
||
Number(res.distance) / 1000
|
||
).toFixed(2);
|
||
}
|
||
|
||
let chargeObj = this.handleHaveRandomData();
|
||
list[i].chargeObj = chargeObj;
|
||
|
||
let item = list[i];
|
||
console.log("item", item);
|
||
|
||
let LXSum = 0; // 理想
|
||
let WLSum = 0; // 蔚来
|
||
let SunSum = 0; // 新能源
|
||
let chargeAndReplaceSum = 0; // 国网
|
||
|
||
if (item.RegionInfo && item.RegionInfo.length > 0) {
|
||
item.RegionInfo.forEach((item) => {
|
||
chargeAndReplaceSum += item.STATEGRIDCHARGE; // 国网
|
||
SunSum += item.GACENERGYCHARGE; // 新能源
|
||
WLSum += item.OTHERCHAGRE; // 蔚来
|
||
LXSum += item.LIAUTOCHARGE; // 理想
|
||
});
|
||
}
|
||
|
||
// 理想的随机百分比
|
||
let LXRate = this.handleGetRandomData(0, 60);
|
||
// 蔚来的随机百分比
|
||
let WLRate = this.handleGetRandomData(0, 60);
|
||
// 阳光的随机百分比
|
||
let SunRate = this.handleGetRandomData(0, 60);
|
||
// 充换电的随机百分比
|
||
let chargeAndReplaceRate = this.handleGetRandomData(0, 60);
|
||
|
||
item.LXDetail = {
|
||
LXEmpty: Math.floor(LXSum * (LXRate / 100)),
|
||
LXSum: LXSum,
|
||
};
|
||
item.WLDetail = {
|
||
WLEmpty: Math.floor(WLSum * (WLRate / 100)),
|
||
WLSum: WLSum,
|
||
};
|
||
item.SunDetail = {
|
||
SunEmpty: Math.floor(SunSum * (SunRate / 100)),
|
||
SunSum: SunSum,
|
||
};
|
||
item.chargeAndReplaceDetail = {
|
||
chargeAndReplace: Math.floor(
|
||
chargeAndReplaceSum * (chargeAndReplaceRate / 100)
|
||
),
|
||
chargeAndReplaceSum: chargeAndReplaceSum,
|
||
};
|
||
}
|
||
}
|
||
|
||
console.log("listasdsadasdas", list);
|
||
|
||
_this.detailObj = {
|
||
distanceNumber: distance,
|
||
hour: timeObj.hourStr,
|
||
minutes: timeObj.minuteStr,
|
||
tolls: tolls,
|
||
haveProgress: ((smoothAcount / allAcount) * 100).toFixed(2),
|
||
servicePart: list,
|
||
};
|
||
|
||
console.log("_this.detailObj", _this.detailObj);
|
||
|
||
// LXDetail.LXEmpty
|
||
// LXDetail.LXSum
|
||
// WLDetail.WLEmpty
|
||
// WLDetail.WLSum
|
||
// SunDetail.SunEmpty
|
||
// SunDetail.SunSum
|
||
// chargeAndReplaceDetail.chargeAndReplace
|
||
// chargeAndReplaceDetail.chargeAndReplaceSum
|
||
|
||
// 调用理想的数据
|
||
_this.handleGetChargeData(list, ["新桥", "丰乐", "肥东"]);
|
||
|
||
uni.hideLoading();
|
||
},
|
||
|
||
// 拿到充电的理想数据
|
||
async handleGetChargeData(serviceList, nameList) {
|
||
// uni.showLoading({
|
||
// title: "查询理想设备信息...",
|
||
// });
|
||
_this.isLoading = true
|
||
const LiOperatorSecret = "bGMyYwJFl17BqwD3";
|
||
const LiOperCode = "MA7EBGWBX";
|
||
const LiSigSecret = "V7I6yvHvEk8STt0P";
|
||
const LiDataSecret = "P2S3WjoLv3rqL0hn";
|
||
const LiIV = "ZRlwcrx7k63ihzXF";
|
||
|
||
const OperatorID = "78109626X"; // 组织机构代码（OperatorID）
|
||
const OperatorSecret = "Xh2vLq1Pz9zF7wK3"; // Xh2vLq1Pz9zF7wK3 运营商秘钥（OperatorSecret）
|
||
const SigSecret = "bT8sWn2Aq0Jv6GvD"; // bT8sWn2Aq0Jv6GvD 签名秘钥（SigSecret）
|
||
const DataSecret = "fK7YzAq1R8Vp9hL0"; // fK7YzAq1R8Vp9hL0 数据加密秘钥（DataSecret）
|
||
const DataSecretIV = "z3XnWl8FQ2pTm5Ba"; // z3XnWl8FQ2pTm5Ba 初始化向量（DataSecretIV）
|
||
|
||
let tokenData = await this.$testApi.$post("/send", {
|
||
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_token",
|
||
|
||
data: JSON.stringify({
|
||
OperatorID: OperatorID,
|
||
OperatorSecret: LiOperatorSecret,
|
||
}),
|
||
id: 0,
|
||
seq: "001",
|
||
token: "",
|
||
});
|
||
console.log("tokenData", tokenData);
|
||
// token的实际值
|
||
let token = tokenData.Data.AccessToken;
|
||
|
||
// 拿到所有站点的数据
|
||
const allStationList = await this.$testApi.$post("/send", {
|
||
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_stations_info",
|
||
data: JSON.stringify({
|
||
PageNo: 1,
|
||
PageSize: 999,
|
||
}),
|
||
id: 0,
|
||
seq: "002",
|
||
token: token,
|
||
});
|
||
let stationList = allStationList.Data.StationInfos;
|
||
console.log("stationList", stationList);
|
||
|
||
let newStationList = [];
|
||
|
||
if (stationList && stationList.length > 0) {
|
||
stationList.forEach((item) => {
|
||
if (item.Address) {
|
||
if (nameList && nameList.length > 0) {
|
||
nameList.forEach((subItem) => {
|
||
if (item.Address.indexOf(subItem) !== -1) {
|
||
newStationList.push(item);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 这段是和自己最近的三个服务区的 理想充电筛出来的数据
|
||
console.log("newStationList", newStationList);
|
||
|
||
let stationIds = [];
|
||
// 创建吧id当key的对象
|
||
let stationObj = {};
|
||
// 拿到充电站的id数组 去查里面的充电枪详情
|
||
if (newStationList && newStationList.length > 0) {
|
||
newStationList.forEach((item) => {
|
||
stationIds.push(item.StationID);
|
||
stationObj[item.StationID] = item;
|
||
});
|
||
}
|
||
|
||
// 查询具体状态
|
||
if (stationIds && stationIds.length > 0) {
|
||
const stationInfo = await this.$testApi.$post("/send", {
|
||
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_station_status",
|
||
data: JSON.stringify({
|
||
StationIDs: stationIds,
|
||
}),
|
||
id: 0,
|
||
seq: "003",
|
||
token: token,
|
||
});
|
||
let statusList = stationInfo.Data.StationStatusInfos;
|
||
console.log("statusList", statusList);
|
||
if (statusList && statusList.length > 0) {
|
||
statusList.forEach((item) => {
|
||
if (stationObj[item.StationID]) {
|
||
stationObj[item.StationID].statusList = item.ConnectorStatusInfos;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
console.log("stationObj", stationObj);
|
||
|
||
// 带有状态的充电站列表格式
|
||
let haveStationList = [];
|
||
if (stationObj) {
|
||
for (let key in stationObj) {
|
||
haveStationList.push(stationObj[key]);
|
||
}
|
||
}
|
||
|
||
console.log("haveStationList", haveStationList);
|
||
|
||
if (serviceList && serviceList.length > 0) {
|
||
let newRes = JSON.parse(JSON.stringify(serviceList));
|
||
newRes.forEach((item) => {
|
||
let LXCharge = [];
|
||
let LXInfoList = [];
|
||
let sortName = item.SERVERPART_NAME.split("服务区")[0];
|
||
|
||
if (haveStationList && haveStationList.length > 0) {
|
||
haveStationList.forEach((subItem) => {
|
||
if (subItem.Address.indexOf(sortName) !== -1) {
|
||
LXCharge.push(...subItem.statusList);
|
||
if (
|
||
subItem.EquipmentInfos &&
|
||
subItem.EquipmentInfos.length > 0
|
||
) {
|
||
subItem.EquipmentInfos.forEach((thirdItem) => {
|
||
if (
|
||
thirdItem.ConnectorInfos &&
|
||
thirdItem.ConnectorInfos.length > 0
|
||
) {
|
||
thirdItem.ConnectorInfos.forEach((fourthItem) => {
|
||
LXInfoList.push(fourthItem);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
// 空多少个
|
||
let LXEmpty = 0;
|
||
// 一共多少个
|
||
let LXSum = 0;
|
||
|
||
if (LXCharge && LXCharge.length > 0) {
|
||
LXCharge.forEach((subItem) => {
|
||
if (subItem.Status !== 3) {
|
||
LXEmpty += 1;
|
||
}
|
||
LXSum += 1;
|
||
});
|
||
}
|
||
|
||
item.LXDetail = {
|
||
LXSum: LXSum,
|
||
LXEmpty: LXEmpty,
|
||
};
|
||
if (LXInfoList && LXInfoList.length > 0) {
|
||
LXInfoList.forEach((item) => {
|
||
if (LXCharge && LXCharge.length > 0) {
|
||
LXCharge.forEach((subItem) => {
|
||
if (item.ConnectorID === subItem.ConnectorID) {
|
||
item.ParkStatus = subItem.ParkStatus;
|
||
item.Status = subItem.Status;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
item.LXInfoList = LXInfoList;
|
||
|
||
item.LXCharge = LXCharge;
|
||
}
|
||
});
|
||
|
||
console.log("newRes", newRes);
|
||
this.detailObj.servicePart = newRes;
|
||
this.$forceUpdate();
|
||
}
|
||
// uni.hideLoading();
|
||
|
||
_this.isLoading = false
|
||
// const stationFee = await this.$testApi.$post("/send", {
|
||
// url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_equip_business_policy",
|
||
// data: JSON.stringify({
|
||
// ConnectorID: "81003879",
|
||
// EquipBizSeq: "78109626",
|
||
// }),
|
||
// id: 0,
|
||
// seq: "003",
|
||
// token: token,
|
||
// });
|
||
// console.log("stationFee", stationFee);
|
||
},
|
||
|
||
// 转成几时几分
|
||
handleChangeTimeRule(minutes) {
|
||
if (isNaN(minutes) || minutes < 0) {
|
||
return undefined;
|
||
}
|
||
|
||
const hours = Math.floor(minutes / 60); // 小时部分
|
||
const remainingMinutes = minutes % 60; // 剩余分钟部分
|
||
|
||
// 构建返回字符串
|
||
const hourStr = hours > 0 ? `${hours}` : "";
|
||
const minuteStr = remainingMinutes > 0 ? `${remainingMinutes}` : "";
|
||
return {
|
||
hourStr: hourStr,
|
||
minuteStr: minuteStr,
|
||
};
|
||
},
|
||
//只取小数点后四位
|
||
extractFourDecimals(str) {
|
||
if (!str) {
|
||
return "";
|
||
}
|
||
// 正则匹配小数部分
|
||
const match = str.toString().match(/^(-?\d+)(\.\d{0,2})?/);
|
||
if (match) {
|
||
return match[1] + (match[2] || ""); // 拼接整数部分和截取的小数部分
|
||
}
|
||
},
|
||
// 初始化页面数据
|
||
handleDelete() {
|
||
this.detailObj = {
|
||
distanceNumber: "",
|
||
hour: "",
|
||
minutes: "",
|
||
tolls: "",
|
||
haveProgress: "",
|
||
};
|
||
},
|
||
// 改变终点
|
||
handleChangeService(obj) {
|
||
this.$refs.popup.open("bottom");
|
||
this.isShow = true;
|
||
return;
|
||
if (obj.SERVERPART_ID) {
|
||
uni.navigateTo({ url: "/pages/newMap/index/index" });
|
||
}
|
||
},
|
||
|
||
// 关闭悬浮框
|
||
handleClosePopup() {
|
||
this.$refs.popup.close();
|
||
this.isShow = false;
|
||
|
||
this.searchPoint = "";
|
||
this.pointList = [];
|
||
this.hideFilterSearch = false;
|
||
},
|
||
// 跳转去地图
|
||
handleToMap(obj) {
|
||
// console.log("this.loginType", this.loginType);
|
||
|
||
if (this.loginType === "min" || this.loginType === "ios") {
|
||
uni.openLocation({
|
||
latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
|
||
longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
|
||
scale: 16, // 缩放比例
|
||
name: obj.SERVERPART_NAME,
|
||
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||
success(data) {
|
||
console.log(data);
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
} else {
|
||
if (this.seatInfo) {
|
||
const addModule = uni.requireNativePlugin("AMapModule");
|
||
addModule.auth(
|
||
"d773aa156f8ca2160cfb06d5f117dacd",
|
||
(suc) => {
|
||
addModule.reg(
|
||
(suc) => {
|
||
addModule.navfrom(
|
||
this.startObj.latitude,
|
||
this.startObj.longitude,
|
||
this.startObj.name,
|
||
this.endObj.SERVERPART_Y,
|
||
this.endObj.SERVERPART_X,
|
||
this.endObj.name,
|
||
(suc) => {
|
||
console.log(suc);
|
||
},
|
||
(err) => {
|
||
console.log(err);
|
||
}
|
||
);
|
||
},
|
||
(err) => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: "none",
|
||
});
|
||
}
|
||
);
|
||
},
|
||
(err) => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: "none",
|
||
});
|
||
}
|
||
);
|
||
}
|
||
}
|
||
},
|
||
// 跳转充换电app
|
||
handleGoApp() {
|
||
if (this.loginType === "min") {
|
||
uni.navigateTo({
|
||
url: "weixin://dl/officialaccounts",
|
||
});
|
||
} else if (this.loginType === "android") {
|
||
var Intent = plus.android.importClass("android.content.Intent");
|
||
var Uri = plus.android.importClass("android.net.Uri");
|
||
var main = plus.android.runtimeMainActivity();
|
||
var intent = new Intent(
|
||
Intent.ACTION_VIEW,
|
||
Uri.parse("your-app-scheme://")
|
||
);
|
||
main.startActivity(intent);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.main {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
// background: #f6f7f8;
|
||
background: #f0f5ff;
|
||
box-sizing: border-box;
|
||
padding: 12px 16px 24rpx;
|
||
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.content {
|
||
width: 100%;
|
||
|
||
.trafficState {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #f3f3f3;
|
||
box-sizing: border-box;
|
||
padding: 24px;
|
||
|
||
.newPositionBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 8rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
background: #fafafb;
|
||
border: 1px solid #f6f6f8;
|
||
|
||
.positionItem {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.itemLeft {
|
||
width: calc(100% - 30rpx);
|
||
|
||
.itemLeftItem {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.positionIcon {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.startObj {
|
||
background: #0dc46e;
|
||
}
|
||
|
||
.endObj {
|
||
background: #ef3737;
|
||
}
|
||
|
||
.positionBox {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 16rpx 0;
|
||
display: inline-block;
|
||
width: calc(100% - 80rpx);
|
||
border-bottom: 1px solid #d8d9da;
|
||
}
|
||
|
||
.noBorderBottom {
|
||
border-bottom: 0px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.itemRight {
|
||
margin-left: 6rpx;
|
||
|
||
.reachIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
transform: rotate(-90deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.positionBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.reachIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.startItem,
|
||
.endItem {
|
||
width: calc(((100% - 32px) / 2));
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #130f05;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.searchBtn {
|
||
width: 100%;
|
||
background: #ba922f;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
line-height: 44rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
padding: 9px 0;
|
||
margin-top: 24px;
|
||
}
|
||
}
|
||
|
||
.placeSearchListBox {
|
||
width: 100%;
|
||
margin-top: 12px;
|
||
background: #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
|
||
.listItem {
|
||
padding: 16rpx 0;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
|
||
.topItem {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.topLeft {
|
||
width: 80%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.listIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.listName {
|
||
width: 80%;
|
||
display: inline-block;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.rightDistance {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
width: 80%;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottomBox {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #f3f3f3;
|
||
box-sizing: border-box;
|
||
padding: 12px 16px;
|
||
margin-top: 12px;
|
||
|
||
.boxTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftTop {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.boldText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 44rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.unit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
|
||
.line {
|
||
display: inline-block;
|
||
width: 2rpx;
|
||
height: 22rpx;
|
||
background: #b8b7b4;
|
||
margin: 0 12px;
|
||
}
|
||
}
|
||
|
||
.rightTop {
|
||
border-radius: 16px;
|
||
border: 1px solid #ae8d3e;
|
||
padding: 14rpx 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ba922f;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.navigationIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.roadConditions {
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
|
||
.roadTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.stateIcon {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.stateText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
width: 100%;
|
||
height: 10px;
|
||
background: #bee4d2;
|
||
border-radius: 6px;
|
||
margin-top: 6px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.have {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
background: #29c07a;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.horizontal {
|
||
width: 100%;
|
||
height: 2px;
|
||
background: #f3f3f3;
|
||
margin: 20px 0 16px 0;
|
||
}
|
||
|
||
.serviceBox {
|
||
margin-top: 32rpx;
|
||
|
||
.serviceTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.serviceList {
|
||
margin-top: 8px;
|
||
width: 100%;
|
||
|
||
.serviceItem {
|
||
// display: flex;
|
||
// align-items: center;
|
||
margin-bottom: 24rpx;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
padding-bottom: 20rpx;
|
||
|
||
.leftItem {
|
||
width: 100%;
|
||
// height: 144rpx;
|
||
// width: calc(100% - 70px);
|
||
display: flex;
|
||
// align-items: center;
|
||
align-items: flex-start;
|
||
|
||
.leftImgBox {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
overflow: hidden;
|
||
border-radius: 6rpx;
|
||
margin-right: 20rpx;
|
||
background: #f5f6f7;
|
||
|
||
.leftImg {
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
background-position: 50% 50%;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.detailBox {
|
||
width: calc(100% - 164rpx);
|
||
// height: 144rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
|
||
.detailTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.topLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.detailName {
|
||
display: inline-block;
|
||
max-width: 400rpx;
|
||
font-family: "PingFang SC", "Noto Sans CJK SC",
|
||
"Microsoft YaHei", sans-serif;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.detailState {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #01a157;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
padding: 2rpx 3px;
|
||
background: #e9f8ee;
|
||
border-radius: 2rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.topRight {
|
||
.chargeType {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #ffffff;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 2rpx 8rpx;
|
||
background: #ba922f;
|
||
border-radius: 4rpx 0rpx 0rpx 4rpx;
|
||
}
|
||
|
||
.chargeValue {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ba922f;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 0rpx 4rpx 4rpx 0rpx;
|
||
background: #f8f4ea;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detailBottom {
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
|
||
.distanceBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.distanceLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 150rpx;
|
||
|
||
.distanceIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.distanceNumber {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
display: inline-block;
|
||
width: 2rpx;
|
||
height: 22rpx;
|
||
background: #e7e7e6;
|
||
margin: 0 12rpx;
|
||
}
|
||
|
||
.address {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
max-width: 250rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
.typeList {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
margin-top: 16rpx;
|
||
|
||
.typeItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 4rpx 8rpx;
|
||
background: #f5f6f7;
|
||
border-radius: 4rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
|
||
// .label {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 24rpx;
|
||
// color: #716f69;
|
||
// line-height: 36rpx;
|
||
// text-align: justify;
|
||
// font-style: normal;
|
||
// width: 100%;
|
||
// display: -webkit-box; /* 必须设置 */
|
||
// -webkit-box-orient: vertical; /* 垂直排列子元素 */
|
||
// -webkit-line-clamp: 3; /* 限制显示的行数 */
|
||
// overflow: hidden; /* 超出内容隐藏 */
|
||
// text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||
// word-break: break-all; /* 强制换行，防止长单词溢出 */
|
||
// }
|
||
// .value {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 24rpx;
|
||
// color: #130f05;
|
||
// line-height: 36rpx;
|
||
// text-align: right;
|
||
// font-style: normal;
|
||
// }
|
||
}
|
||
|
||
.chargeBox {
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
|
||
.chargeItem {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12rpx;
|
||
|
||
.itemLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.imgIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.chargeTypeName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.itemRight {
|
||
background: #f5f6f7;
|
||
border-radius: 4rpx;
|
||
padding: 4rpx 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.emptyText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.use {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.sum {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
// width: 100%;
|
||
// padding: 8rpx;
|
||
// background: #f6f6f6;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
// border-radius: 8rpx;
|
||
// box-sizing: border-box;
|
||
// padding: 0 16rpx;
|
||
// margin-bottom: 14rpx;
|
||
// .chargeItemLabel {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 24rpx;
|
||
// color: #130f05;
|
||
// line-height: 40rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// }
|
||
// .chargeItemValue {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 24rpx;
|
||
// color: #130f05;
|
||
// line-height: 36rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// .empty {
|
||
// font-family: DINAlternate, DINAlternate;
|
||
// font-weight: bold;
|
||
// font-size: 24rpx;
|
||
// color: #130f05;
|
||
// line-height: 36rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// margin: 0 4rpx;
|
||
// }
|
||
// .sum {
|
||
// font-family: DINAlternate, DINAlternate;
|
||
// font-weight: bold;
|
||
// font-size: 24rpx;
|
||
// color: #716f69;
|
||
// line-height: 36rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.centerItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 8rpx 0 20rpx;
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.centerConfigItem {
|
||
.configImg {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottomItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 8rpx 0 20rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.chargeBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.chargeItem {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.chargeIconBox {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
.chargeIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.chargeInfo {
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.empty {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.emptyValue {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.sum {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rightItem {
|
||
width: 70px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.navigationTop {
|
||
border-radius: 16px;
|
||
border: 1px solid #ae8d3e;
|
||
padding: 14rpx 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ba922f;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.navigationIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.longText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #787879;
|
||
line-height: 28rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.goAppBox {
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
background: #ffffff;
|
||
border-radius: 6rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.appLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.goAppIcon {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
margin-right: 16rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.appName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.appRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.search {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.searchIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goTest {
|
||
padding: 12px 0;
|
||
}
|
||
}
|
||
|
||
.selectPointBox {
|
||
width: 100%;
|
||
height: 90vh;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
|
||
.searchBox {
|
||
width: 100%;
|
||
height: 72rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
box-shadow: 0 2rpx 10rpx #7f7f7f;
|
||
box-sizing: border-box;
|
||
padding: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.searchIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.inputBox {
|
||
width: calc(100% - 117rpx);
|
||
}
|
||
|
||
.searchBtn {
|
||
width: 85rpx;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #4191ff;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.filterBox {
|
||
width: 100%;
|
||
margin-top: 18rpx;
|
||
display: flex;
|
||
|
||
.filterItem {
|
||
width: 25%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.filterContent {
|
||
width: 80%;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
font-style: normal;
|
||
|
||
.imgIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.service {
|
||
background: #e4ebfd;
|
||
}
|
||
|
||
.gasStation {
|
||
background: #d5ebf6;
|
||
}
|
||
|
||
.tollStation {
|
||
background: #cff7d2;
|
||
}
|
||
|
||
.chargingStation {
|
||
background: #ffebd2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.listBox {
|
||
width: 100%;
|
||
height: calc(100% - 72rpx);
|
||
margin-top: 18rpx;
|
||
|
||
.listItem {
|
||
padding: 16rpx 0;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
|
||
.topItem {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.topLeft {
|
||
width: 80%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.listIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.listName {
|
||
width: 80%;
|
||
display: inline-block;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.rightDistance {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
width: 80%;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
.listBox ::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|