286 lines
7.2 KiB
Vue
286 lines
7.2 KiB
Vue
<template>
|
||
<view class="recharge">
|
||
<view class="recharge_orderId">
|
||
<view>
|
||
订单号：{{ store.state.dataObj.orderNo }}
|
||
<image src="/static/icon/ic-copy1.png" @click="copy(store.state.dataObj.orderNo)" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="recharge_trn">
|
||
<view class="recharge_trn_yuan">
|
||
<image class="recharge_trn_yuan_img" src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/bg_charging_turn.png" mode="widthFix"></image>
|
||
</view>
|
||
<image class="recharge_trn_hei" src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-charging-black-circle.png" mode="widthFix"></image>
|
||
<view class="recharge_trn_text">
|
||
<view>￥{{ store.state.dataObj.currentAmount || 0 }}</view>
|
||
<view>已用时长</view>
|
||
<view>{{ store.state.dataObj.cumulativeTime || 0 }}min</view>
|
||
</view>
|
||
<view class="recharge_trn_car">
|
||
<image class="recharge_trn_car_img" src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-car-bg.png" mode="widthFix"></image>
|
||
<image class="recharge_trn_car_img1" src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-car-bg1.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="recharge_list p30">
|
||
<view class="recharge_list_view">
|
||
<image src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-charged-power.png" mode="widthFix"></image>
|
||
<view class="recharge_list_view_num">{{ store.state.dataObj.chargingDegree || 0 }}</view>
|
||
<view class="recharge_list_view_name">已充电量(度)</view>
|
||
</view>
|
||
<view class="recharge_list_view">
|
||
<image src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-charged-time.png" mode="widthFix"></image>
|
||
<view class="recharge_list_view_num">{{ store.state.dataObj.cumulativeTime || 0 }}min</view>
|
||
<view class="recharge_list_view_name">已充时长</view>
|
||
</view>
|
||
<view class="recharge_list_view">
|
||
<image src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-charged-amount.png" mode="widthFix"></image>
|
||
<view class="recharge_list_view_num">{{ store.state.dataObj.currentAmount || 0 }}</view>
|
||
<view class="recharge_list_view_name">已充金额(元)</view>
|
||
</view>
|
||
</view>
|
||
<view class="recharge_block p30">
|
||
<view class="recharge_block_view">
|
||
<view>{{ store.state.dataObj.outputVoltage || 0 }}</view>
|
||
<view>实时电压(V)</view>
|
||
</view>
|
||
<view class="recharge_block_view">
|
||
<view>{{ store.state.dataObj.outputCurrent || 0 }}</view>
|
||
<view>实时电流(A)</view>
|
||
</view>
|
||
<view class="recharge_block_view">
|
||
<view>{{ store.state.dataObj.power || 0 }}</view>
|
||
<view>实时功率(KW)</view>
|
||
</view>
|
||
</view>
|
||
<view class="recharge_note p30">
|
||
<view>终端名称：{{ store.state.dataObj.gunNo }}</view>
|
||
<view>终端编码：{{ store.state.dataObj.deviceNo || '' }}</view>
|
||
</view>
|
||
<view class="recharge_btn1" @click="end(1)">结束充电</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import { stopCharging, realtimeInfo, ordersInfo } from '@/api/api.js';
|
||
import { copy } from '@/utils/fun.js';
|
||
|
||
import store from '@/store/index.js';
|
||
let transactionNo = ref('');
|
||
|
||
let type = ref('');
|
||
|
||
onLoad(async (options) => {
|
||
transactionNo.value = options.transactionNo;
|
||
if (options.type) {
|
||
let _res = await realtimeInfo({
|
||
transactionNo: options.transactionNo
|
||
});
|
||
store.commit('setDataObj', _res);
|
||
}
|
||
});
|
||
|
||
const end = (e) => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: e == 1 ? '是否确认结束充电？' : '结束充电失败，请重试！',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
stopCharging({ transactionNo: transactionNo.value }).then((res) => {
|
||
uni.showLoading({
|
||
title: '停止充电中...'
|
||
});
|
||
store.commit('setSokStatus', 0);
|
||
timeMap(transactionNo.value);
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const timeMap = (_res) => {
|
||
var time = setTimeout(async () => {
|
||
if (store.state.sokStatus != 1) {
|
||
let _data = await ordersInfo({
|
||
transactionNo: _res
|
||
});
|
||
store.commit('setDataObj', _data);
|
||
if (_data.status == 3 || _data.status == 4) {
|
||
uni.hideLoading();
|
||
end(2);
|
||
}
|
||
if (_data.status == 5 || _data.status == 6) {
|
||
uni.hideLoading();
|
||
uni.navigateBack();
|
||
store.commit('setSokStatus', 0);
|
||
}
|
||
}
|
||
}, 30000);
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #000;
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="scss">
|
||
.recharge {
|
||
&_orderId {
|
||
width: 1000rpx;
|
||
margin-left: -125rpx;
|
||
margin-top: -20rpx;
|
||
height: 230rpx;
|
||
background: url(https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-realtime-pile-number-bg.png) no-repeat 100% 100% / contain;
|
||
color: #828282;
|
||
text-align: center;
|
||
padding-top: 30rpx;
|
||
font-size: 26rpx;
|
||
view {
|
||
@include flex($space: center);
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&_trn {
|
||
margin-top: -130rpx;
|
||
@include flex($direction: column, $space: center);
|
||
&_yuan {
|
||
width: 500rpx;
|
||
height: 500rpx;
|
||
position: relative;
|
||
&_img {
|
||
width: 100%;
|
||
height: 100%;
|
||
animation: rotate 5s linear infinite;
|
||
}
|
||
}
|
||
&_text {
|
||
z-index: 9;
|
||
@include flex($direction: column, $space: center);
|
||
margin-top: -470rpx;
|
||
view:nth-child(1) {
|
||
color: #fff;
|
||
font-weight: bold;
|
||
font-size: 60rpx;
|
||
}
|
||
view:nth-child(2) {
|
||
color: #11927c;
|
||
font-size: 28rpx;
|
||
margin: 25rpx 0 15rpx;
|
||
}
|
||
view:nth-child(3) {
|
||
color: #24efe8;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
&_hei {
|
||
margin-top: -360rpx;
|
||
width: 500rpx;
|
||
height: 500rpx;
|
||
z-index: 9;
|
||
}
|
||
&_car {
|
||
z-index: 10;
|
||
width: 450rpx;
|
||
position: relative;
|
||
&_img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
&_img1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
&_list {
|
||
@include flex($space: space-between);
|
||
padding: 0 50rpx;
|
||
&_view {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
@include flex($direction: column, $space: center);
|
||
image {
|
||
width: 75rpx;
|
||
height: 75rpx;
|
||
}
|
||
|
||
&_num {
|
||
color: #fff;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
margin: 10rpx 0;
|
||
}
|
||
&_name {
|
||
color: #8b8b8b;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
&_block {
|
||
margin-top: 50rpx;
|
||
@include flex($space: space-between);
|
||
&_view {
|
||
width: 200rpx;
|
||
padding: 10rpx;
|
||
border-radius: 25rpx;
|
||
background: linear-gradient(0deg, #0b1521, #193c65);
|
||
font-size: 28rpx;
|
||
@include flex($direction: column, $space: center);
|
||
view:nth-child(1) {
|
||
color: #fff;
|
||
}
|
||
view:nth-child(2) {
|
||
color: #8b98a0;
|
||
}
|
||
}
|
||
}
|
||
|
||
&_note {
|
||
margin-top: 30rpx;
|
||
@include flex($space: space-between);
|
||
color: #828282;
|
||
font-size: 24rpx;
|
||
}
|
||
&_btn1 {
|
||
width: 650rpx;
|
||
height: 100rpx;
|
||
margin: 0 auto;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
@include flex($space: center);
|
||
background-color: #1879fe;
|
||
border-radius: 50rpx;
|
||
color: #fff;
|
||
margin-top: 150rpx;
|
||
}
|
||
}
|
||
|
||
@keyframes rotate {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|