|
|
@@ -1,1458 +1,1496 @@
|
|
|
-<template>
|
|
|
- <view style="padding-bottom: 28px;">
|
|
|
- <ujp-navbar title="站点详情">
|
|
|
- <view slot="right" style="margin-right: 10px;">
|
|
|
- <span style="font-size: 16px; color: rgb(96, 98, 102);" @click="getChargingStationDetail">刷新</span>
|
|
|
- </view>
|
|
|
- </ujp-navbar>
|
|
|
-
|
|
|
- <view v-if="stationDetail.station!=null" class="station-details">
|
|
|
- <u-image border-radius='15rpx' v-if="stationDetail.station != null && stationDetail.station.image != null" class="img"
|
|
|
- width="30.6%" height="75px"
|
|
|
- :src="stationDetail.station.image" loading-icon="photo" @click="previewImage(stationDetail.station.image)"></u-image>
|
|
|
- <view class="station-name" >
|
|
|
- {{stationDetail.station.name}}
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="details-item" style="margin-top: 16px;">
|
|
|
- <view class="iconfont font5" :style="stationDetail.station.type.indexOf('1')>=0?(stationDetail.station.type.indexOf('2')>=0?'color: #00BAC8;':'color: #9d9fff;'):('color: #00b962;')"></view>
|
|
|
-<!-- style="color: #00b962;"-->
|
|
|
- <view class="item-text oldTextjp2" oldstyle="font-size: 16px;" >{{(stationDetail.station.type.indexOf('1')>=0?'直流快充':'')}}{{(stationDetail.station.type.indexOf(',')>=0?'/':'')}}{{(stationDetail.station.type.indexOf('2')>=0?'交流慢充':'')}}</view>
|
|
|
- </view>
|
|
|
- <view class="details-item" >
|
|
|
- <view class="iconfont font5" style="color: #4e94ff;"></view>
|
|
|
- <view class="item-text oldTextjp2" oldstyle="font-size: 16px;" >
|
|
|
- {{stationDetail.station.distance!=null&&stationDetail.station.distance>0.1 ? stationDetail.station.distance.toFixed(1)+'公里':'小于100米'}}
|
|
|
- <span style="font-size: 12px;
|
|
|
- color: #5c95f8;
|
|
|
- margin-left: 10px;" @click="getPoint()">重新定位</span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="details-item" v-if="stationDetail.station.describe">
|
|
|
- <view class="iconfont font5" style="color: #ffad79;"></view>
|
|
|
- <view class="item-text oldTextjp2" oldstyle="font-size: 16px;" >
|
|
|
- {{stationDetail.station.describe}}</view>
|
|
|
- </view>
|
|
|
- <view class="station-address" @click="map">
|
|
|
- <img src="static/img/Frame 201.png" alt="">
|
|
|
- <view class="address-text oldTextjp" oldstyle="font-size: 16px;" >
|
|
|
- {{stationDetail.station.address}}
|
|
|
- </view>
|
|
|
- <!--
|
|
|
- <view class="address-font">
|
|
|
- <view class="iconfont">
|
|
|
- 
|
|
|
- </view>
|
|
|
- <view class="view-map" >
|
|
|
- 查看地图
|
|
|
- </view>
|
|
|
- </view>
|
|
|
--->
|
|
|
-
|
|
|
- <view class="address-box">
|
|
|
- <view class="iconfont address-font" >
|
|
|
- 
|
|
|
+<template>
|
|
|
+ <view style="padding-bottom: 28px;">
|
|
|
+ <ujp-navbar title="站点详情">
|
|
|
+ <view slot="right" style="margin-right: 10px;">
|
|
|
+ <span style="font-size: 16px; color: rgb(96, 98, 102);" @click="getChargingStationDetail">刷新</span>
|
|
|
+ </view>
|
|
|
+ </ujp-navbar>
|
|
|
+
|
|
|
+ <view v-if="stationDetail.station!=null" class="station-details">
|
|
|
+ <u-image border-radius='15rpx' v-if="stationDetail.station != null && stationDetail.station.image != null"
|
|
|
+ class="img" width="30.6%" height="75px" :src="stationDetail.station.image" loading-icon="photo"
|
|
|
+ @click="previewImage(stationDetail.station.image)"></u-image>
|
|
|
+ <view class="station-name">
|
|
|
+ {{stationDetail.station.name}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details-item" style="margin-top: 16px;">
|
|
|
+ <view class="iconfont font5"
|
|
|
+ :style="stationDetail.station.type.indexOf('1')>=0?(stationDetail.station.type.indexOf('2')>=0?'color: #00BAC8;':'color: #9d9fff;'):('color: #00b962;')">
|
|
|
+ </view>
|
|
|
+ <!-- style="color: #00b962;"-->
|
|
|
+ <view class="item-text oldTextjp2" oldstyle="font-size: 16px;">
|
|
|
+ {{(stationDetail.station.type.indexOf('1')>=0?'直流快充':'')}}{{(stationDetail.station.type.indexOf(',')>=0?'/':'')}}{{(stationDetail.station.type.indexOf('2')>=0?'交流慢充':'')}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="details-item">
|
|
|
+ <view class="iconfont font5" style="color: #4e94ff;"></view>
|
|
|
+ <view class="item-text oldTextjp2" oldstyle="font-size: 16px;">
|
|
|
+ {{stationDetail.station.distance!=null&&stationDetail.station.distance>0.1 ? stationDetail.station.distance.toFixed(1)+'公里':'小于100米'}}
|
|
|
+ <span style="font-size: 12px;
|
|
|
+ color: #5c95f8;
|
|
|
+ margin-left: 10px;" @click="getPoint()">重新定位</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="details-item" v-if="stationDetail.station.describe">
|
|
|
+ <view class="iconfont font5" style="color: #ffad79;"></view>
|
|
|
+ <view class="item-text oldTextjp2" oldstyle="font-size: 16px;">
|
|
|
+ {{stationDetail.station.describe}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="station-address" @click="map">
|
|
|
+ <img src="static/img/Frame 201.png" alt="">
|
|
|
+ <view class="address-text oldTextjp" oldstyle="font-size: 16px;">
|
|
|
+ {{stationDetail.station.address}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="address-box">
|
|
|
+ <view class="iconfont address-font">
|
|
|
+ 
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="view-map" style="text-align: center;">导航</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="tabs-box">
|
|
|
+ <u-tabs inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="true" :current="current"
|
|
|
+ @change="change"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="charging-gun" v-if="stationDetail.devices&¤t==0">
|
|
|
+ <view v-for="(device,index) in stationDetail.devices" :key="index">
|
|
|
+ <template v-for="(item,i) in device.gunList">
|
|
|
+ <view class="item" :style="item.open?'':' border-bottom: 1px solid rgba(238, 242, 240, 100);'"
|
|
|
+ :key="i+'_'+index">
|
|
|
+
|
|
|
+ <view
|
|
|
+ :style="item.workStatusText.length>3?' padding: 0 10px':(item.workStatusText.length==3?'padding: 4px;font-size:24rpx':'padding: 10px;')"
|
|
|
+ :class="{
|
|
|
+ free:true,
|
|
|
+ charging:item.enableShare&&item.workStatus!=0,
|
|
|
+ 'not-open':!device.online,
|
|
|
+ 'not-open2':item.enableShare&&!item.enableShareWithinTime&&device.online
|
|
|
+
|
|
|
+ }">
|
|
|
+ {{item.workStatusText}}
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="name oldTextjp" oldstyle="font-size: 20px;line-height: 23px;">
|
|
|
+ {{item.sortNo}}号/{{device.name}}{{device.gunList.length>1?'枪'+item.channelNo:''}}
|
|
|
+ </view>
|
|
|
+ <view class="details oldTextjp2" @click="setOpen(item)"
|
|
|
+ oldstyle="font-size: 16px;line-height:16px;">
|
|
|
+ <text :style="device.type=='1' ? 'color:#CA9DFF':'color:#00B962'"
|
|
|
+ style="margin-right:1px;">{{device.interfaceType}}{{device.chargingType}}</text> |
|
|
|
+ <text
|
|
|
+ style="margin-left: 1px;">{{device.chargingPower!=null?device.chargingPower+'kW':''}}
|
|
|
+ <text class="iconfont">{{item.open?'':''}}</text></text>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <template v-if="item.enableShare&&item.enableShareWithinTime&&device.online">
|
|
|
+
|
|
|
+ <view class="tag" v-if="item.workStatus != 2 ">
|
|
|
+ <view class="tag-item" @click="book(item,item.isAppointment)"
|
|
|
+ :class="item.isAppointment?'':'not-open-tag'">
|
|
|
+ 预约
|
|
|
+ </view>
|
|
|
+ <view class="tag-item" @click="book2(item,item.enableShare&&item.enableShareWithinTime)"
|
|
|
+ :class="item.enableShare&&item.enableShareWithinTime?'':'not-open-tag'">
|
|
|
+ 充电
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <view class="persent" v-if="item.workStatus == 2 ">
|
|
|
+ {{item.soc?'电量:'+( item.soc.toFixed(0))+'%':item.workStatusText}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view :key="i+'_aa'+index" class="open-time" v-show="item.open">
|
|
|
+ <table>
|
|
|
+ <tr>
|
|
|
+ <td>开放充电时段:</td>
|
|
|
+
|
|
|
+
|
|
|
+ <td v-if="!item.enableShare||!(item.sharedWeekSettingList&&item.sharedWeekSettingList.length)">充电功能未开放</td>
|
|
|
+
|
|
|
+
|
|
|
+ <template v-else v-for="(time,index) in item.sharedWeekSettingList">
|
|
|
+
|
|
|
+ <td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ <template v-if="item.enableShare" v-for="(time,index) in item.sharedWeekSettingList">
|
|
|
+
|
|
|
+ <tr :key="index" v-if="index==1">
|
|
|
+ <td></td>
|
|
|
+ <td>{{time.startTime}}-{{time.endTime}}</td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <table>
|
|
|
+ <tr>
|
|
|
+ <td>开放预约时段:</td>
|
|
|
+
|
|
|
+
|
|
|
+ <td v-if="!item.enableAppointment||!(item.reserveWeekSettingList&&item.reserveWeekSettingList.length)">预约功能未开放
|
|
|
+ </td>
|
|
|
+ <template v-else v-for="(time,index) in item.reserveWeekSettingList">
|
|
|
+ <td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ <template v-if="item.enableAppointment" v-for="(time,index) in item.reserveWeekSettingList">
|
|
|
+
|
|
|
+ <tr :key="index" v-if="index==1">
|
|
|
+ <td></td>
|
|
|
+ <td>{{time.startTime}}-{{time.endTime}}</td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ </table>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="price-explain" :class="{
|
|
|
+ 'elderMode':elderMode
|
|
|
+ }" v-show="current==1">
|
|
|
+ <!-- <u-cell-group>
|
|
|
+ <u-cell-item
|
|
|
+
|
|
|
+ @click="priceDetail(1,item.deviceId)" :title="item.deviceName" :label="'当前时段：'+item.startTime+'~'+item.endTime+' '+item.costPrice+'元/度(含电费'+item.electricityPrice+'元/度+服务费'+item.servicePrice+'元/度'"></u-cell-item>
|
|
|
+
|
|
|
+ <u-cell-item :arrow="false" v-if="false" title="停车费用" value="充电免停2小时停车费(临牌车不享受免停)"></u-cell-item>
|
|
|
+ </u-cell-group> -->
|
|
|
+ <view class="main">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view style="width: 100%;">
|
|
|
+ <view>
|
|
|
+ <u-line color="#999999" />
|
|
|
+ </view>
|
|
|
+ <view class="time-frame" v-for="(item,i) in pricesInfo" :key="i">
|
|
|
+ <view class="time-items">
|
|
|
+ <view class="time-price">
|
|
|
+ <view class="time">
|
|
|
+ {{item.startTime}}-{{item.endTime}}
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <text class="price-text">{{item.costPrice.toFixed(2)}}</text>
|
|
|
+ <text class="unit">元/度</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="unitPrice-serviceCharge">
|
|
|
+ 充电单价：{{item.electricityPrice.toFixed(2)}}元 | 服务费：{{item.servicePrice.toFixed(2)}}元
|
|
|
+ </view>
|
|
|
+ <view v-if="item.current" class="product_tip">
|
|
|
+ <view class="product_tip_bg"></view>
|
|
|
+ <p>当前</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#F2F4F4">已经到底了</u-divider>
|
|
|
+
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <view>
|
|
|
+ <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>
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </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 {
|
|
|
+ stationId: '',
|
|
|
+ pricesInfo: [],
|
|
|
+ devicesId: '',
|
|
|
+ elderMode: false,
|
|
|
+ userId: '',
|
|
|
+ show: false,
|
|
|
+ list: [{
|
|
|
+ "name": "充电桩"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "价格说明"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ current: 0,
|
|
|
+ currentPos: {
|
|
|
+ /* name:'荆鹏软件园充电站',
|
|
|
+ longitude: 112.28468,
|
|
|
+ latitude: 30.307094,*/
|
|
|
+ },
|
|
|
+ station: {},
|
|
|
+ stationDetail: {
|
|
|
+
|
|
|
+ devices: [],
|
|
|
+ slowPrice: null,
|
|
|
+ station: null,
|
|
|
+ fastPrice: null
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ 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小时免费停车'
|
|
|
+ },
|
|
|
+ priceList: [],
|
|
|
+ devices: {
|
|
|
+ idleNum: 1,
|
|
|
+ total: 6,
|
|
|
+ items: [
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ _self = this;
|
|
|
+
|
|
|
+ // document.getElementsByTagName('body')[0].style.setProperty('--mode',1)
|
|
|
+
|
|
|
+
|
|
|
+ if (op != null) {
|
|
|
+
|
|
|
+ if (op.id != null && op.id != undefined) {
|
|
|
+ this.stationId = op.id;
|
|
|
+
|
|
|
+ this.getPriceList(op.id)
|
|
|
+
|
|
|
+ this.getChargingStationDetail()
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ 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;
|
|
|
+
|
|
|
+ }
|
|
|
+ WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
|
|
|
+ // //(res)
|
|
|
+ }).catch(error => {
|
|
|
+ //(res)
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getChargingStationDetail() {
|
|
|
+ var _self = this;
|
|
|
+ uni.showLoading({
|
|
|
+
|
|
|
+ })
|
|
|
+ let data = {
|
|
|
+ stationId: this.stationId
|
|
|
+ };
|
|
|
+ api.getChargingStationDetail(data).then(function(res) {
|
|
|
+ uni.hideLoading()
|
|
|
+
|
|
|
+ if (res && res.result && res.data) {
|
|
|
+
|
|
|
+ let data = res.data;
|
|
|
+
|
|
|
+ _self.stationDetail = data;
|
|
|
+ var totalNum=0;
|
|
|
+ for(var i in _self.stationDetail.devices ){
|
|
|
+ var device=_self.stationDetail.devices[i]
|
|
|
+ totalNum+=device.gunList.length
|
|
|
|
|
|
- </view>
|
|
|
- <view class="view-map" style="text-align: center;">导航</view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="tabs-box">
|
|
|
- <u-tabs inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="true"
|
|
|
- :current="current" @change="change"></u-tabs>
|
|
|
- </view>
|
|
|
- <view class="charging-gun" v-if="stationDetail.devices&¤t==0">
|
|
|
- <view v-for="(device,index) in stationDetail.devices" :key="index">
|
|
|
- <template v-for="(item,i) in device.gunList" >
|
|
|
- <view class="item"
|
|
|
- :style="item.open?'':' border-bottom: 1px solid rgba(238, 242, 240, 100);'"
|
|
|
-
|
|
|
- :key="i+'_'+index" >
|
|
|
-
|
|
|
- <view
|
|
|
- :style="item.workStatusText.length>3?' padding: 0 10px':(item.workStatusText.length==3?'padding: 4px;':'padding: 10px;')"
|
|
|
- :class="{
|
|
|
- free:true,
|
|
|
- charging:item.enableShare&&item.workStatus!=0,
|
|
|
- 'not-open':!(item.enableShare&&device.online)
|
|
|
-
|
|
|
- }">
|
|
|
- {{item.workStatusText}}
|
|
|
- </view>
|
|
|
- <view class="info">
|
|
|
- <view class="name oldTextjp" oldstyle="font-size: 20px;line-height: 23px;">
|
|
|
- {{item.sortNo}}号/{{device.name}}{{device.gunList.length>1?'枪'+item.channelNo:''}}
|
|
|
- </view>
|
|
|
- <view class="details oldTextjp2" @click="setOpen(item)" oldstyle="font-size: 16px;line-height:16px;">
|
|
|
- <text :style="device.type=='1' ? 'color:#CA9DFF':'color:#00B962'" style="margin-right:1px;">{{device.interfaceType}}{{device.chargingType}}</text> |
|
|
|
- <text style="margin-left: 1px;">{{device.chargingPower!=null?device.chargingPower+'kW':''}} <text class="iconfont" >{{item.open?'':''}}</text></text>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <template v-if="item.enableShare&&device.online">
|
|
|
-
|
|
|
- <view class="tag" v-if="item.workStatus != 2 ">
|
|
|
- <view class="tag-item" @click="book(item,item.isAppointment&&item.enableAppointment)" :class="item.isAppointment&&item.enableAppointment?'':'not-open-tag'">
|
|
|
- 预约
|
|
|
- </view>
|
|
|
- <view class="tag-item" @click="book2(item,item.enableShare)" :class="item.enableShare?'':'not-open-tag'" >
|
|
|
- 充电
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </template>
|
|
|
- <view class="persent" v-if="item.workStatus == 2 ">
|
|
|
- {{item.soc?'电量:'+( item.soc.toFixed(0))+'%':item.workStatusText}}
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- <view :key="i+'_aa'+index" class="open-time" v-show="item.open">
|
|
|
- <table>
|
|
|
- <tr>
|
|
|
- <td>开放充电时段:</td>
|
|
|
-
|
|
|
-
|
|
|
- <td v-if="!item.sharedWeekSettingList||item.sharedWeekSettingList.length==0">充电功能未开放</td>
|
|
|
-
|
|
|
-
|
|
|
- <template v-for="(time,index) in item.sharedWeekSettingList" >
|
|
|
-
|
|
|
- <td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>
|
|
|
-
|
|
|
- </template>
|
|
|
-
|
|
|
- </tr>
|
|
|
- <template v-for="(time,index) in item.sharedWeekSettingList" >
|
|
|
-
|
|
|
- <tr :key="index" v-if="index==1">
|
|
|
- <td></td>
|
|
|
- <td>{{time.startTime}}-{{time.endTime}}</td>
|
|
|
- </tr>
|
|
|
-
|
|
|
- </template>
|
|
|
-
|
|
|
-
|
|
|
- </table>
|
|
|
-
|
|
|
- <table>
|
|
|
- <tr>
|
|
|
- <td>开放预约时段:</td>
|
|
|
-
|
|
|
-
|
|
|
- <td v-if="!item.reserveWeekSettingList||item.reserveWeekSettingList.length==0">预约功能未开放</td>
|
|
|
-
|
|
|
-
|
|
|
- <template v-for="(time,index) in item.reserveWeekSettingList" >
|
|
|
-
|
|
|
- <td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>
|
|
|
-
|
|
|
- </template>
|
|
|
-
|
|
|
- </tr>
|
|
|
- <template v-for="(time,index) in item.reserveWeekSettingList" >
|
|
|
-
|
|
|
- <tr :key="index" v-if="index==1">
|
|
|
- <td></td>
|
|
|
- <td>{{time.startTime}}-{{time.endTime}}</td>
|
|
|
- </tr>
|
|
|
-
|
|
|
- </template>
|
|
|
-
|
|
|
-
|
|
|
- </table>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="price-explain"
|
|
|
- :class="{
|
|
|
- 'elderMode':elderMode
|
|
|
- }"
|
|
|
- v-show="current==1" >
|
|
|
- <!-- <u-cell-group>
|
|
|
- <u-cell-item
|
|
|
-
|
|
|
- @click="priceDetail(1,item.deviceId)" :title="item.deviceName" :label="'当前时段：'+item.startTime+'~'+item.endTime+' '+item.costPrice+'元/度(含电费'+item.electricityPrice+'元/度+服务费'+item.servicePrice+'元/度'"></u-cell-item>
|
|
|
-
|
|
|
- <u-cell-item :arrow="false" v-if="false" title="停车费用" value="充电免停2小时停车费(临牌车不享受免停)"></u-cell-item>
|
|
|
- </u-cell-group> -->
|
|
|
- <view class="main">
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <view style="width: 100%;">
|
|
|
- <view ><u-line color="#999999" /></view>
|
|
|
- <view class="time-frame" v-for="(item,i) in pricesInfo" :key="i">
|
|
|
- <view class="time-items">
|
|
|
- <view class="time-price">
|
|
|
- <view class="time">
|
|
|
- {{item.startTime}}-{{item.endTime}}
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <text class="price-text">{{item.costPrice.toFixed(2)}}</text>
|
|
|
- <text class="unit">元/度</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="unitPrice-serviceCharge">
|
|
|
- 充电单价：{{item.electricityPrice.toFixed(2)}}元 | 服务费：{{item.servicePrice.toFixed(2)}}元
|
|
|
- </view>
|
|
|
- <view v-if="item.current" class="product_tip">
|
|
|
- <view class="product_tip_bg"></view>
|
|
|
- <p>当前</p>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- <u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#F2F4F4">已经到底了</u-divider>
|
|
|
-
|
|
|
- <!-- 弹窗 -->
|
|
|
- <view>
|
|
|
- <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>
|
|
|
- </u-modal>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </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 {
|
|
|
- stationId:'',
|
|
|
- pricesInfo:[],
|
|
|
- devicesId:'',
|
|
|
- elderMode:false,
|
|
|
- userId:'',
|
|
|
- show:false,
|
|
|
- list:[
|
|
|
- {"name":"充电桩"},
|
|
|
- {"name":"价格说明"}
|
|
|
- ],
|
|
|
- current: 0,
|
|
|
- currentPos:{
|
|
|
-/* name:'荆鹏软件园充电站',
|
|
|
- longitude: 112.28468,
|
|
|
- latitude: 30.307094,*/
|
|
|
- },
|
|
|
- station:{},
|
|
|
- stationDetail:
|
|
|
- {
|
|
|
-
|
|
|
- devices:[],
|
|
|
- slowPrice:null,
|
|
|
- station:null,
|
|
|
- fastPrice:null
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- 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小时免费停车'
|
|
|
- },
|
|
|
- priceList:[],
|
|
|
- devices:{
|
|
|
- idleNum:1,
|
|
|
- total:6,
|
|
|
- items:[
|
|
|
-
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(op){
|
|
|
- _self = this;
|
|
|
-
|
|
|
-// document.getElementsByTagName('body')[0].style.setProperty('--mode',1)
|
|
|
- _self.processStationsInfo();
|
|
|
-
|
|
|
- if(op!=null){
|
|
|
-
|
|
|
- if(op.id != null && op.id != undefined){
|
|
|
- this.stationId=op.id;
|
|
|
-
|
|
|
- this.getPriceList(op.id)
|
|
|
- //if(station.distance != null)
|
|
|
- // _self.stationDetail.station.distance = station.distance;
|
|
|
- ////('station'+JSON.stringify(station))
|
|
|
- //_self.station = station;
|
|
|
- this.getChargingStationDetail()
|
|
|
- }
|
|
|
- if(op.station != null){
|
|
|
- let station = JSON.parse(decodeURIComponent(op.station))
|
|
|
- let data = {stationId:station.id};
|
|
|
- if(station.distance != null)
|
|
|
- _self.stationDetail.station.distance = station.distance;
|
|
|
- //('station'+JSON.stringify(station))
|
|
|
- _self.station = station;
|
|
|
- api.getChargingStationDetail(data).then(function(res){
|
|
|
- //('站点详情'+JSON.stringify(res))
|
|
|
- //this.info.st
|
|
|
- if(res && res.result)
|
|
|
- {
|
|
|
- if(res.data){
|
|
|
- let data = res.data;
|
|
|
- data.station.distance = station.distance;
|
|
|
- _self.stationDetail = data;
|
|
|
- _self.processStationsInfo();
|
|
|
-// //('data'+JSON.stringify(data));
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- /*api.getChargingStationPrice(data).then(function(res){
|
|
|
- if(res.result){
|
|
|
- let data = res.data;
|
|
|
- if(data.prices){
|
|
|
- _self.list = [];
|
|
|
- for(let i = 0;i< data.prices.length;i++){
|
|
|
- let _item = data.prices[i];
|
|
|
- let item = {name:data.prices[i].name,items:[]};
|
|
|
- for(let j = 0;j<_item.priceList.length;j++){
|
|
|
- let _subitem = _item.priceList[j];
|
|
|
- let subitem = {time:'00:00-07:00',single_price:0.5,service_price:0.25,price:0.75};
|
|
|
- subitem.time = _subitem.startTime + '-'+_subitem.endTime;
|
|
|
- subitem.single_price = _subitem.electricityPrice;
|
|
|
- subitem.service_price = _subitem.servicePrice;
|
|
|
- subitem.price = _subitem.costPrice;
|
|
|
- item.items.push(subitem);
|
|
|
- }
|
|
|
- _self.priceList.push(item);
|
|
|
- }
|
|
|
- //('站点价格详情'+JSON.stringify(list));
|
|
|
+ for (let j = 0; j < device.gunList.length; j++) {
|
|
|
|
|
|
+ device.gunList[j].open = false;
|
|
|
}
|
|
|
- }
|
|
|
- })*/
|
|
|
- //this.info.station = station;
|
|
|
- //('stationDetail onLoad'+JSON.stringify(station))
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onReady(){
|
|
|
- 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;
|
|
|
-
|
|
|
- }
|
|
|
- WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
|
|
|
- // //(res)
|
|
|
- }).catch(error => {
|
|
|
- //(res)
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- methods:{
|
|
|
- getChargingStationDetail(){
|
|
|
- var _self = this;
|
|
|
- uni.showLoading({
|
|
|
-
|
|
|
- })
|
|
|
- let data = {stationId:this.stationId};
|
|
|
- api.getChargingStationDetail(data).then(function(res){
|
|
|
- uni.hideLoading()
|
|
|
- // //('站点详情'+JSON.stringify(res))
|
|
|
- //this.info.st
|
|
|
- if(res && res.result)
|
|
|
- {
|
|
|
- if(res.data){
|
|
|
- let data = res.data;
|
|
|
- //data.station.distance = station.distance;
|
|
|
-
|
|
|
- _self.stationDetail = data;
|
|
|
-
|
|
|
- if(_self.stationDetail.station){
|
|
|
- _self.list[0].name="充电桩("+_self.stationDetail.station.totalNum+")"
|
|
|
- }
|
|
|
- _self.processStationsInfo();
|
|
|
- if(_self.stationDetail.station.distance == null){
|
|
|
- _self.getPoint();
|
|
|
- }
|
|
|
- // //('data'+JSON.stringify(data));
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- setOpen(item){
|
|
|
-
|
|
|
- if(item.open){
|
|
|
- item.open=false;
|
|
|
-
|
|
|
- }else{
|
|
|
- item.open=true
|
|
|
- }
|
|
|
- this.$forceUpdate()
|
|
|
- },
|
|
|
- getItem(item,device){
|
|
|
-
|
|
|
- return !device.online?('离线'):(item.enableShare&&device.online?item.workStatusText:'暂不开放')
|
|
|
- },
|
|
|
- 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);
|
|
|
-
|
|
|
- /*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()
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- 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() {
|
|
|
- if (this.userId) {
|
|
|
- WxJsApi.scanQRCode(1).then(res => {
|
|
|
- if(res) {
|
|
|
- indexAPI.scanCode(res).then((response) => {
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: 'scanQRCode'+error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
-
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/login/login'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- 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();
|
|
|
- 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;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- processStationsInfo(){
|
|
|
- for(let i = 0;i <_self.stationDetail.devices.length;i++){
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- for(let j = 0;j < _self.stationDetail.devices[i].gunList.length;j++){
|
|
|
- ////('j'+JSON.stringify(_self.stationDetail.devices[i].gunList[j]))
|
|
|
- _self.stationDetail.devices[i].gunList[j].open=false;
|
|
|
- }
|
|
|
- if(!_self.stationDetail.devices[i].online)
|
|
|
- {
|
|
|
- _self.stationDetail.devices[i].workStatus = 99;
|
|
|
- _self.stationDetail.devices[i].workStatusText ='不在线';
|
|
|
- continue;
|
|
|
- }
|
|
|
- ////('device['+i.toString()+']'+JSON.stringify(_self.stationDetail.devices[i]))
|
|
|
- _self.stationDetail.devices[i].workStatus = 2;
|
|
|
- _self.stationDetail.devices[i].workStatusText ='充电中';
|
|
|
-// //('站点详情'+JSON.stringify(_self.stationDetail.devices[i]))
|
|
|
-
|
|
|
- for(let j = 0;j < _self.stationDetail.devices[i].gunList.length;j++){
|
|
|
- ////('j'+JSON.stringify(_self.stationDetail.devices[i].gunList[j]))
|
|
|
-
|
|
|
- if(_self.stationDetail.devices[i].gunList[j].workStatus == 0)
|
|
|
- {
|
|
|
- _self.stationDetail.devices[i].workStatus =0;
|
|
|
- _self.stationDetail.devices[i].workStatusText ='空闲';
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- navigate(){
|
|
|
- /*wx.openLocation({
|
|
|
- latitude: _self.station.latitude,//目的地latitude
|
|
|
- longitude: _self.station.longitude,//目的地longitude
|
|
|
- name: _self.station.name,
|
|
|
- address: _self.station.address,
|
|
|
- scale: 15//地图缩放大小，可根据情况具体调整
|
|
|
- });*/
|
|
|
- //('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(){
|
|
|
- //('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>
|
|
|
- @import "@/_theme.scss";
|
|
|
- .qr-code{
|
|
|
- font-size: 24px;
|
|
|
- color: #666666;
|
|
|
- position: absolute;
|
|
|
- right: 16px;
|
|
|
- }
|
|
|
- // 站点信息
|
|
|
-
|
|
|
- .station-details {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 16px 16px 0px;
|
|
|
- background-color: #fff;
|
|
|
- position: relative;
|
|
|
- .img{
|
|
|
- position: absolute;
|
|
|
- top: 16px;right: 16px;
|
|
|
- }
|
|
|
- .station-name {
|
|
|
- //line-height: 18px;
|
|
|
- color: #101010;
|
|
|
- @include themeify{
|
|
|
- line-height: themed('font-size4');
|
|
|
- font-weight: themed('fontWeight');
|
|
|
- font-size: themed('font-size4');
|
|
|
- letter-spacing: themed('letterSpacing');
|
|
|
- }
|
|
|
- width: 65%;
|
|
|
-/* line-height: 18px;*/
|
|
|
- margin-bottom: 11px;
|
|
|
- }
|
|
|
-
|
|
|
- .details-item {
|
|
|
- display: flex;
|
|
|
- justify-content: start;
|
|
|
- width: 100%;
|
|
|
- margin-top: 8px;
|
|
|
- line-height: 17px;
|
|
|
-
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- }
|
|
|
- /*font-size: 12px;*/
|
|
|
- // position: relative;
|
|
|
- }
|
|
|
- .font5{
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .item-text {
|
|
|
-
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- margin-left: 10px;
|
|
|
- font-size: 14px;
|
|
|
- // position: absolute;
|
|
|
- // left: 24px;
|
|
|
- // top: 1px;
|
|
|
- }
|
|
|
-
|
|
|
- .station-address {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- margin-top: 14px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .address-text {
|
|
|
-
|
|
|
-
|
|
|
- position: absolute;
|
|
|
- top: 12px;
|
|
|
- left: 0;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- line-height: themed('font-size4');
|
|
|
- height: themed('font-size4');
|
|
|
- }
|
|
|
-/* font-size: 12px*/
|
|
|
- }
|
|
|
-
|
|
|
- .address-box {
|
|
|
|
|
|
- /* font-size: 28px;*/
|
|
|
- color: #4e94ff;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- .address-font{
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size8');
|
|
|
- }
|
|
|
- }
|
|
|
- .view-map{
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- /* line-height: themed('font-size2');
|
|
|
- height: themed('font-size2'); */
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 价格详情
|
|
|
- .price-details {
|
|
|
- width: 100%;
|
|
|
- margin-top: 12px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 20px 15px 16px 16px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .detail-title {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .title-left {
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size3');
|
|
|
- }
|
|
|
-/* font-size: 16px;*/
|
|
|
- color: #101010;
|
|
|
- }
|
|
|
-
|
|
|
- .title-right {
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- line-height: themed('font-size2');
|
|
|
- }
|
|
|
-/* font-size: 14px;
|
|
|
- line-height: 14px;*/
|
|
|
- color: #00b962;
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .right-text {
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- }
|
|
|
-/* font-size: 14px;*/
|
|
|
- position: absolute;
|
|
|
- top: 23px;
|
|
|
- right: 36px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .right-font {
|
|
|
-/* width: 24px;
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
- font-size: 24px;*/
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size7');
|
|
|
- width: themed('font-size7');
|
|
|
- height: themed('font-size7');
|
|
|
- line-height: themed('font-size7');
|
|
|
- }
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- right: 12px;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- .price-item{
|
|
|
- padding: 16px 0;
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid rgba(238, 242, 240, 100);
|
|
|
-
|
|
|
- .text1{
|
|
|
- width: 44px;
|
|
|
-/* height: 20px;
|
|
|
- line-height: 20px;*/
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(0, 185, 98, 100);
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
-/* font-size: 12px;*/
|
|
|
-
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- height: themed('font-size5');
|
|
|
- line-height: themed('font-size5');
|
|
|
- }
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .text5{
|
|
|
- width: 44px;
|
|
|
-/* height: 20px;
|
|
|
- line-height: 20px;*/
|
|
|
- border-radius: 50px;
|
|
|
- background-color: #9d9fff;
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- height: themed('font-size5');
|
|
|
- line-height: themed('font-size5');
|
|
|
- }
|
|
|
- /*font-size: 12px;*/
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .text2{
|
|
|
-/* width: 40px;
|
|
|
- line-height: 19px;*/
|
|
|
- margin-left: 8px;
|
|
|
- color: rgba(255, 98, 0, 100);
|
|
|
-/* font-size: 20px;*/
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size5');
|
|
|
- line-height: themed('font-size5');
|
|
|
- width:themed('font-size15')
|
|
|
- }
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .text3{
|
|
|
- margin-left: 4px;
|
|
|
- color: rgba(51, 51, 51, 100);
|
|
|
-/* font-size: 16px;*/
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size3');
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .text4{
|
|
|
- // margin-left: 72px;
|
|
|
-/* font-size: 12px;
|
|
|
- line-height: 20px;*/
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size3');
|
|
|
- line-height: themed('font-size5');
|
|
|
- }
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .park-item{
|
|
|
- padding: 16px 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .text-box{
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .text1{
|
|
|
- width: 44px;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- line-height: themed('font-size5');
|
|
|
- height: themed('font-size5');
|
|
|
- }
|
|
|
-/* height: 20px;
|
|
|
- line-height: 20px;*/
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(78, 148, 255, 100);
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
-/* font-size: 12px;*/
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .text2{
|
|
|
- margin-left: 8px;
|
|
|
- color: rgba(51, 51, 51, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size3');
|
|
|
- }
|
|
|
-/* font-size: 16px;*/
|
|
|
- }
|
|
|
- .text3{
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- line-height: themed('font-size5');
|
|
|
- }
|
|
|
- color: #666666;
|
|
|
-/* font-size: 12px;
|
|
|
- line-height: 20px;*/
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- // 设备详情
|
|
|
- .equipment-details{
|
|
|
- background-color: #fff;
|
|
|
- margin-top: 12px;
|
|
|
- padding:16px;
|
|
|
- .title{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .title-left{
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size3');
|
|
|
- height: themed('font-size3');
|
|
|
- font-weight: themed('fontWeight');
|
|
|
- letter-spacing: themed('letterSpacing');
|
|
|
- }
|
|
|
-
|
|
|
-/* height: 16px;*/
|
|
|
- color: rgba(16, 16, 16, 100);
|
|
|
-/* font-size: 16px;*/
|
|
|
- }
|
|
|
- .title-right{
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- height: themed('font-size3');
|
|
|
- font-weight: themed('fontWeight');
|
|
|
- letter-spacing: themed('letterSpacing');
|
|
|
- }
|
|
|
-/* height: 16px;
|
|
|
- font-size: 14px;*/
|
|
|
- .free{
|
|
|
- color: #00b962;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .equipment-item{
|
|
|
- margin-left: 52px;
|
|
|
- margin-top: 20px;
|
|
|
- padding-bottom: 17px;
|
|
|
- border-bottom: 1px solid rgba(238, 242, 240, 100);
|
|
|
- position: relative;
|
|
|
- .left-font{
|
|
|
- color:#00b962 ;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size13');
|
|
|
- }
|
|
|
-/* font-size: 36px;*/
|
|
|
- position: absolute;
|
|
|
- left: -52px;
|
|
|
- top: -4px
|
|
|
- }
|
|
|
- .name{
|
|
|
- display: flex;
|
|
|
- .name-text{
|
|
|
- color: #101010;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size3');
|
|
|
- line-height: themed('font-size3');
|
|
|
- font-weight: themed('fontWeight');
|
|
|
- }
|
|
|
-/* font-size: 16px;
|
|
|
- line-height: 16px;*/
|
|
|
- }
|
|
|
- }
|
|
|
- .type{
|
|
|
-/* height: 17px;*/
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- height: themed('font-size4');
|
|
|
- }
|
|
|
-/* font-size: 12px;*/
|
|
|
- margin-top: 4px;
|
|
|
- }
|
|
|
- .charging-gun{
|
|
|
-
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
- margin-top: 12px;
|
|
|
- .iconfont{
|
|
|
- color: #a5aaa8;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size5');
|
|
|
- }
|
|
|
-/* font-size: 20px*/
|
|
|
- }
|
|
|
- .gun-num{
|
|
|
- margin-left: 8px;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- line-height: themed('font-size5');
|
|
|
- }
|
|
|
-/* font-size: 12px;
|
|
|
- line-height: 20px; */
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- }
|
|
|
- .free-state{
|
|
|
- color: rgba(0, 185, 98, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- line-height: themed('font-size5');
|
|
|
- }
|
|
|
-/* font-size: 12px;
|
|
|
- line-height: 20px;*/
|
|
|
- margin-left: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .recharge-state{
|
|
|
- height: 17px;
|
|
|
- color: rgba(255, 98, 0, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size1');
|
|
|
- line-height: themed('font-size5');
|
|
|
- }
|
|
|
-/* font-size: 12px;
|
|
|
- line-height: 20px;*/
|
|
|
- margin-left: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tag-recharge{
|
|
|
-
|
|
|
- /*
|
|
|
- height: 16px;
|
|
|
- line-height: 15px;*/
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size0');
|
|
|
- line-height: themed('font-size2');
|
|
|
- height: themed('font-size3');
|
|
|
- //width: themed('font-size14');
|
|
|
- min-width: 38px;
|
|
|
- }
|
|
|
- border-radius: 2px;
|
|
|
- color: rgba(255, 98, 0, 100);
|
|
|
-/* font-size: 10px;*/
|
|
|
- text-align: center;
|
|
|
- font-family: Arial;
|
|
|
- border: 1px solid rgba(255, 98, 0, 100);
|
|
|
- margin-left: 8px;
|
|
|
-
|
|
|
- }
|
|
|
- .tag-free{
|
|
|
-/* width: 28px;*/
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size0');
|
|
|
- line-height: themed('font-size2');
|
|
|
- height: themed('font-size3');
|
|
|
- width: themed('font-size9');
|
|
|
- }
|
|
|
-/* height: 16px;
|
|
|
- line-height: 15px;*/
|
|
|
- border-radius: 2px;
|
|
|
- color: rgba(0, 185, 98, 100);
|
|
|
-/* font-size: 10px;*/
|
|
|
- text-align: center;
|
|
|
- font-family: Arial;
|
|
|
- border: 1px solid rgba(0, 185, 98, 100);
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- // 底部
|
|
|
- .bottom{
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- background-color: #fff;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- padding: 12px 16px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- z-index: 9999;
|
|
|
- .button1{
|
|
|
- width: 44%;
|
|
|
- height: 32px;
|
|
|
- border: 1px solid rgba(0, 185, 98, 100);
|
|
|
- color: rgba(0, 185, 98, 100);
|
|
|
-/* font-size: 14px;*/
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- }
|
|
|
- }
|
|
|
- .button2{
|
|
|
- width: 44%;
|
|
|
- height: 32px;
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(0, 185, 98, 100);
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- }
|
|
|
-/* font-size: 14px;*/
|
|
|
- margin-left: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .buttonAppointment{
|
|
|
- width: 120rpx;
|
|
|
- height: 56rpx;
|
|
|
- position: relative;
|
|
|
- top : -10rpx;
|
|
|
- right: -10rpx;
|
|
|
- border-radius: 100rpx;
|
|
|
- background-color: rgba(0, 185, 98, 100);
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- }
|
|
|
-/* font-size: 14px;*/
|
|
|
- margin-left: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .tabs-box {
|
|
|
- width: 100%;
|
|
|
- line-height: 87px;
|
|
|
- border-bottom: 1px solid #7FDCB0;
|
|
|
- margin-top: 12px;
|
|
|
- /deep/.u-scroll-box{
|
|
|
- width: 53.6% !important;
|
|
|
- margin: 0 auto;
|
|
|
- // background-color: #4e94ff;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .elderMode .u-cell_title{
|
|
|
- font-size: 22px;
|
|
|
- font-weight: bold !important;
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- .charging-gun{
|
|
|
- padding-bottom: 50px;
|
|
|
- background-color: #fff;
|
|
|
- .item{
|
|
|
- padding: 12px 0 8px 0;
|
|
|
- margin: 0 16px;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .free{
|
|
|
-
|
|
|
-
|
|
|
- max-width: 50px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: rgba(228, 246, 234, 100);
|
|
|
- color: rgba(0, 140, 74, 100);
|
|
|
- border-radius: 8px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .charging{
|
|
|
- background-color: rgba(241, 241, 241, 100);
|
|
|
- color: rgba(74, 74, 74, 100);
|
|
|
- }
|
|
|
-
|
|
|
- .not-open{
|
|
|
- background-color: rgba(255, 233, 233, 100);
|
|
|
- color: rgba(255, 70, 70, 100);
|
|
|
-
|
|
|
- }
|
|
|
- .info{
|
|
|
- width: 45vw;
|
|
|
- margin-left: 8px;
|
|
|
- .name{
|
|
|
-
|
|
|
- font-size: 14px;
|
|
|
- line-height: 16px;
|
|
|
- color: rgba(16, 16, 16, 100);
|
|
|
-
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- .details{
|
|
|
- height: 16px;
|
|
|
- margin-top: 8px;
|
|
|
- font-size: 12px;
|
|
|
- .iconfont{
|
|
|
- color: #999999;
|
|
|
- font-size: 16px;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .tag{
|
|
|
- width: 30%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- margin-left:4px;
|
|
|
- .tag-item{
|
|
|
- width: 48px;
|
|
|
- height: 24px;
|
|
|
- line-height:24px;
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(0, 185, 98, 100);
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- text-align: center;
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
- .not-open-tag{
|
|
|
- background-color: rgba(192, 196, 208, 100);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .persent{
|
|
|
- text-align: right;
|
|
|
- font-size: 16px;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .open-time{
|
|
|
- padding-top:5px;
|
|
|
- border-bottom: 1px solid rgba(238, 242, 240, 100);
|
|
|
- padding-left: 76px;
|
|
|
- padding-bottom: 19px;
|
|
|
- line-height: 18px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgb(136, 136, 136);
|
|
|
- p{
|
|
|
- text-indent: 112px;
|
|
|
- }
|
|
|
- }
|
|
|
- /deep/.u-tab-bar{
|
|
|
- height: 4px !important;
|
|
|
- background-color: #00b962 !important;
|
|
|
- width: 50px !important;
|
|
|
- left: -15px !important;
|
|
|
- bottom: -5px !important;
|
|
|
-
|
|
|
- }
|
|
|
- /deep/.u-cell__value{
|
|
|
- text-align: left;
|
|
|
- margin-left: 12px;
|
|
|
- color: #101010;
|
|
|
- }
|
|
|
- /deep/.u-model__content__message{
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .main {
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .tabs-box {
|
|
|
- width: 55%;
|
|
|
- height: 88rpx;
|
|
|
- margin: 0 auto;
|
|
|
- // line-height: 44px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .line-box{
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- position: absolute;
|
|
|
- top: 145rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .time-frame {
|
|
|
- padding-left: 32rpx;
|
|
|
- /* position: absolute;
|
|
|
- top:260rpx;
|
|
|
- */
|
|
|
- .time-items {
|
|
|
- padding-right: 32rpx;
|
|
|
- height: 152rpx;
|
|
|
- border-bottom: #F2F4F4 2rpx solid;
|
|
|
- position: relative;
|
|
|
- .time-price {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 32rpx 0 20rpx;
|
|
|
-
|
|
|
- .time {
|
|
|
- color: rgba(16, 16, 16, 100);
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size3');
|
|
|
- }
|
|
|
- /* font-size: 32rpx;*/
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- .price-text{
|
|
|
- color: #ff3d00;
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size4');
|
|
|
- }
|
|
|
- /* font-size: 36rpx;*/
|
|
|
- }
|
|
|
- .unit {
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size2');
|
|
|
- }
|
|
|
- /* font-size: 28rpx;*/
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .unitPrice-serviceCharge {
|
|
|
- float: right;
|
|
|
- @include themeify{
|
|
|
- font-size:themed('font-size1');
|
|
|
- }
|
|
|
- /* font-size: 24rpx;*/
|
|
|
- color: #888888;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .product_tip{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 55rpx;
|
|
|
- height: 55rpx;
|
|
|
- text-align: right;
|
|
|
- p{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #ffffff;
|
|
|
- transform: rotate(45deg);
|
|
|
- position: relative;
|
|
|
- top: 0rpx;
|
|
|
- right: 0rpx;
|
|
|
- }
|
|
|
- .product_tip_bg{
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-bottom: 44rpx solid #FD662A;
|
|
|
- border-right: 44rpx solid transparent;
|
|
|
- border-left: 44rpx solid transparent;
|
|
|
- transform: rotate(45deg);
|
|
|
- position: absolute;
|
|
|
- top: -7rpx;
|
|
|
- right: -29rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ _self.list[0].name = "充电桩(" + totalNum + ")"
|
|
|
+
|
|
|
+
|
|
|
+ if (_self.stationDetail.station.distance == null) {
|
|
|
+ _self.getPoint();
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setOpen(item) {
|
|
|
+
|
|
|
+ if (item.open) {
|
|
|
+ item.open = false;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ item.open = true
|
|
|
+ }
|
|
|
+ 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);
|
|
|
+
|
|
|
+ /*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()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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() {
|
|
|
+ if (this.userId) {
|
|
|
+ WxJsApi.scanQRCode(1).then(res => {
|
|
|
+ if (res) {
|
|
|
+ indexAPI.scanCode(res).then((response) => {
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: 'scanQRCode' + error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ navigate() {
|
|
|
+ /*wx.openLocation({
|
|
|
+ latitude: _self.station.latitude,//目的地latitude
|
|
|
+ longitude: _self.station.longitude,//目的地longitude
|
|
|
+ name: _self.station.name,
|
|
|
+ address: _self.station.address,
|
|
|
+ scale: 15//地图缩放大小，可根据情况具体调整
|
|
|
+ });*/
|
|
|
+ //('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() {
|
|
|
+ //('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>
|
|
|
+ @import "@/_theme.scss";
|
|
|
+
|
|
|
+ .qr-code {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #666666;
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 站点信息
|
|
|
+
|
|
|
+ .station-details {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 16px 16px 0px;
|
|
|
+ background-color: #fff;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ position: absolute;
|
|
|
+ top: 16px;
|
|
|
+ right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .station-name {
|
|
|
+ //line-height: 18px;
|
|
|
+ color: #101010;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ line-height: themed('font-size4');
|
|
|
+ font-weight: themed('fontWeight');
|
|
|
+ font-size: themed('font-size4');
|
|
|
+ letter-spacing: themed('letterSpacing');
|
|
|
+ }
|
|
|
+
|
|
|
+ width: 65%;
|
|
|
+ /* line-height: 18px;*/
|
|
|
+ margin-bottom: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .details-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 8px;
|
|
|
+ line-height: 17px;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ }
|
|
|
+
|
|
|
+ /*font-size: 12px;*/
|
|
|
+ // position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .font5 {}
|
|
|
+
|
|
|
+ .item-text {
|
|
|
+
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 24px;
|
|
|
+ // top: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .station-address {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: 14px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-text {
|
|
|
+
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ left: 0;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ line-height: themed('font-size4');
|
|
|
+ height: themed('font-size4');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 12px*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-box {
|
|
|
+
|
|
|
+ /* font-size: 28px;*/
|
|
|
+ color: #4e94ff;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+
|
|
|
+ .address-font {
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size8');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .view-map {
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ /* line-height: themed('font-size2');
|
|
|
+ height: themed('font-size2'); */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 价格详情
|
|
|
+ .price-details {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 12px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20px 15px 16px 16px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .detail-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .title-left {
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size3');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 16px;*/
|
|
|
+ color: #101010;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-right {
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ line-height: themed('font-size2');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 14px;
|
|
|
+ line-height: 14px;*/
|
|
|
+ color: #00b962;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-text {
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 14px;*/
|
|
|
+ position: absolute;
|
|
|
+ top: 23px;
|
|
|
+ right: 36px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-font {
|
|
|
+
|
|
|
+ /* width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 24px;*/
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size7');
|
|
|
+ width: themed('font-size7');
|
|
|
+ height: themed('font-size7');
|
|
|
+ line-height: themed('font-size7');
|
|
|
+ }
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 12px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-item {
|
|
|
+ padding: 16px 0;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid rgba(238, 242, 240, 100);
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ width: 44px;
|
|
|
+ /* height: 20px;
|
|
|
+ line-height: 20px;*/
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(0, 185, 98, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ /* font-size: 12px;*/
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ height: themed('font-size5');
|
|
|
+ line-height: themed('font-size5');
|
|
|
+ }
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text5 {
|
|
|
+ width: 44px;
|
|
|
+ /* height: 20px;
|
|
|
+ line-height: 20px;*/
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: #9d9fff;
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ height: themed('font-size5');
|
|
|
+ line-height: themed('font-size5');
|
|
|
+ }
|
|
|
+
|
|
|
+ /*font-size: 12px;*/
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ /* width: 40px;
|
|
|
+ line-height: 19px;*/
|
|
|
+ margin-left: 8px;
|
|
|
+ color: rgba(255, 98, 0, 100);
|
|
|
+
|
|
|
+ /* font-size: 20px;*/
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size5');
|
|
|
+ line-height: themed('font-size5');
|
|
|
+ width: themed('font-size15')
|
|
|
+ }
|
|
|
+
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text3 {
|
|
|
+ margin-left: 4px;
|
|
|
+ color: rgba(51, 51, 51, 100);
|
|
|
+
|
|
|
+ /* font-size: 16px;*/
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size3');
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .text4 {
|
|
|
+
|
|
|
+ // margin-left: 72px;
|
|
|
+ /* font-size: 12px;
|
|
|
+ line-height: 20px;*/
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size3');
|
|
|
+ line-height: themed('font-size5');
|
|
|
+ }
|
|
|
+
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .park-item {
|
|
|
+ padding: 16px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ width: 44px;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ line-height: themed('font-size5');
|
|
|
+ height: themed('font-size5');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* height: 20px;
|
|
|
+ line-height: 20px;*/
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(78, 148, 255, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ /* font-size: 12px;*/
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ margin-left: 8px;
|
|
|
+ color: rgba(51, 51, 51, 100);
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size3');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 16px;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .text3 {
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ line-height: themed('font-size5');
|
|
|
+ }
|
|
|
+
|
|
|
+ color: #666666;
|
|
|
+ /* font-size: 12px;
|
|
|
+ line-height: 20px;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设备详情
|
|
|
+ .equipment-details {
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 16px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .title-left {
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size3');
|
|
|
+ height: themed('font-size3');
|
|
|
+ font-weight: themed('fontWeight');
|
|
|
+ letter-spacing: themed('letterSpacing');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* height: 16px;*/
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ /* font-size: 16px;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-right {
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ height: themed('font-size3');
|
|
|
+ font-weight: themed('fontWeight');
|
|
|
+ letter-spacing: themed('letterSpacing');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* height: 16px;
|
|
|
+ font-size: 14px;*/
|
|
|
+ .free {
|
|
|
+ color: #00b962;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .equipment-item {
|
|
|
+ margin-left: 52px;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding-bottom: 17px;
|
|
|
+ border-bottom: 1px solid rgba(238, 242, 240, 100);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .left-font {
|
|
|
+ color: #00b962;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size13');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 36px;*/
|
|
|
+ position: absolute;
|
|
|
+ left: -52px;
|
|
|
+ top: -4px
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .name-text {
|
|
|
+ color: #101010;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size3');
|
|
|
+ line-height: themed('font-size3');
|
|
|
+ font-weight: themed('fontWeight');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 16px;
|
|
|
+ line-height: 16px;*/
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .type {
|
|
|
+ /* height: 17px;*/
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ height: themed('font-size4');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 12px;*/
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .charging-gun {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ color: #a5aaa8;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size5');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 20px*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .gun-num {
|
|
|
+ margin-left: 8px;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ line-height: themed('font-size5');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 12px;
|
|
|
+ line-height: 20px; */
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .free-state {
|
|
|
+ color: rgba(0, 185, 98, 100);
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ line-height: themed('font-size5');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 12px;
|
|
|
+ line-height: 20px;*/
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge-state {
|
|
|
+ height: 17px;
|
|
|
+ color: rgba(255, 98, 0, 100);
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ line-height: themed('font-size5');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 12px;
|
|
|
+ line-height: 20px;*/
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-recharge {
|
|
|
+
|
|
|
+ /*
|
|
|
+ height: 16px;
|
|
|
+ line-height: 15px;*/
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size0');
|
|
|
+ line-height: themed('font-size2');
|
|
|
+ height: themed('font-size3');
|
|
|
+ //width: themed('font-size14');
|
|
|
+ min-width: 38px;
|
|
|
+ }
|
|
|
+
|
|
|
+ border-radius: 2px;
|
|
|
+ color: rgba(255, 98, 0, 100);
|
|
|
+ /* font-size: 10px;*/
|
|
|
+ text-align: center;
|
|
|
+ font-family: Arial;
|
|
|
+ border: 1px solid rgba(255, 98, 0, 100);
|
|
|
+ margin-left: 8px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-free {
|
|
|
+
|
|
|
+ /* width: 28px;*/
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size0');
|
|
|
+ line-height: themed('font-size2');
|
|
|
+ height: themed('font-size3');
|
|
|
+ width: themed('font-size9');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* height: 16px;
|
|
|
+ line-height: 15px;*/
|
|
|
+ border-radius: 2px;
|
|
|
+ color: rgba(0, 185, 98, 100);
|
|
|
+ /* font-size: 10px;*/
|
|
|
+ text-align: center;
|
|
|
+ font-family: Arial;
|
|
|
+ border: 1px solid rgba(0, 185, 98, 100);
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 12px 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ .button1 {
|
|
|
+ width: 44%;
|
|
|
+ height: 32px;
|
|
|
+ border: 1px solid rgba(0, 185, 98, 100);
|
|
|
+ color: rgba(0, 185, 98, 100);
|
|
|
+
|
|
|
+ /* font-size: 14px;*/
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button2 {
|
|
|
+ width: 44%;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(0, 185, 98, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 14px;*/
|
|
|
+ margin-left: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttonAppointment {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ position: relative;
|
|
|
+ top: -10rpx;
|
|
|
+ right: -10rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ background-color: rgba(0, 185, 98, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 14px;*/
|
|
|
+ margin-left: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-box {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 87px;
|
|
|
+ border-bottom: 1px solid #7FDCB0;
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ /deep/.u-scroll-box {
|
|
|
+ width: 53.6% !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ // background-color: #4e94ff;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .elderMode .u-cell_title {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold !important;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .charging-gun {
|
|
|
+ padding-bottom: 50px;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 12px 0 8px 0;
|
|
|
+ margin: 0 16px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .free {
|
|
|
+
|
|
|
+
|
|
|
+ max-width: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba(228, 246, 234, 100);
|
|
|
+ color: rgba(0, 140, 74, 100);
|
|
|
+ border-radius: 8px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .charging {
|
|
|
+ background-color: rgba(241, 241, 241, 100);
|
|
|
+ color: rgba(74, 74, 74, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .not-open {
|
|
|
+ background-color: rgba(255, 233, 233, 100);
|
|
|
+ color: rgba(255, 70, 70, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+ .not-open2 {
|
|
|
+ background-color: #fceee5;
|
|
|
+ color: #FF6100;
|
|
|
+
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ width: 45vw;
|
|
|
+ margin-left: 8px;
|
|
|
+
|
|
|
+ .name {
|
|
|
+
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .details {
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ width: 30%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 4px;
|
|
|
+
|
|
|
+ .tag-item {
|
|
|
+ width: 48px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(0, 185, 98, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .not-open-tag {
|
|
|
+ background-color: rgba(192, 196, 208, 100);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .persent {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 16px;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .open-time {
|
|
|
+ padding-top: 5px;
|
|
|
+ border-bottom: 1px solid rgba(238, 242, 240, 100);
|
|
|
+ padding-left: 76px;
|
|
|
+ padding-bottom: 19px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgb(136, 136, 136);
|
|
|
+
|
|
|
+ p {
|
|
|
+ text-indent: 112px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-tab-bar {
|
|
|
+ height: 4px !important;
|
|
|
+ background-color: #00b962 !important;
|
|
|
+ width: 50px !important;
|
|
|
+ left: -15px !important;
|
|
|
+ bottom: -5px !important;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-cell__value {
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 12px;
|
|
|
+ color: #101010;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-model__content__message {
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .main {
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .tabs-box {
|
|
|
+ width: 55%;
|
|
|
+ height: 88rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ // line-height: 44px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 145rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-frame {
|
|
|
+ padding-left: 32rpx;
|
|
|
+
|
|
|
+ /* position: absolute;
|
|
|
+ top:260rpx;
|
|
|
+ */
|
|
|
+ .time-items {
|
|
|
+ padding-right: 32rpx;
|
|
|
+ height: 152rpx;
|
|
|
+ border-bottom: #F2F4F4 2rpx solid;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .time-price {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 32rpx 0 20rpx;
|
|
|
+
|
|
|
+ .time {
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size3');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 32rpx;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ .price-text {
|
|
|
+ color: #ff3d00;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size4');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 36rpx;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size2');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 28rpx;*/
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .unitPrice-serviceCharge {
|
|
|
+ float: right;
|
|
|
+
|
|
|
+ @include themeify {
|
|
|
+ font-size: themed('font-size1');
|
|
|
+ }
|
|
|
+
|
|
|
+ /* font-size: 24rpx;*/
|
|
|
+ color: #888888;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .product_tip {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 55rpx;
|
|
|
+ height: 55rpx;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ position: relative;
|
|
|
+ top: 0rpx;
|
|
|
+ right: 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product_tip_bg {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-bottom: 44rpx solid #FD662A;
|
|
|
+ border-right: 44rpx solid transparent;
|
|
|
+ border-left: 44rpx solid transparent;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ position: absolute;
|
|
|
+ top: -7rpx;
|
|
|
+ right: -29rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
-
|
|
|
-
|
zhengkaixin