2013 lines
80 KiB
Vue
2013 lines
80 KiB
Vue
<template>
|
||
<view>
|
||
<view class="chargeBox">
|
||
<view class="serviceList" v-if="dataList && dataList.length > 0">
|
||
<view class="serviceItem" v-for="(item, index) in dataList" :key="index"
|
||
@click="handleGoDetail(item.SERVERPART_ID, item)"
|
||
:style="{ marginBottom: dataList && dataList.length === 1 ? '0' : '' }">
|
||
<view class="leftItem" @click.stop="handleGoServiceDetail(item.SERVERPART_ID, item)">
|
||
<view class="leftImgBox">
|
||
<view class="leftImg" :style="{
|
||
backgroundImage: `url(${item.ImageLits && item.ImageLits.length > 0
|
||
? item.ImageLits[0]
|
||
: 'https://eshangtech.com/wanmeiyizhanImg/app/defaultIcon.png'
|
||
})`,
|
||
}"></view>
|
||
</view>
|
||
<view class="detailBox">
|
||
<view class="detailTop">
|
||
<view class="topLeft">
|
||
<span class="detailName">{{ item.SERVERPART_NAME }}</span>
|
||
<!-- <span class="detailState">营业中</span> -->
|
||
<span class="detailState" :style="{
|
||
color: `${item.businessObj.AVR_TICKET >= 30
|
||
? '#FF5959'
|
||
: item.businessObj.AVR_TICKET < 30 &&
|
||
item.businessObj.AVR_TICKET >= 15
|
||
? '#FF8830'
|
||
: item.businessObj.AVR_TICKET < 15
|
||
? '#01BD8B'
|
||
: ''
|
||
}`,
|
||
backgroundColor: `rgba(${item.businessObj.AVR_TICKET >= 30
|
||
? '255, 89, 89, 0.1'
|
||
: item.businessObj.AVR_TICKET < 30 &&
|
||
item.businessObj.AVR_TICKET >= 15
|
||
? '255, 136, 48,0.1'
|
||
: item.businessObj.AVR_TICKET < 15
|
||
? '1, 189, 139, 0.1'
|
||
: ''
|
||
})`,
|
||
}" v-if="item.businessObj">{{
|
||
item.businessObj.AVR_TICKET >= 30
|
||
? "人流量较大"
|
||
: item.businessObj.AVR_TICKET >= 15 &&
|
||
item.businessObj.AVR_TICKET < 30 ? "人流量适中" : item.businessObj.AVR_TICKET < 15
|
||
? "人流量较小" : "" }}</span>
|
||
</view>
|
||
<view class="topRight">
|
||
<span class="detailState">营业中</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_DISTANCE ||
|
||
item.SERVERPART_DISTANCEGD ||
|
||
"-"
|
||
}}km</span>
|
||
</div>
|
||
<span class="line"></span>
|
||
<span class="address">{{
|
||
item.SERVERPART_ADDRESS || "-"
|
||
}}</span>
|
||
</div>
|
||
<scroll-view :scroll-x="true" class="typeList"
|
||
v-if="item.ServerpartInfo.SERVERPART_TARGET">
|
||
<div class="typeListInner">
|
||
<div class="typeItem"
|
||
v-for="(subItem, subIndex) in item.ServerpartInfo.SERVERPART_TARGET.split(',')"
|
||
:key="subIndex">
|
||
{{
|
||
SERVERPART_TARGETOBJ && subItem
|
||
? SERVERPART_TARGETOBJ[subItem]
|
||
: ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="centerItem" v-if="!hideConfig">
|
||
|
||
<view class="centerConfigItemNew" v-for="(subItem, index) in item.imgList.slice(
|
||
0,
|
||
item.noMore ? 12 : 12
|
||
)" :key="index">
|
||
<image class="configImg" :src="subItem.url" />
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="lineBox"></view>
|
||
|
||
<view class="bottomItemNew" @click.stop="handleOpenDetail(item)">
|
||
<view class="leftCharge">
|
||
<image class="chargeIcon" v-if="item.GWDetail && item.GWDetail.GWSum > 0"
|
||
src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
|
||
<image class="chargeIcon" v-if="item.LXDetail && item.LXDetail.LXSum > 0"
|
||
src="https://eshangtech.com/minTestImg/LXIcon.png" />
|
||
<image class="chargeIcon" v-if="item.WLDetail && item.WLDetail.WLSum > 0"
|
||
src="https://eshangtech.com/minTestImg/WLIcon.png" />
|
||
<image class="chargeIcon" v-if="item.JKDetail && item.JKDetail.JKSum > 0"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg" />
|
||
</view>
|
||
<view class="rightcharge">
|
||
<span class="empty">空</span>
|
||
<span class="emptyValue">{{
|
||
item.allChargeDetail && item.allChargeDetail.empty
|
||
? item.allChargeDetail.empty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
item.allChargeDetail && item.allChargeDetail.allSum
|
||
? item.allChargeDetail.allSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="popup" :show="isShow" :safe-area="false" :mask-click="false" :is-mask-click="false">
|
||
<view class="popupBigBox" @touchmove.stop.prevent>
|
||
<div class="popupDetailBox" :style="{
|
||
height: comeForm === 'home' || pageType === 'mapList' ? '80vh' : '95vh'
|
||
}">
|
||
<div class="popupTitle">
|
||
<div class="closeIcon" @click="handleClosePopup">
|
||
<image class="img" src="https://eshangtech.com/wanmeiyizhanImg/home/closeIcon.svg" />
|
||
</div>
|
||
<div clsas="title">电桩详情</div>
|
||
<div class="closeIcon"></div>
|
||
</div>
|
||
|
||
<div class="popupTab">
|
||
<div :class="item.value === selectPopup ? 'tabItem selectTabItem' : 'tabItem'
|
||
" v-for="(item, index) in popupTab" :key="index"
|
||
@click="handleChangeSelectPopup(item.value)">
|
||
{{ item.label }}
|
||
{{ item.sum ? `(${item.empty}/${item.sum})` : "" }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="smallTabBox">
|
||
<div :class="selectSmallTab === index ? 'smallTabItem selectSmallTabItem' : 'smallTabItem'
|
||
" v-for="(item, index) in smallTab" :key="index" @click="handleChangeSmallTab(index)">
|
||
{{ item.label }}
|
||
{{ item.sum ? `(${item.sum})` : "" }}
|
||
</div>
|
||
</div>
|
||
|
||
<scroll-view class="stationList" scroll-y :style="{
|
||
height: `calc(${comeForm === 'home' ? 80 : 95
|
||
}vh - 30px - 108rpx - 56rpx - 24rpx - ${comeForm === 'home' ? 100 : 0
|
||
}px)`,
|
||
paddingBottom: comeForm === 'home' ? 0 : '',
|
||
}">
|
||
|
||
<scroll-view class="selectElectricityFeeListBox" :scroll-x="true"
|
||
v-if="selectElectricityFee && selectElectricityFee.length > 0">
|
||
|
||
<view class="selectElectricityFeeListInner">
|
||
<view class="selectElectricityFeeItem" v-for="(item, index) in selectElectricityFee"
|
||
:key="index">
|
||
<view class="timeBox">{{ item.electricityTime }}</view>
|
||
<view class="valueBox">{{ item.electricityBill }}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
|
||
<template
|
||
v-if="smallTab && smallTab[selectSmallTab] && smallTab[selectSmallTab].list && smallTab[selectSmallTab].list.length > 0">
|
||
<div class="stationItem" v-for="(item, index) in smallTab[selectSmallTab].list"
|
||
:key="index">
|
||
<div class="leftItem" :style="{
|
||
backgroundImage: `url(${item.Status === 0 || item.Status === 255
|
||
? 'https://eshangtech.com/minTestImg/offGrid.svg'
|
||
: item.Status === 2 || item.Status === 3 || item.Status === 4
|
||
? 'https://eshangtech.com/minTestImg/overfilling.svg'
|
||
: item.Status === 1
|
||
? 'https://eshangtech.com/minTestImg/idle.svg'
|
||
: ''
|
||
})`,
|
||
}">
|
||
|
||
<!-- backgroundImage: `url(${item.Status === 0 || item.Status === 255
|
||
? 'https://eshangtech.com/minTestImg/offGrid.svg'
|
||
: item.Power >= 200
|
||
? 'https://eshangtech.com/minTestImg/overfilling.svg'
|
||
: item.Power < 200 && item.Power >= 30
|
||
? 'https://eshangtech.com/minTestImg/occupy.svg'
|
||
: item.Power < 30
|
||
? 'https://eshangtech.com/minTestImg/idle.svg'
|
||
: ''
|
||
})`, -->
|
||
|
||
|
||
<div class="chargeType" :style="{
|
||
color:
|
||
item.Status === 0 || item.Status === 255
|
||
? '#B8B7B4'
|
||
: item.Status === 2 || item.Status === 3 || item.Status === 4
|
||
? '#FF5959'
|
||
: item.Status === 1
|
||
? '#01BD8B'
|
||
: '',
|
||
}">
|
||
|
||
<!-- color:
|
||
item.Status === 0 || item.Status === 255
|
||
? '#B8B7B4'
|
||
: item.Power >= 200
|
||
? '#FF5959'
|
||
: item.Power < 200 && item.Power >= 30
|
||
? '#FF8830'
|
||
: item.Power < 30
|
||
? '#01BD8B'
|
||
: '', -->
|
||
|
||
{{
|
||
item.Status === 0
|
||
? "离网"
|
||
: item.Status === 255
|
||
? "故障"
|
||
: item.Power >= 200
|
||
? "超充"
|
||
: item.Power < 200 && item.Power >= 30
|
||
? "快充"
|
||
: "慢充"
|
||
}}
|
||
</div>
|
||
<div v-if="item.Status !== 0 && item.Status !== 255" class="stausType" :style="{
|
||
color:
|
||
item.Status === 2 || item.Status === 3 || item.Status === 4
|
||
? '#FF5959'
|
||
: item.Status === 1
|
||
? '#01BD8B'
|
||
: '',
|
||
}">
|
||
{{
|
||
item.Status === 2 || item.Status === 3 || item.Status === 4
|
||
? "占用"
|
||
: item.Status === 1
|
||
? "空闲"
|
||
: ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
<!-- @click="handleGoMin" -->
|
||
<div class="rightItem">
|
||
<div class="messageBox">
|
||
<span class="label">电桩编号</span>
|
||
<span class="value">桩{{ item.ConnectorID || "" }}</span>
|
||
</div>
|
||
<div class="messageBox">
|
||
<span class="label">额定电压</span>
|
||
<span class="value">{{
|
||
item.VoltageLowerLimits
|
||
? item.VoltageLowerLimits + "v"
|
||
: ""
|
||
}}{{
|
||
item.VoltageUpperLimits && item.VoltageLowerLimits
|
||
? "-"
|
||
: ""
|
||
}}{{
|
||
item.VoltageUpperLimits
|
||
? `${item.VoltageUpperLimits}v`
|
||
: ""
|
||
}}</span>
|
||
</div>
|
||
<div class="messageBox">
|
||
<span class="label">最大功率</span>
|
||
<span class="value">{{
|
||
item.Power ? item.Power + "kw" : ""
|
||
}}</span>
|
||
</div>
|
||
|
||
<div class="noticeList">
|
||
<div class="noticeItem" style="margin-right: 12rpx" v-if="item.ConnectorType">
|
||
{{
|
||
item.ConnectorType === 1
|
||
? "家用插座"
|
||
: item.ConnectorType === 2
|
||
? "交流接口插座"
|
||
: item.ConnectorType === 3
|
||
? "交流接口插头"
|
||
: item.ConnectorType === 4
|
||
? "直流接口插头"
|
||
: item.ConnectorType === 5
|
||
? "无线充电座"
|
||
: ""
|
||
}}
|
||
</div>
|
||
<div class="noticeItem" v-if="item.NationalStandard">
|
||
{{
|
||
`国标${item.NationalStandard === 1
|
||
? "2001"
|
||
: item.NationalStandard === 2
|
||
? "2015"
|
||
: ""
|
||
}`
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="statusBox" v-if="
|
||
item.Status === 2 || item.Status === 3 || item.Status === 4
|
||
" :style="{
|
||
color: '#FF5959',
|
||
backgroundColor: '#FFF1F1',
|
||
}">
|
||
<image v-if="item.Status === 3" class="chargeIcon"
|
||
:src="'https://eshangtech.com/wanmeiyizhanImg/home/fast.svg'" />
|
||
{{
|
||
item.Status === 2
|
||
? "占用"
|
||
: item.Status === 3
|
||
? "充电中"
|
||
: item.Status === 4
|
||
? "预约锁定"
|
||
: ""
|
||
}}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</scroll-view>
|
||
</div>
|
||
|
||
<view class="popup-mask" @catchtouchmove="preventTouchMove" @click="handleClosePopup"></view>
|
||
</view>
|
||
</uni-popup>
|
||
<CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import CustomLoading from "./customLoading.vue";
|
||
import NoData from "./noData.vue";
|
||
|
||
export default {
|
||
components: { NoData, CustomLoading },
|
||
data() {
|
||
return {
|
||
detailObj: {},
|
||
seatInfo: {},
|
||
nowCurrentObj: {}, // 当前点击选中的悬浮框的对象
|
||
chargeDetailList: [], // 悬浮框里面的详情数据
|
||
isShow: false,
|
||
popupTab: [
|
||
{ label: "国网", value: 4, sum: 0 },
|
||
{ label: "理想", value: 1, sum: 0 },
|
||
{ label: "蔚来", value: 2, sum: 0 },
|
||
{ label: "交控", value: 3, sum: 0 },
|
||
], // 点开的服务区有哪几种充电的
|
||
selectPopup: 1,
|
||
SERVERPART_TARGETOBJ: {},
|
||
styleType: 2, // 1 为老款样式 2 为蓝湖新的样式
|
||
currentBan: 0, // 当前的轮播框 显示内容
|
||
swiperHeight: [], // 高度数组
|
||
isLoading: false,
|
||
smallTab: [],// 方向的分类数据
|
||
selectSmallTab: 0,
|
||
pageDirection: {},
|
||
electricityFeeRes: {},// 全部的电价合集
|
||
selectElectricityFee: [],// 当前选择 展示的电价
|
||
electricityShow: false
|
||
};
|
||
},
|
||
props: {
|
||
dataList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
pageType: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
comeForm: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
hideConfig: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
noChargeDetail: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
comeForm: {
|
||
type: String,
|
||
default: "",
|
||
}
|
||
},
|
||
// #ifdef MP-WEIXIN
|
||
onReady() {
|
||
let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
|
||
if (SERVERPART_TARGET) {
|
||
this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
|
||
} else {
|
||
// 拿到枚举
|
||
this.handleSERVERPART_TARGETOBJ();
|
||
}
|
||
|
||
},
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
mounted() {
|
||
let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
|
||
if (SERVERPART_TARGET) {
|
||
this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
|
||
} else {
|
||
// 拿到枚举
|
||
this.handleSERVERPART_TARGETOBJ();
|
||
}
|
||
},
|
||
// #endif
|
||
methods: {
|
||
// 关闭悬浮框
|
||
handleClosePopup() {
|
||
this.$refs.popup.close();
|
||
this.$emit("handleChangeShow", false);
|
||
this.isShow = false;
|
||
this.nowCurrentObj = {};
|
||
this.chargeDetailList = [];
|
||
this.popupTab = [];
|
||
this.selectPopup = 1;
|
||
this.selectSmallTab = 0
|
||
},
|
||
handleChangeSelectPopup(value) {
|
||
this.selectPopup = value;
|
||
this.selectSmallTab = 0
|
||
if (value === 1) {
|
||
// 理想
|
||
// this.chargeDetailList = this.nowCurrentObj.LXInfoList;
|
||
this.smallTab = this.pageDirection['理想']
|
||
this.selectElectricityFee = this.electricityFeeRes['理想'] || []
|
||
} else if (value === 3) {
|
||
// 交控
|
||
// this.chargeDetailList = this.nowCurrentObj.JKInfoList;
|
||
this.smallTab = this.pageDirection['交控']
|
||
this.selectElectricityFee = this.electricityFeeRes['交控'] || []
|
||
} else if (value === 4) {
|
||
// 国网
|
||
// this.chargeDetailList = this.nowCurrentObj.GWInfoList;
|
||
this.smallTab = this.pageDirection['国网']
|
||
this.selectElectricityFee = this.electricityFeeRes['国网'] || []
|
||
} else {
|
||
// 蔚来
|
||
// this.chargeDetailList = this.nowCurrentObj.WLInfoList;
|
||
this.smallTab = this.pageDirection['蔚来']
|
||
this.selectElectricityFee = this.electricityFeeRes['蔚来'] || []
|
||
}
|
||
},
|
||
handleChangeSmallTab(value) {
|
||
this.selectSmallTab = value
|
||
},
|
||
// 打开对应的悬浮框
|
||
handleOpenDetail(item) {
|
||
if (this.comeForm === 'scanCode') {
|
||
this.$emit("handleGetNowService", item)
|
||
return
|
||
}
|
||
console.log('this.noChargeDetail', this.noChargeDetail);
|
||
|
||
if (this.noChargeDetail) {
|
||
return
|
||
}
|
||
|
||
let obj = {}
|
||
if (item) {
|
||
obj = item
|
||
this.nowCurrentObj = item;
|
||
this.chargeDetailList = item.LXInfoList;
|
||
} else {
|
||
obj = this.detailObj.servicePart[0]
|
||
this.nowCurrentObj = obj;
|
||
this.chargeDetailList = obj.LXInfoList;
|
||
}
|
||
|
||
let pageDirection = {}
|
||
let list = [];
|
||
|
||
// 电价列表
|
||
let electricityFeeObj = {}
|
||
if (obj.LXInfoList && obj.LXInfoList.length > 0) {
|
||
|
||
let directionList = {}
|
||
let directionTypeList = []
|
||
let electricityFeeStr = ''
|
||
|
||
obj.LXInfoList.forEach((item) => {
|
||
if (item.address) {
|
||
if (directionTypeList.indexOf(item.address) === -1) {
|
||
directionTypeList.push(item.address)
|
||
directionList[item.address] = []
|
||
directionList[item.address].push(item)
|
||
} else {
|
||
if (directionList[item.address] && directionList[item.address].length > 0) {
|
||
let oldList = directionList[item.address]
|
||
oldList.push(item)
|
||
directionList[item.address] = oldList
|
||
}
|
||
}
|
||
}
|
||
|
||
if (item.electricityFee) {
|
||
electricityFeeStr = item.electricityFee
|
||
}
|
||
});
|
||
|
||
let directionRes = [];
|
||
if (directionList) {
|
||
for (let key in directionList) {
|
||
directionRes.push({
|
||
label: key,
|
||
list: directionList[key],
|
||
sum: directionList[key].length,
|
||
})
|
||
}
|
||
}
|
||
|
||
directionRes.unshift({
|
||
label: "全部",
|
||
list: obj.LXInfoList,
|
||
});
|
||
|
||
list.push({
|
||
label: "理想",
|
||
value: 1,
|
||
sum:
|
||
obj.LXInfoList && obj.LXInfoList.length > 0
|
||
? obj.LXInfoList.length
|
||
: 0,
|
||
empty:
|
||
obj.LXDetail && obj.LXDetail.LXEmpty ? obj.LXDetail.LXEmpty : 0,
|
||
directionRes: directionRes
|
||
});
|
||
|
||
pageDirection['理想'] = directionRes
|
||
if (electricityFeeStr) {
|
||
let electricityFee = electricityFeeStr.split(",")
|
||
electricityFeeObj['理想'] = electricityFee
|
||
}
|
||
}
|
||
|
||
if (obj.WLInfoList && obj.WLInfoList.length > 0) {
|
||
|
||
let directionList = {}
|
||
let directionTypeList = []
|
||
let electricityFeeStr = ''
|
||
obj.WLInfoList.forEach((item) => {
|
||
if (item.address) {
|
||
if (directionTypeList.indexOf(item.address) === -1) {
|
||
directionTypeList.push(item.address)
|
||
directionList[item.address] = []
|
||
directionList[item.address].push(item)
|
||
} else {
|
||
if (directionList[item.address] && directionList[item.address].length > 0) {
|
||
let oldList = directionList[item.address]
|
||
oldList.push(item)
|
||
directionList[item.address] = oldList
|
||
}
|
||
}
|
||
}
|
||
|
||
if (item.electricityFee) {
|
||
electricityFeeStr = item.electricityFee
|
||
}
|
||
});
|
||
|
||
let directionRes = [];
|
||
if (directionList) {
|
||
for (let key in directionList) {
|
||
directionRes.push({
|
||
label: key,
|
||
list: directionList[key],
|
||
sum: directionList[key].length,
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
directionRes.unshift({
|
||
label: "全部",
|
||
list: obj.WLInfoList,
|
||
});
|
||
|
||
list.push({
|
||
label: "蔚来",
|
||
value: 2,
|
||
sum:
|
||
obj.WLInfoList && obj.WLInfoList.length > 0
|
||
? obj.WLInfoList.length
|
||
: 0,
|
||
empty:
|
||
obj.WLDetail && obj.WLDetail.WLEmpty ? obj.WLDetail.WLEmpty : 0,
|
||
directionRes: directionRes
|
||
});
|
||
pageDirection['蔚来'] = directionRes
|
||
if (electricityFeeStr) {
|
||
let electricityFee = electricityFeeStr.split(",")
|
||
|
||
let newList = []
|
||
if (electricityFee && electricityFee.length > 0) {
|
||
electricityFee.forEach((item) => {
|
||
let [electricityBill, electricityTime] = item.split(";");
|
||
let obj = {
|
||
electricityBill: electricityBill.indexOf("电费") !== -1 ? electricityBill : '',
|
||
electricityTime: electricityTime
|
||
}
|
||
if (obj.electricityBill && obj.electricityTime) {
|
||
newList.push(obj)
|
||
}
|
||
});
|
||
}
|
||
|
||
electricityFeeObj['蔚来'] = newList
|
||
}
|
||
}
|
||
|
||
if (obj.JKInfoList && obj.JKInfoList.length > 0) {
|
||
|
||
let directionList = {}
|
||
let directionTypeList = []
|
||
let electricityFeeStr = ''
|
||
|
||
obj.JKInfoList.forEach((item) => {
|
||
if (item.address) {
|
||
if (directionTypeList.indexOf(item.address) === -1) {
|
||
directionTypeList.push(item.address)
|
||
directionList[item.address] = []
|
||
directionList[item.address].push(item)
|
||
} else {
|
||
if (directionList[item.address] && directionList[item.address].length > 0) {
|
||
let oldList = directionList[item.address]
|
||
oldList.push(item)
|
||
directionList[item.address] = oldList
|
||
}
|
||
}
|
||
}
|
||
|
||
if (item.electricityFee) {
|
||
electricityFeeStr = item.electricityFee
|
||
}
|
||
});
|
||
|
||
let directionRes = [];
|
||
if (directionList) {
|
||
for (let key in directionList) {
|
||
directionRes.push({
|
||
label: key,
|
||
list: directionList[key],
|
||
sum: directionList[key].length,
|
||
})
|
||
}
|
||
}
|
||
|
||
directionRes.unshift({
|
||
label: "全部",
|
||
list: obj.JKInfoList,
|
||
});
|
||
|
||
|
||
list.push({
|
||
label: "交控",
|
||
value: 3,
|
||
sum:
|
||
obj.JKInfoList && obj.JKInfoList.length > 0
|
||
? obj.JKInfoList.length
|
||
: 0,
|
||
empty:
|
||
obj.JKDetail && obj.JKDetail.JKEmpty ? obj.JKDetail.JKEmpty : 0,
|
||
directionRes: directionRes
|
||
});
|
||
|
||
pageDirection['交控'] = directionRes
|
||
if (electricityFeeStr) {
|
||
// 交控的电价
|
||
let electricityFee = electricityFeeStr.split(",")
|
||
electricityFeeObj['交控'] = electricityFee
|
||
}
|
||
}
|
||
|
||
if (obj.GWInfoList && obj.GWInfoList.length > 0) {
|
||
let directionList = {}
|
||
let directionTypeList = []
|
||
let electricityFeeStr = ''
|
||
|
||
obj.GWInfoList.forEach((item) => {
|
||
if (item.address) {
|
||
if (directionTypeList.indexOf(item.address) === -1) {
|
||
directionTypeList.push(item.address)
|
||
directionList[item.address] = []
|
||
directionList[item.address].push(item)
|
||
} else {
|
||
if (directionList[item.address] && directionList[item.address].length > 0) {
|
||
let oldList = directionList[item.address]
|
||
oldList.push(item)
|
||
directionList[item.address] = oldList
|
||
}
|
||
}
|
||
}
|
||
|
||
if (item.electricityFee) {
|
||
electricityFeeStr = item.electricityFee
|
||
}
|
||
});
|
||
|
||
let directionRes = [];
|
||
if (directionList) {
|
||
for (let key in directionList) {
|
||
directionRes.push({
|
||
label: key,
|
||
list: directionList[key],
|
||
sum: directionList[key].length,
|
||
})
|
||
}
|
||
}
|
||
|
||
directionRes.unshift({
|
||
label: "全部",
|
||
list: obj.GWInfoList,
|
||
});
|
||
|
||
list.push({
|
||
label: "国网",
|
||
value: 4,
|
||
sum:
|
||
obj.GWInfoList && obj.GWInfoList.length > 0
|
||
? obj.GWInfoList.length
|
||
: 0,
|
||
empty:
|
||
obj.GWDetail && obj.GWDetail.GWEmpty ? obj.GWDetail.GWEmpty : 0,
|
||
directionRes: directionRes
|
||
});
|
||
|
||
pageDirection['国网'] = directionRes
|
||
if (electricityFeeStr) {
|
||
let electricityFee = electricityFeeStr.split(",")
|
||
electricityFeeObj['国网'] = electricityFee
|
||
}
|
||
}
|
||
|
||
// [
|
||
// {
|
||
// label: "理想",
|
||
// value: 1,
|
||
// sum:
|
||
// obj.LXInfoList && obj.LXInfoList.length > 0
|
||
// ? obj.LXInfoList.length
|
||
// : 0,
|
||
// },
|
||
// { label: "蔚来", value: 2, sum: 0 },
|
||
// {
|
||
// label: "交控",
|
||
// value: 3,
|
||
// sum:
|
||
// obj.JKInfoList && obj.JKInfoList.length > 0
|
||
// ? obj.JKInfoList.length
|
||
// : 0,
|
||
// },
|
||
// {
|
||
// label: "国网",
|
||
// value: 4,
|
||
// sum:
|
||
// obj.GWInfoList && obj.GWInfoList.length > 0
|
||
// ? obj.GWInfoList.length
|
||
// : 0,
|
||
// },
|
||
// ];
|
||
|
||
this.selectPopup = list[0].value || 1;
|
||
let value = list[0].value || 1;
|
||
if (value === 1) {
|
||
// 理想
|
||
this.chargeDetailList = this.nowCurrentObj.LXInfoList;
|
||
} else if (value === 3) {
|
||
// 交控
|
||
this.chargeDetailList = this.nowCurrentObj.JKInfoList;
|
||
} else if (value === 4) {
|
||
// 国网
|
||
this.chargeDetailList = this.nowCurrentObj.GWInfoList;
|
||
} else {
|
||
// 蔚来
|
||
this.chargeDetailList = this.nowCurrentObj.WLInfoList;
|
||
}
|
||
this.popupTab = list;
|
||
this.smallTab = list[0].directionRes
|
||
this.electricityFeeRes = electricityFeeObj
|
||
|
||
this.selectElectricityFee = this.electricityFeeRes[list[0].label] || []
|
||
|
||
this.pageDirection = pageDirection
|
||
this.$emit("handleChangeShow", true);
|
||
this.$refs.popup.open("bottom");
|
||
this.isShow = true;
|
||
},
|
||
// 跳转地图服务区详情
|
||
handleGoServiceDetail(id, obj) {
|
||
if (this.comeForm === 'scanCode') {
|
||
this.$emit("handleGetNowService", obj)
|
||
return
|
||
}
|
||
if (this.pageType === "newMap") {
|
||
let res = this.handleChangeServiceInfo(obj);
|
||
|
||
if (this.comeForm === "addContact") {
|
||
uni.setStorageSync("addContact", res);
|
||
} else {
|
||
uni.setStorageSync("currentService", res); // 当前选中服务区信息
|
||
}
|
||
|
||
if (this.comeForm === "home") {
|
||
uni.navigateTo({ url: "/pages/serviceDetail/index" });
|
||
} else {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/serviceDetail/index?id=${id}&come=chargeBox`,
|
||
});
|
||
},
|
||
// 选择的服务区详情
|
||
handleGoDetail(id, obj) {
|
||
if (this.comeForm === 'scanCode') {
|
||
this.$emit("handleGetNowService", obj)
|
||
return
|
||
}
|
||
|
||
|
||
if (this.pageType === "newMap") {
|
||
let res = this.handleChangeServiceInfo(obj);
|
||
uni.setStorageSync("currentService", res); // 当前选中服务区信息
|
||
|
||
if (this.comeForm === "home") {
|
||
// uni.navigateTo({ url: "/pages/serviceDetail/shopDetail/index" });
|
||
uni.navigateTo({ url: "/pages/serviceDetail/index" });
|
||
} else {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}
|
||
}
|
||
},
|
||
// 兼容一下老接口要的服务区对象的内容
|
||
handleChangeServiceInfo(obj) {
|
||
let newObj = {
|
||
...obj,
|
||
Distance: obj.SERVERPART_DISTANCE,
|
||
OwnerUnitId: obj.OWNERUNIT_ID,
|
||
OwnerUnitName: obj.OWNERUNIT_NAME,
|
||
ProvinceCode: "340000",
|
||
ServerPart_Id: obj.SERVERPART_ID,
|
||
ServerPart_Name: obj.SERVERPART_NAME,
|
||
ServerPart_Tel: "",
|
||
ServerPart_X: obj.SERVERPART_X,
|
||
ServerPart_Y: obj.SERVERPART_Y,
|
||
showName: `${obj.SERVERPART_NAME}(${obj.SERVERPART_DISTANCE}km)`,
|
||
};
|
||
return newObj;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.chargeBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.serviceList {
|
||
// margin-top: 8px;
|
||
width: 100%;
|
||
|
||
.serviceItem {
|
||
// display: flex;
|
||
// align-items: center;
|
||
margin-bottom: 24rpx;
|
||
// border-bottom: 1px solid #f5f6f7;
|
||
// padding-bottom: 20rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(61, 113, 255, 0.1);
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 26rpx;
|
||
|
||
.leftItem {
|
||
width: 100%;
|
||
height: 72px;
|
||
// width: calc(100% - 70px);
|
||
display: flex;
|
||
// align-items: center;
|
||
align-items: flex-start;
|
||
|
||
.leftImgBox {
|
||
width: 72px;
|
||
height: 72px;
|
||
overflow: hidden;
|
||
border-radius: 6rpx;
|
||
margin-right: 20rpx;
|
||
// background: #f5f6f7;
|
||
|
||
.leftImg {
|
||
width: 72px;
|
||
height: 72px;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
background-position: 50% 50%;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.detailBox {
|
||
width: calc(100% - 164rpx);
|
||
height: 72px;
|
||
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: 300rpx;
|
||
font-family: Source Han Sans SC, Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
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 {
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
color: #000000;
|
||
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: block;
|
||
overflow-x: auto;
|
||
margin-top: 16rpx;
|
||
box-sizing: border-box;
|
||
|
||
.typeListInner {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
|
||
.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: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// .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;
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.centerConfigItem {
|
||
width: calc(100% / 5);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
.configImg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
// margin-right: 8rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.configText {
|
||
font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
|
||
sans-serif;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.centerConfigItemNew {
|
||
width: calc(100% / 11);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// margin-bottom: 24rpx;
|
||
|
||
.configImg {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
// margin-right: 8rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.configText {
|
||
font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
|
||
sans-serif;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.lineBox {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
margin: 30rpx 0 34rpx;
|
||
}
|
||
|
||
.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: flex-start;
|
||
// justify-content: space-between;
|
||
|
||
.chargeItem {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
// justify-content: flex-start;
|
||
|
||
.chargeIconBox {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
.chargeIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.chargeTitle {
|
||
display: inline-block;
|
||
max-width: 400rpx;
|
||
font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
|
||
sans-serif;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.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: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.sum {
|
||
font-family: "DINAlternate";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottomItemNew {
|
||
width: 100%;
|
||
// height: 45px;
|
||
height: 40rpx;
|
||
box-sizing: border-box;
|
||
// padding: 18rpx 24rpx 22rpx;
|
||
// background: #f8f8f8;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-bottom: 14rpx;
|
||
|
||
.leftCharge {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.chargeIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
// margin-right: 16rpx;
|
||
margin-right: 30rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.rightcharge {
|
||
.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: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.sum {
|
||
font-family: "DINAlternate";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.merchantsBox {
|
||
margin-top: 24rpx;
|
||
|
||
.merchantsTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftMerchants {
|
||
.pageTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #090c1a;
|
||
line-height: 44rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.serviceName {
|
||
margin-left: 16rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #787879;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.rightMerchants {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.serviceName {
|
||
margin-left: 16rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #787879;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.moreText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #787879;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.moreIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.merchantsList {
|
||
width: 100%;
|
||
height: 276rpx;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #f3f3f3;
|
||
padding: 22rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
overflow-x: scroll;
|
||
|
||
.merchantsItem {
|
||
margin-right: 24rpx;
|
||
|
||
.merchantsIconBox {
|
||
width: 168rpx;
|
||
height: 168rpx;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
|
||
.merchantsIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.merchantsName {
|
||
display: inline-block;
|
||
width: 168rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #090c1a;
|
||
line-height: 40rpx;
|
||
text-align: justify;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.popupBigBox {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
|
||
.popupDetailBox {
|
||
width: 100vw;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
// position: relative;
|
||
z-index: 1000;
|
||
|
||
/* 确保内容在蒙层之上 */
|
||
.popupTitle {
|
||
width: 100%;
|
||
height: 108rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.closeIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
|
||
.img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.rightElectricity {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ba922f;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
}
|
||
}
|
||
|
||
.popupTab {
|
||
width: 100%;
|
||
height: 56rpx;
|
||
border-bottom: 1px solid #f1f1f1;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: space-between;
|
||
|
||
.tabItem {
|
||
width: calc((100%) / 4);
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #B3B3B3;
|
||
line-height: 50rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
// background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 8rpx 0;
|
||
box-sizing: border-box;
|
||
margin-right: 16rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.selectTabItem {
|
||
// background: #f8f4ea;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: relative;
|
||
}
|
||
|
||
.selectTabItem::after {
|
||
content: "";
|
||
width: 2rem;
|
||
height: 4rpx;
|
||
background: #009DFF;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.smallTabBox {
|
||
width: 100%;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 30rpx;
|
||
|
||
.smallTabItem {
|
||
font-family: Inter, Inter;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #1A577D;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 12rpx 20rpx;
|
||
background-color: #E6F6FF;
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
margin-right: 20rpx;
|
||
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 28rpx;
|
||
// color: #716f69;
|
||
// line-height: 50rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// // background: #f5f5f5;
|
||
// border-radius: 8rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
// padding: 8rpx;
|
||
// box-sizing: border-box;
|
||
// margin-right: 16rpx;
|
||
// white-space: nowrap;
|
||
}
|
||
|
||
.selectSmallTabItem {
|
||
// background: #f8f4ea;
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 600;
|
||
// font-size: 28rpx;
|
||
// color: #ba922f;
|
||
// line-height: 40rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// position: relative;
|
||
|
||
color: #ffffff;
|
||
background-color: #009DFF;
|
||
}
|
||
|
||
// .selectSmallTabItem::after {
|
||
// content: "";
|
||
// width: 2rem;
|
||
// height: 4rpx;
|
||
// background: #ba922f;
|
||
// position: absolute;
|
||
// bottom: 0;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// }
|
||
}
|
||
|
||
.stationList {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.selectElectricityFeeListBox {
|
||
width: calc(100vw - 64rpx);
|
||
overflow-x: auto;
|
||
margin-bottom: 24rpx;
|
||
/* 添加底部间距 */
|
||
|
||
.selectElectricityFeeListInner {
|
||
white-space: nowrap;
|
||
|
||
.selectElectricityFeeItem {
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 20rpx;
|
||
background-color: #F7F7F7;
|
||
border-radius: 6rpx;
|
||
/* 添加 flex-shrink: 0; 防止子元素收缩 */
|
||
flex-shrink: 0;
|
||
/* 添加右侧间距 */
|
||
margin-right: 16rpx;
|
||
/* 确保内部文本不换行 */
|
||
white-space: nowrap;
|
||
|
||
.timeBox {
|
||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.valueBox {
|
||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #FF6200;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.stationItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #f9f9f9;
|
||
margin-bottom: 24rpx;
|
||
position: relative;
|
||
|
||
.leftItem {
|
||
width: 152rpx;
|
||
height: 152rpx;
|
||
margin-right: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.chargeType {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #01bd8b;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.stausType {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #01bd8b;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.rightItem {
|
||
width: calc(100% - 176rpx);
|
||
|
||
.messageBox {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.label {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.value {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.noticeList {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.noticeItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 0 10rpx;
|
||
background: #eef0f6;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.addressText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FF8830;
|
||
line-height: 36rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.statusBox {
|
||
border-radius: 0rpx 16rpx 0rpx 16rpx;
|
||
padding: 10rpx 12rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.chargeIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.stationList ::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
.popup-mask {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
// background-color: rgba(0, 0, 0, 0.5);
|
||
background-color: rgba(0, 0, 0, 0);
|
||
z-index: 999;
|
||
pointer-events: auto;
|
||
/* 允许蒙层拦截触摸事件 */
|
||
/* 以下可选 */
|
||
backdrop-filter: blur(2px);
|
||
/* iOS 毛玻璃效果（可选） */
|
||
transition: opacity 0.3s;
|
||
/* 淡入淡出动画（可选） */
|
||
}
|
||
}
|
||
|
||
|
||
.electricityPopup {
|
||
width: 80vw;
|
||
height: 600rpx;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
border-radius: 32rpx;
|
||
background: #fff;
|
||
}
|
||
</style>
|