ylj/wanmeiyizhan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
wanmeiyizhan/components/chargeBox.vue
cclu f91bbbc60d update
2025-03-24 18:58:03 +08:00

3170 lines
110 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="chargeBox" v-if="showType === 'horizontal'">
<swiper
scroll-x="true"
class="serviceList"
@change="swiperChange($event, 'currentBan')"
:current="currentBan"
:style="{ height: `${swiperHeight[currentBan]}rpx` }"
>
<!-- autoplay="true" -->
<swiper-item
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' : '',
}"
>
<view
class="leftItem"
@click="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/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>
<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="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 ||
item.SERVERPART_DISTANCE ||
"-"
}}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>
</view>
</view>
</view>
<!-- 老款样式 -->
<view
class="centerItem"
@click="handleGoServiceDetail(item.SERVERPART_ID, item)"
v-if="styleType === 1"
>
<!-- 拥有设施的小图标 -->
<view
class="centerConfigItem"
v-for="(subItem, index) in item.imgList"
:key="index"
>
<image class="configImg" :src="subItem.url" />
<text class="configText">{{ subItem.title || "" }}</text>
</view>
</view>
<!-- 新款样式 -->
<view
class="centerItem"
@click="handleGoServiceDetail(item.SERVERPART_ID, item)"
v-if="styleType === 2 && showType !== 'horizontal'"
>
<view
class="centerConfigItemNew"
v-for="(subItem, index) in item.imgList.slice(
0,
item.noMore ? 5 : 12
)"
:key="index"
>
<image class="configImg" :src="subItem.url" />
<text class="configText">{{ subItem.title || "" }}</text>
</view>
<view
class="centerConfigItemNew"
v-if="item.noMore"
@click.stop="handleGetMore(item)"
>
<image
class="configImg"
src="https://eshangtech.com/minTestImg/chargeImgNew/getMore.svg"
/>
<text class="configText">更多</text>
</view>
</view>
<view
v-if="styleType === 1"
class="bottomItem"
@click="handleOpenDetail(item)"
>
<view class="chargeBox">
<!-- 理想 -->
<view class="chargeItem">
<view class="chargeIconBox">
<image
class="chargeIcon"
src="https://eshangtech.com/minTestImg/LXIcon.png"
/>
</view>
<view class="chargeTitle">理想</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="chargeTitle">蔚来</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="chargeTitle">交控新能源</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="chargeTitle">国网</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="bottomItemNew"
v-if="styleType === 2"
style="margin-top: 24rpx"
@click="handleOpenDetail(item)"
>
<view class="leftCharge">
<image
class="chargeIcon"
src="https://eshangtech.com/minTestImg/LXIcon.png"
/>
<image
class="chargeIcon"
src="https://eshangtech.com/minTestImg/WLIcon.png"
/>
<image
class="chargeIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg"
/>
<image
class="chargeIcon"
src="https://eshangtech.com/minTestImg/stateGridIcon.png"
/>
</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>
<!-- 商家 -->
<div class="merchantsBox" v-if="showStore">
<div class="merchantsTop">
<div class="leftMerchants">
<span class="pageTitle">精选商家</span>
</div>
<div class="rightMerchants">
<span class="serviceName">{{
item.SERVERPART_NAME || ""
}}</span>
<!-- <image
class="moreIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.png"
/> -->
</div>
</div>
<div
class="merchantsList"
v-if="item.storeList && item.storeList.length > 0"
>
<div
class="merchantsItem"
v-for="(subItem, subIndex) in item.storeList"
:key="subIndex"
>
<div class="merchantsIconBox" @click="goShop(subItem)">
<image class="merchantsIcon" :src="subItem.IMAGE_URL" />
</div>
<span class="merchantsName">{{ subItem.TITLE || "" }}</span>
</div>
</div>
<div
class="merchantsList"
style="display: flex; justify-content: center"
v-else
>
<no-data text="暂无商家" :isShow="true"></no-data>
</div>
</div>
</swiper-item>
</swiper>
</view>
<view class="chargeBox" v-else>
<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="handleGoDetail(item.SERVERPART_ID, item)"
>
<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/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>
<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="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 ||
item.SERVERPART_DISTANCE ||
"-"
}}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>
</view>
</view>
</view>
<!-- 老款样式 -->
<view
class="centerItem"
@click.stop="handleGoServiceDetail(item.SERVERPART_ID, item)"
v-if="styleType === 1"
>
<!-- 拥有设施的小图标 -->
<view
class="centerConfigItem"
v-for="(subItem, index) in item.imgList"
:key="index"
>
<image class="configImg" :src="subItem.url" />
<text class="configText">{{ subItem.title || "" }}</text>
</view>
</view>
<!-- 新款样式 -->
<view
class="centerItem"
@click.stop="handleGoServiceDetail(item.SERVERPART_ID, item)"
v-if="styleType === 2"
>
<view
class="centerConfigItemNew"
v-for="(subItem, index) in item.imgList.slice(
0,
item.noMore ? 5 : 12
)"
:key="index"
>
<image class="configImg" :src="subItem.url" />
<text class="configText">{{ subItem.title || "" }}</text>
</view>
<view
class="centerConfigItemNew"
v-if="item.noMore"
@click.stop="handleGetMore(item)"
>
<image
class="configImg"
src="https://eshangtech.com/minTestImg/chargeImgNew/getMore.svg"
/>
<text class="configText">更多</text>
</view>
</view>
<view
v-if="styleType === 1"
class="bottomItem"
@click.stop="handleOpenDetail(item)"
>
<view class="chargeBox">
<!-- 理想 -->
<view class="chargeItem">
<view class="chargeIconBox">
<image
class="chargeIcon"
src="https://eshangtech.com/minTestImg/LXIcon.png"
/>
</view>
<view class="chargeTitle">理想</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="chargeTitle">蔚来</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="chargeTitle">交控新能源</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="chargeTitle">国网</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="bottomItemNew"
v-if="styleType === 2"
@click.stop="handleOpenDetail(item)"
>
<view class="leftCharge">
<image
class="chargeIcon"
src="https://eshangtech.com/minTestImg/LXIcon.png"
/>
<image
class="chargeIcon"
src="https://eshangtech.com/minTestImg/WLIcon.png"
/>
<image
class="chargeIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg"
/>
<image
class="chargeIcon"
src="https://eshangtech.com/minTestImg/stateGridIcon.png"
/>
</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"
@close="handleClosePopup"
@maskClick="handleClosePopup"
>
<div class="popupDetailBox">
<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.sum})` : "" }}
</div>
</div>
<scroll-view
class="stationList"
scroll-y
:style="{
height: `calc(95vh - 108rpx - 56rpx - 24rpx)`,
}"
>
<div
class="stationItem"
v-for="(item, index) in chargeDetailList"
:key="index"
>
<div
class="leftItem"
:style="{
backgroundImage: `url(${
item.Status === 0 || item.Status === 255
? 'https://eshangtech.com/minTestImg/offGrid.svg'
: item.Power >= 240
? 'https://eshangtech.com/minTestImg/overfilling.svg'
: item.Power <= 130 && item.Power > 60
? 'https://eshangtech.com/minTestImg/occupy.svg'
: item.Power < 60
? 'https://eshangtech.com/minTestImg/idle.svg'
: ''
})`,
}"
>
<!-- item.Status === 0
? 'https://eshangtech.com/wanmeiyizhanImg/home/offGrid.svg'
: item.Status === 1
? 'https://eshangtech.com/wanmeiyizhanImg/home/idle.svg'
: item.Status === 2
? 'https://eshangtech.com/wanmeiyizhanImg/home/idle.svg'
: item.Status === 3
? 'https://eshangtech.com/wanmeiyizhanImg/home/idle.svg'
: item.Status === 4
? 'https://eshangtech.com/wanmeiyizhanImg/home/occupy.svg'
: item.Status === 255
? 'https://eshangtech.com/wanmeiyizhanImg/home/offGrid.svg'
: '' -->
<div
class="chargeType"
:style="{
color:
item.Status === 0 || item.Status === 255
? '#B8B7B4'
: item.Power >= 240
? '#FF5959'
: item.Power <= 130 && item.Power > 60
? '#FF8830'
: item.Power < 60
? '#01BD8B'
: '',
}"
>
{{
item.Status === 0
? "离网"
: item.Status === 255
? "故障"
: item.Power >= 240
? "超充"
: item.Power <= 130 && item.Power > 60
? "‌快充"
: "慢充"
}}
</div>
<div
v-if="item.Status !== 0 && item.Status !== 255"
class="stausType"
:style="{
color:
item.Power >= 240
? '#FF5959'
: item.Power <= 130 && item.Power > 60
? '#FF8830'
: item.Power < 60
? '#01BD8B'
: '',
}"
>
{{
item.Status === 2 || item.Status === 3 || item.Status === 4
? "占用"
: item.Status === 1
? "空闲"
: ""
}}
</div>
</div>
<div class="rightItem" @click="handleGoMin">
<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:
item.Power >= 240
? '#FF5959'
: item.Power <= 130 && item.Power > 60
? '#FF8830'
: item.Power < 60
? '#01BD8B'
: '',
backgroundColor:
item.Power >= 240
? '#FFF1F1'
: item.Power <= 130 && item.Power > 60
? '#FBF2EB'
: item.Power < 60
? '#EAF4F1'
: '',
}"
>
<image
v-if="item.Status === 3"
class="chargeIcon"
:src="
item.Power >= 240
? 'https://eshangtech.com/wanmeiyizhanImg/home/fast.svg'
: item.Power <= 130 && item.Power > 60
? 'https://eshangtech.com/wanmeiyizhanImg/home/normal.svg'
: item.Power < 60
? 'https://eshangtech.com/wanmeiyizhanImg/home/slow.svg'
: ''
"
/>
{{
item.Status === 2
? "占用"
: item.Status === 3
? "充电中"
: item.Status === 4
? "预约锁定"
: ""
}}
</div>
</div>
</scroll-view>
</div>
</uni-popup>
</view>
</template>
<script>
import NoData from "./noData.vue";
export default {
components: { NoData },
data() {
return {
detailObj: {},
seatInfo: {},
nowCurrentObj: {}, // 当前点击选中的悬浮框的对象
chargeDetailList: [], // 悬浮框里面的详情数据
isShow: false,
popupTab: [
{ label: "理想", value: 1, sum: 0 },
{ label: "蔚来", value: 2, sum: 0 },
{ label: "交控", value: 3, sum: 0 },
{ label: "国网", value: 4, sum: 0 },
], // 点开的服务区有哪几种充电的
selectPopup: 1,
SERVERPART_TARGETOBJ: {},
styleType: 2, // 1 为老款样式 2 为蓝湖新的样式
currentBan: 0, // 当前的轮播框 显示内容
swiperHeight: [], // 高度数组
};
},
props: [
"serviceAreaList",
"startObj",
"endObj",
"pageType",
"showType",
"showStore",
"comeForm",
],
// 更新内容的时候 看好 有两版内容 样式需要改两个地方 暂时这样 后续可以变为一个
onReady() {
console.log("onShow");
console.log("showType", this.showType);
let SERVERPART_TARGET = uni.getStorageSync("SERVERPART_TARGET");
if (SERVERPART_TARGET) {
this.SERVERPART_TARGETOBJ = JSON.parse(SERVERPART_TARGET);
} else {
// 拿到枚举
this.handleSERVERPART_TARGETOBJ();
}
this.handldGetData();
},
methods: {
// 选择的服务区详情
handleGoDetail(id, obj) {
if (this.pageType === "newMap") {
let res = this.handleChangeServiceInfo(obj);
// let res = {
// SERVERPART_NAME: obj.SERVERPART_NAME, // 服务区
// SPREGIONTYPE_NAME: obj.SPREGIONTYPE_NAME, // 片区
// Serverpart_ID: obj.SERVERPART_ID,
// SPRegionType_ID: obj.SPREGIONTYPE_ID,
// longitude: obj.SERVERPART_X,
// latitude: obj.SERVERPART_Y
// }
uni.setStorageSync("currentService", res); // 当前选中服务区信息
if (this.comeForm === "home") {
uni.navigateTo({ url: "/pages/serviceDetail/shopDetail/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;
},
goShop(item) {
uni.navigateTo({ url: "/pages/storeDetail/index?id=" + item.ITEM_ID });
},
swiperChange(e, name) {
// this[name] = e.mp.detail.current;
this.currentBan = e.mp.detail.current;
},
handleGetMore(obj) {
obj.noMore = false;
},
// 遍历去调用 理想的全部数据 并输出在一个list里面
async handleTraverseLXAllData(sum, token) {
// sum 为遍历次数
let res = [];
for (let i = 0; i < sum; i++) {
const data = await this.$testApi.$post("/send", {
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_stations_info",
data: JSON.stringify({
PageNo: 2 + i,
PageSize: 999,
}),
id: 0,
seq: `00${3 + i}`,
token: token,
});
res = res.concat(data.Data.StationInfos);
}
return res;
},
// 解服务区的一个枚举
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;
},
async handldGetData() {
uni.showLoading({
title: "加载中...",
});
// 先去请求一下服务区的繁忙度
let businessReq = {
action_type: "getCurHalfCollect",
province_code: 3544,
};
const businessRes = await new Promise((resolve, reject) => {
uni.request({
url: `https://cloud.eshangtech.com/MobileServicePlatform/Handler/handler_ajax.ashx`,
method: "GET",
data: businessReq,
success(res) {
let data = res.data.CollectionObject;
if (data && data.length > 0) {
resolve(data);
} else {
resolve([]);
}
},
});
});
let seatInfo = uni.getStorageSync("seatInfo");
if (seatInfo) {
this.seatInfo = JSON.parse(seatInfo);
}
// 服务区列表
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
);
serviceList = serviceArea.Result_Data.List;
uni.setStorageSync("serviceList", JSON.stringify(serviceList));
}
let _this = this;
let list = [];
let nameList = [];
if (_this.serviceAreaList && _this.serviceAreaList.length > 0) {
_this.serviceAreaList.forEach((item) => {
nameList.push(item.split("服务区")[0]);
if (serviceList && serviceList.length > 0) {
serviceList.forEach((subItem) => {
if (item === subItem.SERVERPART_NAME) {
// 给这个服务区 赋值服务区的繁忙度
if (businessRes && businessRes.length > 0) {
businessRes.forEach((businessItem) => {
if (businessItem.SERVERPART_NAME === item) {
subItem.businessObj = businessItem;
}
});
}
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 HASMOTHER = 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; // 加水
let REFUELINGGUN92 = 0; // 加油枪92号
let REFUELINGGUN95 = 0; // 加油枪95号
let REFUELINGGUN0 = 0; // 加油枪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;
REFUELINGGUN92 += thirdItem.REFUELINGGUN92;
REFUELINGGUN95 += thirdItem.REFUELINGGUN95;
REFUELINGGUN0 += thirdItem.REFUELINGGUN0;
if (thirdItem.HASPILOTLOUNGE) {
HASPILOTLOUNGE = true;
}
if (thirdItem.HASCHILD) {
HASCHILD = true;
}
if (thirdItem.HASMOTHER) {
HASMOTHER = 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 =
this.styleType === 1
? [
{
url:
HASPANTRY > 0 || HASWIFI > 0
? "https://eshangtech.com/minTestImg/motherAndBaby.svg"
: "https://eshangtech.com/minTestImg/nomotherAndBaby.svg",
isShow: HASPANTRY > 0 || HASWIFI > 0,
title: "母婴室",
},
{
url:
HASPILOTLOUNGE > 0
? "https://eshangtech.com/minTestImg/HASPILOTLOUNGE.svg"
: "https://eshangtech.com/minTestImg/noHASPILOTLOUNGE.svg",
isShow: HASPILOTLOUNGE > 0,
title: "司机之家",
},
{
url: HASCHILD
? "https://eshangtech.com/minTestImg/HASCHILD.svg"
: "https://eshangtech.com/minTestImg/noHASCHILD.svg",
isShow: SMALLPARKING,
title: "车辆维修",
},
{
url:
DININGROOMCOUNT > 0
? "https://eshangtech.com/minTestImg/DININGROOMCOUNT.svg"
: "https://eshangtech.com/minTestImg/noDININGROOMCOUNT.svg",
isShow: DININGROOMCOUNT > 0,
title: "餐饮",
},
{
url:
HASBACKGROUNDRADIO > 0
? "https://eshangtech.com/minTestImg/HASBACKGROUNDRADIO.svg"
: "https://eshangtech.com/minTestImg/noHASBACKGROUNDRADIO.svg",
isShow: HASBACKGROUNDRADIO > 0,
title: "便利店",
},
{
url:
HASPANTRY > 0 || HASWIFI > 0
? "https://eshangtech.com/minTestImg/WC.svg"
: "https://eshangtech.com/minTestImg/noWC.svg",
isShow: HASPANTRY > 0,
title: "卫生间",
},
// {
// url:
// HASSHOWERROOM > 0
// ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
// : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
// isShow: HASSHOWERROOM > 0,
// title: "淋浴房",
// },
// {
// url:
// HASWATERROOM > 0
// ? "https://eshangtech.com/minTestImg/HASWATERROOM.svg"
// : "https://eshangtech.com/minTestImg/noHASWATERROOM.svg",
// isShow: HASWATERROOM > 0,
// title: "开水器",
// },
{
url:
SMALLPARKING > 0 ||
PACKING > 0 ||
TRUCKPACKING > 0 ||
DANPACKING > 0
? "https://eshangtech.com/minTestImg/SMALLPARKING.svg"
: "https://eshangtech.com/minTestImg/noSMALLPARKING.svg",
isShow:
SMALLPARKING > 0 ||
PACKING > 0 ||
TRUCKPACKING > 0 ||
DANPACKING > 0,
title: "停车场",
},
{
url:
REFUELINGGUN92 > 0 ||
REFUELINGGUN95 > 0 ||
REFUELINGGUN0 > 0
? "https://eshangtech.com/minTestImg/REFUELINGGUN.svg"
: "https://eshangtech.com/minTestImg/noREFUELINGGUN.svg",
isShow:
REFUELINGGUN92 > 0 ||
REFUELINGGUN95 > 0 ||
REFUELINGGUN0 > 0,
title: "加油站",
},
{
url:
LIAUTOCHARGESum > 0 ||
STATEGRIDCHARGESum > 0 ||
GACENERGYCHARGESum > 0
? "https://eshangtech.com/minTestImg/chargingStation.svg"
: "https://eshangtech.com/minTestImg/nochargingStation.svg",
isShow:
LIAUTOCHARGESum > 0 ||
STATEGRIDCHARGESum > 0 ||
GACENERGYCHARGESum > 0,
title: "充电桩",
},
{
url:
POINTCONTROLCOUNT > 0
? "https://eshangtech.com/minTestImg/POINTCONTROLCOUNT.svg"
: "https://eshangtech.com/minTestImg/noPOINTCONTROLCOUNT.svg",
isShow: POINTCONTROLCOUNT > 0,
title: "客房",
},
// {
// url:
// WASHERCOUNT > 0
// ? "https://eshangtech.com/minTestImg/WASHERCOUNT.svg"
// : "https://eshangtech.com/minTestImg/noWASHERCOUNT.svg",
// isShow: WASHERCOUNT > 0,
// title: "洗衣机",
// },
// {
// url:
// MICROWAVEOVEN > 0
// ? "https://eshangtech.com/minTestImg/MICROWAVEOVEN.svg"
// : "https://eshangtech.com/minTestImg/noMICROWAVEOVEN.svg",
// isShow: MICROWAVEOVEN > 0,
// title: "微波炉",
// },
// {
// url:
// HASWIFI > 0
// ? "https://eshangtech.com/minTestImg/womanWCIcon.svg"
// : "https://eshangtech.com/minTestImg/nowomanWCIcon.svg",
// },
// {
// url:
// TOILETCOUNT > 0
// ? "https://eshangtech.com/minTestImg/TOILETCOUNT.svg"
// : "https://eshangtech.com/minTestImg/noTOILETCOUNT.svg",
// isShow: TOILETCOUNT > 0,
// },
// {
// url:
// HASSHOWERROOM > 0
// ? "https://eshangtech.com/minTestImg/HASSHOWERROOM.svg"
// : "https://eshangtech.com/minTestImg/noHASSHOWERROOM.svg",
// isShow: HASSHOWERROOM > 0,
// title: "淋浴间",
// },
// {
// url:
// HASWATERROOM > 0
// ? "https://eshangtech.com/minTestImg/HASWATERROOM.svg"
// : "https://eshangtech.com/minTestImg/noHASWATERROOM.svg",
// isShow: HASWATERROOM > 0,
// title: "开水器",
// },
// // {
// // url:
// // SLEEPINGPODS > 0
// // ? "https://eshangtech.com/minTestImg/SLEEPINGPODS.svg"
// // : "https://eshangtech.com/minTestImg/noSLEEPINGPODS.svg",
// // isShow: SLEEPINGPODS > 0,
// // title: "睡眠仓",
// // },
// {
// url:
// HASPILOTLOUNGE > 0
// ? "https://eshangtech.com/minTestImg/HASPILOTLOUNGE.svg"
// : "https://eshangtech.com/minTestImg/noHASPILOTLOUNGE.svg",
// isShow: HASPILOTLOUNGE > 0,
// title: "司机之家",
// },
// {
// url:
// HASCHILD > 0
// ? "https://eshangtech.com/minTestImg/HASCHILD.svg"
// : "https://eshangtech.com/minTestImg/noHASCHILD.svg",
// isShow: HASCHILD > 0,
// title: "车辆维修",
// },
// {
// url:
// DININGBXCOUNT > 0
// ? "https://eshangtech.com/minTestImg/DININGBXCOUNT.svg"
// : "https://eshangtech.com/minTestImg/noDININGBXCOUNT.svg",
// isShow: DININGBXCOUNT > 0,
// title: "商铺",
// },
// {
// url:
// SMALLPARKING > 0
// ? "https://eshangtech.com/minTestImg/SMALLPARKING.svg"
// : "https://eshangtech.com/minTestImg/noSMALLPARKING.svg",
// isShow: SMALLPARKING > 0,
// title: "轿车车位",
// },
// {
// url:
// PACKING > 0
// ? "https://eshangtech.com/minTestImg/PACKING.svg"
// : "https://eshangtech.com/minTestImg/noPACKING.svg",
// isShow: PACKING > 0,
// title: "轿车车位",
// },
// {
// url:
// TRUCKPACKING > 0
// ? "https://eshangtech.com/minTestImg/TRUCKPACKING.svg"
// : "https://eshangtech.com/minTestImg/noTRUCKPACKING.svg",
// isShow: TRUCKPACKING > 0,
// },
// {
// url:
// DANPACKING > 0
// ? "https://eshangtech.com/minTestImg/DANPACKING.svg"
// : "https://eshangtech.com/minTestImg/noDANPACKING.svg",
// isShow: DANPACKING > 0,
// },
// // {
// // url:
// // DININGROOMCOUNT > 0
// // ? "https://eshangtech.com/minTestImg/DININGROOMCOUNT.svg"
// // : "https://eshangtech.com/minTestImg/noDININGROOMCOUNT.svg",
// // isShow: DININGROOMCOUNT > 0,
// // },
// {
// url:
// HASBACKGROUNDRADIO > 0
// ? "https://eshangtech.com/minTestImg/HASBACKGROUNDRADIO.svg"
// : "https://eshangtech.com/minTestImg/noHASBACKGROUNDRADIO.svg",
// isShow: HASBACKGROUNDRADIO > 0,
// title: "便利店",
// },
// // {
// // url:
// // POINTCONTROLCOUNT > 0
// // ? "https://eshangtech.com/minTestImg/POINTCONTROLCOUNT.svg"
// // : "https://eshangtech.com/minTestImg/noPOINTCONTROLCOUNT.svg",
// // isShow: POINTCONTROLCOUNT > 0,
// // },
// {
// url:
// TOILET_PAPER > 0
// ? "https://eshangtech.com/minTestImg/TOILET_PAPER.svg"
// : "https://eshangtech.com/minTestImg/noTOILET_PAPER.svg",
// isShow: TOILET_PAPER > 0,
// title: "厕纸巾",
// },
// {
// url:
// CHANGING_TABLE > 0
// ? "https://eshangtech.com/minTestImg/CHANGING_TABLE.svg"
// : "https://eshangtech.com/minTestImg/noCHANGING_TABLE.svg",
// isShow: CHANGING_TABLE > 0,
// title: "尿布台",
// },
// {
// url:
// NURSING_TABLE > 0
// ? "https://eshangtech.com/minTestImg/NURSING_TABLE.svg"
// : "https://eshangtech.com/minTestImg/noNURSING_TABLE.svg",
// isShow: NURSING_TABLE > 0,
// title: "哺乳桌",
// },
// {
// url:
// BABY_COT > 0
// ? "https://eshangtech.com/minTestImg/BABY_COT.svg"
// : "https://eshangtech.com/minTestImg/noBABY_COT.svg",
// isShow: BABY_COT > 0,
// title: "婴儿床",
// },
]
: this.styleType === 2
? [
{
url:
HASPANTRY > 0 || HASWIFI > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/motherAndBaby.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/nomotherAndBaby.svg",
isShow: HASPANTRY > 0 || HASWIFI > 0,
title: "母婴室",
},
{
url:
HASPILOTLOUNGE > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/HASPILOTLOUNGE.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASPILOTLOUNGE.svg",
isShow: HASPILOTLOUNGE > 0,
title: "司机之家",
},
{
url: HASCHILD
? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
isShow: SMALLPARKING,
title: "车辆维修",
},
{
url:
DININGROOMCOUNT > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/DININGROOMCOUNT.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noDININGROOMCOUNT.svg",
isShow: DININGROOMCOUNT > 0,
title: "餐饮",
},
{
url:
HASBACKGROUNDRADIO > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/HASBACKGROUNDRADIO.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASBACKGROUNDRADIO.svg",
isShow: HASBACKGROUNDRADIO > 0,
title: "便利店",
},
{
url:
HASPANTRY > 0 || HASWIFI > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
isShow: HASPANTRY > 0,
title: "卫生间",
},
{
url:
SMALLPARKING > 0 ||
PACKING > 0 ||
TRUCKPACKING > 0 ||
DANPACKING > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/SMALLPARKING.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noSMALLPARKING.svg",
isShow:
SMALLPARKING > 0 ||
PACKING > 0 ||
TRUCKPACKING > 0 ||
DANPACKING > 0,
title: "停车场",
},
{
url:
REFUELINGGUN92 > 0 ||
REFUELINGGUN95 > 0 ||
REFUELINGGUN0 > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/REFUELINGGUN.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noREFUELINGGUN.svg",
isShow:
REFUELINGGUN92 > 0 ||
REFUELINGGUN95 > 0 ||
REFUELINGGUN0 > 0,
title: "加油站",
},
{
url:
LIAUTOCHARGESum > 0 ||
STATEGRIDCHARGESum > 0 ||
GACENERGYCHARGESum > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg",
isShow:
LIAUTOCHARGESum > 0 ||
STATEGRIDCHARGESum > 0 ||
GACENERGYCHARGESum > 0,
title: "充电桩",
},
{
url:
POINTCONTROLCOUNT > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
isShow: POINTCONTROLCOUNT > 0,
title: "客房",
},
{
url:
WASHERCOUNT > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/WASHERCOUNT.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noWASHERCOUNT.svg",
isShow: WASHERCOUNT > 0,
title: "洗衣机",
},
{
url:
MICROWAVEOVEN > 0
? "https://eshangtech.com/minTestImg/chargeImgNew/MICROWAVEOVEN.svg"
: "https://eshangtech.com/minTestImg/chargeImgNew/noMICROWAVEOVEN.svg",
isShow: MICROWAVEOVEN > 0,
title: "微波炉",
},
]
: [];
// 理想的随机百分比
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)
);
});
}
});
}
console.log("_this.serviceAreaList", _this.serviceAreaList);
// 高德key
const key = "6e96a801bcea5290d3dcbf100358a6b3";
// 起点经纬度
const start =
_this.pageType === "travelNavigation"
? `${this.startObj.longitude},${this.startObj.latitude}`
: "";
// 终点经纬度
const end =
_this.pageType === "travelNavigation"
? `${this.endObj.longitude},${this.endObj.latitude}`
: "";
// 拿到途径点的所有坐标
let routePoint = "";
// 下面的距离变成高速实际距离 不再是直线距离
if (list && list.length > 0) {
for (let i = 0; i < list.length; i++) {
let item = list[i];
item.noMore = true;
if (_this.pageType === "travelNavigation") {
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("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,
};
}
}
// 根据当前位置到目的地的位置 排序
for (let i = 0; i < list.length - 1; i++) {
// 外层循环控制排序趟数
for (let j = 0; j < list.length - i - 1; j++) {
// 内层循环控制每趟排序多少次
// 如果当前元素大于下一个元素,则交换它们
if (
Number(list[j].SERVERPART_DISTANCE || 0) >
Number(list[j + 1].SERVERPART_DISTANCE || 0)
) {
let temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
}
}
if (this.showStore) {
list = await this.handleGetListStore(list);
}
console.log("listasdsadasdas", list);
_this.detailObj = {
// distanceNumber: distance,
// hour: timeObj.hourStr,
// minutes: timeObj.minuteStr,
// tolls: tolls,
// haveProgress: ((smoothAcount / allAcount) * 100).toFixed(2),
servicePart: list,
};
// _this.handleGetChargeData(list, ["新桥", "丰乐", "肥东"]);
// 理想
await _this.handleGetChargeData(list, nameList);
// 交控
await _this.handleTrafficControlData(list, nameList);
uni.hideLoading();
},
// 给数组加上他的精选商家
async handleGetListStore(list) {
let heightList = [];
for (let i = 0; i < list.length; i++) {
const data = await this.$api.getCoop({
action_type: "GetRcmContent",
rcmtagKey: "HOME_SELLER",
serverpartId: list[i].SERVERPART_ID,
provinceCode: "340000",
});
list[i].storeList = data.Data.List;
if (data.Data.List && data.Data.List.length > 0) {
heightList.push(642);
} else {
heightList.push(342);
}
this.swiperHeight = heightList;
}
return list;
},
// 随机给充电桩数据
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,
};
},
// 拿到充电的理想数据
async handleGetChargeData(serviceList, nameList) {
// uni.showLoading({
// title: "查询理想设备信息...",
// });
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,
});
console.log("allStationList", allStationList);
let stationList = allStationList.Data.StationInfos;
// 判断 因为 理想的数据 是一页20个 20个的返回的 所以需要我们去遍历 拿到 他的全部数据
// 那么就需要 看看这次有多少页 然后遍历去拿
// 值为多少 就说明还要遍历 sum - 1次
let sum = allStationList.Data.PageCount;
let remainData = [];
if (sum > 1) {
remainData = await this.handleTraverseLXAllData(sum, token);
stationList = stationList.concat(remainData);
}
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: `00${sum + 2}`,
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 (this.detailObj.servicePart && this.detailObj.servicePart.length > 0) {
let newRes = JSON.parse(JSON.stringify(this.detailObj.servicePart));
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 (this.styleType === 2) {
item.allChargeDetail = {
allSum:
Number(LXSum || 0) +
Number(item.WLDetail.WLSum || 0) +
Number(item.SunDetail.SunSum || 0) +
Number(item.chargeAndReplaceDetail.chargeAndReplaceSum || 0),
empty:
Number(LXEmpty || 0) +
Number(item.WLDetail.WLEmpty || 0) +
Number(item.SunDetail.WLEmpty || 0) +
Number(item.chargeAndReplaceDetail.WLEmpty || 0),
};
}
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();
},
// 拿到交控的充电数据
async handleTrafficControlData(list, nameList) {
const tokenData = await new Promise((resolve, reject) => {
uni.request({
url: `https://wmgs.anhui-expressway.net/token/generate?client=4d1cf0d1-3bfc-4c91-b9ac-3a3f4ce7a4b5&secret=fEoBj6DFSKmz2fjgIauQkg`,
method: "GET",
success(res) {
resolve(res);
},
});
});
let token = tokenData.data.data;
// 拿服务区数据 知道服务区id对应的服务区名称
const serviceData = await new Promise((resolve, reject) => {
uni.request({
url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/v1/jt/share/ext_service_areas`,
method: "GET",
data: {
pageSize: 999,
pageNum: 1,
beginDate: "2000-01-01",
endDate: "2025-03-20",
},
header: {
Authorization: `Bearer ${token}`,
"content-type": "application/x-www-form-urlencoded",
},
success(res) {
resolve(res);
},
});
});
let serviceList = serviceData.data.data.records;
let serviceObj = {}; // 枚举值 value: label
if (serviceList && serviceList.length > 0) {
serviceList.forEach((item) => {
serviceObj[item.code] = item.name;
});
}
// 服务区充电桩数据
const chargData = await new Promise((resolve, reject) => {
uni.request({
url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/service/evcharging/connector/list`,
method: "GET",
header: {
Authorization: `Bearer ${token}`,
"content-type": "application/x-www-form-urlencoded",
},
success(res) {
resolve(res);
},
});
});
let chargInfoList = chargData.data.data;
// chargInfoList 数据 没有服务区名称 根据服务区code 拼上名称
if (chargInfoList && chargInfoList.length > 0) {
chargInfoList.forEach((item) => {
item.serviceName =
item.serviceCode && serviceObj ? serviceObj[item.serviceCode] : "";
});
}
// 赋值了服务区名称之后的充电数据
// console.log("chargInfoList", chargInfoList);
// 拿到现在查询的这几个服务区数据
// console.log("nameList", nameList);
// 现在查询的几个服务区的数据
let nowServiceList = [];
if (chargInfoList && chargInfoList.length > 0) {
chargInfoList.forEach((item) => {
let name = item.serviceName.split("服务区")[0];
if (nameList.indexOf(name) !== -1) {
nowServiceList.push(item);
}
});
}
console.log("nowServiceListssss", nowServiceList);
// nowServiceListssss 就是当前查询的这几个服务区里面的 充电桩数据
// 接下来就是将它的数据 放到我们显示的数组里面
if (this.detailObj.servicePart && this.detailObj.servicePart.length > 0) {
let newRes = JSON.parse(JSON.stringify(this.detailObj.servicePart));
newRes.forEach((item) => {
let JKCharge = [];
let JKInfoList = [];
let sortName = item.SERVERPART_NAME.split("服务区")[0];
if (nowServiceList && nowServiceList.length > 0) {
nowServiceList.forEach((subItem) => {
if (subItem.serviceName.indexOf(sortName) !== -1) {
JKInfoList.push({
...subItem,
Status: subItem.status,
Power: subItem.power,
ConnectorID: subItem.equipmentID,
VoltageLowerLimits: subItem.voltage_lower_limits,
VoltageUpperLimits: subItem.voltage_upper_limits,
ConnectorType: subItem.connector_type,
NationalStandard: subItem.national_standard,
});
JKCharge.push({
Status: subItem.status,
ConnectorId: subItem.connectorId,
});
}
});
}
// 空多少个
let JKEmpty = 0;
// 一共多少个
let JKSum = 0;
if (JKCharge && JKCharge.length > 0) {
JKCharge.forEach((subItem) => {
if (subItem.Status !== 3) {
JKEmpty += 1;
}
JKSum += 1;
});
}
item.JKDetail = {
JKSum: JKSum,
JKEmpty: JKEmpty,
};
if (this.styleType === 2) {
item.allChargeDetail = {
allSum:
Number(
item.LXDetail && item.LXDetail.LXSum ? item.LXDetail.LXSum : 0
) +
Number(item.WLDetail.WLSum || 0) +
Number(JKSum || 0) +
Number(item.chargeAndReplaceDetail.chargeAndReplaceSum || 0),
empty:
Number(
item.LXDetail && item.LXDetail.LXEmpty
? item.LXDetail.LXEmpty
: 0
) +
Number(item.WLDetail.WLEmpty || 0) +
Number(JKEmpty || 0) +
Number(item.chargeAndReplaceDetail.WLEmpty || 0),
};
}
item.JKInfoList = JKInfoList;
item.JKCharge = JKCharge;
});
console.log("JKnewRes", newRes);
this.detailObj.servicePart = newRes;
this.$forceUpdate();
}
},
// 生成随机数
handleGetRandomData(max, min) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
// 跳转地图服务区详情
handleGoServiceDetail(id, obj) {
console.log("id", id);
if (this.pageType === "newMap") {
let res = this.handleChangeServiceInfo(obj);
uni.setStorageSync("currentService", res); // 当前选中服务区信息
if (this.comeForm === "home") {
uni.navigateTo({ url: "/pages/serviceDetail/shopDetail/index" });
} else {
uni.navigateBack({
delta: 1,
});
}
return;
}
uni.navigateTo({
url: `/pages/serviceDetail/index?id=${id}&come=chargeBox`,
});
// uni.navigateTo({
// url: `/pages/serviceDetail/mapDetail/index?servicePartId=${id}`,
// });
},
// 打开对应的悬浮框
handleOpenDetail(obj) {
console.log("obj", obj);
this.nowCurrentObj = obj;
this.chargeDetailList = obj.LXInfoList;
this.popupTab = [
{
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: 0 },
];
console.log("this.chargeDetailList", this.chargeDetailList);
this.$refs.popup.open("bottom");
this.isShow = true;
},
// 关闭悬浮框
handleClosePopup() {
this.$refs.popup.close();
this.isShow = false;
this.nowCurrentObj = {};
this.chargeDetailList = [];
this.popupTab = [
{ label: "理想", value: 1 },
{ label: "蔚来", value: 2 },
{ label: "交控新能源", value: 3 },
{ label: "国网", value: 4 },
];
this.selectPopup = 1;
},
handleChangeSelectPopup(value) {
this.selectPopup = value;
console.log("value", value);
console.log("this.nowCurrentObj", this.nowCurrentObj);
if (value === 1) {
// 理想
this.chargeDetailList = this.nowCurrentObj.LXInfoList;
} else if (value === 3) {
// 交控
this.chargeDetailList = this.nowCurrentObj.JKInfoList;
} else {
this.chargeDetailList = [];
}
console.log("this.chargeDetailList", this.chargeDetailList);
},
},
};
</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;
.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: 300rpx;
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;
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% / 6);
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;
}
}
}
.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;
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%;
box-sizing: border-box;
padding: 18rpx 24rpx 22rpx;
background: #f8f8f8;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: space-between;
.leftCharge {
display: flex;
align-items: center;
.chargeIcon {
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
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;
}
}
}
}
}
.popupDetailBox {
width: 100vw;
height: 95vh;
background: #fff;
box-sizing: border-box;
padding: 0 32rpx;
.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;
}
}
.popupTab {
width: 100%;
height: 56rpx;
display: flex;
align-items: center;
justify-content: space-between;
.tabItem {
width: calc((100% - 72rpx) / 4);
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #716f69;
line-height: 40rpx;
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;
}
.selectTabItem {
background: #f8f4ea;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #ba922f;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
}
.stationList {
width: 100%;
margin-top: 24rpx;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.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 {
.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;
}
}
}
.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;
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink