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

<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 || 0}}</text>
			</view>
			<view class="">
				<text>充电电压(V)</text>
				<text>{{detail.list.currentVoltage || 0}}</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="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,
		}
	})
	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>