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.
417 lines
12 KiB
417 lines
12 KiB
<template>
|
|
<view class="content">
|
|
<view class="cu-card article" style="position: relative;">
|
|
<view class="cu-item shadow">
|
|
<view class="padding-sm justify-between">
|
|
<!-- <view
|
|
:class="{'refunded' : charging_data.orderStatus== 1 ,'non-payment' : charging_data.orderStatus== 0,'payState': charging_data.orderStatus== 2}">
|
|
{{['初始化','充电中','启动充电失败','结束充电','待支付','(已完成)支付完成','支付失败','已退款','已挂起','已关闭'][charging_data.orderStatus==null?'':charging_data.orderStatus]}}
|
|
</view> -->
|
|
<view class="refunded_0" v-if="charging_data.orderStatus == 0">
|
|
初始化
|
|
</view>
|
|
<view class="refunded_1" v-if="charging_data.orderStatus == 1">
|
|
充电中
|
|
</view>
|
|
<view class="refunded_3" v-if="charging_data.orderStatus == 2">
|
|
启动充电失败
|
|
</view>
|
|
<view class="refunded_2" v-if="charging_data.orderStatus == 3">
|
|
结束充电
|
|
</view>
|
|
<view class="refunded_1" v-if="charging_data.orderStatus == 4">
|
|
待支付
|
|
</view>
|
|
<view class="refunded_2" v-if="charging_data.orderStatus == 5">
|
|
(已完成)支付完成
|
|
</view>
|
|
<view class="refunded_3" v-if="charging_data.orderStatus == 6">
|
|
支付失败
|
|
</view>
|
|
<view class="refunded_4" v-if="charging_data.orderStatus == 7">
|
|
已退款
|
|
</view>
|
|
<view class="refunded_5" v-if="charging_data.orderStatus == 8">
|
|
已挂起
|
|
</view>
|
|
<view class="refunded_6" v-if="charging_data.orderStatus == 9">
|
|
已关闭
|
|
</view>
|
|
<!-- <view class="posi_loading">
|
|
<uv-loading-icon color="skyblue"></uv-loading-icon>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cu-card article" v-if="isorderStatus == false">
|
|
<view class="cu-item shadow">
|
|
<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.totalElectricity==null?'0':detail.list.totalElectricity}}kW·h
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-between list-view">
|
|
<view class="staName">平台服务费</view>
|
|
<view class="staNum">{{detail.list.cloudTotalFee==null?'0':detail.list.cloudTotalFee / 100}}元</view>
|
|
</view>
|
|
<view class="flex justify-between list-view">
|
|
<view class="staName">电池服务费</view>
|
|
<view class="staNum">{{detail.list.batTotalFee==null?'0':detail.list.batTotalFee / 100}}元</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between list-view">
|
|
<view class="staName">充电服务总费用</view>
|
|
<view class="staNum">{{detail.list.chargeTotalFee==null?'0':detail.list.chargeTotalFee / 100}}元
|
|
</view>
|
|
</view>
|
|
<!-- <view class="flex padding-lr-sm justify-between list-view">
|
|
<view class="staName">尖时段充电电量(直流)</view>
|
|
<view class="staNum">{{ detail.list.theTipElectric==null?'0':detail.list.theTipElectric }}kW·h
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- <view class="flex padding-lr-sm justify-between list-view">
|
|
<view class="staName">峰时段充电电量(直流)</view>
|
|
<view class="staNum">{{ detail.list.peakElectric==null?'0':detail.list.peakElectric }}kW·h</view>
|
|
</view>
|
|
|
|
<view class="flex padding-lr-sm justify-between list-view">
|
|
<view class="staName">平时段充电电量(直流)</view>
|
|
<view class="staNum">{{ detail.list.flatElectric ==null?'0':detail.list.flatElectric}}kW·h</view>
|
|
</view>
|
|
|
|
<view class="flex padding-lr-sm justify-between list-view">
|
|
<view class="staName">谷时段充电电量(直流)</view>
|
|
<view class="staNum">{{ detail.list.theValleyElectric==null?'0':detail.list.theValleyElectric }}kW·h
|
|
</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>
|
|
</view>
|
|
|
|
<view class="cu-card article" v-if="isorderStatus">
|
|
<view class="cu-item shadow">
|
|
<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">{{charging_data.chargeOrder==null?'--':charging_data.chargeOrder}}</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between flex-wrap list-view">
|
|
<view class="staName">枪号 </view>
|
|
<view class="staNum">{{ charging_data.chargerGunNo==null?'--':charging_data.chargerGunNo}}</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between flex-wrap list-view">
|
|
<view class="staName">当前soc </view>
|
|
<view class="staNum">{{ charging_data.currentSoc==null?'--':charging_data.currentSoc}}</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between flex-wrap list-view">
|
|
<view class="staName">当前电压 </view>
|
|
<view class="staNum">{{ charging_data.currentVoltage==null?'--':charging_data.currentVoltage}}
|
|
</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between flex-wrap list-view">
|
|
<view class="staName">当前电流 </view>
|
|
<view class="staNum">{{ charging_data.currentElectrical==null?'--':charging_data.currentElectrical}}
|
|
</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between flex-wrap list-view">
|
|
<view class="staName">剩余充电时间 </view>
|
|
<view class="staNum">
|
|
{{ charging_data.remainingChargingTime==null?'--':charging_data.remainingChargingTime}} (min)
|
|
</view>
|
|
</view>
|
|
<view class="flex padding-lr-sm justify-between flex-wrap list-view">
|
|
<view class="staName">充电时长 </view>
|
|
<view class="staNum">{{ charging_data.chargingTime==null?'--':charging_data.chargingTime}} (min)
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn_pay" v-if="charging_data.orderStatus == 1">
|
|
<button style="font-size: 14px;" type="primary" @click="finish_charg">结束充电</button>
|
|
</view>
|
|
<view class="btn_pay" v-if="charging_data.orderStatus == 4">
|
|
<button style="font-size: 14px;" type="primary" @click="handle_pay">去支付</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 isDetail = useCounterStore()
|
|
|
|
|
|
const detail = reactive({
|
|
list: []
|
|
})
|
|
const timer = ref(null)
|
|
const isorderStatus = ref(false)
|
|
onLoad((options) => {
|
|
var station = JSON.parse(options.details);
|
|
detail.list = station
|
|
// console.log(detail.list, '订单详情');
|
|
if (station.orderStatus == 1) {
|
|
isorderStatus.value = true
|
|
}
|
|
timer.value = setInterval(() => {
|
|
queryRealTimeOrder()
|
|
}, 5000)
|
|
})
|
|
onShow(() => {
|
|
queryRealTimeOrder()
|
|
isDetail.value = true
|
|
})
|
|
onUnload(() => {
|
|
if (timer.value) {
|
|
clearInterval(timer.value)
|
|
timer.value = null
|
|
}
|
|
})
|
|
const charging_data = ref({})
|
|
const istipsonly = ref(0)
|
|
const queryRealTimeOrder = async () => {
|
|
let config_url = ''
|
|
if (uni.getStorageSync("version") == '个人版') {
|
|
config_url = 'app-api/cloud/personal/queryRealTimeOrder/'
|
|
} else {
|
|
config_url = 'app-api/cloud/team/queryRealTimeOrder/'
|
|
}
|
|
await uni.$request({
|
|
url: config.baseUrl + config_url + detail.list.id,
|
|
method: 'GET'
|
|
}).then(res => {
|
|
// console.log(res, '==========>');
|
|
charging_data.value = res.data.data
|
|
if (res.data.data.orderStatus == 1) {
|
|
isorderStatus.value = true
|
|
} else if (res.data.data.orderStatus == 3) {
|
|
if (istipsonly.value == 0) {
|
|
uni.showModal({
|
|
title: '成功',
|
|
showCancel: false,
|
|
content: '结束充电成功,请拔插头',
|
|
success: function(res) {}
|
|
});
|
|
istipsonly.value++
|
|
}
|
|
|
|
}
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: '订单加载失败',
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
})
|
|
}
|
|
|
|
const finish_charg = async () => {
|
|
let config_url = ''
|
|
if (uni.getStorageSync("version") == '个人版') {
|
|
config_url = 'app-api/cloud/personal/endCharge/'
|
|
} else {
|
|
config_url = 'app-api/cloud/team/endCharge/'
|
|
}
|
|
await uni.$request({
|
|
url: config.baseUrl + config_url + charging_data.value.id,
|
|
method: 'GET'
|
|
}).then(res => {
|
|
// console.log(res, '==========>');
|
|
if (res.data.code == 0) {
|
|
// uni.showToast({
|
|
// title: '结束成功',
|
|
// duration: 2000,
|
|
// icon: 'success'
|
|
// });
|
|
uni.showModal({
|
|
title: '提示',
|
|
showCancel: false,
|
|
content: '请等待充电机结束充电...',
|
|
success: function(res) {}
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
}
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: '结束失败',
|
|
duration: 2000,
|
|
icon: 'error'
|
|
});
|
|
|
|
})
|
|
}
|
|
|
|
const handle_pay = async () => {
|
|
await uni.request({ //刷新token
|
|
url: config.baseUrl + "app-api/cloud/outCharge/createPayOrder/" + charging_data.value.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)
|
|
}
|
|
})
|
|
}
|
|
const handle_pay_money = async (e) => {
|
|
sheep.$router.go('/pagesCenter/pay/index', {
|
|
id: e.payOrderId,
|
|
orderType: 'recharge',
|
|
});
|
|
}
|
|
</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%);
|
|
}
|
|
</style> |