yueche_app/pages/chooseCar/chooseCar.vue

<template>
	<view class="container">
		<!-- 信息区域 -->
		<view class="body">
			<!-- 车辆信息区域 -->
			<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 class="carMsg_bottom">
					<view class="bottom_box" @click="handleRule">退改规则</view>
				</view>
			</view>

			<!-- 乘客信息区域 -->
			<view class="peopleMsg">
				<view class="peopleMsg_title">乘客信息</view>
				<view class="peopleMsg_list">
					<view v-for="item in 2" :key="item" class="list_item active">
						哈哈哈11111

						<view class="item_active">
							<wd-icon name="check" color="#fff" size="8" />
						</view>
					</view>

					<view class="list_more" @click="handleMore">+ 更多</view>
				</view>

				<view class="peopleMsg_choose">
					<view v-for="item in 2" :key="item" class="choose_item">
						<wd-icon name="minus-circle" color="#FF8205" size="22" />
						<view class="item_msg">
							<view class="msg_top">哈哈哈</view>
							<view class="msg_bottom">身份证 452***********2256</view>
						</view>
					</view>
				</view>

				<view class="peopleMsg_foot">
					<view class="foot_left">
						<wd-icon name="phone" color="#FF8205" size="25" />
						<view class="left_text">手机号</view>
					</view>

					<view class="foot_phone">
						<input v-model="value" :maxlength="11" placeholder-style="font-size:28rpx;color:#ABA6A6;text-align: end;" type="text" placeholder="请填写联系手机号" />
					</view>
				</view>
			</view>

			<!-- 优惠券区域 -->
			<view class="coupon">
				<view class="coupon_title">优惠</view>

				<view class="coupon_box">
					<view class="box_left">
						<image class="left_img" src="@/static/images/chooseCar/coupon.png" mode="aspectFill" />

						优惠券
					</view>

					<view class="box_right">
						暂无优惠券
						<wd-icon name="chevron-right" color="#ABA6A6" size="18" />
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="foot">
			<view class="foot_box">
				<view class="box_text">
					¥
					<text class="text">30</text>
				</view>

				<view class="box_btn">立即购买</view>
			</view>
		</view>
	</view>

	<!-- 退改规则弹窗区域 -->
	<wd-popup v-model="popShow_rule" position="bottom" safe-area-inset-bottom :close-on-click-modal="false">
		<view class="pop_rule">
			<view class="rule_title">退改规则</view>
			<view class="rule_body">
				<view class="body_text">
					<view class="text">发车前24小时以上，免收手续费;</view>
					<view class="text">发车前3小时以上24小时以内，收取10%手续费;</view>
					<view class="text">发车前3小时以内，收取20%手续费;</view>
					<view class="text">发车后不退票。</view>
				</view>

				<view class="body_btn" @click="handleCloseRule">我知道了</view>
			</view>
		</view>
	</wd-popup>

	<!-- 常用旅客弹窗区域 -->
	<wd-popup v-model="popShow_common" position="bottom" safe-area-inset-bottom :close-on-click-modal="false">
		<view class="pop_common">
			<view class="common_title">
				常用旅客
				<view class="title_close" @click="handleCloseCommon">
					<wd-icon name="close" color="#ABA6A6" size="20" />
				</view>
			</view>
			<view class="common_body">
				<view class="body_add" @click="handleAdd">+ 添加乘客</view>
				<view class="body_list">
					<!-- 每一个乘客区域 -->
					<view v-for="item in 6" :key="item" class="list_item">
						<view class="item_left">
							<wd-icon name="edit-outline" color="#ABA6A6" size="17" />
							<view class="left_msg">
								<view class="msg_name">啊啊啊</view>
								<view class="msg_idcard">身份证 452***********2256</view>
								<view class="msg_phone">手机号 158****5566</view>
							</view>
						</view>

						<view class="item_right">
							<radio color="#FF8205" :checked="isCheck" @click="isCheck = !isCheck" />
						</view>
					</view>
				</view>
				<view class="body_btn" @click="handleConfirm">确认</view>
			</view>
		</view>
	</wd-popup>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { myRequest } from '@/utils/api.ts'
import debounce from 'lodash/debounce'

const userInfo = uni.getStorageSync('carUserInfo')

const popShow_rule = ref(false)

const popShow_common = ref(false)

const isCheck = ref(false)

onLoad((options) => {
	if (options.info) {
		const info = JSON.parse(decodeURIComponent(options.info))
		console.log(info)
	}
})

function handleRule() {
	popShow_rule.value = true
}

function handleCloseRule() {
	popShow_rule.value = false
}

function handleMore() {
	popShow_common.value = true
}

function handleCloseCommon() {
	popShow_common.value = false
}

function handleConfirm() {
	popShow_common.value = false
}

function handleAdd() {
	uni.navigateTo({
		url: '/pages/handlePeople/handlePeople'
	})
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	height: 100vh;
	color: #001713;

	.body {
		width: 100%;
		height: calc(100vh - 244rpx);
		overflow-y: auto;

		.carMsg {
			position: relative;
			box-sizing: border-box;
			padding: 0 55rpx;
			margin: 20rpx auto 0;
			width: 720rpx;
			height: 320rpx;
			font-size: 32rpx;
			color: #001713;
			background: url(@/static/images/chooseCar/box.png);
			background-size: 100% 100%;

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

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

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

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

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

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

			.carMsg_bottom {
				position: absolute;
				top: 236rpx;
				left: 46rpx;
				display: flex;
				align-items: center;
				width: 630rpx;
				height: 66rpx;
				border-top: 2rpx dotted #e6e6e6;

				.bottom_box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 128rpx;
					height: 42rpx;
					font-size: 24rpx;
					color: #ff8205;
					border-radius: 8rpx;
					background-color: #fff2e5;
				}
			}
		}

		.peopleMsg {
			box-sizing: border-box;
			padding: 30rpx 30rpx 0;
			margin: auto;
			width: 670rpx;
			font-size: 28rpx;
			box-shadow: 0px 3px 6px #ccc;
			background-color: #fff;

			.peopleMsg_title {
				margin-bottom: 20rpx;
				font-size: 36rpx;
			}

			.peopleMsg_list {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.list_item {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 30rpx;
					margin-bottom: 26rpx;
					padding: 0 24rpx;
					height: 68rpx;
					color: #aba6a6;
					border-radius: 8rpx;
					border: 2rpx solid #aba6a6;

					.item_active {
						position: absolute;
						bottom: -20rpx;
						right: -20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 60rpx;
						height: 60rpx;
						background-image: url(@/static/images/chooseCar/active.png);
						background-size: 100% 100%;
					}
				}

				.active {
					color: #ff8205;
					border: 2rpx solid #ff8205;
				}

				.list_more {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 26rpx;
					width: 132rpx;
					height: 68rpx;
					color: #ff8205;
					border-radius: 8rpx;
					border: 2rpx solid #aba6a6;
				}
			}

			.peopleMsg_choose {
				.choose_item {
					display: flex;
					align-items: center;

					.item_msg {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 26rpx;
						margin-bottom: 26rpx;
						height: 90rpx;

						.msg_top {
							font-size: 36rpx;
						}

						.msg_bottom {
							font-size: 24rpx;
							color: #aba6a6;
						}
					}
				}
			}

			.peopleMsg_foot {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 116rpx;
				font-size: 36rpx;
				border-top: 2rpx solid #ebecf1;

				.foot_left {
					display: flex;
					align-items: center;

					.left_text {
						margin-left: 12rpx;
					}
				}

				.foot_phone {
					text-align: end;
				}
			}
		}

		.coupon {
			box-sizing: border-box;
			padding: 0 30rpx 30rpx;
			margin: 20rpx auto 50rpx;
			width: 670rpx;
			color: #001713;
			box-shadow: 0px 3px 6px #ccc;
			background-color: #fff;

			.coupon_title {
				height: 96rpx;
				line-height: 96rpx;
				font-size: 36rpx;
			}

			.coupon_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 70rpx;

				.box_left {
					display: flex;
					align-items: center;

					.left_img {
						margin-right: 14rpx;
						width: 46rpx;
						height: 46rpx;
					}
				}

				.box_right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #aba6a6;
				}
			}
		}
	}

	.foot {
		position: absolute;
		bottom: 0;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 100%;
		height: 244rpx;
		box-shadow: 0px -3px 6px #eee;
		background-color: #fff;

		.foot_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 46rpx;
			height: 96rpx;

			.box_text {
				color: #dc2626;
				font-size: 36rpx;

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

			.box_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 272rpx;
				height: 96rpx;
				font-size: 36rpx;
				color: #fff;
				border-radius: 64rpx;
				background-color: #ff8205;
			}
		}
	}
}

.pop_rule {
	height: 568rpx;
	color: #001713;
	overflow: hidden;

	.rule_title {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 114rpx;
		font-size: 36rpx;
		background-color: #fff2e5;
	}

	.rule_body {
		box-sizing: border-box;
		padding: 0 32rpx;

		.body_text {
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 20rpx;
			font-size: 24rpx;
			border-radius: 32rpx;
			background-color: #fff2e5;

			.text {
				margin-bottom: 8rpx;
			}
		}

		.body_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			height: 94rpx;
			font-size: 36rpx;
			color: #fff;
			border-radius: 64rpx;
			background-color: #ff8205;
		}
	}
}

.pop_common {
	height: 70vh;
	font-size: 36rpx;
	color: #001713;
	overflow: hidden;

	.common_title {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		border-bottom: 20rpx solid #ff8205;

		.title_close {
			position: absolute;
			top: 34rpx;
			right: 40rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.common_body {
		box-sizing: border-box;
		padding: 0 32rpx;

		.body_add {
			margin: 25rpx 0 25rpx auto;
			width: 170rpx;
			font-size: 32rpx;
			color: #ff8205;
		}

		.body_list {
			height: calc(70vh - 396rpx);
			overflow-y: auto;

			.list_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				height: 120rpx;

				.item_left {
					display: flex;
					align-items: center;
					height: 100%;

					.left_msg {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						height: 100%;
						font-size: 24rpx;
						color: #aba6a6;

						.msg_name {
							font-size: 36rpx;
							color: #001713;
						}
					}
				}

				.item_right {
				}
			}
		}

		.body_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 48rpx 0;
			width: 100%;
			height: 92rpx;
			color: #fff;
			border-radius: 48rpx;
			background-color: #ff8205;
		}
	}
}
</style>