CarRental/page_user/user_order.vue

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

		</view>
		<view class="tit" v-if="orderInfo.isOverdue&&orderInfo.status!=8" style="color: red;">
			已超时
		</view>
		<view class="tit" v-else>
			{{typeReturn(orderInfo.status)}}
		</view>

		<view class="tips" v-if="orderInfo.isOverdue">
			已超时，请点击续租按钮进行续租
		</view>
		<!-- <view class="tips" v-if="orderInfo.status==0">
			剩余支付时间：{{countdown}}
		</view> -->
		<view class="order_code" v-if="orderInfo.status==8">
			<view class="tits" style="color: #3D3D3D;font-weight: 600;font-size: 32rpx;">
				已还车
			</view>
			<view class="tits">
				押金将退还原支付账户
			</view>
			<view class="tits">
				还车时间：09月05日 16:00
			</view>
		</view>
		
		
		
		<view class="info_box">
			<view class="car_info">
				<image :src="modelInfo.picture" mode="" v-if="modelInfo.picture"></image>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uB1F5aibooguILH8uB4F" mode="" v-else ></image>
				<view class="right_info">
					<view class="tits">
						{{modelInfo.model}}
					</view>
					<view class="txt">
						套餐：{{orderInfo.rentalPeriodText}}
					</view>
					<view class="txt">
						租赁周期：{{orderInfo.num}}{{timetype(orderInfo.rentalUnit)}}
					</view>
				</view>
			</view>
			<view class="data">
				<view class="text">
					租车时间
				</view>
				<view class="time" v-if="orderInfo.createTime">
					共{{orderInfo.num}}{{timetype(orderInfo.rentalUnit)}}（{{returnTime(orderInfo.createTime)}}-{{returnTime(orderInfo.expiryTime)}})
				</view>
			</view>
			<view class="info_li">
				<view class="text">
					租金
				</view>
				<view class="price">
					<!-- <span>￥108×1</span> -->
					￥{{orderInfo.price}}
				</view>
			</view>
			<!-- <view class="info_li">
				<view class="text">
					车辆派送费
				</view>
				<view class="price">

					￥{{orderInfo.deliveryFee}}
				</view>
			</view> -->
			<view class="info_li">
				<view class="text">
					押金
				</view>
				<view class="price">
					<!-- <span>￥108×1</span> -->
					￥{{orderInfo.deposit}}
				</view>
			</view>
			<view class="line">

			</view>
			<view class="info_li">
				<view class="text">

				</view>
				<view class="price" style="font-size: 40rpx;">
					<span style="font-size: 28rpx;">实付款</span>
					￥{{orderInfo.payFee}}
				</view>
			</view>
			<view class="info_li" style="margin-top: 16rpx;">
				<view class="text"></view>
				<view class="price" style="font-size: 40rpx;">
					<span>还车成功后押金将退回原支付账户</span>

				</view>
			</view>
		</view>
	
		<view class="order_code">
			<view class="tits">
				订单编号
			</view>
			<view class="code_li">
				<view class="code">
					{{orderInfo.orderNo}}
				</view>
				<view class="btn" @click="copy(orderInfo.orderNo)">
					复制
				</view>
			</view>
		</view>
		
		<view class="bot_btn">
			<view class="btn_li" v-if="orderInfo.status==0">
				<view class="txt2" @click="orderCancel">
					取消订单
				</view>
				<view class="btn" @click="subPay()">
					<view class="tits">
						继续付款
					</view>
					<view class="cutdown">剩余{{countdown}} </view>
					
				</view>
			</view>
			<view class="btn_li" v-if="orderInfo.status==1">
				<view class="txt2" @click="orderCancel">
					取消订单
				</view>
				<view class="btn" @click="qecodelock()">
					扫码用车
				</view>
			</view>
			<view class="btn_li" v-if="orderInfo.status==2">
				<view class="txt2" @click="orderCancel">
					取消订单
				</view>
				<view class="btn" @click="qecodelock()">
					扫码用车
				</view>
				<!-- 	<view class="btn" style="background-color: #4297F3;">
					待送车
				</view> -->
			</view>
			<view class="btn_li2" v-if="orderInfo.status==4">
				<view class="btn3" @click="backcar()" >
					去还车
				</view>
				
			
				<view class="btn3" @click="topage(0)">
					用车
				</view>
				<view class="btn4" @click="topage(1)">
					续租
				</view>
			</view>
			<view class="btn_li3"
				v-if="orderInfo.status==8||orderInfo.status==5||orderInfo.status==6||orderInfo.status==7">
				<view class="btn3" style="width: 1rpx;"></view>
				<view class="btn5" @click="tosubOrder()">
					重新下单



				</view>
			</view>
		</view>
		<u-mask :show="showaddress" :z-index='100' duration='0' />
		<view class="address_box" v-if="showaddress">
			<view class="close">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uBhLz9V8ZDw6PfEfQHL9" mode=""
					@click="showaddress=false"></image>
			</view>
			<view class="tit5">
				支持多店还车
			</view>
			<view class="tip">
				还车可选择以下任意一家门店
			</view>

			<view class="card_box">

				<view class="card" v-for=" (item,index) in storeList" :key="index" @click="chooseBack(item,index)">
					<view class="chose_img">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uwsRz4zY4kaKnkYt3EFS" mode=""
							v-if="index==addchoose"></image>
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uYzjRBaXWfUiqYeQj77R" mode=""
							v-if='index!=addchoose'></image>
					</view>
					<view class="card_tit">
						{{item.name}}
					</view>
					<view class="card_txt">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/utT79qEWjVeXaZXTihtW" mode=""></image>

						<view class="words">
							营业时间：{{item.businessTimeStart}}-{{item.businessTimeEnd}}
						</view>
						<view class="km">
							{{returnKm(item)}}
						</view>
					</view>
					<view class="card_txt">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uBa17CwWo6fhf1csWoko" mode=""></image>
						<view class="words">
							{{item.simpleAddress}}
						</view>
					</view>
					<view class="store_btn_li">
						<view class="store_btn" @click="callPhone(item.contactMobile)">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/umkJCfPac4Mrzni8aoda" mode="">
							</image>
							联系门店
						</view>
						<view class="store_btn" @click.stop="mapFuns(item)">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uolYZ4dLvxxI2n2WzZ4J" mode="">
							</image>
							导航到店
						</view>
					</view>
				</view>
			</view>
			<view class="btn" @click="subBack()">
				确认还车
			</view>
		</view>
		<u-mask :show="showsub" :z-index='100' duration='0' @click="closeSub()" />

		<view class="sub_car" v-if="showsub">
			<view class="tit3">
				确认用车
			</view>
			<view class="car_info">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ucOJVTe4wsXSKAH181k9" mode=""></image>
				<view class="right_infos">
					<view class="tit4">
						{{deviceInfo.model}}
					</view>
					<view class="txt3" style="margin-top: 16rpx;">
						手机开关锁 | 定位防盗
					</view>
					<view class="txt3">
						车辆编号：{{deviceInfo.sn}}
					</view>
					<view class="txt3">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uDlsHeWoSBa8Sj4dAhYx" mode=""></image>
						{{deviceInfo.remainingPower}}% <span
							style="margin-left: 40rpx;">可骑行{{deviceInfo.remainingMileage}}km</span>
					</view>
				</view>

			</view>
			<view class="btn_li">
				<view class="btn1" @click="qecodelock()">
					换一辆
				</view>
				<view class="btn2" @click="qrSubcar()">
					确认
				</view>
			</view>
		</view>
		<u-select v-model="showList" :list="list" title='选择换车方式' @confirm="confirm"></u-select>
		<u-mask :show="showBack" :z-index='100' duration='0' @click="showBack=false" />
		<view class="backtip" v-if="showBack">
			<image src="https://lxnapi.ccttiot.com/bike/img/static/ubcBvAyCGMtKxPyKgg9w" mode=""></image>
			<view class="qsBtn" @click="showBack=false">
				我知道了
			</view>
		</view>
	</view>
</template>

<script>
	let timerId;
	export default {
		data() {
			return {
				showsub: false,
				showaddress: false,
				orderNo: '',
				orderInfo: {},
				countdown: '',
				countdownTimer: null,
				storeInfo: {},
				modelInfo: {},
				tabindex: 0,
				agentInfo: {},
				paid: false,
				showList: false,
				address: '',
				addlat: null,
				addlon: null,
				list: [{
						value: '1',
						label: '自行前往门店换车'
					}, {
						value: '2',
						label: '上门取车'
					},

				],
				choosetype: null,
				sn: '',
				deviceInfo: {},
				storeList: [],
				addchoose: -1,
				chooseBackInfo: {},
				showBack: false

			}
		},
		onLoad(e) {
			if (e.orderNo) {
				this.orderNo = e.orderNo
			}
			const pages = getCurrentPages(); // 获取页面栈
			if (pages.length > 1) {
				const previousPage = pages[pages.length - 2]; // 获取上一个页面
				console.log('上一个页面路径:', previousPage.route); // 打印上一个页面的路径
				
				console.log('上一个页面参数:', previousPage.options); // 打印上一个页面的参数
			}
			this.getOrderInfo()
		},
		onShow() {
			
		},
		methods: {
			backcar(){
				let data ={
					orderNo:this.orderInfo.orderNo,
					type:'1'
				}
				this.$u.post(`/appVerify/returnVehicle	`, data).then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			closeSub() {
				this.showsub = false
			},
			typeReturns(num) {
				console.log(num, 'aaaaaaaaaaaa');
				let result = {
					text: '',
					color: '#4297F3' // 默认颜色
				};

				if (num == 0) {
					result.text = '待接单';
					result.color = '#F14C4C'; // 待支付颜色
				} else if (num == 1) {
					result.text = '待配送';
					result.color = '#F38C42'; // 超时取消颜色
				} else if (num == 2) {
					result.text = '配送中';
					result.color = '#4297F3'; // 超时取消颜色
				} else if (num == 3) {
					result.text = '已完成';
					result.color = '#000000'; // 超时取消颜色
				} else if (num == 8) {
					result.text = '已取消';
					result.color = '#ccc'; // 超时取消颜色
				}

				return result;
			},
			back() {
				uni.redirectTo({
					url: '/pages/my'
				})
			},

			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
				// setTimeout(()=>{
				// 	this.showkf=false
				// },500)
			},
			mapFuns(item) {
				console.log('点击了');
				uni.openLocation({
					latitude: item.lat,
					//纬度 - 目的地/坐标点
					longitude: item.lng,
					//经度 - 目的地/坐标点
					// name: "荆门市",
					address: item.simpleAddress
				});
			},
			subBack() {
				if (!this.chooseBackInfo.storeId) {
					uni.showToast({
						title: '请选择换车店铺',
						icon: 'none',
						duration: 1000
					});
					return
				}
			
				uni.showLoading({
					title: '加载中'
				});
			
				uni.getLocation({
					type: 'gcj02',
					success: (lb) => {
						let data = {
							returnType: 1,
							returnMethod:this.orderInfo.returnMethod,
							returnStoreId: this.chooseBackInfo.storeId,
							orderNo: this.orderInfo.orderNo,
							returnLon: lb.longitude,
							returnLat: lb.latitude
						};
						this.$u.post(`/appVerify/returnVehicle`, data).then((res) => {
							uni.hideLoading();
							if (res.code == 200) {
								uni.redirectTo({
									url: '/pages/my'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						});
					},
					fail: (error) => {
						uni.hideLoading();
						uni.showToast({
							title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
							icon: 'none',
							duration: 2000
						});
						// 在这里处理获取位置信息失败的情况
					}
				});
			},
			
			hooseBack(item, index) {
				this.addchoose = index
				this.chooseBackInfo = item
			},
			returnKm(item) {
				let distance = item.distance
				if (distance < 1000) {
					return `${distance.toFixed(0)}m`; // 小于1000米，保留整数并拼接'm'
				} else {
					return `${(distance / 1000).toFixed(1)}km`; // 大于等于1000米，转换为千米并保留两位小数
				}
			},
			topage(num) {
				if (num == 0) {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				} else if (num == 1) {
					uni.navigateTo({
						url: '/page_user/renewCar?orderNo=' + this.orderInfo.orderNo
					})
				}
			},
			
			qrSubcar() {
				this.$u.post(`appVerify/bandDevice?orderNo=` + this.orderInfo.orderNo + '&sn=' + this.deviceInfo.sn).then((
					res) => {
					if (res.code == 200) {
						this.showsub = false
						this.getOrderInfo()

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			qecodelock() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {

						let sn = null;
						let queryParams = res.result.split('?')[1];
						if (queryParams) {
							let params = queryParams.split('&');
							params.forEach(param => {
								let [key, value] = param.split('=');
								if (key === 'sn') {
									sn = value;
								}
							});
						}

						this.sn = sn
						if (this.sn != '') {
							this.$u.get('app/getDeviceBySn?sn=' + this.sn).then((res) => {
								console.log(res, 'rererer');
								if (res.code === 200) {
									// console.log(this.areaId,);
									this.deviceInfo = res.data
									this.showsub = true
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									});
								}
							})

						}

					},
					fail: err => {
						console.error('扫描失败：', err);
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						});
					}
				});
			},
			handleClick() {
				if (!this.address) {
					this.getMapLocation();
			
				}
			},
			handleInputClick(event) {
				if (!this.address) {
					// 阻止输入框默认行为，避免在 address 为空时进行输入
					// event.stopPropagation();
					this.getMapLocation();
				}
			},
			
			getMapLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.address = res.address
						this.addlon = res.longitude
						this.addlat = res.latitude
						// this.getRegionFn(res);
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: "是否授权当前位置",
										content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success: (tip) => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data
															.authSetting[
																'scope.userLocation'
															] === true
														) {
															uni.showToast({
																title: "授权成功",
																icon: "success",
																duration: 1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (
																	res
																) => {
																	console
																		.log(
																			"详细地址",
																			res
																		);
																	// this.getRegionFn(res);
																}
															})
														} else {
															uni.showToast({
																title: "授权失败",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: "调用授权窗口失败",
									icon: "none",
									duration: 1000
								})
							}
						})
					}
				});
			},
			method2() {
				if (!this.addlon) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.address) {
					uni.showToast({
						title: '请输入地址',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				let data = {
					orderNo: this.orderInfo.orderNo,
					returnMethod: 2,
					returnLon: this.addlon,
					returnLat: this.addlat,
					returnAddress: this.address
				}
				this.$u.put('appVerify/returnAddress', data).then((res) => {
					console.log(res, 'rererer');
					if (res.code === 200) {
						// console.log(this.areaId,);
						this.getOrderInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			method1() {
				let data = {
					orderNo: this.orderInfo.orderNo,
					returnMethod: 1
				}
				this.$u.put('appVerify/returnAddress', data).then((res) => {
					console.log(res, 'rererer');
					if (res.code === 200) {
						// console.log(this.areaId,);
						this.getOrderInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			confirm(e) {
				console.log(e);
				if (e[0].value == 1) {
					this.orderInfo.returnMethod = 1
					this.choosetype = 1
					this.method1()
				} else {
					this.orderInfo.returnMethod = 2
					this.choosetype = 2
				}
			},
			changeBack() {
				this.showList = true
			},
			subPay() {
				if (this.paid) {
					return; // 阻止后续代码执行
				}
				this.$u.post(`appVerify/confirmPay?orderNo=` + this.orderInfo.orderNo).then((res) => {
					if (res.code == 200) {
						uni.showLoading({
							title: '加载中'
						})
						this.paid = true
						console.log(res);
						// this.freList=res.rows
						let that = this
						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(res) {
								that.paid = true
								// console.log('支付成功');
								// // 支付成功逻辑
								// clearInterval(that.timer)
								// that.orderinfo = {}
								// that.showdevice = false
								// that.deviceIndex = 0

								setTimeout(() => {
									that.getOrderInfo()
									uni.hideLoading()
								}, 500)

								// uni.redirectTo({
								// 	url:'/page_user/user_order?orderNo='+res.data.orderNo
								// })

							},
							fail(err) {
								that.paid = false
								// that.ispaid = false
								console.log(res);
								// 支付失败逻辑
								// uni.showToast({
								// 	title: '支付失败',
								// 	icon: 'none',
								// 	duration: 1000
								// });

								// setTimeout(()=>{

								// },1100)
							}
						});
						// 成功处理逻辑

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			copy(orderNo) {
				uni.setClipboardData({
					data: orderNo,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			tosubOrder() {
				uni.navigateTo({
					url: '/page_user/ordder?sn=' + this.orderInfo.sn 
				})
			},
			orderCancel() {
				uni.showLoading({
					title:'加载中...'
				})
				this.$u.post(`appVerify/orderCancel?orderNo=` + this.orderInfo.orderNo).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						this.getOrderInfo()
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			returnTime(time) {
				// 将时间字符串转换为 Date 对象
				let date = new Date(time.replace(/-/g, "/"));

				// 获取月份（注意：月份从 0 开始，需要加 1）
				let month = (date.getMonth() + 1).toString().padStart(2, "0");

				// 获取日期
				let day = date.getDate().toString().padStart(2, "0");

				// 获取小时
				let hours = date.getHours().toString().padStart(2, "0");

				// 获取分钟
				let minutes = date.getMinutes().toString().padStart(2, "0");

				// 返回指定格式
				return `${month}/${day} ${hours}:${minutes}`;
			},
			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 '年'
				}

			},
			typeReturn(num) {
				if (num == 0) {
					return '待支付'
				} else if (num == 1) {
					return '待取车'
				} else if (num == 2) {
					return '待送车'
				} else if (num == 3) {
					return '送车中'
				} else if (num == 4) {
					return '车辆使用中'
				} else if (num == 5) {
					return '超时取消'
				} else if (num == 6) {
					return '已取消'
				} else if (num == 7) {
					return '订单审核中'
				} else if (num == 8) {
					return '订单已结束'
				}
			},
			mapFun() {
				console.log('点击了');
				uni.openLocation({
					latitude: this.storeInfo.lat,
					//纬度 - 目的地/坐标点
					longitude: this.storeInfo.lng,
					//经度 - 目的地/坐标点
					// name: "荆门市",
					address: this.storeInfo.simpleAddress
				});
			},
		
			getmodelInfo() {
				let data = {
					modelId: this.orderInfo.modelId
				}
				this.$u.get(`appVerify/getModelById?`, data).then((res) => {
					if (res.code == 200) {
						this.modelInfo = res.data

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


			backDedu(info) {
				if (info == 0) {
					return '免费取消'
				} else {
					return '扣费' + info * 100 + '%'
				}
			},
			getOrderInfo() {
				let data = {
					orderNo: this.orderNo
				};
				this.$u.get(`appVerify/orderInfo?`, data).then((res) => {
					if (res.code === 200) {
						this.orderInfo = res.data;
						
						this.getmodelInfo()
						
						// 调用倒计时方法
						if (this.orderInfo.status == 0) {
							this.startCountdown(this.orderInfo.autoCancelTime);
						}
						if(this.orderInfo.returnMethod==2){
							this.choosetype=2
						}else{
							this.choosetype=1
						}

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

			startCountdown(autoCancelTime) {
				// 清除之前的倒计时，防止多次调用导致冲突
				if (this.countdownTimer) {
					clearInterval(this.countdownTimer);
				}

				// 将时间字符串转为时间对象
				let cancelTime = new Date(autoCancelTime.replace(/-/g, "/")).getTime();

				// 定时器，每秒更新一次倒计时
				this.countdownTimer = setInterval(() => {
					let currentTime = new Date().getTime();

					// 计算剩余的毫秒数
					let diff = cancelTime - currentTime;

					// 如果倒计时时间已到，清除定时器并设置倒计时为 "00:00"
					if (diff <= 0) {
						clearInterval(this.countdownTimer);
						this.countdown = "00:00";
						return;
					}

					// 计算小时、分钟和秒
					let hours = Math.floor(diff / (1000 * 60 * 60));
					let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
					let seconds = Math.floor((diff % (1000 * 60)) / 1000);

					// 格式化显示
					if (hours > 0) {
						this.countdown = `${hours}小时 ${minutes}分钟 ${seconds}秒`;
					} else {
						this.countdown = `${minutes}分钟 ${seconds}秒`;
					}
				}, 1000);
			},
		}
	}
</script>



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

	.page {
		padding-bottom: 200rpx;

		.backtip {
			position: fixed;
			top: 450rpx;
			left: 110rpx;
			z-index: 110;
			width: 532rpx;
			height: 580rpx;

			image {

				width: 532rpx;
				height: 580rpx;
			}

			.qsBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 118rpx;
				bottom: 62rpx;
				width: 292rpx;
				height: 68rpx;
				background: #4C97E7;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		.address_box {
			z-index: 110;
			position: fixed;
			bottom: 0;
			padding: 28rpx 0;

			width: 750rpx;
			border-radius: 30rpx 30rpx 0 0;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);

			.close {
				position: absolute;
				top: 56rpx;
				right: 50rpx;
				width: 33.99rpx;
				height: 33.99rpx;
			}

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

			.btn {
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 46rpx;
				width: 696rpx;
				height: 100rpx;
				background: #4297F3;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
			}

			.card_box {
				margin-top: 36rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				max-height: 740rpx;
				overflow-y: auto;
				/* 允许上下滚动 */
				overflow-x: hidden;

				/* 禁止左右滚动 */
				.card {
					margin-top: 22rpx;
					position: relative;
					padding: 30rpx 24rpx 0 24rpx;
					width: 659rpx;

					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);

					border-radius: 30rpx;

					.chose_img {
						position: absolute;
						right: 0;
						top: 0;
						width: 66rpx;
						height: 68rpx;
					}

					.card_tit {

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

					.card_txt {
						margin-top: 8rpx;
						width: 100%;
						display: inline-flex;

						// align-items: center;
						image {
							margin-top: 6rpx;
							margin-right: 8rpx;
							width: 28rpx;
							height: 28rpx;
						}

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

						.km {
							margin-left: auto;
							font-weight: 400;
							font-size: 32rpx;
							color: #4297F3;
						}
					}

					.store_btn_li {
						display: flex;
						flex-wrap: nowrap;
						margin-top: 26rpx;
						margin-left: -28rpx;
						border-top: 1rpx solid #D8D8D8;
						width: 659rpx;
						height: 102rpx;

						.store_btn:first-child {
							border-right: 1rpx solid #D8D8D8;
						}

						.store_btn {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 50%;
							height: 102rpx;

							image {
								font-weight: 400;
								font-size: 28rpx;
								color: #3D3D3D;
								margin-right: 18rpx;
								width: 40rpx;
								height: 40rpx;
							}

						}
					}
				}
			}

			.tit5 {
				width: 100%;
				text-align: center;
				font-weight: 600;
				font-size: 44rpx;
				color: #3D3D3D;
			}

			.tip {
				margin-top: 18rpx;
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
			}
		}

		.sub_car {
			position: fixed;
			padding: 56rpx 60rpx;
			top: 500rpx;
			left: 50rpx;
			z-index: 110;
			width: 650rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

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

				.btn1 {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 238rpx;
					height: 74rpx;
					background: #EFEFEF;
					border-radius: 37rpx 37rpx 37rpx 37rpx;
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}

				.btn2 {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 238rpx;
					height: 74rpx;
					background: #4297F3;
					border-radius: 37rpx 37rpx 37rpx 37rpx;
					font-weight: 600;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}

			.tit3 {
				width: 100%;
				text-align: center;
				font-weight: 600;
				font-size: 36rpx;
				color: #3d3d3d;
			}

			.car_info {
				margin-top: 38rpx;
				width: 100%;
				display: flex;
				flex-wrap: nowrap;

				image {
					width: 194rpx;
					height: 148rpx;
					flex-shrink: 0;
					/* 防止图片被压缩 */
				}

				.right_infos {
					display: flex;
					flex-wrap: wrap;
					flex-grow: 1;
					/* 允许其他内容占用剩余空间 */

					.tit4 {
						font-weight: 600;
						font-size: 28rpx;
						color: #3d3d3d;
					}

					.txt3 {
						margin-top: 6rpx;

						image {
							width: 32rpx;
							height: 32rpx;
							flex-shrink: 0;
						}
					}
				}
			}
		}

		.bot_btn {
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 174rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0;
			padding: 0 50rpx;

			.btn_li3 {
				width: 100%;

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

			.btn_li2 {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;

				.btn3 {
					padding: 10rpx 54rpx;
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					border: 2rpx solid #4297F3;
					font-weight: 500;
					font-size: 36rpx;
					color: #4297F3;
				}

				.btn4 {
					padding: 10rpx 54rpx;
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					background: #4297F3;
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}

			.btn_li {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				justify-content: space-between;
				
				.txt2 {
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.btn {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
					width: 434rpx;
					height: 84rpx;
					background: #4297F3;
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					.tits{
						width: 100%;
						text-align: center;
						font-weight: 700;
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.cutdown{
						width: 100%;
						text-align: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}

		}

		.order_code {
			width: 696rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			padding: 20rpx 28rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

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

			.code_li {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;

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

				.btn {
					font-weight: 400;
					font-size: 28rpx;
					color: #4297F3;
				}
			}
		}



		.tab_box {
			width: 696rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			padding: 20rpx 28rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.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;
					}

				}
			}

			.text {
				margin-top: 30rpx;
				padding: 0 22rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #6F6F6F;
			}

			.choose_tab {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-around;

				.tab_li {
					width: 112rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;

					.tab_line {
						width: 58rpx;
						height: 6rpx;
						background: #4297F3;
						border-radius: 3rpx 3rpx 3rpx 3rpx;
					}
				}
			}

		}

		.line {
			margin-top: 20rpx;
			width: 100%;
			height: 1rpx;
			background: #D8D8D8;
		}

		.info_box {
			width: 696rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 20rpx 18rpx;

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

				justify-content: space-between;
				padding: 0 22rpx;

				.text {
					font-weight: 400;
					font-size: 28rpx;
					color: #6F6F6F;
				}

				.price {

					span {
						font-weight: 400;
						font-size: 28rpx;
						color: #808080;
					}

					font-weight: 500;
					font-size: 28rpx;
					color: #FF1C1C;
				}
			}

			.data {
				margin-top: 16rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 16rpx 22rpx;
				background: #EFEFEF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				.text {
					font-weight: 400;
					font-size: 28rpx;
					color: #6F6F6F;
				}

				.time {
					font-weight: 400;
					font-size: 28rpx;
					color: #4297F3;
				}
			}

			.car_info {
				display: flex;
				flex-wrap: nowrap;

				image {
					width: 156rpx;
					height: 120rpx;
				}

				.right_info {

					margin-left: 18rpx;
					display: flex;
					flex-wrap: wrap;

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

					.txt {
						width: 100%;
						font-weight: 400;
						font-size: 28rpx;
						color: #6F6F6F;
					}
				}
			}
		}

		.li {
			width: 696rpx;
			margin: 0 auto;
			margin-top: 8rpx;
			display: flex;
			flex-wrap: nowrap;
			padding: 20rpx 10rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.txt{
				font-weight: 500;
				font-size: 36rpx;
				color: #0D75E5;
			}
			.input {
				width: 480rpx;
			}

			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;
			}
		}


		.getType {

			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			margin-top: 16rpx;
			padding: 30rpx;
			width: 696rpx;
			// height: 108rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.type {
				padding: 6rpx 12rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #0D75E5;
				background: #DCEDFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}

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

		.store_car {

			border-radius: 30rpx;
			width: 696rpx;
			padding: 30rpx 28rpx 0 28rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			// height: 342rpx;

			background: #FFFFFF;

			.store_btn_li {
				display: flex;
				flex-wrap: nowrap;
				margin-top: 26rpx;
				margin-left: -28rpx;
				border-top: 1rpx solid #D8D8D8;
				width: 696rpx;
				height: 102rpx;

				.store_btn:first-child {
					border-right: 1rpx solid #D8D8D8;
				}

				.store_btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;
					height: 102rpx;

					image {
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
						margin-right: 18rpx;
						width: 40rpx;
						height: 40rpx;
					}

				}
			}

			.line {
				width: 100%;
				height: 1rpx;
				background: #D8D8D8;
			}

			.address {
				margin-top: 48rpx;
				font-weight: 400;
				font-size: 36rpx;
				color: #3D3D3D;
			}

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

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

				.type {
					margin-right: 10rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #0D75E5;
					padding: 6rpx 12rpx;
					background: #DCEDFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

			}
		}

		.tit {
			margin-left: 38rpx;
			margin-top: -400rpx;
			font-weight: 600;
			font-size: 48rpx;
			color: #3D3D3D;
		}

		.tips {
			margin-top: 18rpx;
			margin-left: 38rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
		}

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

		.backimg {
			// position: fixed;
			width: 750rpx;
			height: 696rpx;

			z-index: -10;
			background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uxg5vXhH35evswvIKxJt');
			background-size: cover;
			/* 背景图片等比缩放以覆盖整个容器 */
			background-position: center;

		}
	}
</style>