cloud_admin_app/pages/order/chargorder/detailInf/detailInf.vue

<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>