<template>
	<view class="page">
		<view class="tab_top">
			<image src="https://lxnapi.ccttiot.com/bike/img/static/uVcMTydm81zCMhHomXl1" mode="" @click="topage(6)">
			</image>
			<view class="txts" v-if="gps.deptId==100">
			{{areaInfo.areaName}}
			</view>
				<view class="txts" v-if="gps.deptId==101">
				嵛你出行
			</view>
		</view>
		<!-- 	<u-navbar :is-back="false" title="共享电动车" :border-bottom="false" :background="bgc" title-color='#2E4975'
			title-size='36' height='36'></u-navbar> -->
		<map class="map" id="map" ref="map" :scale="zoomSize" show-location v-if="showmap" :latitude="latitude"
			:longitude="longitude" :show-location="true" :markers="markers" :polygons="polyline"
			@markertap="onMarkerTap" @tap="onMapTap">

		</map>
		<view class="my-location" @click="setMapScale">
			<image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uBgKFW3JgiBfjM4ea3uV"></image>
		</view>
		<view class="park" @click="toggleIconAndCallout">
			<image src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode=""></image>
		</view>
		<view class="botmbox2" v-if="showdevice">
			<!-- <view class="close" @click="close()">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uBeBBKwQu2K2ZBdT7iN7" mode=""></image>
			</view> -->
			<view class="page1" v-if="deviceIndex==0">
				<view class="top">
					<view class="left">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uD9pXetaMb5dmw8aSvoM" mode=""></image>
					</view>
					<view class="top_center">
						<view class="cent_top">
							车辆编号：{{deviceInfos.sn}}
						</view>
						<view class="cent_bot">
							骑行前请检查车辆状态
						</view>
					</view>
					<view class="top_right" @click="findBike()">
						响铃寻车
					</view>
				</view>
				<view class="center">
					<view class="center_left">
						<view class="center_left_top">
							剩余骑行
						</view>
						<view class="center_left_bot" v-if="deviceInfos.remainingMileage">
							{{deviceInfos.remainingMileage}}公里
						</view>
						<view class="center_left_bot" v-else>
							--公里
						</view>
					</view>
					<view class="center_right">
						<view class="center_right_top">
							预约费（10分钟）
						</view>
						<view class="center_right_bot">
							{{areaInfo.appointmentServiceFee}} <span>元</span>
						</view>
					</view>
				</view>
				<view class="bot">

					<view class=" left_btn" @click="Reserve()">
						预约用车
					</view>
					<view class="right_btn" @click="lockDevice() ">
						解锁用车
					</view>
				</view>
				<view class="tips" @click="topage(7)">
					发现坏车 >
				</view>
			</view>
			<view class="page2" v-if="deviceIndex==1">
				<view class="top">
					<!-- <view class="left">
						<view class="text">
							可行驶53公里
						</view>
						<view class="ele">
							<image src="https://api.ccttiot.com/smartmeter/img/static/upbpFLv4dkl88Syk2VKW" mode=""></image>
							电量充足
						</view>
					</view> -->
					<view class="right">
						<view class="text">
							剩余骑行
						</view>
						<!-- 	<view class="txt">
							{{deviceInfos.remainingMileage}}<span style="font-size: 40rpx;">公里</span>
						</view> -->
						<view class="txt" v-if="deviceInfos.remainingMileage">
							{{deviceInfos.remainingMileage}}<span style="font-size: 40rpx;">公里</span>
						</view>
						<view class="txt" v-else>
							--<span style="font-size: 40rpx;">公里</span>
						</view>
					</view>
					<view class="right">
						<view class="text">
							剩余电量
						</view>
						<view class="txt" style="font-size: 36rpx;" v-if="deviceInfos.remainingPower">
							{{ deviceInfos.remainingPower}}%
							<!-- {{startingPrice}}<span style="font-size: 40rpx;">元</span> -->
						</view>
						<view class="txt" style="font-size: 36rpx;" v-else>
							--
							<!-- {{startingPrice}}<span style="font-size: 40rpx;">元</span> -->
						</view>
						<view class="speed">
							<view class="speeds" :style="{ width: deviceInfos.remainingPower + '%' }">

							</view>
						</view>
					</view>
				</view>
				<view class="center">
					<!-- <view class="card" :class="freeListIndex==0?'act1':''" @click="freeListIndex=0" v-if="orderinfo.ruleId==null">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uYg1WNJJH1VK7RdldKE1" mode=""
							v-if="freeListIndex==0"></image>
						<view class="tit">
							计时收费
						</view>
						<view class="nmtxt">
							<view class="left">
								起步价
							</view>
							<view class="right">
								{{startingPrice}}元（含{{startingHowManyMinutes}}分钟）
							</view>
						</view>
						<view class="nmtxt">
							<view class="left">
								时长费
							</view>
							<view class="right">
								{{timeFee}}元/{{ timeMinutes}}分钟
							</view>
						</view>
						<view class="tip">
							超出起步价包含时长后收取
						</view>
					</view> -->

					<view class="card" v-for="(item,index ) in freList" :key="index"
						@click.stop="changefree(item,index+1)" :class="freeListIndex==index+1?'act1':''">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uYg1WNJJH1VK7RdldKE1" mode=""
							v-if="freeListIndex==index+1"></image>
						<view v-if="item.ridingRule==1">
							<view class="tit">
								{{item.name}}
							</view>
							<view style="padding: 18rpx;">
								<view class="nmtxt">
									<view class="left">
										起步价
									</view>
									<view class="right">
										{{item.ridingRuleJson.startingPrice}}元(含{{item.ridingRuleJson.startingTime}}<span
											v-if="item.rentalUnit=='minutes'">分钟</span><span
											v-if="item.rentalUnit=='hours'">小时</span><span
											v-if="item.rentalUnit=='day'">天</span>)
									</view>
								</view>
								<view class="nmtxt">
									<view class="left">
										超出费
									</view>
									<view class="right">
										{{item.ridingRuleJson.timeoutPrice}}元/{{ item.ridingRuleJson.timeoutTime}}<span
											v-if="item.rentalUnit=='minutes'">分钟</span><span
											v-if="item.rentalUnit=='hours'">小时</span><span
											v-if="item.rentalUnit=='day'">天</span>
									</view>
								</view>
							</view>
							<!-- <view class="tips" @click.stop='feedetail(item,index+1)'>
								查看详情 <view class="iconfont icon-chakanxiangqing"></view>
							</view> -->
						</view>

						<view v-if="item.ridingRule==2">
							<view class="tit">
								{{item.name}}

							</view>
							<view style="padding: 18rpx;">
								<view class="nmtxt text-ellipsis" v-for="(items, indexs) in item.ridingRuleJson.rule"
									:key="indexs" style="margin-top: 10rpx;" v-if="indexs<2">

									<view class="left  " style="font-size: 28rpx;">
										{{items.start}}-{{items.end}}<span v-if="item.rentalUnit=='minutes'">分钟</span>
										<span v-if="item.rentalUnit=='hours'">小时</span>
										<span v-if="item.rentalUnit=='day'">天</span>,
										每{{items.eachUnit}}<span v-if="item.rentalUnit=='minutes'">分钟</span>
										<span v-if="item.rentalUnit=='hours'">小时</span>
										<span v-if="item.rentalUnit=='day'">天</span>/{{items.fee}}元
										<span v-if="indexs==1">...</span>
									</view>
									<view class="right"></view>
								</view>
							</view>




						</view>
						<view class="tips_btn" @click.stop='feedetail(item,index+1)'>
							查看详情
						</view>
					</view>
				</view>
				<view class="bot" style="margin-top: 20rpx;">
					<view class="xy" @click="showxy=!showxy">
						<view class="yuans">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/u7F851ikY9rkASzNSNkO" v-if='showxy'
								mode=""></image>
						</view>

						<view class="txt">
							我已同意并阅读 <span @click.stop="toxy()">《电动车租赁协议》</span>
						</view>
					</view>
					<view class="btn" @click="sub1()" v-if="type==1">
						确认开锁
					</view>
					
					<view class="btn" @click="sub3()" v-if="type==2">
						确认预约
					</view>
				</view>
			</view>

			<view class="page3" v-if="deviceIndex==2">
				<view class="bot_btn">

					<view class="info">
						<view class="left">
							预估金额：{{money}}<span>元</span>
						</view>
						<!-- <view style="width: 10rpx;" v-if="orderinfo.ruleId!=null">

						</view> -->
						<view class="right">
							{{timeString}}
						</view>
					</view>
					<view class="cardss">
						<view class="tit">
							电单车
						</view>
						<view class="cont">
							<view class="left">
								<view class="text">
									可继续行驶{{OrderdeviceInfos.remainingMileage}}公里
								</view>
								<view class="speed">
									<view class="speeds" :style="{ width: OrderdeviceInfos.remainingPower + '%' }">

									</view>
								</view>
								<view class="mac">
									NO.{{orderinfo.sn}}
								</view>
							</view>
							<view class="right">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uHTCZOVUbmBkKW4G0wuF" mode="">
								</image>
							</view>
						</view>
					</view>
					<view class="bot" style="margin-top: 20rpx;" v-if="orderinfo.status==0">


						<view class="btn" style="	margin-right: 16rpx;" @click="unlockdevice()">
							解锁骑行
						</view>
						<view class="btn1" @click="cancel()" v-if="orderinfo.ruleId==null">
							取消预约
						</view>
						<view class="btn1" @click="cancel1()" v-if="orderinfo.ruleId!=null">
							取消预约
						</view>
					</view>
					<view class="bot" style="margin-top: 20rpx;" v-if="orderinfo.status==2">


						<view class="btn" style="	margin-right: 16rpx;" v-if="OrderdeviceInfos.status==3"
							@click="loackdevice()">
							临时锁车
						</view>
						<view class="btn" style="	margin-right: 16rpx;" v-if="OrderdeviceInfos.status==4"
							@click="unloackdevices()">
							解锁用车
						</view>
						<view class="btn1" @click="backDevice()">
							还车
						</view>
					</view>
				
				</view>
			</view>
			<view class="page4" v-if="deviceIndex==3">
				<view class="bot_btn">
					<view class="time">
						使用时间：{{timeString}}
					</view>
					<view class="price">
						{{orderinfo.totalFee}}<span>元</span>
					</view>
					<view class="toinfo" @click="tofeeDetail()">
						查看骑行费明细 >
					</view>
					<view class="btn" @click="topay()" v-if="orderinfo.status==1">
						去支付
					</view>
					<view class="btn" @click="topay1()" v-if="orderinfo.status==3">
						去支付
					</view>
				</view>
			</view>
		</view>
		<view class="botmbox" v-if="showindex==0&&showdevice==false">
			<view class="top_btn" @tap="qecodelock()">
				<image src="https://api.ccttiot.com/smartmeter/img/static/un6Wi8CefEjy04qzvn67" mode=""></image>
				扫码开锁
			</view>

			<view class="bot_btn">
				<view class="cont" @click="topage(1)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uGDkCwxDNH9oFORX2XNU" mode=""></image>
					<view class="text">
						押金充值
					</view>
				</view>
				<!-- 	<view class="cont" @click="topage(2)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uFHC2R6R3pgUOTShLxoQ" mode=""
						style="width: 28rpx;height: 28rpx;"></image>
					<view class="text">
						计费规则
					</view>
				</view> -->
				<view class="cont" @click="topage(3)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/utP4rdOzXLlQPx6Ug8cO" mode=""></image>
					<view class="text">
						用车指南
					</view>
				</view>
				<view class="cont" @click="topage(4)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uFaJV6NJGhmmodpEuWMy" mode=""></image>
					<view class="text">
						编号开锁
					</view>
				</view>
				<view class="cont" @click="topage(5)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uucc9g8b2MM6G9vp8HWa" mode=""></image>
					<view class="text">
						故障上报
					</view>
				</view>
				<view class="cont" @click="topage(9)">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uk7i80QWz02cAfbbC518" mode=""></image>
					<view class="text">
						客户服务
					</view>
				</view>
			</view>
			<view class="guangggao">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uvHYQhuouHZQQL3qfLzP" mode=""></image>
			</view>
		</view>

		<view class="tipss_box">
			<view class="tipss" v-if="orderinfo.status" @click="starTime">
				您有正在进行中的订单 <view class="iconfont icon-xiangyou1" style="margin-left: 20rpx;">

				</view>
			</view>
			<view class="" v-if="!orderinfo.status" style="background: none;width: 350rpx;
				height: 64rpx;">

			</view>
			<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration">

				<swiper-item>
					<view class="tipss">
						点击车辆可以预约用车
					</view>
				</swiper-item>
				<swiper-item>
					<view class="tipss" @click="changetips">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uJnO5qX8ggJvL1Nf7PQt" mode=""></image>
						文明骑行,须知
						<view class="iconfont icon-xiangyou1">

						</view>
					</view>
				</swiper-item>
			</swiper>




		</view>
		<view class="bottom_more" v-if="showindex==1">
			<view class="close" @click="showindex=0">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uM76uO46a5cZOkFlffnX" mode=""></image>
			</view>
			<div class="tit">
				更多用车服务
			</div>
			<div class="contbox" style="width: 100%;">
				<view class="cont_li" @click="topage(1)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uGDkCwxDNH9oFORX2XNU" mode=""></image>
					<view class="txt">
						押金充值
					</view>
				</view>

				<view class="cont_li" @click="topage(3)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/utP4rdOzXLlQPx6Ug8cO" mode=""></image>
					<view class="txt">
						用车指南
					</view>
				</view>
				<view class="cont_li" @click="topage(4)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uFaJV6NJGhmmodpEuWMy" mode=""></image>
					<view class="txt">
						编号开锁
					</view>
				</view>

				<view class="cont_li" @click="topage(5)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uucc9g8b2MM6G9vp8HWa" mode=""></image>
					<view class="txt">
						故障上报
					</view>
				</view>
				<view class="cont_li" @click="topage(6)">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uW1XRPQfJTD6sLimkln5" mode=""></image>
					<view class="txt">
						个人中心
					</view>
				</view>
			</div>
		</view>
		<u-mask :show="showtcs" @click="showtc = false" :z-index='100' duration='0' />
		<u-mask :show="showTips" :z-index='100' duration='0' />

		<u-mask :show="showYjTip" @click="showYjTip = false" :z-index='100' duration='0' />

		<view class="pops" v-if="showYjTip">
			<view class="tit" style="font-weight: 600;">
				您未充值押金
			</view>
			<view class="cont_box" style="text-align: center;color: #808080;justify-content: center;font-size: 36rpx;">
				请在充值押金后使用共享电动车
			</view>

			<view class="btn_box">
				<view class="btn1" @click="showYjTip = false">
					取消
				</view>
				<view class="btn2" @click="topage(1)">
					前往充值
				</view>
			</view>

		</view>
		<view class="pops" v-if="showtcs">
			<view class="tit" style="font-weight: 600;">
				您有正在进行的订单
			</view>
			<view class="cont_box">
				<view class="left">
					电单车
				</view>
				<view class="right">

				</view>
			</view>
			<view class="cont_box">
				<view class="left">
					<view class="km">
						可继续行驶{{OrderdeviceInfos.remainingMileage}}公里
					</view>
					<view class="speed">
						<view class="speeds" :style="{ width: OrderdeviceInfos.remainingPower + '%' }">

						</view>
					</view>
					<view class="NO">
						NO.{{OrderdeviceInfos.sn}}
					</view>
				</view>
				<view class="right">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uqKmFMF9YHTX8lAQARSd" mode=""></image>
				</view>
			</view>
			<view class="cont_box">
				<view class="left">
					已骑行
				</view>
				<view class="right">
					{{timeString}}
				</view>
			</view>
			<view class="cont_box">
				<view class="left">
					预估金额
				</view>
				<view class="right">
					{{money}}元
				</view>
			</view>
			<view class="btn" @click=" starTime" style="margin-bottom: 50rpx;">
				点击查看

			</view>
			<view class="close" @click="showtcs = false">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uyPRLCHBTUeN7UHzDEGR" mode=""></image>
			</view>
		</view>
		<view class="pops" v-if="showTips">
			<view class="tit" style="font-weight: 700;">
				安全骑行 禁止超载
			</view>
			<view class="cont" v-html="areaInfo.agreement" style="padding: 0 20rpx;line-height: 48rpx;">

			</view>

			<view class="btn" @click="changetips()" :class="countdown>0? 'act1':''">
				我已阅读同意 <span v-if='countdown>0' style="margin-left: 10rpx;">({{countdown}})</span>
			</view>
		</view>


		<!-- 蓝牙 -->
		<u-mask :show="isnoline" :z-index='100' duration='0' />
		<view class="pops" v-if="isnoline">
			<view class="tit" style="font-weight: 600;">
				设备离线 请使用蓝牙连接辅助操作
			</view>
			<view class="cont_box" style="text-align: center;color: #808080;justify-content: center;font-size: 36rpx;">
				请确保手机蓝牙权限已授权
			</view>

			<view class="btn_box">
				<view class="btn1" @click="isnoline = false">
					取消
				</view>
				<view class="btn2" @click="Binddevice()">
					蓝牙连接
				</view>
			</view>

		</view>
		<!-- 是否在运营区 -->
		<u-mask :show="isbackdevice" :z-index='100' duration='0' />
		<view class="pops" v-if="isbackdevice">
			<view class="tit" style="font-weight: 600;">
				停车点外还车
			</view>
			<view class="cont_box" style="text-align: center;color: #808080;justify-content: center;font-size: 36rpx;">
				未在停车点内还车,任要还车会产生额外费用，是否继续还车？
			</view>

			<view class="btn_box">
				<view class="btn1" @click="isbackdevice = false">
					取消
				</view>
				<view class="btn2" @click="keepback()">
					确定
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	const app = getApp();
	var xBlufi = require("@/utils/blufi/xBlufi.js");
	let _this = null;
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				showIconAndCallout: false, // 控制是否显示iconPath和callout
				showindex: 0,
				show: false,
				latitude: '',
				longitude: '',
				isMap: false,
				zoomSize: 16,
				markers: [],
				polyline: [],
				areas: [],
				gps: {
					deptId: 100
				},
				deviceInfos: {},
				OrderdeviceInfos: {},
				showdevice: false,
				deviceIndex: 0,
				type: 0,
				freList: [],
				freeListIndex: 0,
				freeInfo: {},
				socket: null,
				sn: 0,
				eventKey: 0,
				orderinfo: {},
				timer: null,
				timeString: '',
				money: 0,
				showtc: false,
				showtcs: false,
				areaInfo: {},
				// feeInfo:{},
				showfeeDetail: false,
				seeDetail: false,
				showmap: true,
				userinfo: {},
				parkingList: [],
				timers: null,
				listData: [],
				oldMarkers: [],
				curtitidx: 0,
				swiperHeight: 50,

				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				showTips: false,
				showYjTip: false,
				showxy: false,
				countdown: 5, // 五秒倒计时
				// userId:this.$store.getters.userId,
				qParam: null,


				// 蓝牙
				devicesList: [
					// {name:'110000',
					// mac:'11111'}
				],
				searching: false,
				texts: '正在扫描蓝牙设备...',
				btnflag: true,
				tishiflag: false,
				option: '',
				bluthlist: [], //蓝牙数组
				// status: 'loading',
				statusflag: false,
				Bluetoothmac: '',
				mac: '',
				ishave: false,
				ver_data: null,
				deviceInfoss: {},


				deviceIds: '',
				name: '',
				orderinfo: {},
				dl: 0,
				czmoney: true,
				iscz: true,
				isnoline: false,
				carstause: false,

				isbackdevice: false

			}
		},
		watch: {
			userId(newValue, oldValue) {
				// 处理userId变化的逻辑
				// console.log('userId 发生变化', newValue, oldValue);
				this.getisInOrder()
			},
			
		},

		onLoad(e) {
			this.gps.deptId= uni.getStorageSync('deptId');
			console.log(e, 'eeeeeeeeeeeeeeeeeee');
			if (e.q) {
				this.qParam = e.q


			}
			if (e.qParam) {
				this.qParam = e.qParam
			
			
			}
			if(this.gps.deptId==101){
				if(this.showagre){
					uni.redirectTo({
						url:'/page_user/agreement?needback=true&qParam='+this.qParam
					})
				}
			}
			
			if (e.sn) {
				this.sn = e.sn
				if (this.sn != '') {
					setTimeout(() => {
						if (!this.orderinfo.status) {
							this.deviceInfo(1)
							// this.showdevice = true
							// this.deviceIndex = 1
							// this.type = 1
						}
					}, 700)

				}

			}
			setTimeout(() => {
				this.$store.commit('SET_SHOWTIPS', true);
			}, 500)
		},
		onShow() {
			this.timers = setInterval(() => {
				// console.log('定时器运行中...');
				this.getmarks()
				// 在这里执行你的逻辑
			}, 3000); // 每秒执行一次
		
			if (this.seeDetail == false) {

				
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(lb) {
						that.latitude = 23.440359
						that.longitude =117.074552
						that.gps.latitude =23.440359
						that.gps.longitude = 117.074552;
						
						
						
						// that.gps.latitude = lb.latitude;
						// that.gps.longitude = lb.longitude;
						
						// that.latitude = Number(lb.latitude.toFixed(5)) - 0.005
						// that.longitude = Number(lb.longitude.toFixed(5)) + 0.005
						
						
						console.log(that.areaInfo, 'that.areaInfo');
						that.getArea()
						if (that.qParam!='null'&&that.showagre==false) {
							let qParam = that.qParam
							console.log(qParam,'qParamqParamqParam');
							// 第2步: URL解码q参数
							let decodedUrl = decodeURIComponent(qParam);

							// 第3步: 使用正则表达式解析解码后的URL并提取查询参数
							let sn = null;
							let queryParams = decodedUrl.split('?')[1];
							if (queryParams) {
								let params = queryParams.split('&');
								params.forEach(param => {
									let [key, value] = param.split('=');
									if (key === 'sn') {
										sn = value;
									}
								});
							}
							that.sn = sn
							if (that.sn != '') {


								setTimeout(() => {

									if (!that.orderinfo.status) {
										that.deviceInfo(1)
										that.qParam = null
										// this.showdevice = true
										// this.deviceIndex = 1
										// this.type = 1
									} else {
										// this.showtcs=true
									}
								}, 700)


							}
						}
						// that.getmarks()


						//
					},
					fail: function(error) {
						uni.showToast({
							title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
							icon: 'none',
							duration: 2000
						});
						// that.getmarks()
						// 在这里处理获取位置信息失败的情况
					}

				})
			} else {
				this.getinfo()
			}

		},
		onHide() {
			// 页面隐藏时清除定时器
			if (this.timers) {
				clearInterval(this.timers);
				this.timers = null;
				console.log('定时器已清除');
			}
			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
			xBlufi.notifyStartDiscoverBle({
				'isStart': false
			});
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.timers) {
				clearInterval(this.timers);
				this.timers = null;
				console.log('定时器已清除');
			}
			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
			xBlufi.notifyStartDiscoverBle({
				'isStart': false
			});
		},

		onBeforeUnmount() {
			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
			xBlufi.notifyStartDiscoverBle({
				'isStart': false
			});
		},
		computed: {
			appointmentServiceFee() {
				return this.$store.getters.appointmentServiceFee;
			},
			dispatchFee() {
				return this.$store.getters.dispatchFee;
			},
			vehicleManagementFee() {
				return this.$store.getters.vehicleManagementFee;
			},
			startingPrice() {
				return this.$store.getters.startingPrice;
			},
			timeFee() {
				return this.$store.getters.timeFee;
			},
			timeMinutes() {
				return this.$store.getters.timeMinutes;
			},
			startingHowManyMinutes() {
				return this.$store.getters.startingHowManyMinutes;
			},
			userId() {
				return this.$store.getters.userId;
			},

			isMeal() {
				return this.$store.getters.isMeal;
			},
			
			showagre() {
				return this.$store.getters.showagre;
			},
		},
		methods: {
			keepback() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(lb) {


						let data = {
							latitude: lb.latitude,
							longitude: lb.longitude,
							areaId: that.areaInfo.areaId
						}
						if (that.carstause) {
							that.reboot()
							that.$u.post('/appVerify/device/return?returnType=1&orderNo=' + that.orderinfo
								.orderNo + '&isBluetooth=true' + '&lon=' + lb.longitude + '&lat=' + lb
								.latitude).then((
								res) => {
								uni.hideLoading()
								if (res.code === 200) {
									that.isbackdevice = false
									that.close()
									that.getisInOrder()

								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									});
								}
							})
						} else {
							uni.showToast({
								title: '蓝牙状态异常，请重新链接',
								icon: 'none',
								duration: 1000
							});
							setTimeout(() => {
								that.isbackdevice=false
								that.isnoline = true
							}, 1300)
						}

					},
					fail: function(error) {
						uni.showToast({
							title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
							icon: 'none',
							duration: 2000
						});
						// that.getmarks()
						// 在这里处理获取位置信息失败的情况
					}

				})


			},
			onlinebackDevice() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(lb) {


						let data = {
							latitude: lb.latitude,
							longitude: lb.longitude,
							areaId: that.areaInfo.areaId
						}

						that.$u.get('/appVerify/isInParkingArea?', data).then((res) => {

							if (res.code == 200) {
								let parkingReturn = res.data.parkingReturn
								let isInParkingArea = res.data.isInParkingArea
								if (parkingReturn) {
									if (isInParkingArea) {
										if (that.carstause) {
											that.reboot()
											that.$u.post(
												'/appVerify/device/return?returnType=1&orderNo=' +
												that.orderinfo
												.orderNo + '&isBluetooth=true' + '&lon=' + lb
												.longitude + '&lat=' + lb.latitude).then((
												res) => {
												uni.hideLoading()
												if (res.code === 200) {
													that.close()
													that.getisInOrder()

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


										} else {
											uni.showToast({
												title: '蓝牙状态异常，请重新链接',
												icon: 'none',
												duration: 1000
											});
											setTimeout(() => {
												that.isnoline = true
											}, 1300)
										}


									} else {
										uni.showToast({
											title: '停车点外禁止还车，请行驶至停车区内',
											icon: 'none',
											duration: 2000
										});
									}
								} else {
									if (isInParkingArea) {
										if (that.carstause) {
											that.reboot()
											that.$u.post(
												'/appVerify/device/return?returnType=1&orderNo=' +
												that.orderinfo
												.orderNo + '&isBluetooth=true' + '&lon=' + lb
												.longitude + '&lat=' + lb.latitude).then((
												res) => {
												uni.hideLoading()
												if (res.code === 200) {
													that.close()
													that.getisInOrder()

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


										} else {
											uni.showToast({
												title: '蓝牙状态异常，请重新链接',
												icon: 'none',
												duration: 1000
											});
											setTimeout(() => {
												that.isnoline = true
											}, 1300)
										}
									} else {
										that.isbackdevice = true
									}
								}
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						})



					},
					fail: function(error) {
						uni.showToast({
							title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
							icon: 'none',
							duration: 2000
						});
						// that.getmarks()
						// 在这里处理获取位置信息失败的情况
					}

				})

			},
			// 蓝牙
			Binddevice() {
				this.isnoline = false
				uni.showLoading({
					title: '连接中..'
				})
				xBlufi.initXBlufi(1);
				console.log("xBlufi", xBlufi.XMQTT_SYSTEM);
				xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
				xBlufi.notifyStartDiscoverBle({
					'isStart': true
				});


				// 两秒后停止蓝牙搜索
				setTimeout(() => {
					xBlufi.notifyStartDiscoverBle({
						'isStart': false
					});
					setTimeout(() => {
						
						if (this.devicesList.length == 0) {
							uni.showToast({
								title: '暂无发现对应设备,请靠近设备',
								icon: 'none'
							});
						} else {
							let uniqueDevicesList = Array.from(new Set(this.devicesList));

							// 将去重后的数组重新赋值给 this.devicesList
							this.devicesList = uniqueDevicesList;
							console.log(this.devicesList, 'this.devicesListthis.devicesList');
							this.devicesList.forEach(device => {
								// 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
								let macFromName = device.name.substring(device.name.length - 12);
								console.log(macFromName, 'macFromNamemacFromName');
								// 与 this.mac 进行比较
								if (macFromName == this.mac) {
									// 如果相同，则将 this.ishave 设置为 true
									console.log(device);
									this.deviceInfoss = device
									// this.ishave = true;
									this.createBLEConnection(device)

									console.log('对比正确1111111111');
								} else {
									console.log('对比错误');

								}
							});
						}
							
						
					}, 200)
					// 判断是否存在浇花器设备

					// this.status = true
				}, 2000)

			},
			reboot() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "11reboot"
									});
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			opencar() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "11open"
									});
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			closecar() {
				let vm = this; // 将外部的 this 绑定到 vm 上
				uni.getNetworkType({
					success(res) {
						if (res.networkType !== 'none') {
							uni.getConnectedBluetoothDevices({
								success(res) {
									console.log('已连接的蓝牙设备信息：', res);
									// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
									xBlufi.notifySendCustomData({
										customData: "11llose"
									});
									// uni.hideLoading()
									// vm.remakr()
								},
								fail(err) {
									uni.hideLoading()
									console.error('获取已连接蓝牙设备信息失败：', err);
								}
							});
						} else {
							console.log('手机未连接网络');
						}
					}
				});
			},
			unloackdevices() {
				if (this.OrderdeviceInfos.onlineStatus == 1) {
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.post('/appVerify/device/unlock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
						.orderNo).then((res) => {

						if (res.code === 200) {
							this.getisInOrder()
						} else {
							if (res.msg == '10500-----') {
								uni.showToast({
									title: '系统异常，请重新尝试',
									icon: 'none',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}

						}
					})
				} else {
					if (this.carstause) {
						this.opencar()

						setTimeout(() => {
							let that = this
							uni.getLocation({
								type: 'wgs84',
								success: function(lb) {


									let data = {
										latitude: lb.latitude,
										longitude: lb.longitude,
										areaId: that.areaInfo.areaId
									}
									that.$u.post('/appVerify/device/unlock?sn=' + that.OrderdeviceInfos
										.sn + '&orderNo=' +
										that
										.orderinfo
										.orderNo + '&isBluetooth=true' + '&lon=' + lb.longitude +
										'&lat=' + lb.latitude).then((res) => {

										if (res.code === 200) {
											that.getisInOrder()
										} else {
											if (res.msg == '10500-----') {
												uni.showToast({
													title: '系统异常，请重新尝试',
													icon: 'none',
													duration: 2000
												});
											} else {
												uni.showToast({
													title: res.msg,
													icon: 'none',
													duration: 2000
												});
											}

										}
									})

								},
								fail: function(error) {
									uni.showToast({
										title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
										icon: 'none',
										duration: 2000
									});
									// that.getmarks()
									// 在这里处理获取位置信息失败的情况
								}

							})


						}, 300)
					} else {
						uni.showToast({
							title: '蓝牙状态异常，请重新链接',
							icon: 'none',
							duration: 1000
						});
						setTimeout(() => {
							this.isnoline = true
						}, 1300)
					}

				}

			},
			// ；临时锁车
			loackdevice() {
				if (this.OrderdeviceInfos.onlineStatus == 1) {
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.post('/appVerify/device/lock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
						.orderNo).then((res) => {

						if (res.code === 200) {
							this.getisInOrder()
						} else {
							if (res.msg == '10500-----') {
								uni.showToast({
									title: '系统异常，请重新尝试',
									icon: 'none',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}

						}
					})
				} else {
					if (this.carstause) {
						this.closecar()

						setTimeout(() => {
							let that = this
							uni.getLocation({
								type: 'wgs84',
								success: function(lb) {
							
							
									let data = {
										latitude: lb.latitude,
										longitude: lb.longitude,
										areaId: that.areaInfo.areaId
									}
									that.$u.post('/appVerify/device/lock?sn=' + that.OrderdeviceInfos.sn + '&orderNo=' +
										that
										.orderinfo
										.orderNo + '&isBluetooth=true'+ '&lon=' + lb.longitude + '&lat='+lb.latitude).then((res) => {
									
										if (res.code === 200) {
											that.getisInOrder()
										} else {
											if (res.msg == '10500-----') {
												uni.showToast({
													title: '系统异常，请重新尝试',
													icon: 'none',
													duration: 2000
												});
											} else {
												uni.showToast({
													title: res.msg,
													icon: 'none',
													duration: 2000
												});
											}
									
										}
									})
									
								},
								fail: function(error) {
									uni.showToast({
										title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
										icon: 'none',
										duration: 2000
									});
									// that.getmarks()
									// 在这里处理获取位置信息失败的情况
								}
							
							})
						
						}, 300)
					} else {
						uni.showToast({
							title: '蓝牙状态异常，请重新链接',
							icon: 'none',
							duration: 1000
						});
						setTimeout(() => {
							this.isnoline = true
						}, 1300)
					}

				}

			},



			btnyc() {
				this.titleflag = false
			},

			// 解析自定义数据

			funListenDeviceMsgEvent: function(options) {
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
						if (options.result) {
							let devicesarr = options.data
							// this.devicesList = options.data

							devicesarr.forEach(device => {


								// this.$u.get(`/app/device/${mac}/isBind`, data).then((res) => {
								// if (res.data == false) {
								this.devicesList.push(device);

								let uniqueDevicesList = Array.from(new Set(this.devicesList));

								// 将去重后的数组重新赋值给 this.devicesList
								this.devicesList = uniqueDevicesList;

							});
						}
						break;

					case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
						console.log("连接回调：" + JSON.stringify(options));
						if (options.result) {
							// uni.hideLoading();
							
							uni.showToast({
								title: '连接成功',
								icon: 'none'
							}); 
							{

								xBlufi.notifyInitBleEsp32({
									deviceId: options.data.deviceId
								});

								xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvents);

								this.deviceIds = options.data.deviceId
								this.name = options.data.name
								// 连接成功绑定设备
								// let params = {
								// 	mac: this.Bluetoothmac,
								// 	userId: this.$store.state.user.userId
								// }
								let systemInfo = uni.getSystemInfoSync();
								if (systemInfo.platform === 'android') {
									// 当前设备是 Android  

								} else if (systemInfo.platform === 'ios') {
									// 当前设备是 iOS  
									// uni.navigateTo({
									// 	url: '/pages/wifilist/index?deviceId=' + options
									// 		.data.deviceId + '&name=' + options.data.name
									// })
								}
							}
						}

						break;
					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:

						// this.ver_data = this.parseCustomData(options.data)
						if (options.data) {
							this.carstause = true
						}
						// console.log("1收到设备发来的自定义数据结果：", this.ver_data);
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
						if (options.result) {
							let uniqueDevicesList = Array.from(new Set(this.devicesList));

							// 过滤出名称字段的前五个字母为 "CTPOW" 的项
							let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0, 4) ===
								"BBLE");

							// 将过滤后的数组重新赋值给 this.devicesList
							this.devicesList = filteredDevices;

							// console.log('蓝牙停止搜索ok',this.devicesList);
						} else {
							//蓝牙停止搜索失败
							// console.log('蓝牙停止搜索失败');
						}
						this.searching = false
						// _this.setData({
						// 	searching: false
						// });

						break;
				}
			},


			//4、建立连接
			createBLEConnection(e) {
				uni.showLoading({
					title: '绑定中..'
				})
				console.log('调用了');
				xBlufi.notifyStartDiscoverBle({
					'isStart': false
				});
				// console.log(e, '蓝牙信息')
				const deviceId = e.deviceId
				this.Bluetoothmac = e.localName.substring(5) //从第七位开始截取 只取后面的mac号
				console.log(this.Bluetoothmac, '11111');
				let name = e.name;
				// console.log('点击了，蓝牙准备连接的deviceId:' + e.deviceId);
				xBlufi.notifyConnectBle({
					isStart: true,
					deviceId: e.deviceId,
					name
				});
				setTimeout(()=>{
					uni.hideLoading()
				},3000)
				// for (var i = 0; i < this.devicesList.length; i++) {
				// 	if (e.deviceId === this.devicesList[i].deviceId) {

				// 		uni.showLoading({
				// 			title: '连接蓝牙设备中...'
				// 		});
				// 	}
				// }
			},
			// 点击重新搜索
			Search() {
				if (this.status) {
					xBlufi.notifyStartDiscoverBle({
						'isStart': true
					});
					// 重新搜索清空蓝牙数组
					this.bluthlist = []
					this.devicesList = []
					// 重新搜索
					// this.startBluetoothDevicesDiscovery()
					this.statusflag = true
					this.status = false
					this.texts = '正在扫描蓝牙设备...'
					setTimeout(() => {
						this.statusflag = false
						this.status = true
						if (this.searching) {
							xBlufi.notifyStartDiscoverBle({
								'isStart': false
							});
							// 判断是否存在浇花器设备
							if (this.devicesList.length == 0) {
								uni.showToast({
									title: '暂无发现对应设备,请靠近设备',
									icon: 'none'
								});
							} else {
								this.texts = '扫描到以下设备，请点击连接！'
							}
						} else {
							xBlufi.notifyStartDiscoverBle({
								'isStart': true
							});
						}
					}, 2000)
				}


			},
			funListenDeviceMsgEvents: function(options) {
				let that = this;
				switch (options.type) {
					case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: {
						console.log('状态', options.result)
						if (options.result == false) {
							this.carstause = false
							uni.showToast({
								title: '设备断开链接，请重新点击蓝牙链接',
								icon: 'none'
							});
							// uni.showModal({
							// 	title: '很抱歉提醒你！',
							// 	content: '小程序与设备异常断开',
							// 	showCancel: false,
							// 	success: function(res) {
							// 		// uni.navigateBack({
							// 		// 	url: '../search/search'
							// 		// });
							// 	}
							// });
							// this.statusflag = false
							// uni.hideLoading();
						}
					}
					break;

					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
						this.loadPercent = options.data;
						this.loadText = '文件读取中'
						console.log("文件读取中", options.data);
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
						// this.isband = true
						// this.ver_data = this.parseCustomData(options.data)
						console.log("1收到设备发来的自定义数据结果：", options.data);
						if (options.data) {
							this.carstause = true
						}
						break;

					case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT:
						// uni.hideLoading();
						if (options.result) {
							console.log('初始化成功');
						} else {
							console.log('初始化失败');


						}
						break;
				}
			},
			// 点击隐藏没有设备提示
			btnhd() {
				this.tishiflag = false
			},




			starTime() {
				uni.hideLoading()
				this.showtcs = false
				this.seeDetail = false
				clearInterval(this.timer)
				this.timer = null
				this.$u.get('/app/device/info?sn=' + this.orderinfo.sn).then((res) => {
					if (res.code === 200) {
						this.OrderdeviceInfos = res.data
						// this.OrderdeviceInfos.onlineStatus ='0'

						if (this.OrderdeviceInfos.onlineStatus == 0&&this.orderinfo.status != 3) {
							this.mac = this.OrderdeviceInfos.mac
							if (this.carstause == false) {

								this.isnoline = true
							}

						}
						// 直接从OrderdeviceInfos对象创建一个新的标记，并标记为设备特定标记
						const newMarker = {
							id: parseFloat(this.OrderdeviceInfos.sn),
							latitude: parseFloat(this.OrderdeviceInfos.latitude),
							longitude: parseFloat(this.OrderdeviceInfos.longitude),
							width: 40,
							height: 28,
							isDeviceMarker: true, // 添加标识属性
							iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
						};

						// 保留显示气泡的标记和设备特定标记
						const preservedMarkers = this.markers.filter(marker => marker.isCalloutVisible || marker
							.isDeviceMarker);
						// 使用单个新标记更新markers数组，如果需要保留之前的标记也可以加入
						this.markers = [newMarker, ...preservedMarkers];
						this.oldMarkers = [...this.markers];

					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});


				// 预约中
				if (this.orderinfo.status == 0) {
					this.showdevice = true
					this.deviceIndex = 2
					const createTimeTimestamp = new Date(this.orderinfo.createTime).getTime();

					// 定义定时器
					this.timer = setInterval(() => {
						const currentTime = Date.now();
						const timePassed = currentTime - createTimeTimestamp;
						const secondsPassed = Math.floor(timePassed / 1000);

						// 转换为时分秒格式
						const hours = Math.floor(secondsPassed / 3600);
						const minutes = Math.floor((secondsPassed % 3600) / 60);
						const seconds = secondsPassed % 60;
						const timeString =
							`${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
						const totalMinutes = hours * 60 + minutes;
						const tenMinuteIntervals = Math.floor(totalMinutes / 10) + 1;
						this.money = tenMinuteIntervals * parseFloat(this.areaInfo.appointmentServiceFee)

						// 每隔十分钟增加费用
						if (minutes % 10 === 0 && seconds === 0) {

						}
						this.timeString = timeString
						// console.log("已经过去了：" + timeString);
					}, 1000);
				} else if (this.orderinfo.status == 1) {
					// 取消预约
					// this.topay()
					const createTimeTimestamp = new Date(this.orderinfo.appointmentStartTime).getTime();

					// 定义定时器

					const currentTime = new Date(this.orderinfo.appointmentEndTime).getTime();;
					const timePassed = currentTime - createTimeTimestamp;
					const secondsPassed = Math.floor(timePassed / 1000);

					// 转换为时分秒格式
					const hours = Math.floor(secondsPassed / 3600);
					const minutes = Math.floor((secondsPassed % 3600) / 60);
					const seconds = secondsPassed % 60;
					const timeString =
						`${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
					const totalMinutes = hours * 60 + minutes;
					const tenMinuteIntervals = Math.floor(totalMinutes / 10) + 1;

					this.timeString = timeString
					// console.log("已经过去了：" + timeString);

					this.showdevice = true
					this.deviceIndex = 3
				} else if (this.orderinfo.status == 2) {
					// 开始骑行
					// this.topay()
					this.showdevice = true
					this.deviceIndex = 2
					const createTimeTimestamp = new Date(this.orderinfo.unlockTime).getTime();

					// 定义定时器
					this.timer = setInterval(() => {
						const currentTime = Date.now();
						const timePassed = currentTime - createTimeTimestamp;
						const secondsPassed = Math.floor(timePassed / 1000);

						// 转换为时分秒格式
						const hours = Math.floor(secondsPassed / 3600);
						const minutes = Math.floor((secondsPassed % 3600) / 60);
						const seconds = secondsPassed % 60;
						const timeString =
							`${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
						let totalMinutes = hours * 60 + minutes;

						let totalTime;
						if (this.orderinfo.rule.rentalUnit === 'minutes') {
							totalTime = totalMinutes;
						} else if (this.orderinfo.rule.rentalUnit === 'hours') {
							totalTime = hours + minutes / 60;
						} else if (this.orderinfo.rule.rentalUnit === 'day') {
							totalTime = hours / 24 + minutes / 1440;
						}

						// 计费规则计算
						if (this.orderinfo.rule.ridingRule == 1) {
							const ridingRuleJson = JSON.parse(this.orderinfo.rule.ridingRuleJson);
							const timeoutTime = parseFloat(ridingRuleJson.timeoutTime);
							const startingPrice = parseFloat(ridingRuleJson.startingPrice);
							const startingTime = parseFloat(ridingRuleJson.startingTime);
							const timeoutPrice = parseFloat(ridingRuleJson.timeoutPrice);

							let totalCharge;
							if (totalTime <= startingTime) {
								totalCharge = startingPrice;
							} else {
								const extraTime = totalTime - startingTime;
								const extraCharge = Math.ceil(extraTime / timeoutTime) * timeoutPrice;
								totalCharge = startingPrice + extraCharge;
							}

							// 更新money值
							this.money = totalCharge + this.orderinfo.appointmentFee
						} else if (this.orderinfo.rule.ridingRule == 2) {
							const ridingRuleJson = JSON.parse(this.orderinfo.rule.ridingRuleJson);
							const rules = ridingRuleJson.rule;
							let totalCharge = 0;

							for (let rule of rules) {
								const start = parseFloat(rule.start);
								const end = parseFloat(rule.end);
								const eachUnit = parseFloat(rule.eachUnit);
								const fee = parseFloat(rule.fee);

								if (totalTime > start && (end === 9999 || totalTime <= end)) {
									// 所有时间都按照该区间的费率来计算
									totalCharge = Math.ceil(totalTime / eachUnit) * fee;
									break;
								}
							}

							// 更新money值
							this.money = totalCharge + this.orderinfo.appointmentFee
						}

						// 更新时间字符串
						this.timeString = timeString;
					}, 1000);
				} else if (this.orderinfo.status == 3) {
					// 骑行结束
					// this.topay()
					const createTimeTimestamp = new Date(this.orderinfo.createTime).getTime();

					// 定义定时器

					const currentTime = Date.now();
					const timePassed = currentTime - createTimeTimestamp;
					const secondsPassed = Math.floor(timePassed / 1000);

					// 转换为时分秒格式
					const hours = Math.floor(secondsPassed / 3600);
					const minutes = Math.floor((secondsPassed % 3600) / 60);
					const seconds = secondsPassed % 60;
					const timeString =
						`${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
					const tenMinuteIntervals = Math.floor((hours * 60 + minutes) / 10) + 1; // 加1是因为不满十分钟也算一个十分钟

					this.timeString = timeString
					// console.log("已经过去了：" + timeString);

					this.showdevice = true
					this.deviceIndex = 3
				}



				// 将 createTime 转换为时间戳

			},
			startCountdown() {
				console.log('调用了');
				const interval = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(interval);
					}
				}, 1000);
			},
			toxy() {
				this.seeDetail = true
				uni.navigateTo({
					url: '/page_user/agreement'
				})
			},
			onMapTap(event) {
				this.showdevice = false
				this.deviceIndex = 0
				// this.sn = ''
				this.type = 0
				this.freeInfo = {}
				this.freeListIndex = 0
				// const {
				// 	latitude,
				// 	longitude
				// } = event.detail;
				// console.log('Map tapped at:', latitude, longitude);
				// this.close()
				// 在这里添加你的回调逻辑
			},
			lockDevice() {
				if (this.orderinfo.status) {
					this.showtcs = true
				} else {
					if (this.deviceInfos.status != 1) {
						uni.showToast({
							title: '车辆正在使用中,请使用其他车辆',
							icon: 'none',
							duration: 2000
						});
					} else {
						this.showdevice = true;
						this.type = 1;
						this.deviceIndex = 1;
					}
				}

			},
			changetips() {
				if (this.countdown <= 0) {
					if (this.showTips) {

						uni.setStorageSync('hasShownPopup', false);
						this.showTips = uni.getStorageSync('hasShownPopup')
					} else {
						uni.setStorageSync('hasShownPopup', true);
						this.showTips = uni.getStorageSync('hasShownPopup')
					}

				}

			},

			getMyLocation() {
				uni.createMapContext("map", this).moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude,
				});
			},
			async setMapScale(e, val) {
				let mapContext = uni.createMapContext('map', this);
				let setScale = () => {
					return new Promise((resolve, reject) => {
						mapContext.getScale({
							success: r => {
								resolve()
							}
						})
					})
				};
				await setScale();
				mapContext.moveToLocation({
					success: (res) => {
						const timer = setTimeout(() => {
							clearTimeout(timer);
						}, 500);
					},
				})
			},
			// 查看费用详情
			tofeeDetail() {
				uni.navigateTo({
					url: '/page_user/ckmx?orderId=' + this.orderinfo.orderNo
				})
			},
			// 扫码开锁
			qecodelock() {
				if (this.orderinfo.status) {
					this.showtcs = true
				} else {
					this.seeDetail = true
					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 != '') {
								setTimeout(() => {
									if (!this.orderinfo.status) {
										this.deviceInfo(1)

									}
								}, 500)

							}

						},
						fail: err => {
							// console.error('扫描失败：', err);
							// uni.showToast({
							// 	title: '扫描失败',
							// 	icon: 'none'
							// });
						}
					});
				}

			},
			feedetail(item, index) {
				this.freeInfo = item
				this.seeDetail = true
				try {
					const itemStr = encodeURIComponent(JSON.stringify(item));
					uni.navigateTo({
						url: `/page_user/jfgz?item=${itemStr}`
					});
				} catch (error) {
					console.error('Error serializing item:', error);
				}
				// this.showfeeDetail = true
				this.freeListIndex = index
			},
			// 无套餐取消预约
			
			// 套餐取消预约
			
			backDevice() {
				if (this.OrderdeviceInfos.onlineStatus == 1) {
					uni.showLoading({
						title: '加载中...'
					})
					this.$u.post('/appVerify/device/return?returnType=1&orderNo=' + this.orderinfo.orderNo).then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							this.close()
							this.getisInOrder()

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

				} else {
					this.onlinebackDevice()
				}

			},
			// 套餐直接开锁
			sub6() {
				if (this.orderinfo.ruleId) {
					let data = {
						userId: this.userId,
						sn: this.sn,

						// ruleId: this.freeInfo.ruleId,
						// money: this.freeInfo.fee,
						mark: "套餐直接开锁",
						// type: '1',
						ruleId: this.orderinfo.ruleId,
						orderNo: this.orderinfo.orderNo

					}
					this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
						if (res.code === 200) {
							this.getisInOrder()
						} else {

						}
					})
				} else {
					uni.showToast({
						title: '请选择套餐',
						icon: 'none',
						duration: 2000
					});
				}

			},
			// 预约解锁骑行
			unlockdevice() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.orderinfo.ruleId == null) {
					let data = {
						userId: this.userId,
						sn: this.orderinfo.sn,

						// ruleId: this.freeInfo.ruleId,
						// money: this.freeInfo.fee,
						mark: "预约开锁",
						// type: '1',
						orderNo: this.orderinfo.orderNo

					}
					this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
						uni.hideLoading()
						if (res.code == 200) {

							this.getisInOrder()
						} else {
							this.getisInOrder()
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					let data = {
						userId: this.userId,
						sn: this.orderinfo.sn,

						// ruleId: this.freeInfo.ruleId,
						// money: this.freeInfo.fee,
						mark: "套餐预约开锁",
						// type: '1',
						ruleId: this.orderinfo.ruleId,
						orderNo: this.orderinfo.orderNo

					}
					this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							this.getisInOrder()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}

			},


			// 取消预约支付
			topay() {
				let data = {
					userId: this.userId,
					sn: this.orderinfo.sn,
					orderNo: this.orderinfo.orderNo,

					// money: this.freeInfo.fee,
					mark: "订单支付",
					type: '2'


				}
				uni.showLoading({

				})
				console.log('点击了');
				let that = this
				this.$u.post('/appVerify/pre/order', data).then((res) => {
					if (res.code === 200) {
						uni.hideLoading()
						// this.freList=res.rows
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.packageVal,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success(res) {
								// 支付成功逻辑
								that.getisInOrder()

							},
							fail(err) {
								// 支付失败逻辑
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// 骑行结束支付
			topay1() {
				let data = {
					userId: this.userId,
					sn: this.orderinfo.sn,
					orderNo: this.orderinfo.orderNo,

					// money: this.freeInfo.fee,
					mark: "订单支付",
					type: '1'


				}
				uni.showLoading({

				})
				console.log('点击了');
				let that = this
				this.$u.post('/appVerify/pre/order', data).then((res) => {
					if (res.code === 200) {
						uni.hideLoading()
						// this.freList=res.rows
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.packageVal,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success(res) {
								console.log('支付成功');
								// 支付成功逻辑
								that.getisInOrder()

							},
							fail(err) {
								// 支付失败逻辑
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
		

			sub5() {
				if (this.orderinfo.ruleId) {
					this.$u.post('/appVerify/device/appointment?userId=' + this.userId + '&sn=' + this.sn + '&ruleId=' +
						this
						.orderinfo.ruleId + '&type=2' + '&orderNo=' + this.orderinfo.orderNo).then((res) => {
						if (res.code === 200) {
							uni.showLoading({
								title: '预约中...'
							})
							setTimeout(() => {
								this.getisInOrder()
								uni.hideLoading()
							}, 1000)
							// this.freList=res.rows

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					uni.showToast({
						title: '请选择套餐',
						icon: 'none',
						duration: 2000
					});
				}

			},
			// 确认开锁
			sub1() {
				if (this.showxy) {
					uni.showLoading({

					})
					if (this.areaInfo.authentication == 1) {

						if (this.userinfo.isAuthentication == 0) {
							uni.hideLoading()
							this.seeDetail = true
							uni.navigateTo({
								url: "/page_user/idcard_test"
							})
						} else {
							if (this.freeInfo.ruleId) {
								let data = {
									userId: this.userId,
									sn: this.sn,
									ruleId: this.freeInfo.ruleId,
									// money: this.freeInfo.fee,
									mark: "确认开锁",
									type: '1'


								}
								this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
									uni.hideLoading()
									this.seeDetail = false
									if (res.code === 200) {
										this.getisInOrder()

									} else {


										if (res.msg == '您还未充值押金，请先充值押金') {
											// this.close()
											this.showYjTip = true
										} else {
											uni.showToast({
												title: res.msg,
												icon: 'none',
												duration: 2000
											});
										}
									}
								})
							} else {
								uni.hideLoading()
								uni.showToast({
									title: '请选择套餐',
									icon: 'none',
									duration: 2000
								});
							}
						}
					} else {

						if (this.freeInfo.ruleId) {
							let data = {
								userId: this.userId,
								sn: this.sn,
								ruleId: this.freeInfo.ruleId,
								// money: this.freeInfo.fee,
								mark: "确认开锁",
								type: '1'


							}
							this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
								uni.hideLoading()
								this.seeDetail = false
								if (res.code === 200) {
									this.getisInOrder()

								} else {


									if (res.msg == '您还未充值押金，请先充值押金') {
										this.close()
										this.showYjTip = true
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										});
									}
								}
							})
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '请选择套餐',
								icon: 'none',
								duration: 2000
							});
						}
					}
				} else {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none',
						duration: 2000
					});
				}



			},
			// 开锁购买套餐
			sub2() {
				if (this.freeInfo.ruleId) {
					let data = {
						userId: this.userId,
						sn: this.sn,
						ruleId: this.freeInfo.ruleId,
						// money: this.freeInfo.fee,
						isAppointment: false,
						mark: "套餐开锁",
						type: '3'


					}
					this.$u.post('/appVerify/pre/order', data).then((res) => {
						if (res.code === 200) {
							// this.freList=res.rows
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.packageVal,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success(res) {
									// 支付成功逻辑
									this.showdevice = false
									this.deviceIndex = 0
									this.mac = ''
									this.type = 0
									this.freeInfo = {}
									this.freeListIndex = 0
									this.getisInOrder()
								},
								fail(err) {
									// 支付失败逻辑
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					uni.showToast({
						title: '请选择套餐',
						icon: 'none',
						duration: 2000
					});
				}

			},
			// 确认预约
			sub3() {
				if (this.showxy) {
					if (this.areaInfo.authentication == 1) {
						if (this.userinfo.isAuthentication == 0) {
							this.seeDetail = true
							uni.navigateTo({
								url: "/page_user/idcard_test"
							})
						} else {
							if (this.freeInfo.ruleId) {
								let data = {
									userId: this.userId,
									sn: this.sn,
									ruleId: this.freeInfo.ruleId,
									// isAppointment: true,
									// money: this.freeInfo.fee,
									mark: "预约购买套餐",
									type: '2'


								}
								this.$u.post('/appVerify/device/appointment?userId=' + this.userId + '&sn=' + this.sn +
									'&ruleId=' +
									this
									.freeInfo.ruleId).then((res) => {
									this.seeDetail = false
									if (res.code === 200) {
										uni.showLoading({
											title: '预约中...'
										})
										setTimeout(() => {
											this.getisInOrder()
											uni.hideLoading()
										}, 1000)
										// this.freList=res.rows

									} else {


										if (res.msg == '您还未充值押金，请先充值押金') {
											this.close()
											this.showYjTip = true
										} else {
											uni.showToast({
												title: res.msg,
												icon: 'none',
												duration: 2000
											});
										}
									}
								})
							} else {
								uni.showToast({
									title: '请选择套餐',
									icon: 'none',
									duration: 2000
								});
							}

						}
					} else {
						if (this.freeInfo.ruleId) {
							let data = {
								userId: this.userId,
								sn: this.sn,
								ruleId: this.freeInfo.ruleId,
								// isAppointment: true,
								// money: this.freeInfo.fee,
								mark: "预约购买套餐",
								type: '2'


							}
							this.$u.post('/appVerify/device/appointment?userId=' + this.userId + '&sn=' + this.sn +
								'&ruleId=' +
								this
								.freeInfo.ruleId).then((res) => {
								this.seeDetail = false
								if (res.code === 200) {
									uni.showLoading({
										title: '预约中...'
									})
									setTimeout(() => {
										this.getisInOrder()
										uni.hideLoading()
									}, 1000)
									// this.freList=res.rows

								} else {

									if (res.msg == '您还未充值押金，请先充值押金') {
										this.close()
										this.showYjTip = true
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										});
									}
								}
							})
						} else {
							uni.showToast({
								title: '请选择套餐',
								icon: 'none',
								duration: 2000
							});
						}
					}


				} else {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none',
						duration: 2000
					});
				}



			},
			// 预约购买套餐
			sub4() {
				if (this.freeInfo.ruleId) {
					let data = {
						userId: this.userId,
						sn: this.sn,
						ruleId: this.freeInfo.ruleId,
						isAppointment: true,
						// money: this.freeInfo.fee,
						mark: "预约购买套餐",
						type: '3'


					}
					console.log('点击了');
					this.$u.post('/appVerify/pre/order', data).then((res) => {
						if (res.code === 200) {
							// this.freList=res.rows
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.packageVal,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success(res) {
									// 支付成功逻辑

									this.showdevice = false
									this.deviceIndex = 0
									this.mac = ''
									this.type = 0
									this.freeInfo = {}
									this.freeListIndex = 0
									this.getisInOrder()
								},
								fail(err) {
									// 支付失败逻辑
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					uni.showToast({
						title: '请选择套餐',
						icon: 'none',
						duration: 2000
					});
				}

			},
			getisInOrder() {
				uni.showLoading({

				})
				this.orderinfo = {}
				if (this.userId) {
					this.$u.post('/app/user/isInOrder?userId=' + this.userId, ).then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							// this.freList=res.rows
							if (res.data != '') {
								this.orderinfo = res.data[0]
								if (this.orderinfo.status == 4) {
									this.getisInOrder()
								} else {
									clearInterval(this.timer)
									this.starTime()
								}

							} else {
								clearInterval(this.timer)
								this.orderinfo = {}
								this.showdevice = false
								this.deviceIndex = 0
							}
						} else {

						}
					})
				}

			},
			changefree(item, index) {
				this.freeInfo = item
				this.freeListIndex = index
			},
			getlist() {
				this.freList = []
				let data = {
					areaId: this.areaInfo.areaId
				}
				this.$u.get('/app/fee/list?', data).then((res) => {
					if (res.code === 200) {
						this.freList = res.data.map(item => {
							try {
								item.ridingRuleJson = JSON.parse(item.ridingRuleJson);
							} catch (e) {
								console.error('Invalid JSON in ridingRuleJson:', item.ridingRuleJson);
							}
							return item;
						});
						console.log(this.freList, ' this.freList this.freList');
					} else {
						uni.showToast({
							title: '未登录，请登录后尝试',
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			// 发现坏车

			// 预约车辆
			Reserve() {
				if (this.orderinfo.status) {
					this.showtcs = true
				} else {
					if (this.$store.getters.userId == undefined) {
						// this.$u.get("/getAppInfo").then((res) => {
						// 	console.log('进入跳转');
						// 	if(res.code==200){
						// 		 this.$store.commit('SET_USERID', res.user.userId);

						// 	}
						// });
						this.$store.dispatch('userInfo', this.$u).then(() => {
							this.deviceIndex = 1
							this.type = 2
							console.log(this.$store.getters.userId,
								'this.$store.getters.userIdthis.$store.getters.userId');
							// 执行其他操作...
						});
					} else {
						this.deviceIndex = 1
						this.type = 2
					}
				}



			},

			// 关闭弹出
			close() {
				this.showdevice = false
				this.deviceIndex = 0
				// this.sn = ''
				this.type = 0
				this.freeInfo = {}
				this.freeListIndex = 0
			},
			// 扫码的方法
			scanQRCode() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						console.log('扫描结果：', res);
						this.sn = res.sn
						this.type = 1
					},
					fail: err => {
						console.error('扫描失败：', err);
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						});
					}
				});
			},
			findBike() {
				uni.showToast({
					title: '响铃请求发送成功',
					icon: 'none',
					duration: 2000
				});
				this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
					if (res.code === 200) {

					}
				})
			},
			onMarkerTap(e) {
				this.showdevice = false
				this.deviceIndex = 0
				// this.sn = ''
				this.type = 0
				this.freeInfo = {}
				this.freeListIndex = 0
				if (e.type === 'markertap') {
					console.log('点击了标记：', e.markerId);
					// 这里可以根据需要处理点击标记的逻辑
					// 阻止事件冒泡\
				
					const markerExists = this.listData.some(item => item.sn == e.markerId);

					if (markerExists) {
						// 处理点击标记的逻辑
						this.sn = e.markerId;
						this.deviceInfo(0);
					} else {
						console.log('标记ID不存在于列表数据中');
					}

					// 阻止事件冒泡
					e.stopPropagation();

				}

			},
			
			
			toggleIconAndCallout() {
				this.showIconAndCallout = !this.showIconAndCallout;
				if (this.showIconAndCallout) {
					const newMarkers = [];
					this.parkingList.forEach(item => {
						newMarkers.push({
							id: parseFloat(item.parkingId),
							latitude: parseFloat(item.latitude),
							longitude: parseFloat(item.longitude),
							width: 20,
							height: 28.95,
							iconPath: item.type == 1 ?'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3':item.type == 2 ?'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
							callout: {
								content: item.parkingName,
								color: '#ffffff',
								fontSize: 14,
								borderRadius: 10,
								bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' :
									'#FF473E',
								padding: 6,
								display: 'ALWAYS'
							},
							isCalloutVisible: true // 添加标记
						});
					});
					this.$set(this, 'markers', [...this.markers, ...newMarkers]);
				} else {
					// 过滤掉所有气泡显示的标记
					this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible));
				}

			},

			getmarks() {
				let data = {
					areaId: this.areaInfo.areaId
				};
				if (this.areaInfo.areaId) {
					this.$u.get(`/app/allVehicleByArea`, data).then((res) => {
						if (res.code === 200 && res.data != '') {
							this.listData = res.data;
							const newMarkers = this.listData.map(item => ({
								id: parseFloat(item.sn),
								latitude: parseFloat(item.latitude),
								longitude: parseFloat(item.longitude),
								width: 40,
								height: 28,
								iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
							}));

							// 保留显示气泡的标记
							const preservedMarkers = this.markers.filter(marker => marker.isCalloutVisible ||
								marker.isDeviceMarker);

							// 假设newMarkers是从新数据生成的标记数组
							// 更新markers数组，避免删除已标识的重要标记
							this.markers = [...newMarkers.filter(newMarker =>
								!preservedMarkers.some(preservedMarker => preservedMarker.id === newMarker
									.id)
							), ...preservedMarkers];

							this.oldMarkers = [...this.markers];
						}
					}).catch(error => {
						// 处理接口请求失败的情况
					});
				}
			},
			isMarkersChanged(newMarkers) {
				if (this.oldMarkers.length !== newMarkers.length) {
					return true;
				}

				for (let i = 0; i < newMarkers.length; i++) {
					if (this.oldMarkers[i].id !== newMarkers[i].id ||
						this.oldMarkers[i].latitude !== newMarkers[i].latitude ||
						this.oldMarkers[i].longitude !== newMarkers[i].longitude) {
						return true;
					}
				}

				return false;
			},
			getinfo() {
				if (uni.getStorageSync('token')) {
					this.$u.get("/getAppInfo").then((res) => {

						if (res.code == 200) {
							this.$store.commit('SET_USERID', res.user.userId);
							this.userinfo = res.user

						} else {
							setTimeout(() => {
								this.getinfo()
							}, )
							// let that =this
							// wx.login({
							// 	success(res) {
							// 		if (res.code) {
							// 			console.log('登录！', res);
							// 			let data = {
							// 				wxOpenId: res.code,

							// 			};
							// 			let areaId = uni.getStorageSync('areaId');
							// 			that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId).then(
							// 				res => {
							// 					uni.hideLoading();
							// 					if (res.code == 200) {
							// 						uni.setStorageSync('token', res.token);
							// 						that.$u.get('/app/device/info?sn=' + that.sn).then((res) => {
							// 							if (res.code === 200) {

							// 							} else {

							// 							}
							// 						})


							// 					} else if (res.code == 501) {
							// 						uni.showToast({
							// 							title: res.msg,
							// 							icon: 'none',
							// 							duration: 2000
							// 						});
							// 					} else {
							// 						// console.log("老用户登录",res.data)
							// 						uni.redirectTo({
							// 							url: '/pages/login/login'
							// 						})
							// 					}
							// 				});
							// 		}
							// 	},

							// });
						}
					});


				}
			},
			getArea() {
				this.showmap = false
				// 发送请求获取数据
				this.areaInfo = {}
				this.polyline = []
				if (this.sn != 0 && this.sn != '' && this.sn != null) {
					this.gps.sn = this.sn
				}

				this.$u.get('/app/area/info?', this.gps).then((res) => {
					this.showmap = true
					if (res.code === 200) {
						
						// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
						const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
						// console.log(polylines,'polylinespolylinespolylines');
						// .filter(area => area.boundaryStr) // 过滤掉boundary为空的数据
						// .map(area => this.convertBoundaryToPolyline(area.boundaryStr));
						// 更新折线数据
						this.areaInfo = res.data
						this.polyline.push(polylines)
						console.log();
						// console.log(this.areaInfo, 'areaInfoareaInfo');
						uni.setStorageSync('areaId', res.data.areaId);
						this.getinfo()
						this.getmarks()
						this.getlist()
						this.getParking()
						if (uni.getStorageSync('token')) {
							this.getisInOrder()

						}
						const hasShownPopup = uni.getStorageSync('hasShownPopup');
						console.log(hasShownPopup, 'hasShownPopup');

						if (hasShownPopup === '' || hasShownPopup === null) {
							console.log('1111111111');
							
							this.showTips = true;
							this.startCountdown();
							uni.setStorageSync('hasShownPopup', true);
						} else {
							console.log('222');
							this.showTips = uni.getStorageSync('hasShownPopup');
							console.log(this.showTips, 'this.showTips');
							this.startCountdown();
							
						}
						
						this.setMapScale()
						// if(!hasShownPopup){
						// 	console.log(typeof(hasShownPopup),'hasShownPopuphasShownPopup');
						// 	this.showTips=uni.getStorageSync('hasShownPopup')
						// }else{
						// 	this.showTips=true
						// 	uni.setStorageSync('hasShownPopup', true);
						// }

						// this.$store.commit('SET_SHOWTIPS', true);
						// console.log(this.polyline);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					console.error("Error fetching area data:", error);
				});
			},

			getParking() {
				// 发送请求获取数据
				// this.polyline=[]
				let data = {
					areaId: this.areaInfo.areaId
				}
				this.$u.get('/app/parking/list?', data).then((res) => {
					if (res.code === 200) {
						// 处理接口返回的数据
						const type1Data = [];
						const type2Data = [];
						const type3Data = [];

						res.rows.forEach(row => {
							if (row.type == 1) {
								type1Data.push(row);
							} else if (row.type == 2) {
								type2Data.push(row);
							} else if (row.type == 3) {
								type3Data.push(row);
							}
						});
						const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '');
						const polylines = this.convertBoundaryToPolylines(validBoundaries, 1);


						const validBoundaries1 = type2Data.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '');
						const polylines1 = this.convertBoundaryToPolylines(validBoundaries1, 2);

						const validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '');
						const polylines2 = this.convertBoundaryToPolylines(validBoundaries2, 3);
						// 将处理后的数据添加到 this.polyline 中
						this.polyline = this.polyline.concat(polylines2);
						this.polyline = this.polyline.concat(polylines1);
						this.polyline = this.polyline.concat(polylines);
						this.parkingList = res.rows
						// console.log(this.polyline);
					}
				}).catch(error => {
					console.error("Error fetching parking data:", error);
				});
			},
			convertBoundaryToPolyline(boundary) {
				if (!boundary) return null;

				const points = JSON.parse(boundary).map(coord => ({
					latitude: coord[1],
					longitude: coord[0]
				}));

				const polyline = {
					points: points,
					fillColor: "#55888840", //填充颜色
					strokeColor: "#22FF00", //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 1, //层级
				};

				return polyline;
			},
			convertBoundaryToPolylines(boundaries, num) {
				if (num == 1) {
					console.log('判断1');
					return boundaries.map(boundary => {
						if (!boundary) return null;
						let coords;
						try {
							coords = JSON.parse(boundary);
						} catch (error) {
							console.error("Error parsing boundary JSON:", error);
							return null;
						}
						if (!Array.isArray(coords)) {
							console.error("Parsed boundary is not an array:", coords);
							return null;
						}
						const points = coords.map(coord => ({
							latitude: coord[1],
							longitude: coord[0]
						}));
						return {
							points: points,
							fillColor: "#3A7EDB40", //填充颜色
							strokeColor: "#3A7EDB", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级

						};
					}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
				} else if (num == 2) {
					return boundaries.map(boundary => {
						if (!boundary) return null;
						let coords;
						try {
							coords = JSON.parse(boundary);
						} catch (error) {
							console.error("Error parsing boundary JSON:", error);
							return null;
						}
						if (!Array.isArray(coords)) {
							console.error("Parsed boundary is not an array:", coords);
							return null;
						}
						const points = coords.map(coord => ({
							latitude: coord[1],
							longitude: coord[0]
						}));
						return {
							points: points,
							fillColor: "#FFF5D640", //填充颜色
							strokeColor: "#FFC107", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级

						};
					}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
				} else if (num == 3) {
					return boundaries.map(boundary => {
						if (!boundary) return null;
						let coords;
						try {
							coords = JSON.parse(boundary);
						} catch (error) {
							console.error("Error parsing boundary JSON:", error);
							return null;
						}
						if (!Array.isArray(coords)) {
							console.error("Parsed boundary is not an array:", coords);
							return null;
						}
						const points = coords.map(coord => ({
							latitude: coord[1],
							longitude: coord[0]
						}));
						return {
							points: points,
							fillColor: "#FFD1CF40", //填充颜色
							strokeColor: "#FF473E", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级

						};
					}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
				}

			},
			topage(num) {
				if (num == 0) {
					// uni.navigateTo({
					// 	url:''
					// })
				} else if (num == 1) {
			
					uni.showLoading({
			
					})
					if (uni.getStorageSync('token')) {
						if (this.areaInfo.authentication == 1) {
							this.$u.get("/getAppInfo").then(res => {
			
								if (res.code == 200) {
									this.userinfo = res.user;
									this.$store.commit('SET_USERID', res.user.userId);
									if (res.user.isAuthentication == 0) {
										uni.hideLoading()
										this.seeDetail = true;
										uni.navigateTo({
											url: "/page_user/idcard_test"
										});
									} else {
										this.seeDetail = true;
										uni.hideLoading()
										console.log('跳转1');
										uni.navigateTo({
											url: '/page_user/yj?isback=' + this.showYjTip
										});
										this.showYjTip = false
									}
								} else {
									uni.hideLoading()
									uni.showToast({
										title: '未登录，请登录后尝试',
										icon: 'none',
										duration: 2000
									});
								}
							});
						} else {
							this.seeDetail = true;
							uni.hideLoading()
							console.log('跳转2');
							uni.navigateTo({
								url: '/page_user/yj?isback=' + this.showYjTip
							});
							this.showYjTip = false
						}
			
			
					} else {
			
						let that = this;
						wx.login({
							success(res) {
								if (res.code) {
									console.log('登录成功！', res);
									let areaId = uni.getStorageSync('areaId');
									uni.showLoading({
										title: '登录中...'
									});
									that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId)
										.then(res => {
											uni.hideLoading();
											if (res.code == 200) {
												uni.setStorageSync('token', res.token);
												if (that.areaInfo.authentication == 1) {
													that.$u.get("/getAppInfo").then(res => {
														if (res.code == 200) {
															that.userinfo = res.user;
															that.$store.commit('SET_USERID', res
																.user.userId);
															if (res.user.isAuthentication == 0) {
																uni.hideLoading()
																that.seeDetail = true;
			
																uni.navigateTo({
																	url: "/page_user/idcard_test"
																});
															} else {
																that.seeDetail = true;
																uni.hideLoading()
																console.log('跳转3');
																uni.navigateTo({
																	url: '/page_user/yj?isback=' +
																		that.showYjTip
																});
																that.showYjTip = false
															}
														} else {
															uni.hideLoading()
															uni.showToast({
																title: '未登录，请登录后尝试',
																icon: 'none',
																duration: 2000
															});
														}
													});
												} else {
													that.seeDetail = true;
													uni.hideLoading()
													console.log('跳转4');
													uni.navigateTo({
														url: '/page_user/yj?isback=' + that.showYjTip
													});
													that.showYjTip = false
												}
											} else if (res.code == 501) {
												uni.hideLoading()
												uni.showToast({
													title: res.msg,
													icon: 'none',
													duration: 2000
												});
											} else {
												uni.hideLoading()
												uni.redirectTo({
													url: '/pages/login/login'
												});
											}
										}).catch(err => {
											uni.hideLoading();
											uni.showToast({
												title: '请求失败，请稍后重试',
												icon: 'none',
												duration: 2000
											});
											console.error('请求失败：', err);
										});
								} else {
									uni.hideLoading()
									uni.showToast({
										title: '登录失败，请重试',
										icon: 'none',
										duration: 2000
									});
									console.error('微信登录失败：', res);
								}
							},
							fail(err) {
								uni.hideLoading()
								uni.showToast({
									title: '微信登录接口调用失败',
									icon: 'none',
									duration: 2000
								});
								console.error('微信登录接口调用失败：', err);
							}
						});
			
			
						this.showYjTip = false
			
					}
			
				} else if (num == 2) {
					uni.navigateTo({
						url: '/page_user/jfgz'
					})
				} else if (num == 3) {
					uni.navigateTo({
						url: '/page_user/yczn'
					})
				} else if (num == 4) {
					if (this.orderinfo.status) {
						this.showtcs = true
					} else {
						uni.navigateTo({
							url: '/page_user/bhks'
						})
					}
			
				} else if (num == 5) {
			
					uni.navigateTo({
						url: '/page_user/gzsb'
					})
				} else if (num == 6) {
					uni.navigateTo({
						url: '/pages/my'
					})
			
				} else if (num == 7) {
					uni.navigateTo({
						url: '/page_user/gzsb?sn=' + this.sn
					})
				} else if (num == 8) {
					uni.navigateTo({
						url: '/page_user/gzsb?sn=' + this.sn
					})
				} else if (num == 9) {
					uni.navigateTo({
						url: '/page_user/khfw/khfw'
					})
				}
			},
			deviceInfo(num) {
				if (uni.getStorageSync('token')) {
			
					this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
						if (res.code === 200) {
							this.deviceInfos = res.data;
			
							if (num == 0) {
								this.showdevice = true;
								this.type = 0;
							} else {
								if (this.deviceInfos.onlineStatus == 0) {
									wx.showToast({
										title: '车辆离线中,请使用其他车辆',
										icon: 'none',
										duration: 4000
									});
								} else if (this.deviceInfos.status == 0) {
									uni.showToast({
										title: '车辆未上架,请使用其他车辆',
										icon: 'none',
										duration: 4000
									});
								} else if (this.deviceInfos.status == 2) {
									uni.showToast({
										title: '车辆预约中,请使用其他车辆',
										icon: 'none',
										duration: 4000
									});
								} else if (this.deviceInfos.status == 3) {
									uni.showToast({
										title: '车辆骑行中,请使用其他车辆',
										icon: 'none',
										duration: 4000
									});
								} else if (this.deviceInfos.status == 4) {
									uni.showToast({
										title: '车辆临时锁车中,请使用其他车辆',
										icon: 'none',
										duration: 4000
									});
								} else if (this.deviceInfos.status == 8) {
									uni.showToast({
										title: '车辆下线中,请使用其他车辆',
										icon: 'none',
										duration: 4000
									});
								} else if (this.deviceInfos.status == 9) {
									uni.showToast({
										title: '车辆已废弃,请使用其他车辆',
										icon: 'none',
										duration: 4000
									});
								} else if (this.deviceInfos.status == 7) {
									uni.showToast({
										title: '车辆未上线,请使用其他车辆',
										icon: 'none',
										duration: 4000
									});
								} else if (this.deviceInfos.status == 1) {
									this.showdevice = true;
									this.type = 1;
									this.deviceIndex = 1;
								}
							}
						} else {
							this.showdevice = false;
							this.deviceIndex = 0;
							this.type = 0;
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					});
				} else {
					console.log('判断2');
					wx.login({
						success: (res) => {
							if (res.code) {
								console.log('登录！', res);
								let data = {
									wxOpenId: res.code,
								};
								let areaId = uni.getStorageSync('areaId');
								if (areaId) {
									this.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId)
										.then((
											res) => {
											// uni.hideLoading();
											if (res.code == 200) {
												uni.setStorageSync('token', res.token);
			
												this.$u.get('/app/device/info?sn=' + this.sn).then((
													res) => {
													if (res.code === 200) {
														this.deviceInfos = res.data;
			
														if (num == 0) {
															this.showdevice = true;
															this.type = 0;
														} else {
															if (this.deviceInfos.onlineStatus ==
																0) {
																uni.showToast({
																	title: '车辆离线中,请使用其他车辆',
																	icon: 'none',
																	duration: 4000
																});
															} else if (this.deviceInfos.status ==
																0) {
																uni.showToast({
																	title: '车辆未上架,请使用其他车辆',
																	icon: 'none',
																	duration: 4000
																});
															} else if (this.deviceInfos.status ==
																2) {
																uni.showToast({
																	title: '车辆预约中,请使用其他车辆',
																	icon: 'none',
																	duration: 4000
																});
															} else if (this.deviceInfos.status ==
																3) {
																uni.showToast({
																	title: '车辆骑行中,请使用其他车辆',
																	icon: 'none',
																	duration: 4000
																});
															} else if (this.deviceInfos.status ==
																4) {
																uni.showToast({
																	title: '车辆临时锁车中,请使用其他车辆',
																	icon: 'none',
																	duration: 4000
																});
															} else if (this.deviceInfos.status ==
																8) {
																uni.showToast({
																	title: '车辆下线中,请使用其他车辆',
																	icon: 'none',
																	duration: 4000
																});
															} else if (this.deviceInfos.status ==
																9) {
																uni.showToast({
																	title: '车辆已废弃,请使用其他车辆',
																	icon: 'none',
																	duration: 4000
																});
															} else if (this.deviceInfos.status ==
																7) {
																uni.showToast({
																	title: '车辆未上线,请使用其他车辆',
																	icon: 'none',
																	duration: 4000
																});
															} else if (this.deviceInfos.status ==
																1) {
																this.showdevice = true;
																this.type = 1;
																this.deviceIndex = 1;
															}
														}
													} else {
														this.showdevice = false;
														this.deviceIndex = 0;
														this.type = 0;
														uni.showToast({
															title: res.msg,
															icon: 'none',
															duration: 2000
														});
													}
												});
											} else if (res.code == 501) {
												uni.showToast({
													title: res.msg,
													icon: 'none',
													duration: 2000
												});
											} else {
												uni.redirectTo({
													url: '/pages/login/login'
												});
											}
										});
			
								}
			
							}
						},
					});
				}
			},
			
		},

	}
</script>
<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>

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

	.page {
		width: 750rpx;

		.tab_top {
			position: fixed;
			top: 0rpx;
			left: 0;
			width: 750rpx;
			height: 250rpx;
			z-index: 1;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);

			image {
				position: absolute;
				left: 30rpx;
				bottom: 90rpx;

				width: 60rpx;
				height: 60rpx;
			}

			.txts {
				position: absolute;
				left: 150rpx;
				bottom: 90rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #3D3D3D;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			}
		}

		.my-location {

			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 30rpx;
			bottom: 520rpx;
			// background-color: #fff;
			border-radius: 50%;
			width: 82rpx;
			height: 82rpx;
			z-index: 10;

			.img {
				width: 82rpx;
				height: 82rpx;
			}
		}

		.park {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 30rpx;
			bottom: 600rpx;
			// background-color: #fff;
			border-radius: 50%;
			width: 82rpx;
			height: 82rpx;
			z-index: 10;

			.img {
				width: 82rpx;
				height: 82rpx;
			}
		}

		.feeDetail {
			padding: 36rpx 22rpx;
			position: fixed;
			display: flex;
			flex-wrap: wrap;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 900rpx;
			background: #F7F7F7;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
			border-radius: 53rpx 53rpx 0 0;
			z-index: 200;
			overflow-y: auto;

			/* Enable vertical scrolling */
			.close {
				position: absolute;
				top: 20rpx;
				right: 40rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.feeCard {
				margin-top: 20rpx;
				padding: 38rpx;
				width: 708rpx;
				// height: 710rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;

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

				.cont {
					width: 100%;
					margin-top: 26rpx;
					display: flex;
					flex-wrap: nowrap;

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

					.right {
						width: 60%;
						display: flex;
						flex-wrap: wrap;
						font-weight: 500;
						font-size: 28rpx;
						color: #FF4444;

						.li {
							width: 100%;
						}
					}
				}
			}
		}

		.tipss_box {
			width: 370rpx;
			height: 73rpx;
			position: fixed;
			bottom: 600rpx;
			left: 38rpx;

			.tipss {
				// position: fixed;
				margin-top: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: nowrap;

				image {
					margin-right: 15rpx;
					width: 24rpx;
					height: 24rpx;
				}

				width: 350rpx;
				height: 64rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
				border-radius: 53rpx 53rpx 53rpx 53rpx;
			}

			.swiper {
				height: 80rpx;

				.tipss {
					// position: fixed;
					margin-top: 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: nowrap;

					image {
						margin-right: 15rpx;
						width: 24rpx;
						height: 24rpx;
					}

					width: 350rpx;
					height: 64rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
					border-radius: 53rpx 53rpx 53rpx 53rpx;
				}
			}

		}


		.map {
			width: 750rpx;
			height: 76vh;
		}

		.botmbox2 {

			position: fixed;
			bottom: 0;
			padding: 30rpx 20rpx 40rpx;
			width: 750rpx;
			// height: 272rpx;
			background: #F7F7F7;
			border-radius: 50rpx 50rpx 0 0;
			z-index: 100;

			.close {
				position: absolute;
				top: 20rpx;
				right: 40rpx;
				width: 35rpx;
				height: 35rpx;
			}

			.page1 {
				.top {
					// margin-top: 20rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					padding-bottom: 28rpx;
					border-bottom: 2rpx solid #D8D8D8;

					.left {

						width: 56rpx;
						height: 56rpx;

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

					.top_center {
						width: 50%;
						display: flex;
						flex-wrap: wrap;
						margin-left: 28rpx;

						.cent_top {

							width: 100%;
							font-weight: 500;
							font-size: 28rpx;
							color: #3D3D3D;
						}

						.cent_bot {
							font-weight: 500;
							font-size: 24rpx;
							color: #ccc;
						}
					}

					.top_right {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: auto;
						margin-right: 35rpx;
						width: 160rpx;
						height: 60rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid #4C97E7;
						font-weight: 500;
						font-size: 28rpx;
						color: #4C97E7;
					}
				}

				.center {
					margin-top: 42rpx;
					display: flex;
					flex-wrap: nowrap;
					// justify-content: space-around;
					padding-bottom: 28rpx;
					border-bottom: 2rpx solid #D8D8D8;

					.center_left {
						width: 50%;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						.center_left_top {
							width: 100%;
							text-align: center;
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
						}

						.center_left_bot {
							margin-top: 32rpx;
							width: 100%;
							text-align: center;
							font-weight: 500;
							font-size: 60rpx;
							color: #3D3D3D;
						}
					}

					.center_right {
						width: 50%;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						.center_right_top {
							width: 100%;
							text-align: center;
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
						}

						.center_right_bot {
							margin-top: 32rpx;
							width: 100%;
							text-align: center;
							font-weight: 500;
							font-size: 60rpx;
							color: #3D3D3D;
						}
					}
				}

				.bot {
					margin-top: 42rpx;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;

					.left_btn {
						display: flex;
						align-items: center;
						justify-content: center;
						padding-bottom: 2rpx;
						width: 338rpx;
						height: 90rpx;
						border-radius: 45rpx 45rpx 45rpx 45rpx;
						border: 2rpx solid #808080;
						font-weight: 500;
						font-size: 40rpx;
						color: #808080;
					}

					.right_btn {
						display: flex;
						align-items: center;
						justify-content: center;
						padding-bottom: 2rpx;
						width: 338rpx;
						height: 90rpx;
						background: #4C97E7;
						border-radius: 45rpx 45rpx 45rpx 45rpx;
						font-weight: 500;
						font-size: 40rpx;
						color: #FFFFFF;
					}
				}

				.tips {
					margin-top: 42rpx;
					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}

			.page2 {
				.top {
					display: flex;
					flex-wrap: nowrap;
					width: 100%;
					// height: 284rpx;
					padding-bottom: 30rpx;

					.left {
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						width: 50%;
						padding-top: 10rpx;

						.text {
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
						}

						.ele {
							width: 100%;
							display: flex;
							flex-wrap: nowrap;
							// align-items: center;
							justify-content: center;

							font-weight: 400;
							font-size: 40rpx;
							color: #4C97E7;

							image {
								margin-right: 18rpx;
								width: 22rpx;
								height: 48rpx;
							}
						}
					}

					.right {
						width: 50%;
						padding-top: 10rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;


						.text {
							text-align: center;
							width: 100%;
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
						}

						.speed {
							margin-top: 18rpx;
							width: 226rpx;
							height: 22rpx;
							background: #ccc;
							border-radius: 16rpx 16rpx 16rpx 16rpx;

							.speeds {
								// width: 90%;
								height: 100%;
								background: #77B8FD;
								border-radius: 16rpx 16rpx 16rpx 16rpx;
							}
						}

						.txt {

							width: 100%;
							display: flex;
							flex-wrap: nowrap;
							// align-items: center;
							// align-items: center;
							justify-content: center;
							font-weight: 500;
							font-size: 72rpx;
							color: #3D3D3D;

							span {
								font-weight: 700;
								margin-top: 30rpx;
							}
						}
					}
				}

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

				.center {
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					overflow-x: auto; // 添加水平滚动条
					margin-bottom: 200rpx;
					white-space: nowrap; // 确保子元素不换行
					padding: 20rpx 0;
					background: #F7F7F7;

					.card {

						width: 500rpx !important; // 确保宽度被应用
						height: 288rpx;
						margin-right: 20rpx;
						position: relative;
						background: #FFFFFF;
						box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
						border-radius: 16rpx;
						border: 2rpx solid #fff;

						image {
							position: absolute;
							top: 0;
							right: 0;
							width: 82rpx;
							height: 50rpx;
						}

						.tips_btn {
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							bottom: 0;
							width: 350rpx;
							height: 70rpx;
							background: #4C97E7;
							border-radius: 0rpx 0rpx 16rpx 16rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
						}

						.tit {
							padding: 18rpx 0 0 18rpx;
							/* Adds padding to the top and left sides */
							width: 300rpx;
							/* Sets a fixed width for the element */
							display: flex;
							/* Uses flexbox for layout */
							align-items: center;
							/* Vertically centers the content */
							font-weight: 500;
							/* Sets the font weight to medium */
							font-size: 36rpx;
							/* Sets the font size */
							color: #3D3D3D;
							/* Sets the text color */
							white-space: nowrap;
							/* Prevents the text from wrapping to the next line */
							overflow: hidden;
							/* Hides any content that overflows the element's box */
							text-overflow: ellipsis;
							/* 显示省略号 */
						}

						.nmtxt {

							width: 100%;
							margin-top: 22rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

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

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

							.red {
								font-weight: 400;
								font-size: 36rpx;
								color: #FF4444;
							}
						}

						.tip {
							margin-top: 14rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #808080;
						}

						.tips {
							display: flex;
							align-items: center;
							margin-left: auto;
							font-size: 30rpx;
							color: #3D3D3D;

							.icon-chakanxiangqing {
								font-size: 30rpx;
								color: #3D3D3D;
								font-weight: 600;
							}
						}
					}

					.act1 {
						border: 2rpx solid #4C97E7;
					}
				}


				.bot {
					display: flex;
					flex-wrap: wrap;
					// align-items: center;
					justify-content: center;
					position: absolute;
					bottom: 0;
					left: 0;
					width: 750rpx;
					height: 210rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08), 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 0rpx 0rpx 0rpx 0rpx;

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

						.yuans {
							margin-top: 2rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 27rpx;
							height: 27rpx;
							border-radius: 50%;
							border: #808080 solid 2rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.txt {
							margin-left: 10rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #979797;

							span {
								color: #3D3D3D;
							}
						}

					}

					.btn {
						margin-top: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 680rpx;
						height: 90rpx;
						background: #4C97E7;
						border-radius: 54rpx 54rpx 54rpx 54rpx;

						font-weight: 500;
						font-size: 40rpx;
						color: #FFFFFF;
					}
				}
			}

			.page3 {
				.bot_btn {

					width: 750rpx;
					height: 618rpx;
					// background: #fff;
					// box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 50rpx 50rpx 0 0;

					.info {
						// margin-top: 20rpx;
						padding: 0 60rpx;

						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: space-between;
						width: 708rpx;
						height: 100rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
					}



					.cardss {
						position: absolute;
						bottom: 220rpx;
						// margin-top: 20rpx;
						padding: 20rpx 30rpx;
						width: 695rpx;
						// height: 288rpx;
						background: #fff;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);

						.tit {
							font-weight: 500;
							font-size: 36rpx;
							color: #3D3D3D;
						}

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

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

								.speed {
									margin-top: 18rpx;
									width: 226rpx;
									height: 22rpx;
									background: #ccc;
									border-radius: 16rpx 16rpx 16rpx 16rpx;

									.speeds {
										// width: 90%;
										height: 100%;
										background: #77B8FD;
										border-radius: 16rpx 0rpx 0rpx 16rpx;
									}
								}

								.mac {
									margin-top: 18rpx;
								}
							}

							.right {
								image {
									width: 244rpx;
									height: 196rpx;
									font-weight: 400;
									font-size: 24rpx;
									color: #3D3D3D;
								}
							}
						}
					}

					.bot {
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						bottom: 0;
						left: 0;
						width: 750rpx;
						height: 184rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08), 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
						border-radius: 0rpx 0rpx 0rpx 0rpx;

						.btn {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 338rpx;
							height: 90rpx;
							background: #4C97E7;
							border-radius: 54rpx 54rpx 54rpx 54rpx;

							font-weight: 500;
							font-size: 40rpx;
							color: #FFFFFF;
						}

						.btn1 {

							display: flex;
							justify-content: center;
							align-items: center;
							width: 338rpx;
							height: 90rpx;
							border-radius: 45rpx 45rpx 45rpx 45rpx;
							border: 2rpx solid #808080;
							font-weight: 500;
							font-size: 40rpx;
							color: #808080;
						}
					}
				}
			}

			.page4 {
				.bot_btn {
					padding-top: 20rpx;
					// margin-top: 20rpx;
					// padding: 26rpx 34rpx 48rpx 34rpx;
					// position: fixed;
					// display: flex;
					// flex-wrap: wrap;
					// justify-content: center;
					// bottom: 0;
					// width: 750rpx;
					height: 400rpx;
					background: #FFFFFF;
					// box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 30rpx;

					.time {
						// height: 88rpx;

						width: 100%;
						text-align: center;
						padding-bottom: 24rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
						border-bottom: 2rpx solid #EFEFEF;
					}

					.price {
						margin-top: 22rpx;
						width: 100%;
						text-align: center;
						font-weight: 500;
						font-size: 72rpx;
						color: #3D3D3D;

						span {
							font-size: 28rpx;
							font-weight: 500;
						}
					}

					.toinfo {
						// margin-top: 12rpx;
						width: 100%;
						text-align: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}

					.btn {
						margin-top: 34rpx;
						margin-left: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 600rpx;
						height: 90rpx;
						background: #4C97E7;
						border-radius: 54rpx 54rpx 54rpx 54rpx;
						font-weight: 500;
						font-size: 40rpx;
						color: #FFFFFF;
					}

				}
			}
		}

		.botmbox {
			position: fixed;
			bottom: 0;
			padding: 40rpx 32rpx;
			width: 750rpx;
			// height: 272rpx;
			background: #fff;
			border-radius: 50rpx 50rpx 0 0;

			.guangggao {
				margin-top: 34rpx;

				image {
					width: 686rpx;
					height: 160rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}

			.top_btn {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				width: 686rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;

				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;

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

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

				.cont {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					width: 112rpx;

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

					.text {
						margin-top: 12rpx;
						width: 112rpx;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
					}
				}
			}
		}

		.pops {
			padding: 46rpx 36rpx;
			position: fixed;
			top: 400rpx;
			left: 74rpx;
			width: 604rpx;
			// height: 606rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			z-index: 110;

			.close {
				position: absolute;
				left: 266rpx;
				bottom: -100rpx;

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

			.btn_box {
				margin-top: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn1 {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 216rpx;
					height: 90rpx;
					background: #989898;
					border-radius: 54rpx 54rpx 54rpx 54rpx;

					font-weight: 500;
					font-size: 40rpx;
					color: #FFFFFF;
				}

				.btn2 {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 268rpx;
					height: 90rpx;
					background: #4C97E7;
					border-radius: 54rpx 54rpx 54rpx 54rpx;

					font-weight: 500;
					font-size: 40rpx;
					color: #FFFFFF;
				}
			}

			.time {
				margin-top: 20rpx;
				text-align: center;
				font-weight: 500;
				font-size: 48rpx;
				color: #4C97E7;
			}

			.cont {
				height: 500rpx;
				overflow-x: hidden;
				overflow-y: auto;
			}

			.tit {
				// width: 604rpx;
				text-align: center;
				font-weight: 500;
				font-size: 36rpx;
				color: #3D3D3D;
				margin-bottom: 54rpx;
			}

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

				.left {
					display: flex;
					flex-wrap: wrap;
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;

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

					.speed {
						margin-top: 18rpx;
						width: 226rpx;
						height: 22rpx;
						background: #ccc;
						border-radius: 16rpx 16rpx 16rpx 16rpx;

						.speeds {
							// width: 90%;
							height: 100%;
							background: #77B8FD;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
						}
					}

					.NO {
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}

				.right {
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;

					image {
						width: 244rpx;
						height: 196rpx;
					}
				}
			}

			.text {
				margin-top: 36rpx;
				display: flex;
				flex-wrap: wrap;
				// align-items: center;

				.yuan {
					margin-top: 10rpx;
					margin-right: 12rpx;
					width: 20rpx;
					height: 20rpx;
					background: #000;
					border-radius: 50%;
				}

				span {
					width: 90%;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}

			.btn {
				margin-left: 40rpx;
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 470rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}

			.act1 {
				background-color: #ccc;
			}
		}

		.bottom_more {
			position: fixed;

			bottom: 0;
			width: 750rpx;
			height: 530rpx;
			background: linear-gradient(180deg, #EEF5FD 20%, rgba(255, 255, 255, 0)30%), #FFFFFF;
			border-radius: 30rpx;
			padding: 48rpx 36rpx;
			z-index: 30;

			.close {
				position: absolute;
				right: 32rpx;
				top: 32rpx;
				width: 32rpx;
				height: 32rpx;

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

			.tit {
				font-weight: 500;
				font-size: 44rpx;
				color: #3D3D3D;
			}

			.contbox {
				margin-top: 44rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.cont_li {
					margin-top: 22rpx;
					display: flex;
					flex-wrap: wrap;
					// align-items: center;
					justify-content: center;
					width: 158rpx;
					height: 124rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-right: 10rpx;

					image {
						margin-top: 18rpx;
						width: 46rpx;
						height: 46rpx;
					}

					.txt {
						width: 100%;
						margin-top: 10rpx;

						text-align: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
			}
		}
	}
</style>