yueche_app/pages/orderDetail/orderDetail.vue

<template>
	<view class="container">
		<image class="banner" src="@/static/images/mine/back.png" mode="aspectFill" />

		<!-- 内容区域 -->
		<view class="content">
			<view v-if="statusValue === '未乘车'" class="status">
				<wd-icon name="clock" color="#001713" size="22" />
				未乘车
			</view>
			<view v-if="statusValue === '已乘车'" class="status">
				<wd-icon name="check-outline" color="#001713" size="22" />
				已乘车
			</view>
			<view v-if="statusValue === '待支付'" class="status">
				<wd-icon name="money-circle" color="#001713" size="22" />
				待支付
			</view>
			<view v-if="statusValue === '已取消'" class="status">
				<wd-icon name="file-excel" color="#001713" size="22" />
				已取消
			</view>
			<view v-if="statusValue === '预约失败'" class="status">
				<wd-icon name="warning" color="#001713" size="22" />
				预约失败
			</view>

			<!-- 提示区域 -->
			<view class="tips">
				<image class="tips_img" src="@/static/images/orderDetail/tips.png" mode="aspectFill" />
				<view class="tips_text">
					您已成功预约【14:50 南昌交通学院墨轩湖校区站 - 南昌西站】大巴班次～请于发车前 15 分钟到达乘车点（校门东侧公交站），凭订单二维码检票乘车
				</view>
			</view>

			<!-- 详情区域 -->
			<view class="detail">
				<view class="carMsg">
					<view class="carMsg_time">09月09日 14：50</view>
					<view class="carMsg_number">车牌：M06001</view>
					<view class="carMsg_volume">容量：60座</view>

					<image class="carMsg_line" src="@/static/images/chooseCar/line.png" mode="aspectFill" />

					<view class="carMsg_start">南昌交通学院墨轩湖校区</view>

					<view class="carMsg_end">南昌火车站</view>
				</view>

				<!-- 二维码区域 -->
				<view v-if="statusValue === '未乘车'" class="code">
					<!-- 跟随页面滚动是开发者工具的bug，真机没有问题 -->
					<uv-qrcode ref="qrcode" size="180" :value="QRCodeValue"></uv-qrcode>
				</view>

				<view class="info">
					<view>预约号：02</view>
					<view>扫码时间段：13：50 - 16：20</view>
					<view>下单时间：2025 - 09 - 16 14：56：05</view>
					<view class="info_price">
						<view>支付金额：</view>
						<view>
							<text class="text">¥</text>
							30
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付区域 -->
		<view class="pay">
			<view class="pay_left">
				¥
				<text class="text">30</text>
			</view>

			<view class="pay_btn">立即支付</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const statusValue = ref('未乘车')

const QRCodeValue = ref('123')
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
	color: #001713;
	background-color: #fff;
	overflow-y: auto;

	.banner {
		width: 100%;
		height: 482rpx;
	}

	.content {
		position: absolute;
		top: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx 260rpx;
		width: 100%;

		.status {
			font-size: 48rpx;
		}

		.tips {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 26rpx;
			margin-bottom: 20rpx;
			box-shadow: 0px 3px 6px #ccc;
			background-color: #fff;

			.tips_img {
				width: 56rpx;
				height: 74rpx;
			}

			.tips_text {
				flex: 1;
				margin-left: 16rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #001713;
			}
		}

		.detail {
			padding: 0 30rpx 40rpx;
			box-shadow: 0px 3px 6px #ccc;
			background-color: #fff;

			.carMsg {
				position: relative;
				width: 100%;
				height: 250rpx;
				font-size: 32rpx;
				color: #001713;

				.carMsg_time {
					position: absolute;
					top: 36rpx;
					font-size: 36rpx;
					color: #001713;
				}

				.carMsg_number {
					position: absolute;
					top: 44rpx;
					right: 0;
					font-size: 24rpx;
					color: #f86818;
				}

				.carMsg_volume {
					position: absolute;
					top: 86rpx;
					right: 0;
					font-size: 24rpx;
					color: #f86818;
				}

				.carMsg_line {
					position: absolute;
					top: 128rpx;
					left: 0;
					width: 14rpx;
					height: 88rpx;
				}

				.carMsg_start {
					position: absolute;
					top: 106rpx;
					left: 40rpx;
					width: 460rpx;
				}

				.carMsg_end {
					position: absolute;
					top: 185rpx;
					left: 40rpx;
					width: 460rpx;
				}
			}

			.code {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 540rpx;
				border-top: 2rpx dotted #ff8205;
			}

			.info {
				padding: 40rpx 0 0;
				line-height: 50rpx;
				font-size: 28rpx;
				border-top: 2rpx solid #ebecf1;

				.info_price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32rpx;
					color: #ff8205;

					.text {
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.pay {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 100%;
		height: 240rpx;
		color: #dc2626;
		box-shadow: 0px -3px 6px #ccc;
		background-color: #fff;

		.pay_left {
			font-size: 36rpx;

			.text {
				font-size: 48rpx;
			}
		}

		.pay_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 272rpx;
			height: 94rpx;
			font-size: 36rpx;
			color: #ff8205;
			border-radius: 64rpx;
			border: 2rpx solid #ff8205;
		}
	}
}
</style>