CarRental/page_user/ordder.vue

<template>
	<view class="page">
		<view class="fixed">
			<u-navbar title="确认订单 " :border-bottom="false" :background="background" title-color='#000' title-size='36'
				height='45' back-icon-color='#000'></u-navbar>
		</view>
		<view class="backimg">

		</view>
		<!-- <image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/usCZzuQpGCBUpvzCfqyE" mode=""></image> -->
		<view class="car_info">
			<view class="left">
				<view class="carInfo">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uUIunSd0CSU3ovogLJHk" mode="" class="titimg">
					</image>
					<view class="power">
						<view v-for="index in 10" :key="index">
							<image :src="getImageSrc(index)" mode="aspectFit" class="power-icon" />
						</view>
					</view>
					{{ deviceInfo.remainingMileage }}KM
				</view>
				<view class="model">
					车型：{{ modelInfo.model }}	
				</view>
				<view class="carNum">
					{{ deviceInfo.vehicleNum }}
				</view>
			</view>
			<image :src="modelInfo.picture" mode="" v-if="modelInfo.picture" class="rightimage"></image>
			<image src="https://lxnapi.ccttiot.com/bike/img/static/uB1F5aibooguILH8uB4F" mode="" v-else
				class="rightimage"></image>
		</view>

		
		<view class="time_card">
			<view class="tit">
				选择租车方案
			</view>
			<view class="choose_box">
				<view class="choose_li" v-for="(item, index) in priceList" :key="index"
					:class="index == priceIndex ? 'act1' : ''" @click="changePrice(item, index)">
					<view class="time">
						1{{ timetype(item.rentalUnit) }}
					</view>
					<view class="price">
						￥ <span>{{ item.price }}</span>
					</view>
					<!-- <view class="hot">
						21:00前还车
					</view> -->
				</view>

			</view>
			<view class="num_box">
				<view class="lefttxt">
					租车时长
				</view>
				<view class="right">
					<view class="txt">
						共{{ timenum }}{{ timetype(chosePriceInfo.rentalUnit) }}
					</view>
					<view class="choosnum">
						<view class="left" @click="subtractnum()">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uTAyQiL5vJLelU4MBb1D" mode="">
							</image>
						</view>
						<view class="cont">
							{{ timenum }}
						</view>
						<view class="right" @click="addnum()">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/usXAYHilspF1jJeMdPIE" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="yj_box">
			<view class="top_txt">
				<view class="txts">
					押金
				</view>
				<view class="tips_btn" @click="showtips=true">
					押金政策 <view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
			<view class="yj_line">
				<view class="yuan">
					取车前
				</view>
				<view class="line"></view>
				<view class="yuan">
					取车后
				</view>
			</view>
			<view class="txt_box">
				<view class="txt">
					押金￥{{ modelInfo.deposit }}
				</view>
				<view class="txt">
					全部退还
				</view>
			</view>
			<view class="tip_box">
				<view class="tops">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/u43YAsOyDu65EK2KOFN8" mode=""></image>
					线上交押
				</view>
				<view class="words">
					押金由平台保管，安心有保障
				</view>
			</view>
			<view class="tipstxt">
				为保障您的权益，请勿与门店私下交易
			</view>
		</view>
		<view class="insurance_box" v-if="false">
			<view class="backcolor"></view>
			<view class="tit_box">
				增值服务
				<view class="txt">
					出行有保障，家人更放心
				</view>
			</view>
			<view class="info">
				<view class="left">
					骑行享权服务
					<view class="txt1">
						享权须知
					</view>
				</view>
				<view class="right_txt">
					￥10.8/天
				</view>
			</view>
			<view class="choose_insurance_box">
				<view class="insurance_li" v-for="item in 5" :key="index">

				</view>

			</view>
		</view>
		<view class="tabble_box" v-if='false'>
			<view class="tit">
				租车预定须知
			</view>
			<view class="tit" style="margin-top: 16rpx;">
				取车须知
			</view>
			<view class="txt2">
				请在2024-09-04 16:00:36时间前取车，超出时间将 无法保证车辆库存
			</view>
			<view class="tabble">
				<view class="tabble_top">
					<view class="tabbl_left">
						取消时间
					</view>
					<view class="tabble_right">
						扣费标准
					</view>
				</view>
				<view class="tabble_cont" v-for="(item, index) in agentInfo.cancelRuleList" :key="index">
					<view class="tabbl_left">
						{{ item.instructions }}
					</view>
					<view class="tabble_right">
						{{ backDedu(item.deductPercent) }}
					</view>
				</view>

			</view>
			<view class="tit" style="margin-top: 16rpx;">
				配套服务
			</view>

			<view class="tabble">
				<view class="tabble_top">
					<view class="tabbl_left">
						电池
					</view>
					<view class="tabble_right">
						其他
					</view>
				</view>

				<view class="tabble_cont">
					<view class="tabbl_left">
						超过取车时间2小时内
					</view>
					<view class="tabble_right">
						扣费标准
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="showtips" :z-index='120' />
		<view class="tips_box" v-if="showtips">
			<view class="tit">
				线上交押
			</view>
			<view class="txt">
				取车前需支付押金，在商家确认还车及无
				车损，还车后立即退还全部押金。
			</view>
			<view class="btn" @click="showtips=false">
				我知道了
			</view>
		</view>
		<u-mask :show="showmx" :z-index='100' @click="showmx = false" />
		<view class="sub_box">
			<view class="detail" v-if="showmx">

				<view class="tit">
					订单明细

				</view>
				<view class="close" @click="showmx = false">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uYLkBxKrJq35FjyHy2Jr" mode=""></image>
				</view>
				<view class="txt_li">
					<view class="txt5">
						租金
					</view>
					<view class="txt5">
						￥{{ priceInfo.rent }}
					</view>
				</view>
				<view class="txt_li">
					<view class="txt5">
						押金
					</view>
					<view class="txt5">
						￥{{ priceInfo.deposit }}
					</view>
				</view>
				<!-- <view class="txt_li">
					<view class="txt5">
						派送费
					</view>
					<view class="txt5">
						￥{{ priceInfo.deliveryFee }}
					</view>
				</view> -->
			</view>
			<view class="bot_box">
				<view class="xiey">
					<view class="yuan" v-if="agree == false" @click="agree = true"></view>
					<image src="https://lxnapi.ccttiot.com/bike/img/static/utRg4QWBaHX4RO3tgZQW" mode="" v-if="agree"
						@click="agree = false"></image>
					<view class="txt3" style="margin-left: 6rpx;">
						已阅读并同意
					</view>
					<view class="txt4">
						<span @click="toWord(0)">《电动车租赁用户协议》</span> <span @click="toWord(1)">《享权须知》</span>
					</view>
				</view>
				<view class="price_box">
					<view class="price">
						￥<span>{{ priceInfo.totalFee ? priceInfo.totalFee : '--' }}</span>
					</view>
					<view class="mx" @click="showmx = !showmx">
						明细 <view class="iconfont icon-xiangxia">
							<!-- <view class="iconfont icon-xiangshang"> -->
						</view>
					</view>
					<view class="btn" @click="sub">
						去支付
					</view>
				</view>
			</view>
		</view>
		<view class="getcar" v-if="false">
			<view class="li" id="startType">
				<view class="type">
					取车
				</view>
				<view class="txt"
					style="width: 100%;display: flex;flex-wrap: nowrap;justify-content: space-between;">
					{{time}}
					<view
						style="color:#808080 ;margin-left: 80rpx;font-size: 28rpx;display: flex;align-items: center;"
						@click="time1=true">更改时间 <image
							src="https://lxnapi.ccttiot.com/bike/img/static/uqQXXl6pKLlJDYAFrxFI" mode=""
							style="width: 26rpx;height: 26rpx;"></image>
					</view>
				</view>
			</view>
			<view class="li">
				<view style="width: 68rpx;">
		
				</view>
				<view class="txt" style="font-size: 28rpx;" v-if="agentInfo.isFreeCar==false">
					商家收费送车上门（服务费{{agentInfo.deliveryFee}}元）
				</view>
				<view class="txt" style="font-size: 28rpx;" v-if="agentInfo.isFreeCar">
					商家免费送车上门
				</view>
			</view>
			<view class="li">
				<view class="types">
					{{timenum}}{{timetype(chosePriceInfo.rentalUnit)}}
				</view>
				<view class="tips">
					取车后开始计算订单时长
				</view>
			</view>
		
			<view class="li" style="margin-top: 28rpx;" id="endType">
				<view class="backtype">
					还车
				</view>
				<view class="txt">
					{{backTime()}}
					<!-- 2024年09月04日 今天16:00 -->
				</view>
			</view>
			<view class="li" @click="handleClick">
				<view
					style="width: 68rpx;color: #3D3D3D;font-size: 28rpx;font-weight: 600;margin-left: 8rpx;">
					地址
				</view>
				<input type="text" v-model="address" placeholder="请输入您的详细地址或点击右侧进行定位" class="input"
					placeholder-style="color:#C7CDD3" @click="handleInputClick" />
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ubBrE0P90fPYvhvbdzHy" mode="" @click.stop="getMapLocation()">
				</image>
			</view>
		</view>
		
		


		<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1" start-year="2024"
			:default-time="pickertime" start="2024"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeidx: 0,
			height: 0,
			showtips: false,
			modelId: '',
			storeId: '',
			modelInfo: {},
			storeInfo: {},
			agentInfo: {},
			priceList: [],
			deliveryMethod: 1,
			time1: false,
			params: {
				year: false,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false
			},
			time: "",
			gps: {},
			km: '',
			startDate: '',
			pickertime: '',
			priceIndex: 0,
			chosePriceInfo: {},
			timenum: 1,
			priceInfo: {},
			showmx: false,
			address: '',
			addlon: null,
			addlat: null,
			agree: false,
			sn: '',
			deviceInfo: {}
		}
	},
	onLoad(e) {
		if (e) {
			this.modelId = e.modelId
			this.storeId = e.storeId

		}

		console.log(e, 'eee');
		this.sn = e.sn
		this.getdeviceInfo()
		this.calculateDistance(0);
		// this.getmodelInfo()
		// this.getstoreInfo()
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1; // 月份从0开始，因此加1
		const day = now.getDate();

		// 设置一个小时后的时间
		let hour = now.getHours() + 1;
		let nextDay = day;
		let nextMonth = month;

		// 如果 hour 超过 23，调整日期
		if (hour >= 24) {
			hour = 0;
			nextDay += 1;

			// 获取当前月份的天数
			const daysInMonth = new Date(year, month, 0).getDate();
			if (nextDay > daysInMonth) {
				nextDay = 1;
				nextMonth += 1;

				// 如果超过12月，调整到下一年
				if (nextMonth > 12) {
					nextMonth = 1;
				}
			}
		}
		const minute = 0;
		// 格式化为 MM-DD 的字符串
		this.startDate =
			`${nextMonth < 10 ? '0' : ''}${nextMonth}-${nextDay < 10 ? '0' : ''}${nextDay} ${hour < 10 ? '0' : ''}${hour}:${minute < 10 ? '0' : ''}${minute}`;
		// 设置时间为当前年份、月份、日期、一个小时后的时间，分钟为 00，格式为 YYYY年MM月DD日 HH:mm
		this.time =
			`${year}年${nextMonth < 10 ? '0' : ''}${nextMonth}月${nextDay < 10 ? '0' : ''}${nextDay}日 ${hour < 10 ? '0' : ''}${hour}:${minute < 10 ? '0' : ''}${minute}`;
		// 初始化 pickertime 为当天的默认日期
		this.pickertime = this.startDate;


		this.$nextTick(() => {
			const query = uni.createSelectorQuery().in(this);
			query.select('.getcar').boundingClientRect(data => {

				// this.height = data.height + 45
				console.log('ips_box height:', this.height);
			}).exec();
		}, 300);
	},
	onShow() {
		// this.getToken()





		console.log('startDate:', this.startDate);
		console.log('time:', this.time);

	},

	methods: {
		getImageSrc(index) {
			const fullPowerIcon = 'https://lxnapi.ccttiot.com/bike/img/static/uhxmJlps8lrRRTmBIFpl';
			const emptyPowerIcon = 'https://lxnapi.ccttiot.com/bike/img/static/u1CcbtQydd107cOUEZ1l';

			const currentPower = this.deviceInfo.remainingPower;
			// 简化逻辑：直接比较索引和电量的十分之一
			return index + 1 <= (currentPower / 10) ? fullPowerIcon : emptyPowerIcon;
		},
		getImageStyle(index) {
			// 判断是否是部分电量的格子
			const currentPower = this.deviceInfo.remainingPower;
			const isPartialPower = (index - 1) * 10 < currentPower && currentPower < index * 10;

			return isPartialPower ? 'opacity: 0.5;' : '';
		},
		getdeviceInfo() {
			let data = {
				sn: this.sn
			}
			this.$u.get(`/appVerify/getDeviceBySn?`, data).then((res) => {
				if (res.code === 200) {
					this.deviceInfo = res.data
					// this.deviceInfo.remainingPower = 2
					this.modelId = res.data.modelId
					this.storeId = res.data.storeId
					this.getmodelInfo()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		handleClick() {
			if (!this.address) {
				this.getMapLocation();
			}
		},
		handleInputClick(event) {
			if (!this.address) {
				// 阻止输入框默认行为，避免在 address 为空时进行输入
				event.stopPropagation();
				this.getMapLocation();
			}
		},
		sub() {
			if (this.paid) {
				uni.showToast({
					title: '订单已支付',
					icon: 'none',
					duration: 2000
				});
				return; // 阻止后续代码执行
			}
			if (this.agree == false) {
				uni.showToast({
					title: '请勾选协议',
					icon: 'none',
					duration: 2000
				});
				return; // 阻止后续代码执行
			}
			let data = {
				sn: this.deviceInfo.sn,
				ruleId: this.chosePriceInfo.ruleId,
				
				num: this.timenum,
				
				type: 1
			};

			

			// if (this.typeidx == 0) {
			// 	if (!this.address || !this.addlat || !this.addlon) {
			// 		uni.showToast({
			// 			title: '请选择上门送车位置',
			// 			icon: 'none',
			// 			duration: 2000
			// 		});
			// 		return; // 阻止后续代码执行
			// 	}
			// 	if (this.agentInfo.isFreeCar) {
			// 		data.deliveryMethod = 2;
			// 	} else {
			// 		data.deliveryMethod = 3;
			// 	}

			// } else {
			// 	data.deliveryMethod = 1;

			// 	// 当 typeidx 为 1 时，检查 address、addlat 和 addlon 是否有值

			// }

			this.$u.post(`appVerify/createOrder`, data).then((res) => {
				if (res.code == 200) {
					uni.showLoading({
						title: '加载中'
					})

					console.log(res);
					let that = this
					// this.freList=res.rows
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.response.timeStamp,
						nonceStr: res.data.response.nonceStr,
						package: res.data.response.packageVal,
						signType: res.data.response.signType,
						paySign: res.data.response.paySign,
						success(ress) {
							this.paid = true
							// that.ispaid = false
							console.log('支付成功');
							// // 支付成功逻辑
							// clearInterval(that.timer)
							// that.orderinfo = {}
							// that.showdevice = false
							// that.deviceIndex = 0
							uni.hideLoading()
							uni.redirectTo({
								url: '/page_user/user_order?orderNo=' + res.data.orderNo
							})

						},
						fail(err) {
							// that.ispaid = false
							console.log(res);
							// 支付失败逻辑
							// uni.showToast({
							// 	title: '支付失败',
							// 	icon: 'none',
							// 	duration: 1000
							// });
							uni.hideLoading()
							uni.redirectTo({
								url: '/page_user/user_order?orderNo=' + res.data.orderNo
							})
							// setTimeout(()=>{

							// },1100)
						}
					});
					// 成功处理逻辑
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		backDedu(info) {
			if (info == 0) {
				return '免费取消'
			} else {
				return '扣费' + info * 100 + '%'
			}
		},
		getToken() {
			this.$u.post(`/getToken`).then((res) => {
				if (res.code == 200) {


				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		toWord(num) {
			if (num == 1) {
				uni.navigateTo({
					url: '/page_user/word?id=' + 27
				})
			} else {
				uni.navigateTo({
					url: '/page_user/word?id=' + 26
				})
			}

		},

		mapFun() {
			console.log('点击了');
			uni.openLocation({
				latitude: this.storeInfo.lat,
				//纬度 - 目的地/坐标点
				longitude: this.storeInfo.lng,
				//经度 - 目的地/坐标点
				// name: "荆门市",
				address: this.storeInfo.simpleAddress
			});
		},
		backTime() {
			if (this.chosePriceInfo.rentalUnit) {
				// 将 this.time 转换为 Date 对象
				const timeParts = this.time.match(/(\d{4})年(\d{2})月(\d{2})日 (\d{2}):(\d{2})/);
				const startTime = new Date(
					`${timeParts[1]}-${timeParts[2]}-${timeParts[3]}T${timeParts[4]}:${timeParts[5]}`);

				// 确定要增加的时间单位
				let multiplier = this.timenum;
				switch (this.chosePriceInfo.rentalUnit) {
					case 'hours':
						startTime.setHours(startTime.getHours() + multiplier);
						break;
					case 'day':
						startTime.setDate(startTime.getDate() + multiplier);
						break;
					case 'week':
						startTime.setDate(startTime.getDate() + multiplier * 7);
						break;
					case 'month':
						startTime.setMonth(startTime.getMonth() + multiplier);
						break;
					case 'quarter':
						startTime.setMonth(startTime.getMonth() + multiplier * 3);
						break;
					case 'year':
						startTime.setFullYear(startTime.getFullYear() + multiplier);
						break;
					default:
						console.error('Unknown rental unit:', this.chosePriceInfo.rentalUnit);
				}

				// 格式化返回时间
				const year = startTime.getFullYear();
				const month = (startTime.getMonth() + 1).toString().padStart(2, '0');
				const day = startTime.getDate().toString().padStart(2, '0');
				const hours = startTime.getHours().toString().padStart(2, '0');
				const minutes = startTime.getMinutes().toString().padStart(2, '0');

				// 返回归还时间
				return `${year}年${month}月${day}日 ${hours}:${minutes}`;
			}

		},
		getPrice() {

			let data = {
				modelId: this.modelId,
				type: '1',
				ruleId: this.chosePriceInfo.ruleId,
				agentId: this.agentInfo.agentId,
				num: this.timenum
			}

			if (this.typeidx == 0) {
				if (this.agentInfo.isFreeCar) {
					data.deliveryMethod = 2
				} else {
					data.deliveryMethod = 3
				}
			} else {
				data.deliveryMethod = 1
			}

			this.$u.post(`app/calculatePrice`, data).then((res) => {
				if (res.code == 200) {
					this.priceInfo = res.data

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		addnum() {
			this.timenum++
			this.getPrice()
		},
		subtractnum() {
			if (this.timenum > 1) {
				this.timenum--;
				this.getPrice()
			}
		},
		changePrice(item, idx) {
			this.chosePriceInfo = item
			this.priceIndex = idx
			this.getPrice()
		},
		confirm1(selectedDate) {
			// 将用户选择的日期和当前日期进行比较
			// 从回调中获取选择的月份、日期、小时和分钟
			const selectedMonth = parseInt(selectedDate.month, 10);
			const selectedDay = parseInt(selectedDate.day, 10);
			const selectedHour = selectedDate.hour;
			const selectedMinute = selectedDate.minute;

			// 获取当前日期
			const now = new Date();
			const currentYear = now.getFullYear();
			const currentMonth = now.getMonth();
			const currentDay = now.getDate();

			// 比较选择的日期和当前日期
			if (selectedMonth < currentMonth || (selectedMonth === currentMonth && selectedDay < currentDay)) {
				// 如果选择的日期比当前日期早，则重置为当前日期时间
				const month = currentMonth < 10 ? `${currentMonth}` : currentMonth;
				const day = currentDay < 10 ? `${currentDay}` : currentDay;
				const hour = now.getHours() < 10 ? `${now.getHours()}` : now.getHours();
				const minute = now.getMinutes() < 10 ? `${now.getMinutes()}` : now.getMinutes();

				this.time = `${currentYear}年${month}月${day}日 ${hour}:${minute}`;

				uni.showToast({
					title: '选择的日期不能小于当前日期',
					icon: 'none',
					duration: 2000
				});
			} else {
				// 否则，设置为用户选择的日期和时间
				const month = selectedMonth < 10 ? `${selectedMonth}` : selectedMonth;
				const day = selectedDay < 10 ? `${selectedDay}` : selectedDay;
				const hour = selectedHour < 10 ? `${selectedHour}` : selectedHour;
				const minute = selectedMinute < 10 ? `${selectedMinute}` : selectedMinute;

				this.time = `${currentYear}年${month}月${day}日 ${hour}:${minute}`;
			}
			console.log(this.time);
		},

		timetype(time) {
			if (time == 'hours') {
				return '小时'
			} else if (time == 'day') {
				return '天'
			} else if (time == 'week') {
				return '周'
			} else if (time == 'month') {
				return '月'
			} else if (time == 'quarter') {
				return '季度'
			} else if (time == 'year') {
				return '年'
			}
		},
		changeType(num) {
			this.typeidx = num
			this.$nextTick(() => {
				this.getPrice()
				this.calculateDistance(num);
			});

		},
		getpriceList() {
			let data = {
				modelId: this.modelId

			}
			this.$u.get(`app/getRuleByModelId?`, data).then((res) => {
				if (res.code == 200) {
					this.priceList = res.data;
					this.chosePriceInfo = this.priceList[0]
					setTimeout(() => {
						this.getPrice()
					}, 300)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		getmodelInfo() {
			let data = {
				modelId: this.modelId
			}
			this.$u.get(`appVerify	/getModelById?`, data).then((res) => {
				if (res.code == 200) {
					this.modelInfo = res.data
					this.getpriceList()

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},

		getstoreInfo() {
			let data = {
				storeId: this.storeId
			}
			this.$u.get(`app/getStore?`, data).then((res) => {
				if (res.code == 200) {
					this.storeInfo = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		calculateDistance(num) {
			if (num == 0) {
				console.log('00');
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);

					query.select('#startType').boundingClientRect(startRect => {
						if (!startRect) {
							// console.error('#startType element not found');
							return;
						}

						query.select('#endType').boundingClientRect(endRect => {
							if (!endRect) {
								// console.error('#endType element not found');
								return;
							}

							this.height = endRect.top - startRect.bottom;
						}).exec();

					}).exec();
				}, 100);
			} else {
				console.log('11');
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);

					query.select('#startType1').boundingClientRect(startRect => {
						if (!startRect) {
							// console.error('#startType1 element not found');
							return;
						}

						query.select('#endType1').boundingClientRect(endRect => {
							if (!endRect) {
								// console.error('#endType1 element not found');
								return;
							}

							this.height = endRect.top - startRect.bottom;
						}).exec();

					}).exec();
				}, 100);
			}

		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F7F7F7;
}

.page {
	width: 750rpx;
	padding-bottom: 220rpx;

	.tips_box {
		padding: 48rpx 30rpx;
		position: fixed;
		left: 82rpx;
		top: 410rpx;
		width: 590rpx;
		// height: 282rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		z-index: 130;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.tit {
			font-weight: 600;
			font-size: 40rpx;
			color: #3D3D3D;
		}

		.txt {
			margin-top: 32rpx;
			width: 506rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
		}

		.btn {
			margin-top: 46rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 506rpx;
			height: 78rpx;
			background: #4297F3;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.sub_box {
		position: fixed;
		z-index: 110;
		bottom: 0;

		.detail {
			position: relative;
			width: 750rpx;
			padding: 36rpx;
			border-radius: 30rpx 30rpx 0 0;
			background: #fff;


			.tit {


				width: 100%;
				text-align: center;
				font-weight: 600;
				font-size: 40rpx;
				color: #3D3D3D;

			}

			.close {
				position: absolute;
				right: 36rpx;
				top: 36rpx;
				width: 34rpx;
				height: 34rpx;
			}

			.txt_li {
				margin-top: 22rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;

				.txt5 {
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}
		}

		.bot_box {
			padding: 28rpx;
			width: 750rpx;
			height: 198rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.price_box {
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.price {
					font-weight: 500;
					font-size: 36rpx;
					color: #FF1C1C;

					span {
						font-weight: 600;
						font-size: 52rpx;
					}
				}

				.mx {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					margin-left: 32rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #4297F3;

					.icon-xiangxia {
						font-weight: 600;
						font-size: 20rpx;
					}
				}

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: auto;
					width: 340rpx;
					height: 84rpx;
					background: #4297F3;
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}

			.xiey {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;

				.yuan {
					width: 32rpx;
					height: 32rpx;
					border: 1rpx solid #3D3D3D;
					border-radius: 50%;
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}

				.txt3,
				.txt4 {
					font-weight: 400;
					font-size: 28rpx;
					white-space: nowrap; // 防止换行
				}

				.txt3 {
					color: #3D3D3D;
				}

				.txt4 {
					color: #4297F3;
				}
			}
		}



	}

	.tabble_box {
		width: 698rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		padding: 18rpx 24rpx;

		border-radius: 30rpx;
		background: #FFFFFF;

		.tit {
			width: 100%;
			font-weight: 600;
			font-size: 28rpx;
			color: #3D3D3D;
		}

		.txt2 {
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
		}

		.tabble {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.tabble_top {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;

				.tabbl_left {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 93rpx;
					background: #D8D8D8;
					border-radius: 30rpx 0 0 0;
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
					border-right: 1rpx solid #fff;
					border-bottom: 1rpx solid #fff;
				}

				.tabble_right {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 93rpx;
					background: #D8D8D8;
					border-radius: 0 30rpx 0 0;
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
					border-bottom: 1rpx solid #fff;
				}

			}

			.tabble_cont:last-child {
				.tabbl_left {
					border-radius: 0 0 0 30rpx;
				}

				.tabble_right {
					border-radius: 0 0 30rpx 0;
				}
			}

			.tabble_cont {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;

				.tabbl_left {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 93rpx;
					background: #EFEFEF;
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
					border-right: 1rpx solid #fff;
					border-bottom: 1rpx solid #fff;
				}

				.tabble_right {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 93rpx;
					background: #EFEFEF;
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
					border-bottom: 1rpx solid #fff;
				}

			}
		}

	}

	.insurance_box {
		position: relative;
		width: 698rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		padding: 18rpx 24rpx;

		border-radius: 30rpx;
		background: #FFFFFF;

		.choose_insurance_box::-webkit-scrollbar {
			display: none;
		}

		.choose_insurance_box {
			margin-top: 26rpx;
			display: flex;
			flex-wrap: nowrap; // 确保子元素在一行内排列

			overflow-x: auto; // 启用水平滚动条
			white-space: nowrap; // 确保子元素不换行

			.insurance_li {
				margin-right: 14rpx;
				width: 280rpx;
				height: 607rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
				flex-shrink: 0; // 防止子元素缩小，确保宽度固定
			}
		}

		.info {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #3D3D3D;

				.txt1 {
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #0D75E5;
				}
			}

			.right_txt {
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}

		.backcolor {
			position: absolute;
			left: 0;
			top: 0;
			width: 698rpx;
			height: 102rpx;
			border-radius: 30rpx 30rpx 0 0;
			background: linear-gradient(180deg, rgba(158, 250, 174, 0.38) 0%, rgba(149, 244, 165, 0) 100%);
			// z-index: 0;
		}

		.tit_box {
			display: flex;
			align-items: center;
			font-weight: 600;
			font-size: 28rpx;
			color: #16BC32;

			.txt {
				margin-left: 12rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #16BC32;
			}
		}
	}

	.yj_box {
		width: 698rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		padding: 18rpx 24rpx;

		border-radius: 30rpx;
		background: #FFFFFF;

		.tipstxt {
			margin-top: 18rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #808080;
		}

		.tip_box {
			margin-top: 22rpx;
			width: 100%;
			padding: 30rpx 34rpx;
			background: #EFFDF4;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			.tops {
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;

				image {
					margin-right: 4rpx;
					width: 42rpx;
					height: 42rpx;
				}
			}

			.words {
				margin-top: 14rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}

		.txt_box {
			margin-top: 14rpx;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.txt {
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
			}
		}

		.yj_line {
			margin-top: 50rpx;
			padding: 0 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.yuan {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 108rpx;
				height: 42rpx;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				border: 1rpx solid #808080;
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
			}

			.line {
				flex-grow: 1;
				height: 1rpx;
				border-bottom: 1rpx dashed #80808080;
			}
		}

		.top_txt {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;

			.txts {
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.tips_btn {
				// width: 100%;
				display: flex;
				align-items: center;

				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;

				.icon-xiangyou1 {
					font-size: 20rpx;
					color: #3D3D3D;
				}
			}
		}
	}

	.time_card {
		margin: 0 auto;
		margin-top: 16rpx;
		padding: 18rpx 24rpx;
		width: 698rpx;
		border-radius: 30rpx;
		background: #FFFFFF;

		.num_box {
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;

			.lefttxt {
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.right {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;

				.txt {
					font-weight: 600;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.choosnum {
					margin-left: 22rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					.left {
						display: flex;

						align-items: center;
						justify-content: center;
						width: 65rpx;
						height: 56rpx;
						border: 2rpx solid #808080;
						border-radius: 30rpx 0 0 30rpx;

						image {
							width: 22rpx;
							height: 22rpx;
						}
					}

					.cont {
						display: flex;

						align-items: center;
						justify-content: center;
						width: 99rpx;
						height: 56rpx;
						border-bottom: 2rpx solid #808080;
						border-top: 2rpx solid #808080;

					}

					.right {
						display: flex;

						align-items: center;
						justify-content: center;
						width: 65rpx;
						height: 56rpx;
						border: 2rpx solid #808080;
						border-radius: 0rpx 30rpx 30rpx 0;

						image {
							width: 22rpx;
							height: 22rpx;
						}
					}

				}
			}

		}

		.tit {
			font-weight: 600;
			font-size: 28rpx;
			color: #3D3D3D;
		}

		.choose_box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 12rpx;

			.choose_li:nth-child(4n) {
				margin-right: 0;
			}

			.choose_li {
				margin-top: 16rpx;
				margin-right: 14rpx;
				position: relative;
				// display: flex;
				// flex-wrap: wrap;
				// align-items: center;
				// justify-content: center;
				width: 150rpx;
				height: 150rpx;
				background: #F0F5F6;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding-top: 20rpx;
				border: 2rpx solid #fff;

				.time {

					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.price {
					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 32rpx;
					color: #FF1C1C;

					span {
						font-size: 44rpx;
						font-weight: 600;
					}
				}

				.hot {
					position: absolute;
					left: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #CCE5FF;
					width: 100%;
					height: 35rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #4297F3;
					border-radius: 0 0 12rpx 12rpx;
				}
			}

			.act1 {
				border: 2rpx solid #4297F3;
				background: #DCEDFF;
			}
		}
	}

	.tab-container {
		display: flex;
		border-bottom: 2px solid #ddd;
		/* 底部边框 */
	}

	.tab-item {
		position: relative;
		padding: 10px 20px;
		cursor: pointer;
		color: #666;
		font-size: 16px;
	}

	.tab-item.active {
		color: #333;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #2e9afe;
		/* 下划线颜色 */
		border-radius: 50px;
		/* 圆角效果，模拟弧线 */
	}

	.delivery_cont {
		width: 696rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		// height: 488rpx;

		// background: #FFFFFF;
		.delivery_info {
			width: 100%;
			background: #fff;
			padding: 30rpx 20rpx;
			border-radius: 0 0 30rpx 30rpx;

			@mixin same-height-as-getcar {
				height: 100%; // 设置为 getcar 高度
			}

			.type1 {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				position: relative;

				.lins {
					position: absolute;
					left: 30rpx;
					top: 46rpx;
					flex-grow: 1;
					width: 2rpx;

					border-left: 1rpx dashed #D8D8D8;

				}

				.maps {
					z-index: 100;
					position: absolute;
					right: 0;
					top: 100rpx;
					width: 166rpx;
					height: 166rpx;
					background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiIqqyZ7lKmwHShwdb7e');
					background-size: cover;
					/* 背景图片等比缩放以覆盖整个容器 */
					background-position: center;

					image {

						position: absolute;
						right: 0;
						top: 30rpx;
						width: 96rpx;
						height: 98rpx;
					}
				}

				.getcar {
					display: flex;
					flex-wrap: wrap;
					z-index: 10;

					.li {
						margin-top: 8rpx;
						display: flex;
						flex-wrap: nowrap;

						.input {
							width: 510rpx;
						}

						image {
							margin-left: 6rpx;
							width: 32rpx;
							height: 32rpx;
						}

						.type {

							display: flex;
							align-items: center;
							justify-content: center;
							width: 68rpx;
							height: 40rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 2rpx solid #4297F3;
							font-weight: 500;
							font-size: 24rpx;
							color: #4297F3;
						}

						.txt {

							margin-left: 18rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #3D3D3D;
						}

						.types {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 68rpx;
							height: 40rpx;
							background: #DCEDFF;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-weight: 500;
							font-size: 20rpx;
							color: #4297F3;

						}

						.backtype {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 68rpx;
							height: 40rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #16BC32;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 2rpx solid #16BC32;
						}

						.tips {

							margin-left: 18rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #4297F3;
						}
					}

				}
			}
		}

		.delivery_top {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;

			.delivery_left {
				width: 50%;
				height: 100rpx;
				background: #EEEEEE;
				border-radius: 60rpx 0 0 0;

				.cont {
					position: relative;
					padding-top: 26rpx;
					text-align: center;
					width: 100%;
					background: #fff;
					height: 100%;
					border-radius: 60rpx 60rpx 0 0;

					font-weight: 600;
					font-size: 40rpx;
					color: #3D3D3D;

					image {
						position: absolute;
						bottom: 0;
						width: 92rpx;
						height: 16rpx;
						left: 114rpx;
					}
				}
			}



			.delivery_right {
				width: 50%;
				height: 100rpx;
				background: #fff;
				border-radius: 0rpx 60rpx 0 0rpx;

				.cont {
					position: relative;
					flex-wrap: wrap;
					padding-top: 26rpx;
					text-align: center;
					width: 100%;
					background: #eee;
					height: 100%;
					border-radius: 0rpx 60rpx 0 60rpx;
					font-weight: 600;
					font-size: 36rpx;
					color: #808080;

					image {
						position: absolute;
						bottom: 0;
						width: 92rpx;
						height: 16rpx;
						left: 114rpx;
					}
				}
			}


			.leftact {
				background: #fff;
				border-radius: 60rpx 0 0 0;

				.cont {
					width: 100%;
					background: #eee;
					height: 100%;
					border-radius: 60rpx 0 60rpx 0;
					color: #808080;

				}
			}

			.rightact {
				background: #eee;
				border-radius: 0 60rpx 0 0;

				.cont {
					width: 100%;
					background: #fff;
					height: 100%;
					border-radius: 60rpx 60rpx 0 0;
					color: #808080;
				}
			}
		}
	}

	.car_info {
		margin: 0 auto;
		margin-top: -200rpx;
		width: 698rpx;
		height: 196rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;

		.left {

			.model {
				margin-top: 12rpx;
				font-weight: 700;
				font-size: 32rpx;
				color: #3D3D3D;
			}

			.carNum {
				margin-top: 12rpx;
				font-weight: 700;
				font-size: 32rpx;
				color: #3D3D3D;
			}

			.carInfo {
				display: flex;
				align-items: center;
				font-weight: 700;
				font-size: 36rpx;
				color: #3D3D3D;

				// justify-content: center;
				.titimg {
					margin-bottom: 8rpx;
					margin-right: 12rpx;

					width: 30rpx;
					height: 30rpx;
				}

				.power {
					display: flex;
					align-items: center;
					// gap: 4rpx; // 设置图标之间的间距
					margin-right: 12rpx;

					.power-icon {
						width: 18rpx;
						height: 36rpx;
					}
				}
			}
		}

		.rightimage {
			width: 156rpx;
			height: 150rpx;
		}

	}




	.fixed {
		z-index: 999;
		position: fixed;
		top: 0;
	}

	.backimg {

		// position: fixed;


		z-index: -10;
		width: 750rpx;
		height: 428rpx;
		background: linear-gradient(180deg, #CCE5FF 0%, rgba(204, 229, 255, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

	}
}
</style>