1604 lines
51 KiB
Vue
1604 lines
51 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="content">
|
||
<view class="trafficState">
|
||
<view class="positionBox">
|
||
<view class="startItem" @click="handleChangeService(startObj)">{{
|
||
startObj.name || ""
|
||
}}</view>
|
||
<image
|
||
class="reachIcon"
|
||
src="/static/images/home/reachIcon.png"
|
||
@click="handleChangeStartEnd"
|
||
/>
|
||
<view class="endItem" @click="handleChangeService(endObj)">{{
|
||
endObj.name || ""
|
||
}}</view>
|
||
</view>
|
||
<view class="searchBtn" @click="handleTrafficSearch">路况查询</view>
|
||
</view>
|
||
|
||
<!-- 下面的信息 -->
|
||
<view class="bottomBox">
|
||
<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(currentService)">
|
||
<image
|
||
class="navigationIcon"
|
||
src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"
|
||
/>
|
||
导航
|
||
</view>
|
||
</view>
|
||
|
||
<view class="roadConditions">
|
||
<view class="roadTop">
|
||
<image
|
||
class="stateIcon"
|
||
src="/static/images/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 class="serviceList">
|
||
<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">
|
||
<image
|
||
class="leftImg"
|
||
:src="
|
||
item.ImageLits && item.ImageLits.length > 0
|
||
? item.ImageLits[0]
|
||
: '/static/images/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="/static/images/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">
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<img
|
||
class="imgIcon"
|
||
src="/static/images/home/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">
|
||
<img
|
||
class="imgIcon"
|
||
src="/static/images/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">
|
||
<img
|
||
class="imgIcon"
|
||
src="/static/images/home/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="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>
|
||
|
||
<!-- 充换电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="/static/images/home/rightArrow.png" />
|
||
</div>
|
||
</view>
|
||
|
||
<view class="goTest" @click="handleGoTest" v-if="loginType !== 'min'">
|
||
<span>跳转测试页面</span>
|
||
</view>
|
||
<!-- <view>{{ JSON.stringify(userInfo) }}</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import serverInfo from "./serverInfo.js";
|
||
// uni.requireNativePlugin("myTest");
|
||
// const CryptoJS = require("crypto-js");
|
||
// import md5 from "js-md5";
|
||
import {
|
||
handleGetNearService,
|
||
handleHavePointInMin,
|
||
handleHavePointInApp,
|
||
hanldeHavePointInIos,
|
||
} from "../../utils/publicMethods";
|
||
|
||
export default {
|
||
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: "",
|
||
};
|
||
},
|
||
onLoad() {
|
||
let type = uni.getStorageSync("loginType");
|
||
this.loginType = type;
|
||
console.log("type", type);
|
||
|
||
if (this.loginType !== "min") {
|
||
this.myTest = uni.requireNativePlugin("AMapModule");
|
||
// this.myTest.openTest("回调回来了", (res) => {
|
||
// console.log("单次回调：", res);
|
||
// });
|
||
|
||
console.log("this.myTest", this.myTest);
|
||
const Context = plus.android.importClass("android.content.Context");
|
||
const appContext = plus.android
|
||
.runtimeMainActivity()
|
||
.getApplicationContext();
|
||
this.context = appContext;
|
||
|
||
console.log("1");
|
||
this.handleGetPermission();
|
||
console.log("2");
|
||
|
||
let privacyRes = this.handleGetGoDePrivacy();
|
||
console.log("privacyRes", privacyRes);
|
||
|
||
if (privacyRes) {
|
||
console.log("4", addModule);
|
||
this.myTest.reg(
|
||
(suc) => {
|
||
console.log(suc);
|
||
},
|
||
(err) => {
|
||
console.log(err);
|
||
}
|
||
);
|
||
console.log("5");
|
||
}
|
||
}
|
||
|
||
let _this = this;
|
||
if (type === "min") {
|
||
handleHavePointInMin().then((res) => {
|
||
_this.handleGetOnLoad();
|
||
});
|
||
} else if (type === "android") {
|
||
handleHavePointInApp().then((res) => {});
|
||
} else {
|
||
hanldeHavePointInIos();
|
||
}
|
||
// 拿到枚举
|
||
this.handleSERVERPART_TARGETOBJ();
|
||
|
||
// 理想的数据对接的方法
|
||
// this.handleGetLXData();
|
||
},
|
||
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.endPointObj = {
|
||
...res,
|
||
longitude: res.SERVERPART_X,
|
||
latitude: res.SERVERPART_Y,
|
||
name: res.SERVERPART_NAME,
|
||
};
|
||
this.seatInfo = JSON.parse(uni.getStorageSync("seatInfo"));
|
||
this.userObj = {
|
||
...this.userObj,
|
||
longitude: this.seatInfo.longitude,
|
||
latitude: this.seatInfo.latitude,
|
||
};
|
||
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);
|
||
}
|
||
);
|
||
}
|
||
}
|
||
|
||
let userInfo = uni.getStorageSync("userInfo");
|
||
this.userInfo = userInfo;
|
||
},
|
||
methods: {
|
||
// 随机给充电桩数据
|
||
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;
|
||
});
|
||
}
|
||
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() {
|
||
let middleObj = this.endObj;
|
||
this.endObj = JSON.parse(JSON.stringify(this.startObj));
|
||
this.startObj = middleObj;
|
||
},
|
||
|
||
// 获取权限
|
||
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);
|
||
} 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() {
|
||
uni.navigateTo({
|
||
url: "/pages/serviceDetail/test",
|
||
});
|
||
// 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");
|
||
|
||
return;
|
||
let _this = this;
|
||
|
||
if (!(this.seatInfo.longitude && this.seatInfo.latitude)) {
|
||
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: "加载中...",
|
||
});
|
||
// 高德key
|
||
const key = "6e96a801bcea5290d3dcbf100358a6b3";
|
||
// 起点经纬度
|
||
const start = `${this.startObj.longitude},${this.startObj.latitude}`;
|
||
// 终点经纬度
|
||
const end = `${this.endObj.longitude},${this.endObj.latitude}`;
|
||
// 拿到途径点的所有坐标
|
||
let routePoint = "";
|
||
|
||
// 拿到当前位置 跟服务区的距离
|
||
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;
|
||
|
||
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}&strategy=0`,
|
||
method: "GET",
|
||
success(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}`);
|
||
});
|
||
}
|
||
// 途径的服务区
|
||
let serviceAreaList = [];
|
||
if (serverInfo.cityCoordinate && newAreaList && newAreaList.length > 0) {
|
||
for (let key in serverInfo.cityCoordinate) {
|
||
if (
|
||
newAreaList.indexOf(serverInfo.cityCoordinate[key]) !== -1 &&
|
||
key !== this.endObj.SERVERPART_NAME
|
||
) {
|
||
serviceAreaList.push(key);
|
||
}
|
||
}
|
||
}
|
||
|
||
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;
|
||
if (subItem.RegionInfo && subItem.RegionInfo.length > 0) {
|
||
subItem.RegionInfo.forEach((thirdItem) => {
|
||
LIAUTOCHARGESum += Number(thirdItem.LIAUTOCHARGE || 0);
|
||
STATEGRIDCHARGESum += Number(thirdItem.STATEGRIDCHARGE || 0);
|
||
GACENERGYCHARGESum += Number(thirdItem.GACENERGYCHARGE || 0);
|
||
});
|
||
}
|
||
subItem.LiXiang = LIAUTOCHARGESum;
|
||
subItem.Sun = STATEGRIDCHARGESum;
|
||
subItem.chargeAndReplaceSum = GACENERGYCHARGESum;
|
||
|
||
// 理想的随机百分比
|
||
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;
|
||
}
|
||
}
|
||
|
||
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);
|
||
|
||
uni.hideLoading();
|
||
},
|
||
// 转成几时几分
|
||
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) {
|
||
if (obj.SERVERPART_ID) {
|
||
uni.navigateTo({ url: "/pages/newMap/index/index" });
|
||
}
|
||
},
|
||
// 跳转去地图
|
||
handleToMap(obj) {
|
||
// console.log("this.loginType", this.loginType);
|
||
|
||
// if (this.loginType === "min") {
|
||
// uni.navigateTo({
|
||
// url: "/pages/thirdParty/gaodeLoad",
|
||
// });
|
||
// }
|
||
|
||
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);
|
||
},
|
||
});
|
||
},
|
||
// 跳转充换电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;
|
||
.content {
|
||
width: 100%;
|
||
.trafficState {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #f3f3f3;
|
||
box-sizing: border-box;
|
||
padding: 24px;
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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: 4px;
|
||
margin-right: 10px;
|
||
.leftImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.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: PingFangSC, PingFang SC;
|
||
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;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
</style>
|