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.
612 lines
14 KiB
612 lines
14 KiB
<template>
|
|
<view class="content">
|
|
<view class="wrapper" style="margin-top: 100rpx;">
|
|
<view class="charger">
|
|
<view class="box">
|
|
<view class="wave wave-one" :style="{ 'bottom': 100 - detail.list.currentSoc + '%' }"></view>
|
|
<view class="wave wave-two" :style="{ 'bottom': 100 - detail.list.currentSoc + '%' }"></view>
|
|
<view class="wave wave-three" :style="{ 'bottom': 100 - detail.list.currentSoc + '%' }"></view>
|
|
<view class="bubble x1"></view>
|
|
<view class="bubble x2"></view>
|
|
<view class="bubble x3"></view>
|
|
<view class="bubble x8"></view>
|
|
<view class="bubble x9"></view>
|
|
<view class="bubble x10"></view>
|
|
<view class="bubble x4"></view>
|
|
<view class="bubble x5"></view>
|
|
<view class="bubble x6"></view>
|
|
<view class="bubble x7"></view>
|
|
<view class="bubble x1"></view>
|
|
<view class="bubble x2"></view>
|
|
<view class="bubble x3"></view>
|
|
<view class="bubble x8"></view>
|
|
<view class="bubble x9"></view>
|
|
<view class="bubble x10"></view>
|
|
<view class="title">{{detail.list.currentSoc || 0}}%</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content_item" style="margin-top: 50rpx;">
|
|
<view class="">
|
|
<text>充电电流(A)</text>
|
|
<text>{{detail.list.currentElectrical == null? 0: (detail.list.currentElectrical).toFixed(2)}}</text>
|
|
</view>
|
|
<view class="">
|
|
<text>充电电压(V)</text>
|
|
<text>{{detail.list.currentVoltage == null? 0: (detail.list.currentVoltage).toFixed(2)}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content_item" style="margin-top: 30rpx;">
|
|
<view class="">
|
|
<text>剩余时长(分)</text>
|
|
<text>{{detail.list.remainingChargingTime || 0 }}</text>
|
|
</view>
|
|
<view class="">
|
|
<text>已充时长(分)</text>
|
|
<text>{{detail.list.chargingTime || 0}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="content_item" style="margin-top: 30rpx;">
|
|
<view class="">
|
|
<text>充电电量(kwh)</text>
|
|
<text>{{detail.list.chargingCapacity == null? 0: (detail.list.chargingCapacity).toFixed(2) }}</text>
|
|
</view>
|
|
<view class="">
|
|
<text>总金额(元)</text>
|
|
<text>{{detail.list.totalFee / 100 || 0}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="more_position" style="margin-top: 20rpx;" @click="handle_more_info">
|
|
更多详细信息
|
|
</view>
|
|
|
|
<view class="btn_pay" v-if="detail.list.orderStatus == 1">
|
|
<button style="font-size: 14px;" @click="finish_charg">结束充电</button>
|
|
</view>
|
|
<view class="btn_pay" v-if="detail.list.orderStatus == 4">
|
|
<button style="font-size: 14px; background: #ff7131;" type="primary" @click="handle_pay">去支付</button>
|
|
</view>
|
|
<!-- -->
|
|
<uv-popup ref="more_popup" round="30" :overlay="true" :safeAreaInsetBottom="false">
|
|
<view style="width: 100%;">
|
|
<view class="cu-card article">
|
|
<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.startTime==null?'--':detail.list.startTime}}</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 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.elecTotalExpense==null?'0':detail.list.elecTotalExpense / 100}}元
|
|
</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-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>
|
|
</uv-popup>
|
|
</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 now_ingtext = ref()
|
|
const detail = reactive({
|
|
list: {
|
|
currentSoc: null,
|
|
chargingTime: null,
|
|
chargingCapacity: null,
|
|
remainingChargingTime: null,
|
|
totalFee: null,
|
|
vehicleNo: null,
|
|
stationName: null,
|
|
stationNo: null,
|
|
chargeOrder: null,
|
|
vin: null,
|
|
totalElectricity: null,
|
|
cloudTotalFee: null,
|
|
batTotalFee: null,
|
|
chargeTotalFee: null,
|
|
currentElectrical: null,
|
|
currentVoltage: null,
|
|
chargingCapacity: null
|
|
}
|
|
})
|
|
const timer = ref(null)
|
|
const isorderStatus = ref(false)
|
|
const more_popup = ref(false)
|
|
onLoad((options) => {
|
|
var station = JSON.parse(options.details);
|
|
detail.list = station
|
|
queryRealTimeOrder()
|
|
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, '==========>');
|
|
detail.list = 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 handle_more_info = () => {
|
|
// console.log('1');
|
|
more_popup.value.open('bottom')
|
|
}
|
|
|
|
const finish_charg = () => {
|
|
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '是否确认结束充电？',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
handle_finish_charg()
|
|
} else if (res.cancel) {
|
|
// console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
const handle_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 + detail.list.id,
|
|
method: 'GET'
|
|
}).then(response => {
|
|
if (response.data.code == 0) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
showCancel: false,
|
|
content: '请等待充电机结束充电',
|
|
success: function(res) {}
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: response.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/" + 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)
|
|
}
|
|
})
|
|
}
|
|
const handle_pay_money = async (e) => {
|
|
sheep.$router.go('/pagesCenter/pay/index', {
|
|
id: e.payOrderId,
|
|
orderType: 'recharge',
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
left: 10px;
|
|
width: 240px;
|
|
height: 240px;
|
|
/* background: #fff; */
|
|
border-radius: 50%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform: rotate(180deg);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
/* 半透明白色背景 */
|
|
/* border-radius: 15px; */
|
|
backdrop-filter: blur(20px);
|
|
/* 背景模糊效果 */
|
|
box-shadow: 2px 10px 10px #f2fdf7;
|
|
/* 加一点阴影效果 */
|
|
/* 加一点阴影效果 */
|
|
}
|
|
|
|
.wave {
|
|
opacity: 0.4;
|
|
position: absolute;
|
|
bottom: 60%;
|
|
left: 50%;
|
|
background: linear-gradient(to right, #51d287, #12d362);
|
|
width: 500px;
|
|
height: 500px;
|
|
transform-origin: 50% 48%;
|
|
border-radius: 40%;
|
|
margin-left: -250px;
|
|
margin-top: -250px;
|
|
animation: 9000ms linear infinite reverse drift;
|
|
}
|
|
|
|
.wave-three {
|
|
animation: 10000ms linear infinite drift;
|
|
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.wave .wave-two {
|
|
animation: 17000ms linear infinite backwards drift;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.shade {
|
|
width: 25px;
|
|
height: 70px;
|
|
background: #fc67fa;
|
|
border-radius: 25px;
|
|
position: relative;
|
|
left: 85%;
|
|
top: 10%;
|
|
}
|
|
|
|
.x1 {
|
|
animation: animateBubble 5s linear infinite,
|
|
sideWays 10s ease-in-out infinite alternate;
|
|
left: -5%;
|
|
top: 5%;
|
|
transform: scale(0.1);
|
|
}
|
|
|
|
.x2 {
|
|
animation: animateBubble 7s linear infinite,
|
|
sideWays 10s ease-in-out infinite alternate;
|
|
left: 5%;
|
|
top: 4%;
|
|
transform: scale(0.09);
|
|
}
|
|
|
|
.x3 {
|
|
animation: animateBubble 6s linear infinite,
|
|
sideWays 10s ease-in-out infinite alternate;
|
|
left: 5%;
|
|
top: 10%;
|
|
transform: scale(0.09);
|
|
}
|
|
|
|
.x4 {
|
|
animation: animateBubble 8s linear infinite,
|
|
sideWays 10s ease-in-out infinite alternate;
|
|
left: 5%;
|
|
top: 8%;
|
|
transform: scale(0.09);
|
|
}
|
|
|
|
.x5 {
|
|
animation: animateBubble 7s linear infinite,
|
|
sideWays 12s ease-in-out infinite alternate;
|
|
left: 5%;
|
|
top: 8%;
|
|
transform: scale(0.09);
|
|
}
|
|
|
|
.x6 {
|
|
animation: animateBubble 9s linear infinite,
|
|
sideWays 10s ease-in-out infinite alternate;
|
|
left: 5%;
|
|
top: 8%;
|
|
transform: scale(0.09);
|
|
}
|
|
|
|
.x7 {
|
|
animation: animateBubble 8s linear infinite,
|
|
sideWays 10s ease-in-out infinite alternate;
|
|
left: 5%;
|
|
top: 8%;
|
|
transform: scale(0.09);
|
|
}
|
|
|
|
.x8 {
|
|
animation: animateBubble 10s linear infinite,
|
|
sideWays 4s ease-in-out infinite alternate;
|
|
left: 5%;
|
|
top: 8%;
|
|
transform: scale(0.09);
|
|
}
|
|
|
|
.x9 {
|
|
animation: animateBubble 9s linear infinite,
|
|
sideWays 8s ease-in-out infinite alternate;
|
|
left: 5%;
|
|
top: 8%;
|
|
transform: scale(0.09);
|
|
}
|
|
|
|
.x10 {
|
|
animation: animateBubble 10s linear infinite,
|
|
sideWays 10s ease-in-out infinite alternate;
|
|
left: 5%;
|
|
top: 8%;
|
|
transform: scale(0.09);
|
|
}
|
|
|
|
.bubble {
|
|
border-radius: 50%;
|
|
height: 200px;
|
|
position: absolute;
|
|
width: 200px;
|
|
}
|
|
|
|
.bubble:after {
|
|
background: linear-gradient(#51d287, #c8f1d9);
|
|
border-radius: 50%;
|
|
content: "";
|
|
height: 180px;
|
|
left: 10px;
|
|
position: absolute;
|
|
width: 180px;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
bottom: 70%;
|
|
transform: rotate(180deg);
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
z-index: 999;
|
|
|
|
}
|
|
|
|
@keyframes drift {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
from {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes animateBubble {
|
|
0% {
|
|
margin-top: 900%;
|
|
}
|
|
|
|
100% {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
@keyframes sideWays {
|
|
0% {
|
|
margin-left: 50px;
|
|
}
|
|
|
|
100% {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
//
|
|
|
|
.content {
|
|
height: 100vh;
|
|
background: #eef1ff;
|
|
position: relative;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: center;
|
|
align-items: center
|
|
}
|
|
|
|
.content_item {
|
|
width: 90%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
|
|
>view {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
>text:first-child {
|
|
color: #868686;
|
|
font-size: 14px;
|
|
}
|
|
|
|
>text:last-child {
|
|
margin-top: 10rpx;
|
|
color: #000;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.more_position {
|
|
position: absolute;
|
|
top: 30rpx;
|
|
right: 30rpx;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #29cd5f;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.btn_pay {
|
|
// width: 100%;
|
|
position: absolute;
|
|
bottom: 200rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
// padding: 0 30rpx;
|
|
width: 50%;
|
|
|
|
>button {
|
|
border-radius: 40rpx;
|
|
background: #33c973;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
</style> |