|
|
@@ -1,41 +1,38 @@
|
|
|
<template>
|
|
|
<view style="padding-bottom: 296rpx;">
|
|
|
<ujp-navbar title="充电价格详情"></ujp-navbar>
|
|
|
- <view class="main" >
|
|
|
- <view class="tabs-box" v-show="false">
|
|
|
- <u-tabs inactive-color="#888888" active-color="#101010" :list="list" :is-scroll="true"
|
|
|
- :current="current" @change="change"></u-tabs>
|
|
|
- </view>
|
|
|
- <view style="width: 100%;">
|
|
|
- <view v-show="false"><u-line color="#999999" /></view>
|
|
|
- <view class="time-frame" v-for="(item,index) in items" :key="index">
|
|
|
- <view class="time-items">
|
|
|
- <view class="time-price">
|
|
|
- <view class="time">
|
|
|
- {{item.time}}
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <text class="price-text">{{item.price.toFixed(2)}}</text>
|
|
|
- <text class="unit">元/度</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="unitPrice-serviceCharge" v-if="!chargingStation.giveDiscount">
|
|
|
- 充电单价：{{item.single_price.toFixed(2)}}元 | 服务费：{{item.service_price.toFixed(2)}}元
|
|
|
- </view>
|
|
|
- <view class="unitPrice-serviceCharge" v-if="chargingStation.giveDiscount">
|
|
|
-
|
|
|
- 充电单价：{{item.electricityPrice.toFixed(2)}}元 | 服务费：折后{{item.discountServicePrice}}元(折前{{item.servicePrice.toFixed(2)}})
|
|
|
-
|
|
|
- </view>
|
|
|
- <view v-if="item.current" class="product_tip">
|
|
|
- <view class="product_tip_bg"></view>
|
|
|
- <p>当前</p>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="price-main">
|
|
|
+ <view class="price-item" v-for="(item,i) in list" :key="i">
|
|
|
+ <view class="time " v-if="!item.current">
|
|
|
+ {{item.startTime}}-{{item.endTime}}
|
|
|
+ </view>
|
|
|
+ <view class="time curent" v-if="item.current">
|
|
|
+ {{item.startTime}}-{{item.endTime}} <view class="current-time">当前时段</view>
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <text class="price-1"><text class="num">{{item.costPrice.toFixed(2)}}</text> <text >元/度</text></text>
|
|
|
+ <text class="price-2" v-if="stationDetail.station&&stationDetail.station.giveDiscount" >
|
|
|
+ <text class="num">{{((item.servicePrice*1000+item.electricityPrice*1000)/1000).toFixed(2)}}元/度</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="else-price">
|
|
|
+ <view class="electric-price">
|
|
|
+ 电费{{item.electricityPrice.toFixed(2)}}元/度
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ v-if="stationDetail&&stationDetail.giveDiscount"
|
|
|
+
|
|
|
+ class="service-price">服务费{{item.discountServicePrice}}元/度(折前{{item.servicePrice.toFixed(2)}}元/度)</view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ v-if="stationDetail&&!stationDetail.giveDiscount"
|
|
|
+ class="service-price">服务费{{item.servicePrice}}元/度</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-<!-- <view class="line-box"><u-line color="#999999" /></view>-->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#F2F4F4">*充电费用仅供参考，请以充电桩上的费用为准。</u-divider>
|
|
|
|
|
|
@@ -68,82 +65,35 @@
|
|
|
},
|
|
|
onLoad(op){
|
|
|
_self = this;
|
|
|
- if(op.type){
|
|
|
- this.type=op.type;
|
|
|
- }
|
|
|
- if(op.id){
|
|
|
- this.id=op.id;
|
|
|
- }
|
|
|
- if(op.deviceNo){
|
|
|
- this.deviceNo=op.deviceNo
|
|
|
- }
|
|
|
|
|
|
- let date = new Date();
|
|
|
- let hours = date.getHours();
|
|
|
- let minutes = date.getMinutes();
|
|
|
- let seconds = date.getSeconds();
|
|
|
- let date_str = formatNum(hours)+ ':'+ formatNum(minutes);//+ ' ' +formatWeek;
|
|
|
|
|
|
if(op!=null && op.stationId!=null){
|
|
|
//('stationId'+JSON.stringify(op.stationId))
|
|
|
let data = {stationId:op.stationId};
|
|
|
- api.getChargingStationPrice(data).then(function(res){
|
|
|
+ api.getChargingStationPrice(data).then(res=>{
|
|
|
// //('data'+JSON.stringify(res))
|
|
|
if(res.result){
|
|
|
+ _self.stationDetail=res.data.chargingStation;
|
|
|
+
|
|
|
let data = res.data;
|
|
|
- _self.chargingStation=res.data.chargingStation;
|
|
|
- if(data.prices){
|
|
|
- //('data'+JSON.stringify(data.prices))
|
|
|
-
|
|
|
- _self.list = [];
|
|
|
- for(let i = 0;i< data.prices.length;i++){
|
|
|
- let _item = data.prices[i];
|
|
|
- if(_self.deviceNo){
|
|
|
-
|
|
|
- if(_item.deviceNo==_self.deviceNo){
|
|
|
- _self.current=i;
|
|
|
- }
|
|
|
- }else if(_self.id){
|
|
|
-
|
|
|
- if(_item.id==_self.id){
|
|
|
- _self.current=i;
|
|
|
- }
|
|
|
- }else{
|
|
|
- if(_item.type==_self.type){
|
|
|
- if(_self.current==0){
|
|
|
- _self.current=i;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let item = {name:data.prices[i].name,items:[]};
|
|
|
- for(let j = 0;j<_item.priceList.length;j++){
|
|
|
- let _subitem = _item.priceList[j];
|
|
|
- //('priceList'+JSON.stringify(_subitem))
|
|
|
-
|
|
|
- let subitem =_subitem;
|
|
|
- subitem.time = _subitem.startTime + '-'+_subitem.endTime;
|
|
|
- subitem.single_price = _subitem.electricityPrice;
|
|
|
- subitem.service_price = _subitem.servicePrice;
|
|
|
- subitem.price = _subitem.costPrice;
|
|
|
- subitem.current = false;
|
|
|
- let start_time = subitem.time.substr(0,5);
|
|
|
- let end_time = subitem.time.substr(6,5);
|
|
|
- if(date_str>=start_time && date_str<= end_time)
|
|
|
- {
|
|
|
- subitem.current = true;
|
|
|
- }
|
|
|
- subitem.startTime = _subitem.startTime;
|
|
|
- subitem.endTime = _subitem.endTime;
|
|
|
- item.items.push(subitem);
|
|
|
- }
|
|
|
- _self.list.push(item);
|
|
|
- }
|
|
|
- if(_self.list.length>0){
|
|
|
- _self.change(_self.current);
|
|
|
+
|
|
|
+ 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.list = res.data.prices[0].priceList
|
|
|
+ console.log(this.list)
|
|
|
+
|
|
|
+ for (var i in this.list) {
|
|
|
+ var obj = this.list[i]
|
|
|
+
|
|
|
+ if (date_str >= obj.startTime && date_str <= obj.endTime) {
|
|
|
+ obj.current = true;
|
|
|
}
|
|
|
- //('站点价格详情'+JSON.stringify(_self.list));
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
@@ -323,4 +273,64 @@
|
|
|
.tabs-box{
|
|
|
width: 90% !important;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ // 价格详情
|
|
|
+ .price-main{
|
|
|
+ background-color: #fff;
|
|
|
+ .price-item{
|
|
|
+ padding: 10px 20px 10px 0;
|
|
|
+ margin-left: 20px;
|
|
|
+ border-bottom:rgb(238, 242, 240) solid 1px;
|
|
|
+ .time{
|
|
|
+ color: #27bfa1;
|
|
|
+ font-size: 16px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ }
|
|
|
+ .curent{
|
|
|
+ position: relative;
|
|
|
+ color: #ff8b17;
|
|
|
+ .current-time{
|
|
|
+ background-color: #ffecdd;
|
|
|
+ width: 88px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding:2px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ color: #101010;
|
|
|
+
|
|
|
+ .price-1{
|
|
|
+
|
|
|
+
|
|
|
+ .num{
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 550;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-2{
|
|
|
+ margin-left: 8px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ .num{
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .else-price{
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ font-size: 24rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
</style>
|
zhengkaixin