You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
4.3 KiB
123 lines
4.3 KiB
<template> |
|
<view style="width: 100vw;height: 100vh;"> |
|
<view v-if="pageData" class="Order_body flex column"> |
|
<view class="Order_header"> |
|
<view class="Order_header_type">{{ pageData.orderStatus | orderStatus}}</view> |
|
<view class="Order_header_tip"> |
|
{{pageData.orderStatus|orderStatusText}} |
|
</view> |
|
</view> |
|
<view class="Order_content oneflex flex column "> |
|
<view class="Order_content_header">{{pageData.stationName}}</view> |
|
<view class="Order_content_information oneflex"> |
|
<view class="Order_content_information_item flex"> |
|
<view class="Order_content_information_item_label">订单编号：</view> |
|
<view class="Order_content_information_item_value oneflex value_text">{{pageData.id}}</view> |
|
</view> |
|
<view class="Order_content_information_item flex"> |
|
<view class="Order_content_information_item_label">充电接口编号：</view> |
|
<view class="Order_content_information_item_value oneflex value_text">{{pageData.connectorId}}</view> |
|
</view> |
|
<view class="Order_content_information_item flex"> |
|
<view class="Order_content_information_item_label">累计充电量：</view> |
|
<view class="Order_content_information_item_value oneflex value_text">{{ tool.getnum(pageData.totalPower) }}度</view> |
|
</view> |
|
<view class="Order_content_information_item flex"> |
|
<view class="Order_content_information_item_label">预支付总金额：</view> |
|
<view class="Order_content_information_item_value oneflex value_text">{{ tool.getnum(pageData.payMoneyPre,3) }}元</view> |
|
</view> |
|
<view class="price_time_interval"> |
|
<view class="price_time_interval_label">价格</view> |
|
<view class="time_interval flex"> |
|
<view v-for="(item,index) in pageData.xchargeOrderDetailList" style="width: 100%;margin-bottom: 15rpx;" class=""> |
|
<view class="flex ac"> |
|
<text style="color: #333333;">{{item.detailStartTime.split(' ')[1] }}-{{item.detailEndTime.split(' ')[1]}}</text> |
|
<text |
|
class="time_interval_price oneflex">{{ tool.getnum( ( ((Number(item.serviceFee2customer)*1000) + (Number(item.electricityFee2customer) * 1000)) / 1000 ) ,3 )}} /度 |
|
<text class="bluetext"> |
|
{{tool.getnum(item.detailPower)}}度 | {{ |
|
tool.getnum(( ((Number(item.serviceMoney2customer)*1000) + (Number(item.electricityMoney2customer *1000) )) / 1000 ),3) |
|
}}元 |
|
</text> |
|
</text> |
|
</view> |
|
<view class="time_interval_bottom_price">电价 {{ tool.getnum(item.electricityFee2customer,3) }}元 /度|服务费 {{ tool.getnum(item.serviceFee2customer,3) }} 元/度</view> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
<view class="Order_content_information_item flex"> |
|
<view class="Order_content_information_item_label">退款金额：</view> |
|
<view class="Order_content_information_item_value oneflex bluetext">{{ tool.getnum(pageData.refundMoneyAcc,3) }}元</view> |
|
</view> |
|
<view class="Order_content_information_item flex"> |
|
<view class="Order_content_information_item_label">实付总金额：</view> |
|
<view class="Order_content_information_item_value oneflex red_text">{{ tool.getnum(pageData.payMoneyAcc,3) }}元</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<skeleton v-else></skeleton> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import order from '@/api/order.js' |
|
import skeleton from './skeleton.vue' |
|
export default { |
|
components:{ |
|
skeleton |
|
}, |
|
data() { |
|
return { |
|
pageData: null |
|
} |
|
}, |
|
onLoad(e) { |
|
if (e.id) { |
|
this.getDetails(e.id) |
|
} |
|
}, |
|
filters: { |
|
orderStatusText(e) { |
|
switch (Number(e)) { |
|
case 1: |
|
return '启动中' |
|
case 2: |
|
return '正在充电' |
|
case 3: |
|
return '正在停止充电' |
|
case 4: |
|
return '您已完成充电' |
|
default: |
|
return '数据错误' |
|
} |
|
}, |
|
orderStatus(e) { |
|
switch (Number(e)) { |
|
case 1: |
|
return '启动中' |
|
case 2: |
|
return '充电中' |
|
case 3: |
|
return '停止中' |
|
case 4: |
|
return '已结束' |
|
default: |
|
return '数据错误' |
|
} |
|
}, |
|
}, |
|
methods: { |
|
getDetails(id) { |
|
order.xchargeOrderInfo(id).then(res => { |
|
this.pageData = res.data; |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import 'index.scss'; |
|
</style> |