first commit
This commit is contained in:
PC-202306242200\Administrator
285
pageOrder/recharge/recharge.vue
Normal file
285
pageOrder/recharge/recharge.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user