|
|
@@ -1,204 +1,242 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <ujp-navbar title="站点详情(游客模式)">
|
|
|
- <view slot="right" style="margin-right: 10px;">
|
|
|
- <view class="iconfont qr-code">
|
|
|
- 
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </ujp-navbar>
|
|
|
- <view class="head">
|
|
|
- <img src="../../../assets/img/stationPic.png" mode=""></img>
|
|
|
- </view>
|
|
|
- <!-- 站点详情 -->
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <ujp-navbar title="站点详情">
|
|
|
+ <view slot="right" style="margin-right: 10px;" @click="openModalBl=true">
|
|
|
+ <view class="iconfont qr-code">
|
|
|
+ 
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </ujp-navbar>
|
|
|
+
|
|
|
+ <u-alert-tips type="warning" @click="noticeShow=false" icon="volume-up-fill"
|
|
|
+ v-show="noticeShow&&stationDetail.station&&stationDetail.station.maxSoc&&stationDetail.station.maxSoc!=100"
|
|
|
+ :descStyle="{
|
|
|
+ fontSize: '28rpx',
|
|
|
+ color: '#ef7a30',
|
|
|
+ }" :show-icon="true"
|
|
|
+ :description="'【充电SOC限制】为保障充电安全，并积极响应主管部门对新能源汽车充电安全工作，从即日起，该站充电设施SOC上限阈值为'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%，即充电量达到满充电量'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%时，充电设施将自动结束充电。'">
|
|
|
+
|
|
|
+ </u-alert-tips>
|
|
|
+ <u-notice-bar mode="vertical" font-size="36" :more-icon="true" @click="noticeShow=true"
|
|
|
+ v-show="!noticeShow&&stationDetail.station&&stationDetail.station.maxSoc&&stationDetail.station.maxSoc!=100"
|
|
|
+ :list="['【充电SOC限制】为保障充电安全，并积极响应主管部门对新能源汽车充电安全工作，从即日起，该站充电设施SOC上限阈值为'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%，即充电量达到满充电量'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%时，充电设施将自动结束充电。']">
|
|
|
+ </u-notice-bar>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="head" v-if="stationDetail.station!=null">
|
|
|
+ <img @click="previewImage(stationDetail.station.image)" :src="stationDetail.station.image" mode=""></img>
|
|
|
+ </view>
|
|
|
+ <!-- 站点详情 -->
|
|
|
<view class="stationDetail">
|
|
|
- <!-- 标题 -->
|
|
|
- <view class="title">
|
|
|
- 江津路荆鹏软件园充电站
|
|
|
- </view>
|
|
|
- <!-- 标签 -->
|
|
|
- <view class="tags">
|
|
|
- <view class="tag1">
|
|
|
- 会员服务费8.5折
|
|
|
- </view>
|
|
|
- <view class="tag2">
|
|
|
- 月卡
|
|
|
- </view>
|
|
|
- <view class="tag2">
|
|
|
- 服务费代金券
|
|
|
- </view>
|
|
|
- <view class="tag2">
|
|
|
- 超级代金券
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <u-line color="#EEF2F0" margin="24rpx 0"></u-line>
|
|
|
+ <view class="stationDetailHead">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="title">
|
|
|
+ {{stationDetail.station.name}}
|
|
|
+ </view>
|
|
|
+ <!-- 标签 -->
|
|
|
+ <view class="tags sign">
|
|
|
+ <view class="tags1 sign-1"
|
|
|
+ v-if="station.giveDiscount&&station.discountRatio&&station.discountRatio!=100">
|
|
|
+ 会员服务费{{discountRatio10(station.discountRatio)}}折</view>
|
|
|
+
|
|
|
+ <view class="tags1 sign-3" v-if="station.category=='超充'">160kW超充站</view>
|
|
|
+ <view class="tags1 sign-4" v-if="stationDetail.station.nightLowPriceEnabled">
|
|
|
+ 夜间超低价</view>
|
|
|
+
|
|
|
+ <view class="tags1 sign-2" v-if="stationDetail.station.tagList.length != 0"
|
|
|
+ v-for="(tagName,tagIndex) in stationDetail.station.tagList" :key="tagIndex">{{tagName}}</view>
|
|
|
+ </view>
|
|
|
+ <u-line color="#EEF2F0" margin="24rpx 0"></u-line>
|
|
|
<!-- 定位 -->
|
|
|
- <view class="position" v-for="item in 2">
|
|
|
- <view class="block">
|
|
|
- A区
|
|
|
- </view>
|
|
|
- <view class="address">
|
|
|
- 荆州市沙市区江津东路附155号荆鹏软件园院内地面停车场
|
|
|
- </view>
|
|
|
- <view class="distance">
|
|
|
- <view class="distance-icon">
|
|
|
- <img src="../../../assets/img/riFill-navigation-fill@1x.png" alt="">
|
|
|
- </view>
|
|
|
- <view class="distance-text">
|
|
|
- 小于100米
|
|
|
- </view>
|
|
|
+ <template v-if="stationDetail&&stationAddressList&&stationAddressList.length" >
|
|
|
+
|
|
|
+
|
|
|
+ <view class="position" v-for="(item ,i) in stationAddressList" :key="i" >
|
|
|
+
|
|
|
+ <view class="block">
|
|
|
+ {{item.areaTitle}}
|
|
|
+ </view>
|
|
|
+ <view class="address">
|
|
|
+ {{item.address}}
|
|
|
+ </view>
|
|
|
+ <view class="distance" @click="map(item)" >
|
|
|
+ <view class="distance-icon">
|
|
|
+ <img src="../../../assets/img/riFill-navigation-fill@1x.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="distance-text">
|
|
|
+ {{item.distance!=null&&item.distance>0.1 ? item.distance.toFixed(1)+'公里':'小于100米'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- 充电桩类型 -->
|
|
|
- <view class="type">
|
|
|
- <view class="type-box" :class="{'checked':flag===true}" @click="changeFlag()">
|
|
|
- <view class="box-top">
|
|
|
- <view class="fast">
|
|
|
- 快
|
|
|
- </view>
|
|
|
- <view class="pile-type">
|
|
|
- 直流快充
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
+ <view class="position" v-else >
|
|
|
+
|
|
|
+ <view class="address">
|
|
|
+ {{stationDetail.station.address}}
|
|
|
</view>
|
|
|
- <view class="pile-amount">
|
|
|
- <view class="free">
|
|
|
- 0空闲
|
|
|
+ <view class="distance" @click="map()" >
|
|
|
+ <view class="distance-icon">
|
|
|
+ <img src="../../../assets/img/riFill-navigation-fill@1x.png" alt="">
|
|
|
</view>
|
|
|
- <view class="cut">
|
|
|
- |
|
|
|
- </view>
|
|
|
- <view class="sum">
|
|
|
- 4总
|
|
|
+ <view class="distance-text" v-if="stationDetail.station.distance">
|
|
|
+ {{stationDetail.station.distance!=null&&stationDetail.station.distance>0.1 ? stationDetail.station.distance.toFixed(1)+'公里':'小于100米'}}
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 尖角 -->
|
|
|
- <view class="angle" v-if="flag">
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
</view>
|
|
|
- <view class="type-box" :class="{'checked':flag===true}" @click="changeFlag()">
|
|
|
+ </view>
|
|
|
+ <view class="stationDetailBody">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 充电桩类型 -->
|
|
|
+ <view class="type" v-if="numShowBl">
|
|
|
+ <view class="type-box"
|
|
|
+ v-if="stationDetail.station.superNum"
|
|
|
+ :class="{
|
|
|
+ 'checked':flag===true,
|
|
|
+ numShowview2:(stationDetail.station.superNum==0||stationDetail.station.slowNum==0||stationDetail.station.fastNum-stationDetail.station.superNum==0)
|
|
|
+ }"
|
|
|
+ @click="changeFlag()">
|
|
|
<view class="box-top">
|
|
|
- <view class="slow">
|
|
|
- 慢
|
|
|
+ <view class="super">
|
|
|
+ 超
|
|
|
</view>
|
|
|
<view class="pile-type">
|
|
|
- 交流慢充
|
|
|
+ 直流超充
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pile-amount">
|
|
|
- <view class="free">
|
|
|
- 0空闲
|
|
|
+ <view class="super">
|
|
|
+ {{stationDetail.station.superAvailableNum}}空闲
|
|
|
</view>
|
|
|
<view class="cut">
|
|
|
|
|
|
|
</view>
|
|
|
<view class="sum">
|
|
|
- 4总
|
|
|
+ {{stationDetail.station.superNum}}总
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 尖角 -->
|
|
|
<view class="angle" v-if="flag">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- 充电桩状态 -->
|
|
|
- <view class="pile-state">
|
|
|
- <!-- 总计 -->
|
|
|
- <view class="statistics">
|
|
|
- <view class="free">
|
|
|
- 2 空闲
|
|
|
- </view>
|
|
|
- <view class="cut">
|
|
|
- |
|
|
|
- </view>
|
|
|
- <view class="busy">
|
|
|
- 1 占用
|
|
|
- </view>
|
|
|
- <view class="cut">
|
|
|
- |
|
|
|
- </view>
|
|
|
- <view class="malfunction">
|
|
|
- 1故障
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 充电枪详情 -->
|
|
|
- <view class="gun-details">
|
|
|
- <view class="item" v-for="item in 2">
|
|
|
- <!-- 充电桩状态 -->
|
|
|
- <view class="state">
|
|
|
- <view class="state-icon">
|
|
|
- <img src="../../../assets/img/pileIcon.png" alt="">
|
|
|
- </view>
|
|
|
- <view class="state-text">
|
|
|
- 空闲中
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 详细信息 -->
|
|
|
- <view class="infos">
|
|
|
- <view class="gun-name">
|
|
|
- 1号<text>/</text>1#桩枪1
|
|
|
- </view>
|
|
|
- <view class="else">
|
|
|
- <view class="gun-type">
|
|
|
- 直流快充
|
|
|
- </view>|
|
|
|
- <view class="voltage">
|
|
|
- 80kW
|
|
|
- </view>
|
|
|
- <view class="more">
|
|
|
- <u-icon name="arrow-down" color="#999999" size="12"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 充电按钮 -->
|
|
|
- <view class="charge">
|
|
|
- 充电
|
|
|
- </view>
|
|
|
</view>
|
|
|
- <!-- 充电中 -->
|
|
|
- <view class="item">
|
|
|
- <!-- 充电桩状态 -->
|
|
|
- <view class="state charging">
|
|
|
- <view class="state-icon">
|
|
|
- <img src="../../../assets/img/pileIcon.png" alt="">
|
|
|
- </view>
|
|
|
- <view class="state-text">
|
|
|
- 充电中
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 详细信息 -->
|
|
|
- <view class="infos">
|
|
|
- <view class="gun-name">
|
|
|
- 1号<text>/</text>1#桩枪1
|
|
|
- </view>
|
|
|
- <view class="else">
|
|
|
- <view class="gun-type">
|
|
|
- 直流快充
|
|
|
- </view>|
|
|
|
- <view class="voltage">
|
|
|
- 80kW
|
|
|
- </view>
|
|
|
- <view class="more">
|
|
|
- <u-icon name="arrow-down" color="#999999" size="12"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 电量 -->
|
|
|
- <view class="electric-quantity">
|
|
|
- <img src="../../../assets/img/electricQuantity.png" alt="">
|
|
|
- <view class="percentage">
|
|
|
- 50%
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="type-box"
|
|
|
+ v-if="stationDetail.station.fastNum-stationDetail.station.superNum"
|
|
|
+ :class="{
|
|
|
+ 'checked':flag===true,
|
|
|
+ numShowview2:(stationDetail.station.superNum==0||stationDetail.station.slowNum==0||stationDetail.station.fastNum-stationDetail.station.superNum==0),
|
|
|
+ numShowviewleft:stationDetail.station.slowNum
|
|
|
+ }"
|
|
|
+ @click="changeFlag()">
|
|
|
+ <view class="box-top">
|
|
|
+ <view class="fast">
|
|
|
+ 快
|
|
|
+ </view>
|
|
|
+ <view class="pile-type">
|
|
|
+ 直流快充
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pile-amount">
|
|
|
+ <view class="fast">
|
|
|
+ {{stationDetail.station.fastAvailableNum-stationDetail.station.superAvailableNum}}空闲
|
|
|
+ </view>
|
|
|
+ <view class="cut">
|
|
|
+ |
|
|
|
+ </view>
|
|
|
+ <view class="sum">
|
|
|
+ {{stationDetail.station.fastNum-stationDetail.station.superNum}}总
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 尖角 -->
|
|
|
+ <view class="angle" v-if="flag">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="type-box"
|
|
|
+ v-if="stationDetail.station.slowNum"
|
|
|
+ :class="{
|
|
|
+ numShowview2:(stationDetail.station.superNum==0||stationDetail.station.slowNum==0||stationDetail.station.fastNum-stationDetail.station.superNum==0)
|
|
|
+ }"
|
|
|
+ @click="changeFlag()">
|
|
|
+ <view class="box-top">
|
|
|
+ <view class="slow">
|
|
|
+ 慢
|
|
|
+ </view>
|
|
|
+ <view class="pile-type">
|
|
|
+ 交流慢充
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pile-amount">
|
|
|
+ <view class="free">
|
|
|
+ {{stationDetail.station.slowAvailableNum}}空闲
|
|
|
+ </view>
|
|
|
+ <view class="cut">
|
|
|
+ |
|
|
|
+ </view>
|
|
|
+ <view class="sum">
|
|
|
+ {{stationDetail.station.slowNum}}总
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 尖角 -->
|
|
|
+ <view class="angle" v-if="flag">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 充电桩状态 -->
|
|
|
+ <view class="pile-state" >
|
|
|
+ <!-- 总计 -->
|
|
|
+ <view class="statistics" >
|
|
|
+ <view class="free">
|
|
|
+ 2 空闲
|
|
|
+ </view>
|
|
|
+ <view class="cut">
|
|
|
+ |
|
|
|
+ </view>
|
|
|
+ <view class="busy">
|
|
|
+ 1 占用
|
|
|
+ </view>
|
|
|
+ <view class="cut">
|
|
|
+ |
|
|
|
+ </view>
|
|
|
+ <view class="malfunction">
|
|
|
+ 1故障
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 充电枪详情 -->
|
|
|
+ <view class="gun-details">
|
|
|
+ <view class="item" v-for="(item,index) in stationDetailDevices"
|
|
|
+
|
|
|
+
|
|
|
+ :key="index">
|
|
|
+ <view class="itemView">
|
|
|
+ <!-- 充电桩状态 -->
|
|
|
+ <view class="state" v-if="item.device.online" :class="{
|
|
|
+ //预约
|
|
|
+ 'charging a ':item.enableShare&&!item.enableShareWithinTime&&item.device.online,
|
|
|
+
|
|
|
+ 'charging b ':item.enableShare&&item.workStatus!=0,
|
|
|
+ 'charging c ':item.workStatus==2,
|
|
|
+ //插枪
|
|
|
+ 'charging d ':(item.workStatus == 0&&item.insertStatus&&stationDetail.station.stationType!=50),
|
|
|
+ 'off-line':item.isRed&&item.workStatus!=2,
|
|
|
+ }">
|
|
|
+ <view class="state-icon">
|
|
|
+ <img src="../../../assets/img/pileIcon.png" alt="">
|
|
|
</view>
|
|
|
+ <view class="state-text" v-if="item.workStatus == 0&&item.insertStatus&&stationDetail.station.stationType!=50">
|
|
|
+ 已插枪
|
|
|
+ </view>
|
|
|
+ <view class="state-text" v-else>
|
|
|
+ {{item.workStatusText}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- 离线 -->
|
|
|
- <view class="item">
|
|
|
- <!-- 充电桩状态 -->
|
|
|
- <view class="state ">
|
|
|
+ <view class="state off-line" v-else>
|
|
|
<view class="state-icon">
|
|
|
<img src="../../../assets/img/pileIcon.png" alt="">
|
|
|
</view>
|
|
|
@@ -206,611 +244,1421 @@
|
|
|
离线
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 详细信息 -->
|
|
|
- <view class="infos">
|
|
|
- <view class="gun-name">
|
|
|
- 1号<text>/</text>1#桩枪1
|
|
|
- </view>
|
|
|
- <view class="else">
|
|
|
- <view class="gun-type">
|
|
|
- 直流快充
|
|
|
- </view>|
|
|
|
- <view class="voltage">
|
|
|
- 80kW
|
|
|
- </view>
|
|
|
- <view class="more">
|
|
|
- <u-icon name="arrow-down" color="#999999" size="12"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+
|
|
|
+ <!-- 详细信息 -->
|
|
|
+ <view class="infos">
|
|
|
+ <view class="gun-name">
|
|
|
+ <span v-if="item.sortNo">{{item.sortNo}}号<text>/</text></span>{{item.device.name}}{{item.device.gunList.length>1?'枪'+item.channelNo:''}}
|
|
|
+ </view>
|
|
|
+ <view class="else">
|
|
|
+ <view class="gun-type" :class="{
|
|
|
+ colorCA9DFF:item.device.chargingType=='超充',
|
|
|
+ color185AC6:item.device.chargingType=='快充',
|
|
|
+ color00B962:item.device.chargingType=='慢充',
|
|
|
+ }">
|
|
|
+ {{item.device.interfaceType}}{{item.device.chargingType}}
|
|
|
+ </view>|
|
|
|
+ <view class="voltage">
|
|
|
+ {{item.device.chargingPower!=null?item.device.chargingPower+'kW':''}}
|
|
|
+ </view>
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-down" color="#999999" size="12"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 充电按钮 -->
|
|
|
- <view class="charge">
|
|
|
- 充电
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 价格信息 -->
|
|
|
- <view class="price-infos">
|
|
|
- <view class="title">
|
|
|
- 价格信息<text>（16:00-20:00）</text>
|
|
|
- </view>
|
|
|
- <view class="classify">
|
|
|
- <view class="item item-visitor">
|
|
|
- <view class="visitor">
|
|
|
- 游客价
|
|
|
- </view>
|
|
|
+
|
|
|
+ <template v-if="!item.isRed&&item.enableShare&&item.enableShareWithinTime&&item.device.online">
|
|
|
+ <!-- 充电按钮 -->
|
|
|
+ <view class="charge"
|
|
|
+ v-if="!enableAppointmentBl(item)"
|
|
|
+ @click="book(item,item.isAppointment&&!item.insertStatus)"
|
|
|
+ :class="item.isAppointment&&!item.insertStatus?'':'not-open-tag'"
|
|
|
+ >
|
|
|
+ 预约
|
|
|
+ </view>
|
|
|
+ <!-- 充电按钮 -->
|
|
|
+ <view class="charge"
|
|
|
+ :style="item.haveLock&&item.lockStatus==1?'background-color:#009ED7':''"
|
|
|
+ @click="book2(item,item.enableShare&&item.enableShareWithinTime)"
|
|
|
+ :class="{
|
|
|
+ 'not-open-tag':!(item.enableShare&&item.enableShareWithinTime),
|
|
|
+ 'not-enable-Appointment':enableAppointmentBl(item)
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ 充电
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- 电量 -->
|
|
|
+ <view class="electric-quantity" v-if="item.workStatus == 2 ">
|
|
|
+ <img src="../../../assets/img/electricQuantity.png" alt="">
|
|
|
+ <view class="percentage">
|
|
|
+ {{item.soc?item.soc+'%':'充电中'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 价格信息 -->
|
|
|
+ <view class="price-infos">
|
|
|
+ <view class="title">
|
|
|
+ 价格信息<text>（{{pricesInfoCurrent.startTime}}-{{pricesInfoCurrent.endTime}}）</text>
|
|
|
+ </view>
|
|
|
+ <view class="classify" v-if="!personInfo||personInfo.userType==1">
|
|
|
+ <view class="item item-visitor">
|
|
|
+ <view class="visitor">
|
|
|
+ 游客价
|
|
|
+ </view>
|
|
|
<view class="unit-price">
|
|
|
- <text>1.29</text>
|
|
|
- <text class="unit">元/度</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item item-member">
|
|
|
- <view class="visitor">
|
|
|
- 会员价
|
|
|
- </view>
|
|
|
+ <text>{{pricesInfoCurrent.servicePrice+pricesInfoCurrent.electricityPrice}}</text>
|
|
|
+
|
|
|
+ <text class="unit">元/度</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item item-member">
|
|
|
+ <view class="visitor">
|
|
|
+ 会员价
|
|
|
+ </view>
|
|
|
<view class="unit-price">
|
|
|
- <text>1.19</text>
|
|
|
- <text class="unit">元/度</text>
|
|
|
- <text class="register">注册</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 提示 -->
|
|
|
- <p class="hint">*该价格为含服务费价格，实际价格以扫码价格为准。</p>
|
|
|
- <!-- 表格 -->
|
|
|
- <view class="chat-box">
|
|
|
- <view class="chat-infos">
|
|
|
- <view class="item">
|
|
|
- <view class="name">
|
|
|
- <view class="icon icon1">
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 时段
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 14:00-20:00
|
|
|
- </view>
|
|
|
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="name">
|
|
|
- <view class="icon icon2">
|
|
|
-
|
|
|
- </view>
|
|
|
+ <text>{{pricesInfoCurrent.costPrice}}</text>
|
|
|
+
|
|
|
+ <text class="unit">元/度</text>
|
|
|
+ <text class="register" @click="gotoUrl('pages/login/login')">注册</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 提示 -->
|
|
|
+ <p class="hint">*该价格为含服务费价格，实际价格以扫码价格为准。</p>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <view class="chat-box">
|
|
|
+ <view class="chat-infos">
|
|
|
+ <view class="item">
|
|
|
+ <view class="name">
|
|
|
+ <view class="icon icon1">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 时段
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ {{pricesInfoCurrent.startTime}}-{{pricesInfoCurrent.endTime}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="name">
|
|
|
+ <view class="icon icon2">
|
|
|
+
|
|
|
+ </view>
|
|
|
<view class="text">
|
|
|
- 0.70元/度
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 14:00-20:00
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="name">
|
|
|
- <view class="icon icon3">
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 服务费
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 0.28元/度
|
|
|
- </view>
|
|
|
+ 电价
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ {{pricesInfoCurrent.electricityPrice.toFixed(2)}}元/度
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="name">
|
|
|
+ <view class="icon icon3">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 服务费
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ {{pricesInfoCurrent.servicePrice.toFixed(2)}}元/度
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="chat_hhh">
|
|
|
+ <view class="chatTime" v-for="(item,i) in pricesInfo"
|
|
|
+ :style="'width:'+getW(item)"
|
|
|
+ >
|
|
|
+ <span class="chats1" :style="'height:'+getH(item.servicePrice)">{{item.servicePrice}}</span>
|
|
|
+ <span class="chats2" :style="'height:'+getH(item.electricityPrice)">
|
|
|
+ <span>{{item.electricityPrice}}</span>
|
|
|
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="chat">
|
|
|
-
|
|
|
+ <span style="text-align: start;color: #9E9E9E;" v-if="i%2==0" >{{item.startTime}}</span>
|
|
|
+ </span>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 附加信息 -->
|
|
|
+ <view class="overhead-infos">
|
|
|
+ <view class="item" v-if="stationDetail.station.describe" >
|
|
|
+ <view class="title">
|
|
|
+ 营业时间
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ {{stationDetail.station.describe}}<text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-line margin="24rpx 0 " color="#F0F0F2"></u-line>
|
|
|
+ <view class="item" v-if="stationDetail.station.parkingDescription" >
|
|
|
+ <view class="title">
|
|
|
+ 停车费
|
|
|
+ </view>
|
|
|
+ <view class="value" @click="()=>{if(stationDetail.station.parkingSimpleDescription){parkingTips=true}}">
|
|
|
+ {{stationDetail.station.parkingDescription}}
|
|
|
+ <text v-if="stationDetail.station.parkingSimpleDescription" ><u-icon name="arrow-right" color="#999999" size="28"></u-icon></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</view>
|
|
|
+<u-modal v-model="parkingTips" title="新能源汽车停车费说明" :title-style="{fontSize: '40rpx'}" confirm-text="知道了"
|
|
|
+ confirm-color="#53b56b">
|
|
|
+ <view style="padding: 15px;" v-html="stationDetail.station.parkingSimpleDescription"></view>
|
|
|
+ </u-modal>
|
|
|
+ <u-modal v-model="show" confirm-text="去看空闲桩" cancel-text="查看处罚规则" confirm-color="#00B962">
|
|
|
+ <view class="" style="padding: 15px 20px;">
|
|
|
+ 因您近期存在预约超时未前往充电的违约行为，平台为保证每位车主的合理权益，
|
|
|
+ 对您作出停用预约充电功能1天的处罚。
|
|
|
+ 您可于<span style="color: #00b962;">2022年6月20日09时45分</span>后使用此功能。
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- 附加信息 -->
|
|
|
- <view class="overhead-infos">
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 营业时间
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 周一至周日全天开放<text><u-icon name="arrow-right" color="#999999" size="28"></u-icon></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <u-line margin="24rpx 0 " color="#F0F0F2"></u-line>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 停车费
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 2小时免费停车<text><u-icon name="arrow-right" color="#999999" size="28"></u-icon></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- flag: false
|
|
|
- }
|
|
|
- },
|
|
|
+ </u-modal>
|
|
|
+ <u-modal v-model="openModalBl" @confirm="confirmPhoneBl" confirm-text="拨打电话" confirm-color="#606266"
|
|
|
+ :show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="consumerPhone"
|
|
|
+ :content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as indexAPI from '@/apis/index.js'
|
|
|
+ import * as WxJsApi from '@/utils/wxJsApi.js'
|
|
|
+ import MapLoader from '@/utils/AMap'
|
|
|
+
|
|
|
+ import * as api from "@/apis/site.js"
|
|
|
+ let _self;
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ openModalBl: false,
|
|
|
+ showNt: false,
|
|
|
+ showNtStep: 0,
|
|
|
+ showNtValue: 30,
|
|
|
+ pricesInfoCurrent: null,
|
|
|
+ noticeShow: false,
|
|
|
+ parkingTips: false,
|
|
|
+ stationId: '',
|
|
|
+ pricesInfo: [],
|
|
|
+ devicesId: '',
|
|
|
+ elderMode: false,
|
|
|
+ userId: '',
|
|
|
+ show: false,
|
|
|
+ showtips: true,
|
|
|
+
|
|
|
+ list: [{
|
|
|
+ "name": "充电桩"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "价格说明"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ current: 0,
|
|
|
+ currentPos: {
|
|
|
+ /* name:'荆鹏软件园充电站',
|
|
|
+ longitude: 112.28468,
|
|
|
+ latitude: 30.307094,*/
|
|
|
+ },
|
|
|
+ stationAddressList: [],
|
|
|
+ station: {},
|
|
|
+ stationDetail: {
|
|
|
+
|
|
|
+ devices: [],
|
|
|
+ slowPrice: null,
|
|
|
+ station: {},
|
|
|
+ fastPrice: null
|
|
|
+
|
|
|
+ },
|
|
|
+ openlist: null,
|
|
|
+ personInfo: {},
|
|
|
+ info: {
|
|
|
+ station: {
|
|
|
+
|
|
|
+ time: '周一到周日 07:00~22:00(节假日除外)',
|
|
|
+ /* id:1,
|
|
|
+ name:'荆鹏软件园充电站',
|
|
|
+ longitude: 112.28468,
|
|
|
+ latitude: 30.307094,
|
|
|
+ type:'交流慢充',
|
|
|
+ distance:0.1,
|
|
|
+ address:'湖北省荆州市沙市区江津东路附155号'*/
|
|
|
+ },
|
|
|
+ prices: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ park: {
|
|
|
+ price: '2小时免费停车'
|
|
|
+ },
|
|
|
+ uuid: '',
|
|
|
+ setIntervalBool: true,
|
|
|
+ priceList: [],
|
|
|
+ platform: '',
|
|
|
+ personInfo: {},
|
|
|
+ consumerPhone: "",
|
|
|
+ devices: {
|
|
|
+ idleNum: 1,
|
|
|
+ total: 6,
|
|
|
+ items: [
|
|
|
+
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ flag: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad(op) {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ console.log("----------")
|
|
|
+ console.log(res.platform)
|
|
|
+ this.platform = res.platform
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _self = this;
|
|
|
+
|
|
|
+ // document.getElementsByTagName('body')[0].style.setProperty('--mode',1)
|
|
|
+
|
|
|
+ if (op.jg == '1') {
|
|
|
+ this.current = 1;
|
|
|
+ }
|
|
|
+ if (op != null) {
|
|
|
+
|
|
|
+ if (op.id != null && op.id != undefined) {
|
|
|
+ this.stationId = op.id;
|
|
|
+
|
|
|
+ this.getPriceList(op.id)
|
|
|
+
|
|
|
+ this.getChargingStationDetail()
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ this.setIntervalBool = false
|
|
|
+ if (this.uuid) {
|
|
|
+ clearInterval(this.uuid)
|
|
|
+ this.uuid = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.setIntervalBool = true
|
|
|
+ if (!this.uuid) {
|
|
|
+ this.uuid = setInterval(() => {
|
|
|
+ if (this.setIntervalBool) {
|
|
|
+ this.getChargingStationDetail(true)
|
|
|
+ }
|
|
|
+ }, 5 * 1000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ if (this.uuid) {
|
|
|
+ clearInterval(this.uuid)
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+
|
|
|
+ var consumerPhone = this.carhelp.getConfig().consumerPhone
|
|
|
+ // img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"
|
|
|
+ if (consumerPhone) {
|
|
|
+ this.consumerPhone = consumerPhone
|
|
|
+ }
|
|
|
+
|
|
|
+ this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
|
|
|
+
|
|
|
+ if (this.elderMode)
|
|
|
+ this.theme('elder')
|
|
|
+ else
|
|
|
+ this.theme('standard')
|
|
|
+
|
|
|
+ if (this.carhelp.getPersonInfo()) {
|
|
|
+ this.userId = this.carhelp.getPersonInfo().id;
|
|
|
+ this.personInfo = this.carhelp.getPersonInfo()
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ WxJsApi.getWxConfig(['getLocation', 'openLocation', 'addEventListener', 'scanQRCode']).then((res) => {
|
|
|
+ // //(res)
|
|
|
+ }).catch(error => {
|
|
|
+ //(res)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ numShowBl() {
|
|
|
+ //true tab false line
|
|
|
+
|
|
|
+ var superNum = this.stationDetail.station.superNum;
|
|
|
+
|
|
|
+ var fastNumZ = this.stationDetail.station.fastNum;
|
|
|
+ var fastNum = fastNumZ - superNum;
|
|
|
+
|
|
|
+ var slowNum = this.stationDetail.station.slowNum;
|
|
|
+ if (superNum && fastNum == 0 && slowNum == 0) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (fastNum && superNum == 0 && slowNum == 0) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (slowNum && fastNum == 0 && superNum == 0) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ stationDetailDevices() {
|
|
|
+ var sz = [];
|
|
|
+ for (var i in this.stationDetail.devices) {
|
|
|
+ var item = this.stationDetail.devices[i]
|
|
|
+ for (var j in item.gunList) {
|
|
|
+ var gun = item.gunList[j]
|
|
|
+ gun.device = item;
|
|
|
+
|
|
|
+ sz.push(gun);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ sz = sz.sort(function(it1, it2) {
|
|
|
+ var i = 1;
|
|
|
+ if (it1.device.online) {
|
|
|
+ i = 1
|
|
|
+ }
|
|
|
+ if (it1.enableShare && !it1.enableShareWithinTime) {
|
|
|
+ i = 1
|
|
|
+ }
|
|
|
+ i = it1.workStatus == 0 ? -1 : 1
|
|
|
+ if (it2.workStatus == 0) {
|
|
|
+ i = 1
|
|
|
+ }
|
|
|
+ if (!it2.enableShare || it2.enableShare && !it2.enableShareWithinTime) {
|
|
|
+ i = -1
|
|
|
+ }
|
|
|
+ //console.log(it1,i)
|
|
|
+ return i
|
|
|
+ })
|
|
|
+
|
|
|
+ return sz
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
- changeFlag() {
|
|
|
- this.flag = !this.flag
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- page {
|
|
|
- background-color: #F2F2F2;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .head {
|
|
|
- width: 100%;
|
|
|
- height: 360rpx;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 站点详情
|
|
|
- .stationDetail {
|
|
|
- border-radius: 24rpx 24rpx 0px 0px;
|
|
|
- background-color: #F2F2F2;
|
|
|
- // background: linear-gradient(180deg, rgba(255,255,255,1) 59%,rgba(255,255,255,0) 100%);
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- margin-top: -48rpx;
|
|
|
- color: #101010;
|
|
|
- z-index: 999;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
-padding-bottom: 100rpx;
|
|
|
- // 标题
|
|
|
- .title {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: bold;
|
|
|
+ getH(item){
|
|
|
+
|
|
|
+ return item*100+'px'
|
|
|
+ },
|
|
|
+ getW(item){
|
|
|
+ var t1=item.endTime.substring(0,2)
|
|
|
+ var t2=item.startTime.substring(0,2)
|
|
|
+ var k=parseInt(t1)-parseInt(t2);
|
|
|
+ return 100/24*k+"%"
|
|
|
+ },
|
|
|
+ changeFlag() {
|
|
|
+ this.flag = !this.flag
|
|
|
+ },
|
|
|
+ enableAppointmentBl(item) {
|
|
|
+ return !item.enableAppointment || !(item.reserveWeekSettingList && item.reserveWeekSettingList.length);
|
|
|
+ },
|
|
|
+ confirmPhoneBl() {
|
|
|
+ this.openModalBl = false;
|
|
|
+
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.consumerPhone //仅为示例
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ confirmPhone() {
|
|
|
+
|
|
|
+ if (this.stationDetail.station && this.stationDetail.station.contactPhone) {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.stationDetail.station.contactPhone //仅为示例
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getChargingStationDetail(bl) {
|
|
|
+ if (!this.stationId) {
|
|
|
+
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ var _self = this;
|
|
|
+ if (!bl) {
|
|
|
+ uni.showLoading({
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ let data = {
|
|
|
+ stationId: this.stationId
|
|
|
+ };
|
|
|
+ var distance = null;
|
|
|
+ if (bl && this.stationDetail && this.stationDetail.station) {
|
|
|
+ distance = this.stationDetail.station.distance
|
|
|
+ //防止重新获取定位
|
|
|
+ }
|
|
|
+
|
|
|
+ api.getChargingStationDetail(data).then(function(res) {
|
|
|
+ uni.hideLoading()
|
|
|
+
|
|
|
+ if (res && res.result && res.data) {
|
|
|
+
|
|
|
+ let data = res.data;
|
|
|
+
|
|
|
+ _self.stationDetail = data;
|
|
|
+ console.log(data)
|
|
|
+ if (_self.stationDetail.station.contactPhone) {
|
|
|
+ _self.consumerPhone = _self.stationDetail.station.contactPhone
|
|
|
+ }
|
|
|
+
|
|
|
+ if (_self.stationAddressList.length == 0) {
|
|
|
+ _self.stationAddressList = _self.stationDetail.stationAddressList
|
|
|
+ }
|
|
|
+
|
|
|
+ if (_self.stationDetail.station.parkingDescription != null && _self.stationDetail.station
|
|
|
+ .parkingSimpleDescription != null) {
|
|
|
+ var tagList = _self.stationDetail.station.tagList;
|
|
|
+ for (var i = 0; i < tagList.length; i++) {
|
|
|
+ if (tagList[i] == _self.stationDetail.station.parkingDescription) {
|
|
|
+ tagList.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _self.stationDetail.station.tagList = tagList;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (distance) {
|
|
|
+ _self.stationDetail.station.distance = distance
|
|
|
+ }
|
|
|
+ var totalNum = 0;
|
|
|
+ // _self.stationDetail.station.chargingType1=0;
|
|
|
+ // _self.stationDetail.station.chargingType2=0;
|
|
|
+ // _self.stationDetail.station.chargingType3=0;
|
|
|
+
|
|
|
+ // _self.stationDetail.station.chargingType1run=0;
|
|
|
+ // _self.stationDetail.station.chargingType2run=0;
|
|
|
+ // _self.stationDetail.station.chargingType3run=0;
|
|
|
+ // for(var i in _self.stationDetail.devices ){
|
|
|
+ // var device=_self.stationDetail.devices[i]
|
|
|
+ // var keyset="";
|
|
|
+ // if(device.chargingType=='超充'){
|
|
|
+ // keyset="chargingType1";
|
|
|
+ // }
|
|
|
+ // if(device.chargingType=='快充'){
|
|
|
+ // keyset="chargingType2";
|
|
|
+ // }
|
|
|
+ // if(device.chargingType=='慢充'){
|
|
|
+ // keyset="chargingType3";
|
|
|
+ // }
|
|
|
+ // for (let j = 0; j < device.gunList.length; j++) {
|
|
|
+
|
|
|
+ // if(device.gunList[j].workStatus==0){
|
|
|
+ // _self.stationDetail.station[keyset+"run"]++;
|
|
|
+ // }
|
|
|
+ // _self.stationDetail.station[keyset]++;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ if (_self.openlist == null) {
|
|
|
+ _self.openlist = new Map();
|
|
|
+
|
|
|
+
|
|
|
+ for (var i in _self.stationDetail.devices) {
|
|
|
+ var device = _self.stationDetail.devices[i]
|
|
|
+ totalNum += device.gunList.length
|
|
|
+ for (let j = 0; j < device.gunList.length; j++) {
|
|
|
+
|
|
|
+ _self.openlist.set(device.gunList[j].id, false);
|
|
|
+ }
|
|
|
+ console.log(_self.stationDetail.station)
|
|
|
+
|
|
|
+ }
|
|
|
+ _self.list[0].name = "充电桩(" + totalNum + ")"
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if (_self.stationDetail.station.distance == null && !bl) {
|
|
|
+ _self.getPoint();
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setOpen(item) {
|
|
|
+
|
|
|
+ var obj = this.openlist.get(item.id)
|
|
|
+ if (obj) {
|
|
|
+ obj = false;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ obj = true
|
|
|
+ }
|
|
|
+ this.openlist.set(item.id, obj)
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+
|
|
|
+ change(index) {
|
|
|
+ this.current = index;
|
|
|
+ this.items = this.list[index].items;
|
|
|
+ },
|
|
|
+ previewImage(img) {
|
|
|
+ let imgs = [];
|
|
|
+ imgs.push(img);
|
|
|
+ uni.previewImage({
|
|
|
+ urls: imgs,
|
|
|
+ current: 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ book2(item, bl) {
|
|
|
+ if (bl) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id=' + item.gunNo,
|
|
|
+ })
|
|
|
+ ////('book'+JSON.stringify(item))
|
|
|
+ },
|
|
|
+ book(item, bl) {
|
|
|
+ if (bl) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '当前设备不可预约'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/searchPile/apointment/apointmentRecharge?id=' + item.gunNo,
|
|
|
+ })
|
|
|
+ ////('book'+JSON.stringify(item))
|
|
|
+ },
|
|
|
+ getPoint() {
|
|
|
+
|
|
|
+ // //('getPoint')
|
|
|
+ WxJsApi.getLocation().then((res) => {
|
|
|
+
|
|
|
+ var latitude = parseFloat(res.latitude);
|
|
|
+ var longitude = parseFloat(res.longitude);
|
|
|
+ var startLngLat = {
|
|
|
+ longitude: longitude,
|
|
|
+ latitude: latitude
|
|
|
+ };
|
|
|
+ var endLngLat = {
|
|
|
+ longitude: _self.stationDetail.station.longitude,
|
|
|
+ latitude: _self.stationDetail.station.latitude
|
|
|
+ };
|
|
|
+ _self.calculateDistance(startLngLat, endLngLat);
|
|
|
+ _self.calculateDistanceList(startLngLat)
|
|
|
+ /*uni.showToast({
|
|
|
+ title:'getPoint'+JSON.stringify(res)
|
|
|
+ })*/
|
|
|
+ ////('当前位置' +JSON.stringify(data))
|
|
|
+
|
|
|
+ //this.latitude2 = latitude;
|
|
|
+ //this.longitude2 = longitude;
|
|
|
+ /*uni.showToast({
|
|
|
+ title:JSON.stringify(res)
|
|
|
+ })*/
|
|
|
+ //this.message=JSON.stringify(res)
|
|
|
+ }).catch(error => {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: error //'getPoint'+JSON.stringify()
|
|
|
+ // })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ calculateDistanceList(startLngLat) {
|
|
|
+ if (_self.stationDetail && _self.stationDetail.stationAddressList && _self.stationDetail.stationAddressList
|
|
|
+ .length) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var list = _self.stationDetail.stationAddressList;
|
|
|
+ MapLoader().then(AMap1 => {
|
|
|
+
|
|
|
+ for (var i in list) {
|
|
|
+ var endLngLat = list[i]
|
|
|
+ var lnglat = new AMap.LngLat(startLngLat.longitude, startLngLat.latitude);
|
|
|
+ var myDistance = lnglat.distance([endLngLat.longitude, endLngLat.latitude]);
|
|
|
+
|
|
|
+ endLngLat.distance = myDistance / 1000;
|
|
|
+ endLngLat.time = myDistance / 500;
|
|
|
+ }
|
|
|
+ _self.stationAddressList = list;
|
|
|
+ _self.$forceUpdate()
|
|
|
+ console.log("11111111111111")
|
|
|
+ console.log(_self.stationDetail.stationAddressList)
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ calculateDistance(startLngLat, endLngLat) {
|
|
|
+ var _this = this;
|
|
|
+ //直线距离
|
|
|
+ MapLoader().then(AMap1 => {
|
|
|
+ var lnglat = new AMap.LngLat(startLngLat.longitude, startLngLat.latitude);
|
|
|
+ var myDistance = lnglat.distance([endLngLat.longitude, endLngLat.latitude]);
|
|
|
+ _self.stationDetail.station.distance = myDistance / 1000;
|
|
|
+ _self.stationDetail.station.time = myDistance / 500;
|
|
|
+ })
|
|
|
+
|
|
|
+ //
|
|
|
+ return
|
|
|
+ //驾车距离
|
|
|
+ var _this = this;
|
|
|
+ MapLoader().then(AMap1 => {
|
|
|
+
|
|
|
+ this.AMap = AMap;
|
|
|
+
|
|
|
+ var map = new AMap.Map("container", {
|
|
|
+ center: [116.397559, 39.89621],
|
|
|
+ zoom: 14
|
|
|
+ });
|
|
|
+ var lnglat = new AMap.LngLat(117.186602, 34.261579);
|
|
|
+
|
|
|
+ //AMap.Walking
|
|
|
+ AMap.plugin('AMap.Driving', function() {
|
|
|
+ var driving = new AMap.Driving({
|
|
|
+ // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
|
|
+ policy: AMap.DrivingPolicy.LEAST_TIME
|
|
|
+ })
|
|
|
+
|
|
|
+ //var startLngLat = [116.379028, 39.865042]
|
|
|
+ //var endLngLat = [116.427281, 39.903719]
|
|
|
+ var startLngLat2 = [startLngLat.longitude, startLngLat.latitude]
|
|
|
+ var endLngLat2 = [endLngLat.longitude, endLngLat.latitude]
|
|
|
+
|
|
|
+
|
|
|
+ driving.search(startLngLat2, endLngLat2, function(status, result) {
|
|
|
+ //(result)
|
|
|
+ //(result.routes[0].time)//秒
|
|
|
+ //(result.routes[0].distance)//米
|
|
|
+ _self.stationDetail.station.distance = result.routes[0].distance /
|
|
|
+ 1000;
|
|
|
+ _self.stationDetail.station.time = result.routes[0].time / 60;
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }, e => {
|
|
|
+ //_this.mui.toast('地图加载失败');
|
|
|
+ //('地图加载失败', e)
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getScanCode() {
|
|
|
+
|
|
|
+ WxJsApi.scanQRCode(1).then(res => {
|
|
|
+ if (res) {
|
|
|
+ indexAPI.scanCode(res).then((response) => {
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ getPriceList(id) {
|
|
|
+ var formatNum = function(num) {
|
|
|
+ let res = Number(num);
|
|
|
+ return res < 10 ? '0' + res : res;
|
|
|
+ };
|
|
|
+ let data = {
|
|
|
+ stationId: id
|
|
|
+ };
|
|
|
+ api.getChargingStationPrice(data).then((res) => {
|
|
|
+
|
|
|
+ if (res.data.prices.length) {
|
|
|
+
|
|
|
+ let date = new Date();
|
|
|
+ this.station = res.data.chargingStation
|
|
|
+ let hours = date.getHours();
|
|
|
+ let minutes = date.getMinutes();
|
|
|
+ let seconds = date.getSeconds();
|
|
|
+ let date_str = formatNum(hours) + ':' + formatNum(minutes); //+ ' ' +formatWeek;
|
|
|
+
|
|
|
+
|
|
|
+ this.pricesInfo = res.data.prices[0].priceList
|
|
|
+ console.log(this.pricesInfo)
|
|
|
+
|
|
|
+ for (var i in this.pricesInfo) {
|
|
|
+ var obj = this.pricesInfo[i]
|
|
|
+
|
|
|
+ if (date_str >= obj.startTime && date_str <= obj.endTime) {
|
|
|
+ obj.current = true;
|
|
|
+ this.pricesInfoCurrent = obj
|
|
|
+ if (obj.electricityPrice == 0 || this.station.stationType == 50) {
|
|
|
+ this.showtips = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ navigate(item) {
|
|
|
+ if (item) {
|
|
|
+ if (item.areaTitle) {
|
|
|
+ item.name = _self.stationDetail.station.name
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ item = _self.stationDetail.station
|
|
|
+ }
|
|
|
+ console.log(item)
|
|
|
+ uni.showLoading({
|
|
|
+
|
|
|
+ })
|
|
|
+ WxJsApi.openLocation({
|
|
|
+ latitude: parseFloat(item.latitude), //目的地latitude
|
|
|
+ longitude: parseFloat(item.longitude), //目的地longitude
|
|
|
+ name: item.name,
|
|
|
+ address: item.address,
|
|
|
+ scale: 15, //地图缩放大小，可根据情况具体调整
|
|
|
+ success(res) {
|
|
|
+ uni.hideLoading()
|
|
|
+ },
|
|
|
+ complete() {
|
|
|
+ // uni.hideLoading()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // //('station'+JSON.stringify(_self.stationDetail.station))
|
|
|
+ // window.location.href = "https://uri.amap.com/marker?position=" + _self.stationDetail.station.longitude +
|
|
|
+ // "," + _self.stationDetail.station.latitude + "&name=" + _self.stationDetail.station.name;
|
|
|
+
|
|
|
+ },
|
|
|
+ charge() {
|
|
|
+ //('扫码充电')
|
|
|
+ //#ifdef MP-WEIXIN
|
|
|
+ uni.scanCode({
|
|
|
+ success: function(res) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'chargingPileDetails?pile=' + encodeURIComponent(JSON.stringify(data))
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ //#endif
|
|
|
+
|
|
|
+ //('扫码充电1')
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'chargingPileDetails'
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ priceDetail(t, id) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'chargePriceDetails?stationId=' + _self.stationDetail.station.id + "&type=" + t + "&id=" +
|
|
|
+ id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ map(item) {
|
|
|
+ this.navigate(item)
|
|
|
+ //var item= _self.stationDetail.station
|
|
|
+ //window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;
|
|
|
+
|
|
|
+ // //('map'+JSON.stringify(_self.station))
|
|
|
+ // _self.station.address = 'xxxxxxxxxxxxx'
|
|
|
+ // //this.carhelp.set(_self.stationDetail.station.id,_self.station);
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: 'stationDetailsMap?stationId=' + _self.stationDetail.station.id
|
|
|
+ // //url:'stationDetailsMap?station='+encodeURIComponent(JSON.stringify(_self.station))
|
|
|
+
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ theme(type) {
|
|
|
+ if (type == 'elder') {
|
|
|
+ document.getElementsByTagName('body')[0].setAttribute('data-theme', type);
|
|
|
+
|
|
|
+ } else {
|
|
|
+ document.getElementsByTagName('body')[0].setAttribute('data-theme', type);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ background-color: #F2F2F2;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .head {
|
|
|
+ width: 100%;
|
|
|
+ height: 360rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 站点详情
|
|
|
+ .stationDetail {
|
|
|
+
|
|
|
+ background-color: #F2F2F2;
|
|
|
+ // background: linear-gradient(180deg, rgba(255,255,255,1) 59%,rgba(255,255,255,0) 100%);
|
|
|
+ border-radius: 24rpx 24rpx 0px 0px;
|
|
|
+ margin-top: -48rpx;
|
|
|
+ color: #101010;
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ .stationDetailHead{
|
|
|
+ border-radius: 24rpx 24rpx 0px 0px;
|
|
|
+ background-color: #FFF;
|
|
|
+ padding: 24rpx 32rpx 12rpx 32rpx;
|
|
|
}
|
|
|
-
|
|
|
- // 标签
|
|
|
- .tags {
|
|
|
- display: flex;
|
|
|
- margin-top: 8rpx;
|
|
|
-
|
|
|
- .tag1 {
|
|
|
- border: 1px solid rgba(255, 139, 0, 1);
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- border-radius: 4px;
|
|
|
- color: rgba(255, 139, 0, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- text-align: center;
|
|
|
- padding: 0 8rpx;
|
|
|
+ .stationDetailBody{
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ }
|
|
|
+ // 标题
|
|
|
+ .title {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 标签
|
|
|
+ .tags {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .tags1 {
|
|
|
+ //border: 1px solid rgba(255, 139, 0, 1);
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ //color: rgba(255, 139, 0, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 8rpx 0 8rpx;
|
|
|
margin-right: 16rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .sign-1 {
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: rgba(255, 139, 0, 100);
|
|
|
+ border: 1px solid rgba(255, 139, 0, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-3 {
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: #8161FF;
|
|
|
+ border: 1px solid #8161FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-4 {
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: #00B962;
|
|
|
+ border: 1px solid #00B962;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sign-2 {
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ border: 1px solid rgba(204, 204, 204, 100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 定位
|
|
|
+ .position {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ .block {
|
|
|
+ width: 88rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(0, 185, 98, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 22rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ width: 460rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .distance {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .distance-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: rgba(0, 185, 98, 1);
|
|
|
+ border-radius: 999px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .distance-text {
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 充电桩类型
|
|
|
+ .type {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .checked {
|
|
|
+ background-color: rgba(20, 23, 43, 1) !important;
|
|
|
+
|
|
|
+ .pile-type {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cut {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .numShowview{
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
-
|
|
|
- .tag2 {
|
|
|
- border: 1px solid rgba(204, 204, 204, 1);
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- border-radius: 4px;
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- text-align: center;
|
|
|
- padding: 0 8rpx;
|
|
|
- margin-right: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 定位
|
|
|
- .position {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 24rpx;
|
|
|
-
|
|
|
- .block {
|
|
|
- width: 88rpx;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(0, 185, 98, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 22rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .address {
|
|
|
- width: 460rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .distance {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .distance-icon {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background-color: rgba(0, 185, 98, 1);
|
|
|
- border-radius: 999px;
|
|
|
- }
|
|
|
-
|
|
|
- .distance-text {
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- margin-top: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 充电桩类型
|
|
|
- .type {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .checked {
|
|
|
- background-color: rgba(20, 23, 43, 1) !important;
|
|
|
-
|
|
|
- .pile-type {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
-
|
|
|
- .cut {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .type-box {
|
|
|
- width: 334rpx;
|
|
|
- padding: 16rpx 84rpx;
|
|
|
- border-radius: 8px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .box-top {
|
|
|
- display: flex;
|
|
|
+ .numShowview2{
|
|
|
+ width: 49% !important;
|
|
|
+ }
|
|
|
+ .type-box {
|
|
|
+ //width: 334rpx;
|
|
|
+ //padding: 16rpx 84rpx;
|
|
|
+ width: 32%;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .box-top {
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
-
|
|
|
- .fast {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(22, 119, 255, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 24rpx
|
|
|
- }
|
|
|
-
|
|
|
- .slow {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
+ justify-content: center;
|
|
|
+ .super,.fast,.slow{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(0, 185, 98, 1);
|
|
|
+ border-radius: 8rpx;
|
|
|
+
|
|
|
color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 24rpx
|
|
|
- }
|
|
|
-
|
|
|
- .pile-type {
|
|
|
- color: #333333;
|
|
|
- font-size: 32rpx;
|
|
|
- margin-left: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pile-amount {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .free {
|
|
|
- color: rgba(0, 255, 135, 1);
|
|
|
+ font-size: 20rpx
|
|
|
+ }
|
|
|
+ .super{
|
|
|
+ background-color: #8161FF;
|
|
|
+ }
|
|
|
+ .fast {
|
|
|
+ background-color: #1677FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slow {
|
|
|
+ background-color: #00B962;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pile-type {
|
|
|
+ color: #303133;
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pile-amount {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .super{
|
|
|
+ color:#8161FF;
|
|
|
+
|
|
|
margin-right: 8rpx;
|
|
|
}
|
|
|
-
|
|
|
- .sum {
|
|
|
- color: #B6BBB8;
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 尖角
|
|
|
- .angle {
|
|
|
- position: absolute;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- display: inline-block;
|
|
|
- border-top: 16rpx solid #000000;
|
|
|
- border-left: 16rpx solid transparent;
|
|
|
- border-right: 16rpx solid transparent;
|
|
|
- bottom: -16rpx;
|
|
|
- left: 167rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // 充电桩状态
|
|
|
- .pile-state {
|
|
|
- border-radius: 8px 8px 0 0 ;
|
|
|
- margin-top: 32rpx;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- padding: 24rpx;
|
|
|
-
|
|
|
- // 总计
|
|
|
- .statistics {
|
|
|
- width: 316rpx;
|
|
|
- border: 1px solid rgba(204, 204, 204, 1);
|
|
|
- padding: 0 16rpx;
|
|
|
- height: 48rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- color: #777777;
|
|
|
-
|
|
|
- .cut {
|
|
|
- color: #8FCFB1;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // 充电枪详情
|
|
|
- .gun-details {
|
|
|
-
|
|
|
-
|
|
|
- .item {
|
|
|
- margin-top: 24rpx;
|
|
|
+ .fast{
|
|
|
+ color: #1677FF;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ .free {
|
|
|
+ color: #00B962;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sum {
|
|
|
+ color: #999;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 尖角
|
|
|
+ .angle {
|
|
|
+ position: absolute;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ display: inline-block;
|
|
|
+ border-top: 16rpx solid #000000;
|
|
|
+ border-left: 16rpx solid transparent;
|
|
|
+ border-right: 16rpx solid transparent;
|
|
|
+ bottom: -16rpx;
|
|
|
+ left: 167rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 充电桩状态
|
|
|
+ .pile-state {
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ // 总计
|
|
|
+ .statistics {
|
|
|
+ width: 316rpx;
|
|
|
+ border: 1px solid rgba(204, 204, 204, 1);
|
|
|
+ padding: 0 16rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #777777;
|
|
|
+
|
|
|
+ .cut {
|
|
|
+ color: #8FCFB1;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 充电枪详情
|
|
|
+ .gun-details {
|
|
|
+
|
|
|
+ .item{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
-
|
|
|
- .state {
|
|
|
- width: 100rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background: linear-gradient(180deg, rgba(98, 228, 167, 1) 0%, rgba(0, 180, 95, 1) 100%);
|
|
|
- padding: 8rpx 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .state-text {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 22rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //充电中
|
|
|
- .charging {
|
|
|
- background: linear-gradient(180deg, rgba(154, 192, 255, 1) 0%, rgba(22, 119, 255, 1) 100%);
|
|
|
- }
|
|
|
-
|
|
|
- // 离线
|
|
|
- .off-line {
|
|
|
- background: linear-gradient(180deg, rgba(209, 204, 204, 1) 0%, rgba(148, 145, 145, 1) 100%);
|
|
|
- }
|
|
|
-
|
|
|
- // 详细信息
|
|
|
- .infos {
|
|
|
- margin-left: 16rpx;
|
|
|
-
|
|
|
- .gun-name {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- text {
|
|
|
- color: #D6D6D6;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .else {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 8rpx;
|
|
|
-
|
|
|
- .gun-type {
|
|
|
- color: rgba(22, 119, 255, 1);
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .voltage {
|
|
|
- margin: 0 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 充电按钮
|
|
|
- .charge {
|
|
|
- width: 96rpx;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(0, 185, 98, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
-
|
|
|
- text-align: center;
|
|
|
- margin-left: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .electric-quantity {
|
|
|
- width: 96rpx;
|
|
|
- height: 52rpx;
|
|
|
- margin-left: auto;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- img {}
|
|
|
-
|
|
|
+ justify-content: space-between;
|
|
|
+ .itemView {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .state {
|
|
|
+ width: 100rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: linear-gradient(180deg, rgba(98, 228, 167, 1) 0%, rgba(0, 180, 95, 1) 100%);
|
|
|
+ padding: 8rpx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .state-text {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //充电中
|
|
|
+ .charging {
|
|
|
+ background: linear-gradient(180deg, rgba(154, 192, 255, 1) 0%, rgba(22, 119, 255, 1) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 离线
|
|
|
+ .off-line {
|
|
|
+ background: linear-gradient(180deg, rgba(209, 204, 204, 1) 0%, rgba(148, 145, 145, 1) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 详细信息
|
|
|
+ .infos {
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ .gun-name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #D6D6D6;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .else {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 8rpx;
|
|
|
+
|
|
|
+ .gun-type {
|
|
|
+ //color: rgba(22, 119, 255, 1);
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .voltage {
|
|
|
+ margin: 0 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 充电按钮
|
|
|
+ .charge {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(0, 185, 98, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .electric-quantity {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 52rpx;
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {}
|
|
|
+
|
|
|
.percentage {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 价格信息
|
|
|
- .price-infos{
|
|
|
- background-color: #fff;
|
|
|
- padding: 24rpx;
|
|
|
- border-radius: 0 0 8px 8px;
|
|
|
- .title{
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-weight: bold;
|
|
|
- font-size: 32rpx;
|
|
|
- text{
|
|
|
- color:#777777;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- }
|
|
|
- // 分类
|
|
|
- .classify{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 24rpx;
|
|
|
- .item{
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(230, 245, 237, 1);
|
|
|
- padding: 22rpx;
|
|
|
- .unit-price{
|
|
|
- font-size: 56rpx;
|
|
|
- }
|
|
|
- .unit{
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size:28rpx
|
|
|
- }
|
|
|
- }
|
|
|
- // 游客价
|
|
|
- .item-visitor{
|
|
|
- color: #333333;
|
|
|
-
|
|
|
- }
|
|
|
- // 会员价
|
|
|
- .item-member{
|
|
|
- color: #27B148 ;
|
|
|
- }
|
|
|
- .register{
|
|
|
- padding:4rpx 12rpx;
|
|
|
- height: 24px;
|
|
|
- border-radius: 50px;
|
|
|
- background: linear-gradient(87.64deg, rgba(253,129,69,1) 1.81%,rgba(252,63,3,1) 100.04%);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- margin-left: 38rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 提示
|
|
|
- .hint{
|
|
|
- margin-top: 16rpx;
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- }
|
|
|
- // 图表
|
|
|
- .chat-box{
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(249, 249, 249, 1);
|
|
|
- padding: 24rpx;
|
|
|
- .chat-infos{
|
|
|
-
|
|
|
- .item{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- .name{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .icon{
|
|
|
- width: 56rpx;
|
|
|
- height: 28rpx;
|
|
|
-
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
- .icon1{
|
|
|
- border: 2px solid rgba(0, 0, 0, 1);
|
|
|
- }
|
|
|
- .icon2{
|
|
|
-
|
|
|
- background-color: rgba(87, 228, 160, 1);
|
|
|
+ text-align: center;
|
|
|
+ width: 86rpx;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 价格信息
|
|
|
+ .price-infos {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 24rpx;
|
|
|
+ border-radius: 0 0 8px 8px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #777777;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分类
|
|
|
+ .classify {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(230, 245, 237, 1);
|
|
|
+ padding: 22rpx;
|
|
|
+
|
|
|
+ .unit-price {
|
|
|
+ font-size: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 28rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 游客价
|
|
|
+ .item-visitor {
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 会员价
|
|
|
+ .item-member {
|
|
|
+ color: #27B148;
|
|
|
+ }
|
|
|
+
|
|
|
+ .register {
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: linear-gradient(87.64deg, rgba(253, 129, 69, 1) 1.81%, rgba(252, 63, 3, 1) 100.04%);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 38rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提示
|
|
|
+ .hint {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图表
|
|
|
+ .chat-box {
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(249, 249, 249, 1);
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ .chat-infos {
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 28rpx;
|
|
|
+
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon1 {
|
|
|
+ border: 2px solid rgba(0, 0, 0, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon2 {
|
|
|
+
|
|
|
+ background-color: rgba(87, 228, 160, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon3 {
|
|
|
+ background-color: rgba(220, 220, 220, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .chat_hhh {
|
|
|
+ background: #f9f9f9;
|
|
|
+ text-align: center;
|
|
|
+ min-height: 160px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 20rpx;
|
|
|
+ .chatTime{
|
|
|
+ min-width: 68rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
+ border :1px solid #f9f9f9;
|
|
|
+ .chats1{
|
|
|
+ background: #dcdcdc;
|
|
|
+ min-height: 30rpx
|
|
|
}
|
|
|
- .icon3{
|
|
|
- background-color: rgba(220, 220, 220, 1);
|
|
|
+ .chats2{
|
|
|
+ background: #80e0a6;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
- .text{
|
|
|
- color: rgba(102, 102, 102, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .value{
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+ // 附加信息
|
|
|
+ .overhead-infos {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 24rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .chat{
|
|
|
- height: 100px;
|
|
|
+ .color185AC6 {
|
|
|
+ color: #185AC6
|
|
|
}
|
|
|
|
|
|
+ .color00B962 {
|
|
|
+ color: #00B962
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- // 附加信息
|
|
|
- .overhead-infos{
|
|
|
- margin-top: 24rpx;
|
|
|
- background-color: #fff;
|
|
|
- padding: 24rpx;
|
|
|
- border-radius: 8px;
|
|
|
- .item{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 32rpx;
|
|
|
-
|
|
|
-
|
|
|
- .title{
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 32rpx;
|
|
|
-
|
|
|
- }
|
|
|
- .value{
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .colorCA9DFF {
|
|
|
+ color: #8161FF;
|
|
|
+ }
|
|
|
</style>
|
zhengkaixin
