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.
492 lines
13 KiB
492 lines
13 KiB
<template>
|
|
<view class="content">
|
|
<view class="title_tops">
|
|
<view class="status_title">
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 0">
|
|
初始化
|
|
</view>
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 1">
|
|
充电中
|
|
</view>
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 2">
|
|
启动充电失败
|
|
</view>
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 3">
|
|
结束充电
|
|
</view>
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 4">
|
|
待支付
|
|
</view>
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 5">
|
|
(已完成)支付完成
|
|
</view>
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 6">
|
|
支付失败
|
|
</view>
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 7">
|
|
已退款
|
|
</view>
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 8">
|
|
已挂起
|
|
</view>
|
|
<view style="font-weight: 600" v-if="detail.list.orderStatus == 9">
|
|
已关闭
|
|
</view>
|
|
<view style="margin-top: 10rpx;">充电开始时间: {{detail.list.startTime==null?'--':detail.list.startTime}}
|
|
</view>
|
|
</view>
|
|
<view class="line_center">
|
|
<view class="white_box">
|
|
<view class="flex justify-between flex-wrap padding-sm">
|
|
<view class="name">{{detail.list.stationName==null?'--':detail.list.stationName}}</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between flex-wrap list-view">
|
|
<view class="staName">场站编码 </view>
|
|
<view class="staNum">{{detail.list.stationNo==null?'--':detail.list.stationNo}}</view>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap list-view">
|
|
<view class="staName">充电订单号 </view>
|
|
<view class="staNum">{{detail.list.chargeOrder==null?'--':detail.list.chargeOrder}}</view>
|
|
</view>
|
|
<view class="flex justify-between list-view">
|
|
<view class="staName">车牌号 </view>
|
|
<view class="staNum">{{detail.list.vehicleNo==null?'--':detail.list.vehicleNo}}</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between list-view">
|
|
<view class="staName">车辆vin</view>
|
|
<view class="staNum">{{detail.list.vin==null?'--':detail.list.vin}}</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between list-view">
|
|
<view class="staName">充电结束时间</view>
|
|
<view class="staNum">{{detail.list.endTime==null?'--':detail.list.endTime}}</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between list-view">
|
|
<view class="staName">充电时长</view>
|
|
<view class="staNum">{{detail.list.chargingTime==null?'--':detail.list.chargingTime}} 分钟</view>
|
|
</view>
|
|
<!-- -->
|
|
<view class="flex justify-between flex-wrap padding-sm">
|
|
<view class="name" style="font-size: 35rpx">费用信息</view>
|
|
</view>
|
|
<view class="flex padding-sm justify-between flex-wrap">
|
|
<view class="titleName">费用合计</view>
|
|
<view class="money text-price">{{detail.list.totalFee==null?'0':detail.list.totalFee / 100}}元
|
|
</view>
|
|
</view>
|
|
<view class="right_pay_mean">
|
|
<view>
|
|
<text>电价费用</text>
|
|
<text>{{detail.list.elecTotalExpense==null?'0':detail.list.elecTotalExpense / 100}}元</text>
|
|
</view>
|
|
<view>
|
|
<text>平台服务费</text>
|
|
<text>{{detail.list.cloudTotalFee==null?'0':detail.list.cloudTotalFee / 100}}元</text>
|
|
</view>
|
|
<view>
|
|
<text>电池服务费</text>
|
|
<text>{{detail.list.batTotalFee==null?'0':detail.list.batTotalFee / 100}}元</text>
|
|
</view>
|
|
<view>
|
|
<text>充电服务总费用</text>
|
|
<text>{{detail.list.chargeTotalFee==null?'0':detail.list.chargeTotalFee / 100}}元</text>
|
|
</view>
|
|
</view>
|
|
<view class="line_bottom">
|
|
<view></view>
|
|
</view>
|
|
<view style="padding: 0 20rpx; box-sizing:border-box">
|
|
<view v-for="(item,index) in detail.list.orderTimeList">
|
|
<view class="power_title">
|
|
<text>{{item.startTime}} - {{item.endTime}} 充电
|
|
{{ item.electric == null? 0: item.electric }}
|
|
度</text>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName" style="display: flex; align-items: center">电 费(
|
|
{{item.electricityPrice == null? 0: item.electricityPrice / 100}}元 / 度 )
|
|
</view>
|
|
<view class="staNum">
|
|
¥{{ item.electricityExpense == null? 0: item.electricityExpense / 100 }}
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName" style="display: flex; align-items: center">服务费(
|
|
{{item.servicePrice == null? 0: item.servicePrice / 100}}元/度 )
|
|
</view>
|
|
<view class="staNum">
|
|
¥{{item.serviceExpense == null? 0: item.serviceExpense / 100 }}</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="power_title">
|
|
<text>尖时段充电 {{ handle_power(detail.list.theTipElectric,detail.list.theTipElectricAcMeter) }} 度</text>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName">电费</view>
|
|
<view class="staNum">{{ handle_electricity(detail.list.theTipExpense,detail.list.theTipExpenseAcMeter) }}元</view>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName">单价</view>
|
|
<view class="staNum">{{detail.list.theTipPrice == null? 0: detail.list.theTipPrice / 100}}元</view>
|
|
</view> -->
|
|
<!-- -->
|
|
<!-- <view class="power_title">
|
|
<text>峰时段充电 {{ handle_power(detail.list.peakElectric,detail.list.peakElectricAcMeter) }} 度</text>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName">电费</view>
|
|
<view class="staNum">{{ handle_electricity(detail.list.peakExpense,detail.list.peakExpenseAcMeter) }}元</view>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName">单价</view>
|
|
<view class="staNum">{{detail.list.peakPrice == null? 0: detail.list.peakPrice / 100}}元</view>
|
|
</view> -->
|
|
<!-- -->
|
|
<!-- <view class="power_title">
|
|
<text>平时段充电 {{ handle_power(detail.list.flatElectric,detail.list.flatElectricAcMeter) }} 度</text>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName">电费</view>
|
|
<view class="staNum">{{ handle_electricity(detail.list.flatExpense,detail.list.flatExpenseAcMeter) }}元</view>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName">单价</view>
|
|
<view class="staNum">{{detail.list.flatPrice == null? 0: detail.list.flatPrice / 100}}元</view>
|
|
</view> -->
|
|
<!-- -->
|
|
<!-- <view class="power_title">
|
|
<text>谷时段充电 {{ handle_power(detail.list.theValleyElectric,detail.list.theValleyElectricAcMeter) }} 度</text>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName">电费</view>
|
|
<view class="staNum">{{ handle_electricity(detail.list.theValleyExpense,detail.list.theValleyExpenseAcMeter) }}元</view>
|
|
</view>
|
|
<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
|
|
<view class="staName">单价</view>
|
|
<view class="staNum">{{detail.list.theValleyPrice == null? 0: detail.list.theValleyPrice / 100}}元</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn_pay" v-if="detail.list.orderStatus == 4">
|
|
<button style="font-size: 14px;" type="primary" @click="handle_pay">去支付</button>
|
|
</view>
|
|
<!-- <view class="btn_pay" v-if="detail.list.payStatus == 2">
|
|
<button style="font-size: 14px;" type="primary" @click="pay_handle_refund">申请退款</button>
|
|
</view> -->
|
|
<view class="btn_pay" v-if="detail.list.invoiceFlag == null || detail.list.invoiceFlag == 0">
|
|
<button style="font-size: 14px;" type="primary" @click="pay_handle_invoice">申请开票</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import config from '@/common/config/config.js';
|
|
import sheep from '@/sheep';
|
|
import {
|
|
reactive,
|
|
ref,
|
|
} from "vue";
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
onUnload
|
|
} from "@dcloudio/uni-app";
|
|
|
|
import {
|
|
useCounterStore
|
|
} from '@/stores/counter.js';
|
|
|
|
|
|
const detail = reactive({
|
|
list: []
|
|
})
|
|
const timer = ref(null)
|
|
const isorderStatus = ref(false)
|
|
onLoad((options) => {
|
|
var station = JSON.parse(options.details);
|
|
detail.list = station
|
|
})
|
|
onShow(() => {})
|
|
onUnload(() => {
|
|
|
|
})
|
|
const charging_data = ref({})
|
|
const istipsonly = ref(0)
|
|
|
|
const handle_pay = async () => {
|
|
await uni.request({ //刷新token
|
|
url: config.baseUrl + "app-api/cloud/outCharge/createPayOrder/" + detail.list.id,
|
|
method: 'GET',
|
|
header: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
'Authorization': 'Bearer ' + uni.getStorageSync('token'),
|
|
'tenant-id': 1
|
|
}
|
|
}).then(res => {
|
|
console.log(res, '支付信息')
|
|
if (res.data.code == 0) {
|
|
handle_pay_money(res.data.data)
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: res.data.msg,
|
|
showCancel: false,
|
|
success: function(res) {
|
|
|
|
}
|
|
});
|
|
}
|
|
})
|
|
}
|
|
const pay_handle_refund = async () => {
|
|
await uni.$request({ //刷新token
|
|
url: config.baseUrl + "app-api/cloud/refund-order/create",
|
|
method: 'POST',
|
|
data: {
|
|
orderNo: detail.list.orderNo,
|
|
refundPrice: detail.list.totalFee / 100,
|
|
type: 1
|
|
}
|
|
}).then(res => {
|
|
if (res.data.code == 0) {
|
|
uni.showToast({
|
|
title: '申请成功',
|
|
duration: 2000,
|
|
icon: 'success'
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
const pay_handle_invoice = () => {
|
|
sheep.$router.go('/pagesCenter/billingPage/addInvoice/addInvoice', {
|
|
orderNo: detail.list.id,
|
|
orderType: 2,
|
|
});
|
|
}
|
|
|
|
const handle_pay_money = async (e) => {
|
|
sheep.$router.go('/pagesCenter/pay/index', {
|
|
id: e.payOrderId,
|
|
orderType: 'recharge',
|
|
});
|
|
}
|
|
|
|
const handle_electricity = (one, two) => {
|
|
let ones = one == null ? 0 : one / 100
|
|
let twos = two == null ? 0 : two / 100
|
|
return ones + twos
|
|
}
|
|
//
|
|
const handle_power = (one, two) => {
|
|
let ones = one == null ? 0 : one
|
|
let twos = two == null ? 0 : two
|
|
return ones + twos
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
height: 100vh;
|
|
background: #F7F8FA;
|
|
position: relative;
|
|
}
|
|
|
|
.cu-card.article>.cu-item {
|
|
padding-bottom: 0rpx;
|
|
}
|
|
|
|
.payState {
|
|
color: #4C91FF;
|
|
font-size: 39rpx;
|
|
}
|
|
|
|
.non-payment {
|
|
color: #FF7B0E;
|
|
font-size: 39rpx;
|
|
}
|
|
|
|
.refunded_0 {
|
|
color: #06efef;
|
|
font-size: 39rpx;
|
|
}
|
|
|
|
.refunded_1 {
|
|
color: #00aaff;
|
|
font-size: 39rpx;
|
|
}
|
|
|
|
.refunded_2 {
|
|
color: #00aa00;
|
|
font-size: 39rpx;
|
|
}
|
|
|
|
.refunded_3 {
|
|
color: #aa0000;
|
|
font-size: 39rpx;
|
|
}
|
|
|
|
.refunded_4 {
|
|
color: #ffff00;
|
|
font-size: 39rpx;
|
|
}
|
|
|
|
.refunded_5 {
|
|
color: #55557f;
|
|
font-size: 39rpx;
|
|
}
|
|
|
|
.refunded_6 {
|
|
color: #aaaa7f;
|
|
font-size: 39rpx;
|
|
}
|
|
|
|
.name {
|
|
color: #333;
|
|
font-size: 39rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.titleName {
|
|
color: #808080;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.staName {
|
|
color: #808080;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.staNum {
|
|
color: #333333;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.money {
|
|
color: #4C91FF;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.list-view {
|
|
padding: 0rpx 20rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.btn_pay {
|
|
// width: 100%;
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
right: 0;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.posi_loading {
|
|
position: absolute;
|
|
right: 50rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
//
|
|
.title_tops {
|
|
height: 260rpx;
|
|
background: #0aca46;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.status_title {
|
|
position: absolute;
|
|
left: 80rpx;
|
|
top: 10rpx;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.line_center {
|
|
width: 90%;
|
|
height: 20rpx;
|
|
background: #08ab40;
|
|
position: relative;
|
|
|
|
// border-radius: 10rpx;
|
|
.white_box {
|
|
width: 95%;
|
|
height: 1000rpx;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
padding: 15rpx;
|
|
background: #fff;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
box-shadow:
|
|
0px 1.4px 1.2px rgba(0, 0, 0, 0.017),
|
|
0px 3.4px 2.9px rgba(0, 0, 0, 0.024),
|
|
0px 6.4px 5.5px rgba(0, 0, 0, 0.03),
|
|
0px 11.4px 9.8px rgba(0, 0, 0, 0.036),
|
|
0px 21.3px 18.4px rgba(0, 0, 0, 0.043),
|
|
0px 51px 44px rgba(0, 0, 0, 0.06);
|
|
border-bottom-left-radius: 15rpx;
|
|
border-bottom-right-radius: 15rpx;
|
|
}
|
|
}
|
|
|
|
.right_pay_mean {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// align-items: end;
|
|
// justify-content: end;
|
|
font-size: 13px;
|
|
padding: 0 20rpx;
|
|
|
|
>view {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
// text-align: end;
|
|
>text:first-child {
|
|
width: 220rpx;
|
|
text-align: end;
|
|
}
|
|
|
|
>text:last-child {
|
|
width: 100rpx;
|
|
text-align: end;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line_bottom {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 20rpx 0 0 0;
|
|
|
|
>view {
|
|
width: calc(100% - 40rpx);
|
|
height: 1px;
|
|
background: #ccc;
|
|
}
|
|
}
|
|
|
|
.power_title {
|
|
font-size: 26rpx;
|
|
color: #000;
|
|
font-weight: 600;
|
|
display: flex;
|
|
|
|
>text {
|
|
border-bottom: 1px solid #ccc;
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
</style> |