cloud_admin_app/pages/order/appointorder/detailInf/detailInf.vue

<template>
	<view class="content">
		<view class="cu-card article">
			<view class="cu-item shadow">
				<view class="padding-sm justify-between">
					<!-- <view
						:class="{'refunded' : detail.list.status== 1 ,'non-payment' : detail.list.status== 0,'payState': detail.list.status== 2}">
						{{['--', '预约成功','预约取消','预约失败','换电成功','换电失败','换电中','预约过期'][detail.list.status==null?'':detail.list.status]}}
					</view> -->
					<view class="refunded_2" v-if="detail.list.status == 1">
						预约成功
					</view>
					<view class="refunded_5" v-if="detail.list.status == 2">
						预约取消
					</view>
					<view class="refunded_3" v-if="detail.list.status == 3">
						预约失败
					</view>
					<view class="refunded_2" v-if="detail.list.status == 4">
						换电成功
					</view>
					<view class="refunded_3" v-if="detail.list.status == 5">
						换电失败
					</view>
					<view class="refunded_0" v-if="detail.list.status == 6">
						换电中
					</view>
					<view class="refunded_6" v-if="detail.list.status == 7">
						预约过期
					</view>
				</view>
			</view>
		</view>
		<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.orderNo==null?'--':detail.list.orderNo}}</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.vehicleVin==null?'--':detail.list.vehicleVin}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between flex-wrap list-view">
					<view class="staName">预约时间</view>
					<view class="staNum">{{detail.list.startTime==null?'--':detail.list.startTime}}</view>
				</view>
				<view class="flex 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.binNos==null?'--':detail.list.binNos}}</view>
				</view>
				<view class="flex justify-between  list-view">
					<view class="staName">预约数量</view>
					<view class="staNum">{{detail.list.batnum==null?'0':detail.list.batnum}}</view>
				</view>
				<view class="flex justify-between list-view">
					<view class="staName">换电完成时间</view>
					<view class="staNum">{{detail.list.swapFinishTime==null?'--':detail.list.swapFinishTime}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view">
					<view class="staName">换电订单编号</view>
					<view class="staNum">{{detail.list.swapOrderNo==null?'--':detail.list.swapOrderNo}}</view>
				</view>

			</view>
		</view>

		<view class="btn_pay" v-if="detail.list.status == 1">
			<button style="font-size: 14px;" type="primary" @click="cancel_order">取消预约</button>
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";

	import {
		useCounterStore
	} from '@/stores/counter.js';
	const isDetail = useCounterStore()


	const detail = reactive({
		list: {}
	})

	onLoad((options) => {
		var station = JSON.parse(options.details);
		detail.list = station
		// console.log(detail.list, '订单详情');
	})
	onShow(() => {
		isDetail.value = true
	})
	const cancel_order = async () => {
		await uni.$request({
			url: config.baseUrl + 'app-api/cloud/amt-order/cancel/' + detail.list.id,
			method: 'GET'
		}).then(res => {
			// console.log(res, '==========>');
			if (res.data.code == 0) {
				uni.showToast({
					title: '取消成功',
					duration: 2000,
					icon: 'success'
				});
			} else {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'error'
				});
			}
		}).catch((err) => {
			uni.showToast({
				title: '取消失败',
				duration: 2000,
				icon: 'error'
			});
		})
		setTimeout(function() {
			uni.navigateBack({
				delta: 1,
			});
		}, 1000)
	}
</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;
	}
</style>