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>
			</view>
		</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',
		});
	}
</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: 400rpx;
			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;
		}
	}
</style>