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

<template>
	<view class="content">
		<view class="title_tops">
			<view class="status_title">
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 0">
					初始化
				</view>
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 1">
					充电中
				</view>
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 2">
					启动充电失败
				</view>
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 3">
					结束充电
				</view>
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 4">
					待支付
				</view>
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 5">
					(已完成)支付完成
				</view>
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 6">
					支付失败
				</view>
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 7">
					已退款
				</view>
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 8">
					已挂起
				</view>
				<view style="font-weight: 600" v-if="detail.list.orderStatus == 9">
					已关闭
				</view>
				<view style="margin-top: 10rpx;">充电开始时间: {{detail.list.startTime==null?'--':detail.list.startTime}}
				</view>
			</view>
			<view class="line_center">
				<view class="white_box">
					<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.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 justify-between flex-wrap padding-sm">
						<view class="name" style="font-size: 35rpx">费用信息</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 class="right_pay_mean">
						<view>
							<text>电价费用</text>
							<text>{{detail.list.elecTotalExpense==null?'0':detail.list.elecTotalExpense / 100}}元</text>
						</view>
						<view>
							<text>平台服务费</text>
							<text>{{detail.list.cloudTotalFee==null?'0':detail.list.cloudTotalFee / 100}}元</text>
						</view>
						<view>
							<text>电池服务费</text>
							<text>{{detail.list.batTotalFee==null?'0':detail.list.batTotalFee / 100}}元</text>
						</view>
						<view>
							<text>充电服务总费用</text>
							<text>{{detail.list.chargeTotalFee==null?'0':detail.list.chargeTotalFee / 100}}元</text>
						</view>
					</view>
					<view class="line_bottom">
						<view></view>
					</view>
					<view style="padding: 0 20rpx; box-sizing:border-box">
						<view v-for="(item,index) in detail.list.orderTimeList">
							<view class="power_title">
								<text>{{item.startTime}} - {{item.endTime}} 充电
									{{ item.electric == null? 0: item.electric }}
									度</text>
							</view>
							<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
								<view class="staName" style="display: flex; align-items: center">电 费(
									{{item.electricityPrice == null? 0: item.electricityPrice / 100}}元 / 度 )
								</view>
								<view class="staNum">
									¥{{ item.electricityExpense == null? 0: item.electricityExpense / 100 }}
								</view>
							</view>
							<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
								<view class="staName" style="display: flex; align-items: center">服务费(
									{{item.servicePrice == null? 0: item.servicePrice / 100}}元/度 )
								</view>
								<view class="staNum">
									¥{{item.serviceExpense == null? 0: item.serviceExpense / 100 }}</view>
							</view>
						</view>
						<!-- 	<view class="power_title">
							<text>尖时段充电 {{ handle_power(detail.list.theTipElectric,detail.list.theTipElectricAcMeter) }} 度</text>
						</view>
						<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
							<view class="staName">电费</view>
							<view class="staNum">{{ handle_electricity(detail.list.theTipExpense,detail.list.theTipExpenseAcMeter) }}元</view>
						</view>
						<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
							<view class="staName">单价</view>
							<view class="staNum">{{detail.list.theTipPrice == null? 0: detail.list.theTipPrice / 100}}元</view>
						</view> -->
						<!--  -->
						<!-- 	<view class="power_title">
							<text>峰时段充电 {{ handle_power(detail.list.peakElectric,detail.list.peakElectricAcMeter) }} 度</text>
						</view>
						<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
							<view class="staName">电费</view>
							<view class="staNum">{{ handle_electricity(detail.list.peakExpense,detail.list.peakExpenseAcMeter) }}元</view>
						</view>
						<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
							<view class="staName">单价</view>
							<view class="staNum">{{detail.list.peakPrice == null? 0: detail.list.peakPrice / 100}}元</view>
						</view> -->
						<!--  -->
						<!-- 	<view class="power_title">
							<text>平时段充电 {{ handle_power(detail.list.flatElectric,detail.list.flatElectricAcMeter) }} 度</text>
						</view>
						<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
							<view class="staName">电费</view>
							<view class="staNum">{{ handle_electricity(detail.list.flatExpense,detail.list.flatExpenseAcMeter) }}元</view>
						</view>
						<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
							<view class="staName">单价</view>
							<view class="staNum">{{detail.list.flatPrice == null? 0: detail.list.flatPrice / 100}}元</view>
						</view> -->
						<!--  -->
						<!-- <view class="power_title">
							<text>谷时段充电 {{ handle_power(detail.list.theValleyElectric,detail.list.theValleyElectricAcMeter) }} 度</text>
						</view>
						<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
							<view class="staName">电费</view>
							<view class="staNum">{{ handle_electricity(detail.list.theValleyExpense,detail.list.theValleyExpenseAcMeter) }}元</view>
						</view>
						<view class="flex justify-between flex-wrap " style="margin: 10rpx 0;">
							<view class="staName">单价</view>
							<view class="staNum">{{detail.list.theValleyPrice == null? 0: detail.list.theValleyPrice / 100}}元</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="btn_pay" v-if="detail.list.orderStatus == 4">
			<button style="font-size: 14px;" type="primary" @click="handle_pay">去支付</button>
		</view>
		<!-- <view class="btn_pay" v-if="detail.list.payStatus == 2">
			<button style="font-size: 14px;" type="primary" @click="pay_handle_refund">申请退款</button>
		</view> -->
		<view class="btn_pay" v-if="detail.list.invoiceFlag == null || detail.list.invoiceFlag == 0">
			<button style="font-size: 14px;" type="primary" @click="pay_handle_invoice">申请开票</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 detail = reactive({
		list: []
	})
	const timer = ref(null)
	const isorderStatus = ref(false)
	onLoad((options) => {
		var station = JSON.parse(options.details);
		detail.list = station
	})
	onShow(() => {})
	onUnload(() => {

	})
	const charging_data = ref({})
	const istipsonly = ref(0)

	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)
			} else {
				uni.showModal({
					title: '提示',
					content: res.data.msg,
					showCancel: false,
					success: function(res) {

					}
				});
			}
		})
	}
	const pay_handle_refund = async () => {
		await uni.$request({ //刷新token
			url: config.baseUrl + "app-api/cloud/refund-order/create",
			method: 'POST',
			data: {
				orderNo: detail.list.orderNo,
				refundPrice: detail.list.totalFee / 100,
				type: 1
			}
		}).then(res => {
			if (res.data.code == 0) {
				uni.showToast({
					title: '申请成功',
					duration: 2000,
					icon: 'success'
				});
			}
		})
	}

	const pay_handle_invoice = () => {
		sheep.$router.go('/pagesCenter/billingPage/addInvoice/addInvoice', {
			orderNo: detail.list.id,
			orderType: 2,
		});
	}

	const handle_pay_money = async (e) => {
		sheep.$router.go('/pagesCenter/pay/index', {
			id: e.payOrderId,
			orderType: 'recharge',
		});
	}

	const handle_electricity = (one, two) => {
		let ones = one == null ? 0 : one / 100
		let twos = two == null ? 0 : two / 100
		return ones + twos
	}
	// 
	const handle_power = (one, two) => {
		let ones = one == null ? 0 : one
		let twos = two == null ? 0 : two
		return ones + twos
	}
</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%);
	}

	// 
	.title_tops {
		height: 260rpx;
		background: #0aca46;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.status_title {
			position: absolute;
			left: 80rpx;
			top: 10rpx;
			font-size: 14px;
			color: #fff;
		}
	}

	.line_center {
		width: 90%;
		height: 20rpx;
		background: #08ab40;
		position: relative;

		// border-radius: 10rpx;
		.white_box {
			width: 95%;
			height: 1000rpx;
			overflow: hidden;
			overflow-y: scroll;
			padding: 15rpx;
			background: #fff;
			position: absolute;
			top: 10rpx;
			left: 50%;
			transform: translate(-50%);
			box-shadow:
				0px 1.4px 1.2px rgba(0, 0, 0, 0.017),
				0px 3.4px 2.9px rgba(0, 0, 0, 0.024),
				0px 6.4px 5.5px rgba(0, 0, 0, 0.03),
				0px 11.4px 9.8px rgba(0, 0, 0, 0.036),
				0px 21.3px 18.4px rgba(0, 0, 0, 0.043),
				0px 51px 44px rgba(0, 0, 0, 0.06);
			border-bottom-left-radius: 15rpx;
			border-bottom-right-radius: 15rpx;
		}
	}

	.right_pay_mean {
		display: flex;
		flex-direction: column;
		// align-items: end;
		// justify-content: end;
		font-size: 13px;
		padding: 0 20rpx;

		>view {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			// text-align: end;
			>text:first-child {
				width: 220rpx;
				text-align: end;
			}

			>text:last-child {
				width: 100rpx;
				text-align: end;
			}
		}
	}

	.line_bottom {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 20rpx 0 0 0;

		>view {
			width: calc(100% - 40rpx);
			height: 1px;
			background: #ccc;
		}
	}

	.power_title {
		font-size: 26rpx;
		color: #000;
		font-weight: 600;
		display: flex;

		>text {
			border-bottom: 1px solid #ccc;
			padding: 20rpx 0;
		}
	}
</style>