<template>
	<view class="page">
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar" :style="{ height:navBarHeight+'px' }">
				<!-- <view>导航栏标题</view> -->
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uGUm5wKQAApGjgK8RIwK" mode="" @tap="topage(6)">
				</image>
				<view class="txts" v-if="gps.deptId==100">


				</view>
				<view class="txts" v-if="gps.deptId==101">

				</view>
			</view>
			<view class="" style="width: 100%;height: 20rpx;">

			</view>
			<view class="swiper_tips" @click="changetips" v-if="areaInfo.agreement&&!orderinfo.status">
				<view class="cont">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/u1G7wy5BEuNOY8QVyZcF" mode=""></image>
					<view class="scroll-container" ref="scrollContainer">
						<text class="scroll-text" ref="scrollText"
							:style="{ animation: `scroll-text ${duration}s linear infinite` }">{{ cleanedText() }}</text>
						<text class="scroll-text" ref="scrollTextClone"
							:style="{ animation: `scroll-text ${duration}s linear infinite` }">{{ cleanedText() }}</text>
						<!-- Duplicate the text for seamless scrolling -->
					</view>
				</view>
				<view class="iconfont icon-xiangyou1"></view>
			</view>
			<view class="order_tips" :class="{ collapsed: isCollapsed }" v-if="orderinfo.status" @click="starTime">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ukbZbyKgdFhB84ZAidyf" mode=""></image>
				<view class="order_tips_txt" :class="{ collapsed: isCollapsed }">
					您有正在骑行中的订单.....
				</view>
				<view class="iconfont icon-xiangyou1" v-if="!isCollapsed" @click="toggleOrderTips"></view>
				<view class="iconfont icon-xiangzuo" v-if="isCollapsed" @click="toggleOrderTips"></view>

			</view>
			<view class="swiper_tips" style="background: rgba(255, 197, 197, 0.7);" v-if="netonlines==false">
				<view class="cont">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uJ4bst6OYzPYD8iEtyCJ" mode=""></image>
					<view class="scroll-container" ref="scrollContainer">
						<text class="txt"
							style="font-weight: 400;font-size: 28rpx;color: #444444;">当前网络不可用，请检查你的网络设置</text>

						<!-- Duplicate the text for seamless scrolling -->
					</view>
				</view>
				<!-- <view class="iconfont icon-xiangyou1" style="color: #444444;"></view> -->
			</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" :polyline="mappolyline"
			@markertap="onMarkerTap" @tap="onMapTap" @regionchange="onMapRegionChange">

		</map>
		<view class="my-location" @click="setMapScale">
			<image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uoxanRjBrBrtcYwRGXKa"></image>
		</view>
		<view class="park" @click="toggleIconAndCallout">
			<image src="https://lxnapi.ccttiot.com/bike/img/static/u0I2B8G3YO7xUKtQKgio" 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/uBPKgx3YNA8nYbFSTCGA" 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" v-for="(item,index ) in freList" :key="index"
						@click.stop="changefree(item,index+1)" :class="freeListIndex==index+1?'act1':''">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uPtfF3jVLMVvEYpilzTk" 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="taploadmask(1)" 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_btns">

					<view class="infoss">
						<view class="left">
							预估金额：{{ parseFloat(money).toFixed(2) }}<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" style="background: #ccc; ">
									<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 class="changebiketip" @click="tochange()">
							换车骑行 <view class="iconfont icon-xiangyou1">

							</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="changebiketip" @click="tochange()">
							换车骑行 <view class="iconfont icon-xiangyou1">

							</view>
						</view>
						<view class="btn" style="	margin-right: 16rpx;"
							v-if="OrderdeviceInfos.status==3||OrderdeviceInfos.status==6" @click="taploadmask (2)">
							临时锁车
						</view>
						<view class="btn" style="	margin-right: 16rpx;" v-if="OrderdeviceInfos.status==4"
							@click=" taploadmask(3)">
							解锁用车
						</view>
						<view class="btn1" @click=" taploadmask(4)">
							还车
						</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)" v-if="areaInfo.deposit!=0">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uYfTj4a3NkSNY0AqYHFc" 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://lxnapi.ccttiot.com/bike/img/static/ucR0pDCg1vDshatphlUb" mode=""></image>
					<view class="text">
						用车指南
					</view>
				</view>
				<view class="cont" @click="topage(4)">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugCygoi3DXNWTLbC9vJ4" mode=""></image>
					<view class="text">
						编号开锁
					</view>
				</view>
				<view class="cont" @click="topage(5)">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uiUTdm3iNOnfP17OCLHu" mode=""></image>
					<view class="text">
						故障上报
					</view>
				</view>
				<view class="cont" @click="topage(9)">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uLHRXFuIPhMy0EDgPdVr" mode=""></image>
					<view class="text">
						客户服务
					</view>
				</view>
			</view>
			<view class="guangggao" v-if="gps.deptId==100">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/upVZa2QXC27BG90PukMQ" mode=""></image>
			</view>
			<view class="guangggao" v-if="gps.deptId==101" @click="gotowzysd()">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ut77aiicZLtFL5gnRplK" 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>
		<!-- 是否确认还车 -->
		<u-mask :show="isbackcar" :z-index='100' duration='0' />
		<view class="pops" @click="isbackcar = false" v-if="isbackcar">
			<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="isbackcar = false">
					取消
				</view>
				<view class="btn2" @click="backDevice()">
					确定
				</view>
			</view>

		</view>
		<u-mask :show="loadingmask" :z-index='100' duration='0' />
		<view class="pops" v-if="loadingmask" style="width: 500rpx;left:124rpx">
			<view class="tit" style="font-weight: 600;">
				{{loadingtxt}}
			</view>
			<!-- <u-loading size="50" mode="flower"></u-loading> -->
			<view class="loading_box">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uOQxwzp0Sj9l2WZ534zp" mode=""></image>
				<!-- <view class="loader">
					
				</view> -->
			</view>
		</view>
		<u-mask :show="maskloading" :z-index='100' duration='0' />
		<view class="maskload" v-if="maskloading">
			<view class="maskpage0" v-if="maskepage==0">
				<view class="top_info">
					<image :src="loadimg" mode=""></image>
					<view class="masktxt">
						{{toploadtxt}}
					</view>
				</view>
				<view class="masktips">
					{{tiptxt}}
				</view>
				<view class="tipsimg">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
				</view>
			</view>
			<!-- 不允许停车点外还车 -->
			<view class="maskpage1" v-if="maskepage==1" style="display: flex; justify-content: center;flex-wrap: wrap;">
				<view class="top_info">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ufkol3nMNJw4v1kHLFcH" mode=""></image>
					<view class="masktxt">
						不在停车点

					</view>
				</view>
				<view class="masktips" style="width: 70%;">
					无法在停车点外继续还车，请行驶至附近停车点
				</view>
				<view class="tipsimg">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uSntjowDWwILqVzdCj5L" mode=""
						style="height: 290rpx;"></image>
				</view>
				<view class="btn_box" style="justify-content: center;">
					<view class="btn3" @click="closemaske()  " style="width: 600rpx;">
						继续用车
					</view>

				</view>
			</view>
			<!-- 允许停车点外还车 -->
			<view class="maskpage1" v-if="maskepage==2">
				<view class="top_info">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ufkol3nMNJw4v1kHLFcH" mode=""></image>
					<view class="masktxt">
						不在停车点
					</view>
				</view>
				<view class="masktips" style="width: 100%;">
					未在停车点需支付管理费： <span
						style="color: coral;font-size: 42rpx;font-weight: 600;">{{areaInfo.vehicleManagementFee}}</span>元
					<!-- ，你可查看最近 停车点 -->
				</view>
				<view class="tipsimg">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uSntjowDWwILqVzdCj5L" mode=""
						style="height: 290rpx;"></image>
				</view>
				<view class="btn_box">
					<view class="btn4" @click="maskloading=false">
						继续用车
					</view>
					<view class="btn3" @click="payback()">
						继续还车
					</view>
				</view>
			</view>
			<!-- 提示设备离线 使用蓝牙连接 -->
			<view class="maskpage1" v-if="maskepage==3">
				<view class="top_info">
					<image :src="loadimg" mode=""></image>
					<view class="masktxt">
						设备离线无法解锁
					</view>
				</view>
				<view class="masktips" style="width: 100%;">
					需连接蓝牙才可解锁,请确保手机蓝牙打开并且授权小程序使用蓝牙权限
				</view>
				<view class="masktips" @click="totxtpage()"
					style="width: 100%;color: #64B6A8;text-decoration-line: underline;margin-top: 0; font-size: 28rpx;">
					点击查看教程
				</view>
				<view class="tipsimg">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
				</view>
				<view class="btn_box">

					<view class="btn4" @click="maskloading=false">
						换车解锁

					</view>
					<view class="btn3" @click="offopencar()">
						连接蓝牙
					</view>
				</view>
			</view>
			<view class="maskpage1" v-if="maskepage==4">
				<view class="top_info">
					<image :src="loadimg" mode=""></image>
					<view class="masktxt">
						{{buletxt}}
					</view>
				</view>
				<view class="masktips" style="width: 100%;">
					请确保与车辆的距离小于3米
				</view>
				<view class="tipsimg">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
				</view>
				<!-- <view class="btn_box">
					
					<view class="btn4" @click="maskloading=false">
						继续用车 
					
					</view>
					<view class="btn3" @click="Binddevice">
						连接蓝牙
					</view>
				</view> -->
			</view>
			<view class="maskpage1" v-if="maskepage==5">
				<view class="top_info">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uG3cbPgvPDzwlq6IHHxK" mode=""></image>
					<view class="masktxt" v-if="orderinfo.sn">
						蓝牙连接失败
					</view>
				</view>
				<view class="masktips" style="width: 100%;">
					请确保手机蓝牙已经打开
				</view>
				<view class="masktips" @click="totxtpage()"
					style="width: 100%;color: #64B6A8;text-decoration-line: underline;margin-top: 0; font-size: 28rpx;">
					点击查看教程
				</view>
				<view class="tipsimg">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
				</view>
				<view class="btn_box">

					<view class="btn4" @click="maskloading=false" v-if="orderinfo.sn">
						继续用车

					</view>
					<view class="btn4" @click="maskloading=false" v-else>
						返回

					</view>
					<view class="btn3" @click="tryagain() ">
						重新尝试
					</view>
				</view>
			</view>
			<view class="maskpage1" v-if="maskepage==6">
				<view class="top_info">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uG3cbPgvPDzwlq6IHHxK" mode=""></image>
					<view class="masktxt">
						您还未充值押金
					</view>
				</view>
				<view class="masktips" style="width: 100%;">
					需充值押金后方可骑行
				</view>
				<view class="tipsimg">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
				</view>
				<view class="btn_box">

					<view class="btn4" @click="maskloading=false">
						取消

					</view>
					<view class="btn3" @click="topage(1)">
						押金充值
					</view>
				</view>
			</view>
			<view class="maskpage1" v-if="maskepage==7">
				<view class="top_info">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uvAGhjbhjhSaxCru8dSN" mode=""
						style="width: 25rpx;"></image>
					<view class="masktxt">
						设备电量过低
					</view>
				</view>
				<view class="masktips" style="width: 100%;margin-top: 45rpx;">
					请使用附近其他车辆
				</view>
				<view class="tipsimg" style="margin-top: 90rpx;">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
				</view>
				<view class="btn_box" style="justify-content: center;">

					<view class="btn3" @click="maskloading=false" style="width: 600rpx;">
						换车解锁
					</view>
				</view>
			</view>
			<view class="maskpage1" v-if="maskepage==8">
				<view class="top_info">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uG3cbPgvPDzwlq6IHHxK" mode=""></image>
					<view class="masktxt">
						还车提示
					</view>
				</view>
				<view class="masktips" style="width: 100%;margin-top: 45rpx;">
					还车前需前往拍照确保车辆是否完好，
				</view>
				<view class="masktips" style="width: 100%;margin-top: 10rpx;">
					还车成功且审核通过 将退还押金
				</view>
				<view class="tipsimg" style="margin-top: 90rpx;">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
				</view>
				<view class="btn_box">

					<view class="btn4" @click="maskloading=false">
						返回

					</view>
					<view class="btn3" @click="tovadio()">
						去拍照
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_park" v-if="showparkinfo">
			<view class="tit">
				{{parkinfo.parkingName}}
			</view>
			<view class="tip">
				请根据手机引导将车辆有序停入停车点
			</view>
			<image class="close" src="https://lxnapi.ccttiot.com/bike/img/static/uVLkXSwvcYGioehd7dxn" mode=""
				@click="showparkinfo=false"></image>
			<image class="parkimg" :src="parkinfo.picture" mode="" v-if="parkinfo.picture!=null"></image>
			<view class="gobtn" @click="mapFun(parkinfo.latitude,parkinfo.longitude,parkinfo.parkingName)">
				导航去这里
			</view>
		</view>
		<view class="fixdivce" v-if="showdevice&&false">
			<view class="scrollable-content">
				<view class="divce_li" v-for="(item,index) in nearbyMarkers" :key="index" @click="tapsn(item.sn)">
					<view class="left_img">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uEW2Zm3sO8E5eqOf2wwl" mode=""></image>
					</view>
					<view class="right_cont">
						<view class="right_top">
							<view class="right_top_left">
								<image src=" https://lxnapi.ccttiot.com/bike/img/static/u9pggdTCxcZgUTNsEvXQ" mode="">
								</image>
								{{item.remainingPower}}%
							</view>
							<view class="right_top_right">
								可行驶{{item.remainingMileage}}km
							</view>
						</view>
						<view class="right_bot">
							SN:{{item.sn}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var xBlufi = require("@/utils/blufi/xBlufi.js");
	let _this = null;
	import QQMapWX from '@/common/qqmap-wx-jssdk.min.js'
	var qqmapsdk
	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,
				isbackcar: false,
				loadingmask: false,
				loadingtxt: '设备连接中...',

				maskloading: false,
				toploadtxt: "开锁中0%",
				loadimg: 'https://lxnapi.ccttiot.com/bike/img/static/uRxPPoVoqmnmng6wKlij',
				tiptxt: '请定点停放，规范用车',
				maskepage: 0,
				backgps: {},
				buletxt: '',

				buleclose: false,
				buleopen: false,
				buleback: false,
				bulepayback: false,
				bulebindcar: false,


				backfalse: 0,
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 0,

				mappolyline: [],
				qqmapsdk: null,
				index: 0,

				lastClickedMarkerId: null, // To store the ID of the last clicked marker
				defaultMarkerIconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
				clickedMarkerIconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uf2TwgtQ2sKJrUY3wTz4',
				ispaid: false,
				isInParkingArea: null,
				specificDeviceMarkerId: null,

				nearbyMarkers: [],
				duration: 0,
				showordertxt: true,
				orderwidth: 688,

				isCollapsed: false,
				isupload: false,
				showparkinfo: false,
				parkinfo: {},
				netonlines: false
			}
		},
		watch: {
			userId(newValue, oldValue) {
				// 处理userId变化的逻辑
				// console.log('userId 发生变化', newValue, oldValue);
				this.getisInOrder()
			},
			cleanedText() {
				this.$nextTick(() => {
					this.initScroll();
				});
			}

		},

		onLoad(e) {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];

			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()


			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2


			// #endif


			qqmapsdk = new QQMapWX({
				key: 'E7OBZ-KRKWW-5VKRH-36XXR-TB3NS-MUFHB' // 自己申请的key值
			});

			this.gps.deptId = uni.getStorageSync('deptId');

			if (e.q) {
				this.qParam = e.q


			}
			if (e.qParam) {
				this.qParam = e.qParam


			}
			if (e.isupload) {
				this.isupload = true
				setTimeout(() => {
					this.taploadmask(4)
				}, 1000)
			}
			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.timestare()
			this.backfalse = 0
			this.carstause = false
			// 检查蓝牙权限状态
			uni.getBluetoothAdapterState({
				success: function(res) {
					if (!res.available) {
						console.log('蓝牙不可用');
						return;
					}
					if (!res.discovering) {
						console.log('蓝牙正在搜索中');
						// 实际业务中可能需要根据需求处理
					}
					if (res.authorized) {
						console.log('已授权');
						// 已授权，可以进行蓝牙操作
					} else if (res.authorizing) {
						console.log('正在授权');
						// 正在请求授权
					} else {
						console.log('未授权');
						// 未授权，需要请求授权
						uni.authorize({
							scope: 'scope.bluetooth',
							success() {
								console.log('授权成功');
								// 授权成功，可以进行蓝牙操作
							},
							fail() {
								console.log('授权失败');
								// 用户拒绝授权或者授权失败
							}
						});
					}
				},
				fail: function(err) {
					console.log('获取蓝牙状态失败', err);
				}
			});

			if (this.seeDetail == false) {
				let that = this
				uni.getNetworkType({
					success: function(res) {
						console.log(res.networkType); // 输出网络类型，如 "wifi", "4g", "3g", "2g", "none"
						if (res.networkType == 'none') {
							that.netonlines = false


						} else {
							that.netonlines = true
							uni.getLocation({
								type: 'gcj02',
								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 = lb.latitude;
									that.longitude = lb.longitude;


									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()
									// 在这里处理获取位置信息失败的情况
								}

							})




							// console.log('有网络连接');\

						}
					}
				});




			} 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() {
			if (this.timers) {
				clearInterval(this.timers);
				this.timers = null;
				console.log('定时器已清除');
			}
			xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
			xBlufi.notifyStartDiscoverBle({
				'isStart': false
			});
		},
		computed: {


			userId() {
				return this.$store.getters.userId;
			},

			isMeal() {
				return this.$store.getters.isMeal;
			},

			showagre() {
				return this.$store.getters.showagre;
			},
		},
		methods: {
			mapFun() {
				console.log('点击了');
				uni.openLocation({
					latitude: parseFloat(this.parkinfo.latitude),
					//纬度 - 目的地/坐标点
					longitude: parseFloat(this.parkinfo.longitude),
					//经度 - 目的地/坐标点
					// name: "荆门市",
					address: this.parkinfo.parkingName
				});
			},
			tochange() {
				uni.navigateTo({
					url: '/page_user/changeCar'
				})
			},
			tovadio() {
				// this.seeDetail=true
				this.maskepage = 0
				this.maskloading = false
				uni.navigateTo({
					url: '/page_user/vadio_back'
				})
			},
			toggleOrderTips() {
				this.isCollapsed = !this.isCollapsed;
			},
			toggleTips() {
				if (this.showordertxt) {
					// 当内容显示时，缩小动画
					this.animateWidth(192); // 缩小到 192
				} else {
					// 当内容隐藏时，扩展动画
					this.animateWidth(686); // 扩展到 686
				}
				this.showordertxt = !this.showordertxt; // 切换显示状态
			},
			animateWidth(targetWidth) {
				const startWidth = this.orderwidth;
				const startTime = Date.now();
				const duration = 1500; // 动画时长 1.5s

				const animate = () => {
					const currentTime = Date.now();
					const elapsedTime = currentTime - startTime;

					if (elapsedTime >= duration) {
						this.orderwidth = targetWidth; // 动画结束时设置最终宽度
						return;
					}

					const progress = elapsedTime / duration;
					this.orderwidth = startWidth + (targetWidth - startWidth) * progress;

					setTimeout(animate, 16); // 使用 setTimeout 实现平滑更新，约每16ms更新一次
				};

				animate();
			},
			cleanedText() {
				return this.areaInfo.agreement.replace(/<\/?[^>]+(>|$)/g, "");
			},
			tryagain() {
				if (this.buleclose) {
					this.buleclose = false
					this.loackdevice()
				}
				if (this.buleopen) {
					this.buleopen = false
					this.unloackdevices()
				}
				if (this.buleback) {
					this.buleback = false
					this.cheackgps()
				}
				if (this.bulepayback) {
					this.bulepayback = false
					this.payback()
				}
				// bulepayback: false,
				// bulebindcar: false,
			},
			routePlanning(end_lat, end_long) {
				console.log('调用了');
				let that = this
				qqmapsdk.direction({
					mode: 'walking', // 驾车
					from: { // 起始位置(当前位置)坐标
						latitude: that.latitude,
						longitude: that.longitude
					},
					to: { // 目的地坐标
						latitude: end_lat,
						longitude: end_long,
					},
					// 目的地位置坐标
					success(res) {
						// console.log(res)
						var coors = res.result.routes[0].polyline
						var pl = [] // 点串数组
						// 坐标解压(返回的点串坐标，通过前向差分进行压缩)
						var kr = 1000000
						for (var i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr
						}
						// 将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							})
						}
						// console.log('点串数组', pl)
						// 设置polyline属性，将路线显示出来，将解压坐标第一个数据作为起点
						that.mappolyline = [{
							points: pl,
							// color: '#367EEF', // 线的填充色
							// width: 3, // 折现宽度
							// borderWidth: 2, // 边线宽度 
							// borderColor: '#5B98FD', // 边线颜色
							// lineCap: 'square', // 线端头
							// showArrow: true, // 沿线路方向显示箭头
							width: 8,
							arrowLine: true,
							color: '#00AF99',
							strokeWidth: 2,
							strokeColor: '#00AF99',
							fillColor: '#00AF99'
						}]
						// console.log(that.mappolyline, 'that.mappolylinethat.mappolyline');
					},
					fail(res) {
						console.log('resresresresresresres', res)
					}
				})
			},
			closemaske() {
				this.maskloading = false
				this.backfalse = 0
				this.isupload = false
			},

			onMapTap(event) {
				this.showdevice = false
				this.deviceIndex = 0
				// this.sn = ''
				this.type = 0
				this.freeInfo = {}
				this.freeListIndex = 0
				this.mappolyline = []
				// this.showparkinfo=false
				// this.parkinfo={}
				// this.lastClickedMarkerId=null
				// const {
				// 	latitude,
				// 	longitude
				// } = event.detail;
				// console.log('Map tapped at:', latitude, longitude);
				// this.close()
				// 在这里添加你的回调逻辑
			},
			tapsn(sn) {
				const markerExists = this.listData.some(item => item.sn == sn);

				if (markerExists) {
					this.sn = sn;
					this.deviceInfo(0);

					// Revert the last clicked marker to the default image and zIndex
					if (this.lastClickedMarkerId !== null) {
						this.markers = this.markers.map(marker => {
							if (marker.id == this.lastClickedMarkerId) {
								return {
									...marker,
									iconPath: this.defaultMarkerIconPath,
									width: 40,
									height: 28,
									// zIndex: 1 // Reset to default zIndex
								};
							}
							return marker;
						});
					}

					// Update the clicked marker's image and zIndex
					this.markers = this.markers.map(marker => {
						if (marker.id == sn) {
							return {
								...marker,
								iconPath: this.clickedMarkerIconPath,
								width: 50,
								height: 35
								// zIndex: 999 // Higher zIndex to bring it to the front
							};
						}
						return marker;
					});

					// Store the ID of the currently clicked marker
					this.lastClickedMarkerId = sn;


				} else {
					console.log('Marker ID does not exist in the list data');
				}
			},
			onMarkerTap(e) {

				this.showdevice = false;
				this.deviceIndex = 0;
				this.type = 0;
				this.freeInfo = {};
				this.freeListIndex = 0;
				this.parkinfo = {}
				this.showparkinfo = false
				if (e.type === 'markertap') {
					console.log('Clicked marker:', e.markerId);
					let parkmark = this.parkingList.some(item => item.parkingId == e.markerId);
					if (parkmark) {
						const matchingItem = this.parkingList.find(item => item.parkingId == e.markerId);
						this.showparkinfo = true
						this.parkinfo = matchingItem
						console.log(matchingItem, 'parkmarkparkmark');
						e.stopPropagation();
					}

					const markerExists = this.listData.some(item => item.sn == e.markerId);

					if (markerExists) {
						this.sn = e.markerId;
						this.deviceInfo(0);

						// Revert the last clicked marker to the default image and zIndex
						if (this.lastClickedMarkerId !== null) {
							this.markers = this.markers.map(marker => {
								if (marker.id === this.lastClickedMarkerId) {
									return {
										...marker,
										iconPath: this.defaultMarkerIconPath,
										width: 40,
										height: 28,
										// zIndex: 1 // Reset to default zIndex
									};
								}
								return marker;
							});
						}
						this.lastClickedMarkerId = e.markerId;
						// Update the clicked marker's image and zIndex
						this.markers = this.markers.map(marker => {
							if (marker.id === e.markerId) {
								return {
									...marker,
									iconPath: this.clickedMarkerIconPath,
									width: 50,
									height: 35
									// zIndex: 999 // Higher zIndex to bring it to the front
								};
							}
							return marker;
						});

						// Store the ID of the currently clicked marker


						// Get the latitude and longitude of the clicked marker
						const clickedMarker = this.markers.find(marker => marker.id === e.markerId);
						if (clickedMarker) {
							const {
								latitude,
								longitude
							} = clickedMarker;
							console.log(`Clicked marker location - Latitude: ${latitude}, Longitude: ${longitude}`);
							this.routePlanning(latitude, longitude)
							// Find nearby markers
							// this.getNearbyMarkers(latitude, longitude);
						}

						// console.log(this.markers, 'Updated markers');
					} else {
						console.log('Marker ID does not exist in the list data');
					}

					// Prevent event bubbling
					e.stopPropagation();
				}
			},
			getNearbyMarkers(clickedLat, clickedLon) {
				const nearbyMarkers = this.listData.filter(item => {
					if (item.latitude && item.longitude) {
						const distance = this.haversineDistance(
							parseFloat(clickedLat),
							parseFloat(clickedLon),
							parseFloat(item.latitude),
							parseFloat(item.longitude)
						);
						return distance <= 15;
					}
					return false;
				});
				this.nearbyMarkers = nearbyMarkers
				console.log('Nearby markers within 15 meters:', nearbyMarkers);
			},
			haversineDistance(lat1, lon1, lat2, lon2) {
				const R = 6371e3; // Earth radius in meters
				const toRad = angle => angle * Math.PI / 180;
				const dLat = toRad(lat2 - lat1);
				const dLon = toRad(lon2 - lon1);
				const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				return R * c;
			},

			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 newDeviceMarkers = this.listData.map(item => ({
								id: parseFloat(item.sn),
								latitude: parseFloat(item.latitude),
								longitude: parseFloat(item.longitude),
								width: 40,
								height: 28,
								iconPath: this.defaultMarkerIconPath,
								isDeviceMarker: true // 区分为设备标记
							}));

							// 保留停车标记和特定设备标记
							const preservedMarkers = this.markers.filter(marker => marker.isParkingMarker || marker
								.id === parseFloat(this.OrderdeviceInfos.sn));

							// 更新markers数组，避免删除已识别的重要标记
							let updatedMarkers = [...newDeviceMarkers, ...preservedMarkers];

							// 确保点击的标记保持其图标
							if (this.lastClickedMarkerId != null) {
								updatedMarkers = updatedMarkers.map(marker => {
									if (marker.id === this.lastClickedMarkerId) {
										return {
											...marker,
											width: 50,
											height: 35,
											iconPath: this.clickedMarkerIconPath
										};
									}
									return marker;
								});
							}

							// 使用this.$set触发Vue的响应式更新
							this.$set(this, 'markers', updatedMarkers);

							this.oldMarkers = [...this.markers];
						}
					}).catch(error => {
						console.error("Error fetching device data:", error);
					});
				}
			},

			timestare() {
				this.timers = setInterval(() => {
					this.getmarks();

					if (this.orderinfo.sn) {
						this.$u.get('/app/device/info?sn=' + this.orderinfo.sn).then((res) => {
							if (res.code === 200) {
								this.mac = this.OrderdeviceInfos.mac;
								// this.OrderdeviceInfos.onlineStatus = '1'
								if (this.OrderdeviceInfos.onlineStatus !== res.data.onlineStatus) {
									this.OrderdeviceInfos = res.data;
								}

								if (this.OrderdeviceInfos.status !== res.data.status) {
									this.getisInOrder();
								}

								const sn = parseFloat(res.data.sn);
								const latitude = parseFloat(res.data.latitude);
								const longitude = parseFloat(res.data.longitude);

								// 查找现有的marker
								let markerIndex = this.markers.findIndex(marker => marker.id === sn);

								if (markerIndex !== -1) {
									// 更新已有的marker
									this.markers[markerIndex].latitude = latitude;
									this.markers[markerIndex].longitude = longitude;
								} else {
									// 添加新的marker
									const specificDeviceMarker = {
										id: sn,
										latitude: latitude,
										longitude: longitude,
										width: 5,
										height: 5,
										iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u4D2g8B76trqZLhIiNWN'
									};
									this.markers.push(specificDeviceMarker);
								}

								// 强制更新 markers 数据
								this.$set(this, 'markers', [...this.markers]);

							} else {
								// 处理接口返回错误的情况
							}
						}).catch(error => {
							console.error("Error fetching specific device data:", error);
						});
					} else {
						// 查找并移除对应的marker
						const markerIndex = this.markers.findIndex(marker => marker.id === parseFloat(this
							.OrderdeviceInfos.sn));
						if (markerIndex !== -1) {
							this.markers.splice(markerIndex, 1);
							// 强制更新 markers 数据
							this.$set(this, 'markers', [...this.markers]);
						}
					}
				}, 3000); // 每3秒执行一次
			},
			toggleIconAndCallout() {
				this.showIconAndCallout = !this.showIconAndCallout;
				this.markers = this.markers.map(marker => {
					if (this.showIconAndCallout) {
						// Show callout
						if (marker.isParkingMarker) {
							marker.callout.display = 'ALWAYS';
							marker.isCalloutVisible = true;
						}
					} else {
						// Hide callout
						if (marker.isParkingMarker) {
							marker.callout.display = 'BYCLICK';
							marker.isCalloutVisible = false;
						}
					}
					return marker;
				});
				// Force update markers array
				this.$set(this, 'markers', [...this.markers]);
			},

			getParking() {
				// Send request to get data
				let data = {
					areaId: this.areaInfo.areaId
				};
				this.$u.get('/app/parking/list?', data).then((res) => {
					if (res.code === 200) {
						// Process returned data
						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);

						// Add processed data to this.polyline
						this.polyline = this.polyline.concat(polylines2);
						this.polyline = this.polyline.concat(polylines1);
						this.polyline = this.polyline.concat(polylines);
						this.parkingList = res.rows;

						// Set parking markers and distinguish them
						const newParkingMarkers = res.rows.map(item => ({
							id: parseFloat(item.parkingId),
							latitude: parseFloat(item.latitude),
							longitude: parseFloat(item.longitude),
							width: 20,
							height: 29,
							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: 'BYCLICK' // Initially do not show callout
							},
							isCalloutVisible: false, // Initially do not show callout
							isParkingMarker: true // Distinguish as parking marker
						}));

						// Preserve device markers and specific device marker
						const preservedMarkers = this.markers.filter(marker => marker.isDeviceMarker || marker
							.id === this.specificDeviceMarkerId);

						// Merge parking markers and device markers
						this.markers = [...newParkingMarkers, ...preservedMarkers];
						this.$set(this, 'markers', [...this.markers]);
					}
				}).catch(error => {
					console.error("Error fetching parking data:", error);
				});
			},


			totxtpage() {
				this.seeDetail = true
				uni.navigateTo({
					url: '/page_user/bulelink'
				})
			},
			offopencar() {
				this.bulebindcar = true
				this.Binddevice()
			},
			bluesub1() {
				// uni.showLoading({});

				let data = {
					userId: this.userId,
					sn: this.sn,
					ruleId: this.freeInfo.ruleId,
					mark: "确认开锁",
					type: '1',
					isBluetooth: true,
					lon: this.backgps.longitude,
					lat: this.backgps.latitude

				};

				if (this.carstause) {
					this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
						// uni.hideLoading();
						this.seeDetail = false;
						if (res.code === 200) {
							this.opencar()
							this.backfalse = 0
							this.loadimg = 'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
							this.toploadtxt = '开锁成功';
							this.buletxt = '开锁成功';
							this.lastClickedMarkerId = null
							this.mappolyline = []
							setTimeout(() => {
								this.maskloading = false;
								this.getisInOrder();
							}, 800);
						} else {
							if (res.msg == '您还未充值押金，请先充值押金') {
								// this.close();
								// this.maskloading = false;
								this.maskepage = 6
								this.showYjTip = true;
							} else if (res.msg == '【扫码/编号开锁骑行】发送开锁命令失败') {
								this.maskepage = 3
							} else if (res.msg == '低电量不得骑行') {
								this.maskepage = 7
								// this.offopencar()
							} else {
								// uni.showToast({
								// 	title: res.msg,
								// 	icon: 'none',
								// 	duration: 2000
								// });
								this.toploadtxt = '开锁失败';
								setTimeout(() => {
									this.maskloading = false;
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									});
								}, 800);
							}
						}
					});
				} else {
					this.bulebindcar = true
					this.Binddevice()
				}

			},
			taploadmask(num) {
				this.maskepage = 0
				this.loadimg = 'https://lxnapi.ccttiot.com/bike/img/static/uRxPPoVoqmnmng6wKlij'
				if (num == 1) {

					if (!this.checkBeforeUnlock()) {
						return;
					}

					if (this.showxy) {
						this.maskloading = true;
						let percentage = 0;
						const interval = setInterval(() => {
							if (percentage < 98) {
								percentage += 2; // 每次增加的百分比，可以调整
								this.toploadtxt = `开锁中${percentage}%`;
							} else {
								clearInterval(interval);
								this.toploadtxt = "开锁中98%";
							}
						}, 40); // 每40毫秒更新一次，可以调整
						setTimeout(() => {
							this.sub1();
						}, 2100);
					} else {
						uni.showToast({
							title: '请勾选协议',
							icon: 'none',
							duration: 2000
						});
					}
				} else if (num == 2) {
					//临时锁车
					this.maskloading = true;
					let percentage = 0;
					const interval = setInterval(() => {
						if (percentage < 98) {
							percentage += 2; // 每次增加的百分比，可以调整
							this.toploadtxt = `锁车中${percentage}%`;
						} else {
							console.log('调用了');
							clearInterval(interval);
							this.toploadtxt = "锁车中98%";
						}
					}, 40); // 每40毫秒更新一次，可以调整
					setTimeout(() => {
						this.loackdevice();
					}, 2100);

				} else if (num == 3) {
					//解锁用车
					this.maskloading = true;
					let percentage = 0;
					const interval = setInterval(() => {
						if (percentage < 98) {
							percentage += 2; // 每次增加的百分比，可以调整
							this.toploadtxt = `开锁中${percentage}%`;
						} else {
							console.log('调用了');
							clearInterval(interval);
							this.toploadtxt = "开锁中98%";
						}
					}, 40); // 每40毫秒更新一次，可以调整
					setTimeout(() => {

						this.unloackdevices();
					}, 2100);

				} else if (num == 4) {


					if (this.areaInfo.returnVerify == 1 && this.isupload == false) {
						this.maskloading = true
						this.maskepage = 8
					} else {
						this.isupload = false
						// 还车校验
						this.maskloading = true;
						let percentage = 0;
						const interval = setInterval(() => {
							if (percentage < 98) {
								percentage += 2; // 每次增加的百分比，可以调整
								this.toploadtxt = `还车地点校验中${percentage}%`;
							} else {
								clearInterval(interval);
								this.toploadtxt = "还车地点校验中98%";
							}
						}, 40); // 每40毫秒更新一次，可以调整
						setTimeout(() => {
							this.cheackgps();
						}, 2100);

					}

				}

			},

			Binddevice() {
				uni.getBluetoothAdapterState({
					success: function(res) {
						console.log('蓝牙状态：', res.available)
					},
					fail: function(res) {
						console.log('获取蓝牙状态失败')
					}
				})
				this.devicesList = []
				this.maskepage = 4
				this.buletxt = '蓝牙连接中'
				// 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(() => {
						// uni.hideLoading()
						if (this.devicesList.length == 0) {
							// uni.showToast({
							// 	title: '暂无发现对应设备,请靠近设备',
							// 	icon: 'none',
							// 	duration: 1500
							// });
							this.maskepage = 5
						} else {
							let uniqueDevicesList = Array.from(new Set(this.devicesList));

							// 将去重后的数组重新赋值给 this.devicesList
							this.devicesList = uniqueDevicesList;
							console.log(this.devicesList, 'this.devicesListthis.devicesList');
							let istrue = false
							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;
									istrue = true
									this.createBLEConnection(device)

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

								}
							});
							setTimeout(() => {
								if (!istrue) {
									this.buletxt = '蓝牙连接失败'


									setTimeout(() => {
										this.maskepage = 5
									}, 500)
								}

							}, 500)
						}


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

					// this.status = true
				}, 5000)

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


						let data = {
							latitude: lb.latitude,
							longitude: lb.longitude,
							areaId: that.areaInfo.areaId,
							sn: that.OrderdeviceInfos.sn
						}
						that.backgps.latitude = lb.latitude
						that.backgps.longitude = lb.longitude
						that.$u.get('/appVerify/isInParkingArea?', data).then((res) => {

							if (res.code == 200) {
								// let parkingReturn = false
								// let isInParkingArea = false
								let parkingReturn = res.data
									.parkingReturn /** 强制停车点还车 true:开启，false:关闭*/
								let isInParkingArea = res.data.isInParkingArea /** 是否在停车区内*/
								that.isInParkingArea = res.data
									.isInParkingArea
								if (parkingReturn) {
									// 不可以在停车点外还车
									if (isInParkingArea) {
										// 在停车点内
										if (that.OrderdeviceInfos.onlineStatus == 1 && that.backfalse <
											1) {
											// 设备未离线
											that.backDevice()
										} else if (that.OrderdeviceInfos.onlineStatus == 0 || that
											.backfalse >= 1) {
											if (that.carstause) {

												that.$u.post(
													'/appVerify/device/return?returnType=1&orderNo=' +
													that.orderinfo.orderNo + '&isBluetooth=true' +
													'&lon=' + that.backgps.longitude + '&lat=' +
													that.backgps.latitude + '&isInParkingArea=' +
													that.isInParkingArea).then((
													res) => {

													if (res.code === 200) {
														that.reboot()
														that.backfalse = 0
														that.isbackdevice = false
														// that.close()
														// that.getisInOrder()
														that.loadimg =
															'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
														that.toploadtxt = '还车成功！';
														setTimeout(() => {
															that.maskloading = false;
															that.getisInOrder();
														}, 1000);

													} else {
														that.toploadtxt = '还车失败';
														setTimeout(() => {
															that.maskloading = false;
															uni.showToast({
																title: res.msg,
																icon: 'none',
																duration: 2000
															});
														}, 1000);

													}
												})
											} else {
												that.buleback = true
												that.Binddevice()

											}
										}
									} else {
										that.maskepage = 1
									}
								} else {
									if (isInParkingArea) {
										// 在停车点内
										if (that.OrderdeviceInfos.onlineStatus == 1 && that.backfalse <
											1) {
											// 设备未离线
											that.backDevice()
										} else if (that.OrderdeviceInfos.onlineStatus == 0 || that
											.backfalse >= 1) {
											if (that.carstause) {

												that.$u.post(
													'/appVerify/device/return?returnType=1&orderNo=' +
													that.orderinfo
													.orderNo + '&isBluetooth=true' + '&lon=' + that
													.backgps.longitude + '&lat=' + that.backgps
													.latitude + '&isInParkingArea=' + that
													.isInParkingArea).then((
													res) => {

													if (res.code === 200) {
														that.reboot()
														that.backfalse = 0
														that.isbackdevice = false
														that.loadimg =
															'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
														that.toploadtxt = '还车成功！';
														setTimeout(() => {
															that.maskloading = false;
															that.getisInOrder();
														}, 1000);

														// that.close()
														// that.getisInOrder()

													} else {
														that.toploadtxt = '还车失败';
														setTimeout(() => {
															that.maskloading = false;
															uni.showToast({
																title: res.msg,
																icon: 'none',
																duration: 2000
															});
														}, 1000);
													}
												})
											} else {
												that.buleback = true
												that.Binddevice()
												// that.isbackdevice = false
												// that.isnoline = true
											}
										}
									} else {
										that.maskepage = 2
										// 	if(that.OrderdeviceInfos.onlineStatus == 1){
										// 		// 设备未离线
										// 		that.maskepage=2
										// 	}else{
										// 	// 	if (that.carstause) {

										// 	// 		that.$u.post('/appVerify/device/return?returnType=1&orderNo=' + that.orderinfo
										// 	// 			.orderNo + '&isBluetooth=true' + '&lon=' + that.backgps.longitude + '&lat=' + that.backgps
										// 	// 			.latitude).then((
										// 	// 			res) => {

										// 	// 			if (res.code === 200) {
										// 	// 				that.reboot()
										// 	// 				that.isbackdevice = false

										// 	// 				that.loadimg = 'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
										// 	// 				that.toploadtxt = '还车成功！';
										// 	// 				setTimeout(() => {
										// 	// 					that.maskloading = false;
										// 	// 					that.getisInOrder();
										// 	// 				}, 1000);
										// 	// 				// that.close()
										// 	// 				// that.getisInOrder()

										// 	// 			} else {
										// 	// 				uni.showToast({
										// 	// 					title: res.msg,
										// 	// 					icon: 'none',
										// 	// 					duration: 2000
										// 	// 				});
										// 	// 			}
										// 	// 		})
										// 	// 	} else {
										// 	// 		that.maskepage=3
										// 	// 		// that.isbackdevice = false
										// 	// 		// that.isnoline = true
										// 	// 	}
										// 	// }

									}
								}
							} else {
								that.toploadtxt = '校验失败';
								setTimeout(() => {
									that.maskloading = false;
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									});
								}, 1000);
								// uni.showToast({
								// 	title: res.msg,
								// 	icon: 'none',
								// 	duration: 2000
								// });
							}
						})



					},
					fail: function(error) {

					}

				})
			},
			payback() {

				if (this.OrderdeviceInfos.onlineStatus == 1 && this.backfalse < 1) {
					// 设备未离线
					console.log('在线还车');
					this.maskepage = 0
					this.maskloading = true;
					let percentage = 0;
					const interval = setInterval(() => {
						if (percentage < 98) {
							percentage += 2; // 每次增加的百分比，可以调整
							this.toploadtxt = `还车中${percentage}%`;
						} else {
							clearInterval(interval);
							this.toploadtxt = "还车中98%";
						}
					}, 40); // 每40毫秒更新一次，可以调整
					setTimeout(() => {
						this.$u.post('/appVerify/device/return?returnType=1&orderNo=' + this.orderinfo.orderNo +
							'&isInParkingArea=' + this.isInParkingArea).then((
							res) => {
							// res.code=500
							if (res.code === 200) {
								this.loadimg =
									'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
								this.toploadtxt = '还车成功!';
								this.backfalse = 0
								setTimeout(() => {
									this.close()
									this.maskloading = false;
									this.getisInOrder();

								}, 800);

							} else {

								this.backfalse = this.backfalse + 1
								this.payback()
								// this.cheackgps()
								// this.toploadtxt = '还车失败';
								// setTimeout(() => {
								// 	this.maskloading = false;
								// 	uni.showToast({
								// 		title: res.msg,
								// 		icon: 'none',
								// 		duration: 2000
								// 	});
								// }, 1000);
							}
						})
					}, 2100);

				} else if (this.OrderdeviceInfos.onlineStatus == 0 || this.backfalse >= 1) {
					console.log('离线还车');
					this.maskepage = 0
					this.maskloading = true;
					let percentage = 0;
					const interval = setInterval(() => {
						if (percentage < 98) {
							percentage += 2; // 每次增加的百分比，可以调整
							this.toploadtxt = `还车中${percentage}%`;
						} else {
							clearInterval(interval);
							this.toploadtxt = "还车中98%";
						}
					}, 20); // 每40毫秒更新一次，可以调整
					setTimeout(() => {
						if (this.carstause == true) {

							this.$u.post('/appVerify/device/return?returnType=1&orderNo=' + this.orderinfo
								.orderNo + '&isBluetooth=true' + '&lon=' + this.backgps.longitude +
								'&lat=' + this.backgps
								.latitude + '&isInParkingArea=' + this.isInParkingArea).then((
								res) => {

								if (res.code === 200) {
									this.reboot()
									this.backfalse = 0
									this.isbackdevice = false
									this.loadimg =
										'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
									this.toploadtxt = '还车成功！';
									this.buletxt = '还车成功！';
									setTimeout(() => {
										this.maskloading = false;
										this.getisInOrder();
									}, 1000);

									// that.close()
									// that.getisInOrder()

								} else {
									this.toploadtxt = '还车失败！';
									this.buletxt = '还车失败！';
									setTimeout(() => {
										this.maskloading = false;
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										});
										this.getisInOrder();
									}, 1000);
									// uni.showToast({
									// 	title: res.msg,
									// 	icon: 'none',
									// 	duration: 2000
									// });
								}
							})
						} else {
							this.bulepayback = true
							this.Binddevice()
							// this.maskepage = 3
							// that.isbackdevice = false
							// that.isnoline = true
						}
					}, 1100);

				}

			},
			backDevice() {

				this.$u.post('/appVerify/device/return?returnType=1&orderNo=' + this.orderinfo.orderNo +
					'&isInParkingArea=' + this.isInParkingArea).then((
					res) => {

					if (res.code === 200) {
						this.loadimg = 'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
						this.toploadtxt = '还车成功!';
						this.backfalse = 0
						setTimeout(() => {
							this.close()
							this.maskloading = false;
							this.getisInOrder();

						}, 800);

					} else {

						this.backfalse = this.backfalse + 1
						this.cheackgps()
						// this.toploadtxt = '还车失败';
						// setTimeout(() => {
						// 	this.maskloading = false;
						// 	uni.showToast({
						// 		title: res.msg,
						// 		icon: 'none',
						// 		duration: 2000
						// 	});
						// }, 1000);
					}
				})

			},

			// 新增的检查函数
			checkBeforeUnlock() {
				if (!this.freeInfo.ruleId) {
					uni.hideLoading();
					uni.showToast({
						title: '请选择套餐',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (!this.showxy) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none',
						duration: 2000
					});
					return false;
				}

				if (this.areaInfo.authentication == 1 && this.userinfo.isAuthentication == 0) {
					uni.hideLoading();
					this.maskloading = false;
					this.seeDetail = true;
					uni.navigateTo({
						url: "/page_user/idcard_test"
					});
					return false;
				}



				return true;
			},

			// 确认开锁
			sub1() {
				// uni.showLoading({});

				let data = {
					userId: this.userId,
					sn: this.sn,
					ruleId: this.freeInfo.ruleId,
					mark: "确认开锁",
					type: '1'
				};

				this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
					// uni.hideLoading();
					this.seeDetail = false;
					// res.code=500
					// res.msg='低电量不得骑行'
					if (res.code === 200) {
						this.loadimg = 'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
						this.toploadtxt = '开锁成功';
						this.lastClickedMarkerId = null
						this.mappolyline = []
						setTimeout(() => {
							this.maskloading = false;
							this.getisInOrder();
						}, 800);
					} else {
						if (res.msg == '您还未充值押金，请先充值押金') {
							// this.close();
							// this.maskloading = false;
							this.maskepage = 6
							this.showYjTip = true;
						} else if (res.msg == '【扫码/编号开锁骑行】发送开锁命令失败') {
							// this.maskepage=3 低电量不得骑行
							this.offopencar()
						} else if (res.msg == '低电量不得骑行') {
							this.maskepage = 7
							// this.offopencar()
						} else {

							this.toploadtxt = '开锁失败';
							setTimeout(() => {
								this.maskloading = false;
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}, 800);
						}
					}
				});
			},

			backDevicecar() {
				this.isbackcar = true
			},
			gotowzysd() {
				uni.navigateToMiniProgram({
					appId: 'wxd7c0bb79b9d616c3', //目标小程序appid
					path: 'pages/tabbar/index/index', //需要打开的目标路径
					// extraData: {
					// 	'data1': 'test'
					// },
					// envVersion: 'release', //小程序版本：develop（开发版），trial（体验版），release（正式版）
					success(res) {
						// 打开成功
					}
				})
			},


			onMapRegionChange(event) {
				// console.log('regionchange', event)
				if (event.detail.type == 'end') {
					// this.getCenterLanLat()
				}
				// 你可以在这里执行你需要的操作
			},
			getCenterLanLat() {
				let that = this
				uni.createMapContext("map", this).getCenterLocation({
					type: 'gcj02',
					success: (res) => {
						console.log("当前地图中心的经纬度", res)
						that.gps.latitude = res.latitude;
						that.gps.longitude = res.longitude;
						that.getAreas()
						//其他逻辑
					},
					fail: (err) => {}
				})
			},
			getAreas() {

				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()




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

			keepback() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(lb) {


						let data = {
							latitude: lb.latitude,
							longitude: lb.longitude,
							areaId: that.areaInfo.areaId
						}
						if (that.carstause) {

							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.reboot()
									that.isbackdevice = false
									that.close()
									that.getisInOrder()

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

							that.isbackdevice = false
							that.isnoline = true
						}

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

				})


			},


			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 && this.backfalse < 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.backfalse = 0
							this.loadimg =
								'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
							this.toploadtxt = '开锁成功';
							this.buleopen = false
							setTimeout(() => {
								this.maskloading = false;
								this.getisInOrder();
							}, 1000);

						} else {
							this.backfalse = this.backfalse + 1
							this.unloackdevices()
							// this.toploadtxt = '开锁失败';
							// setTimeout(() => {
							// 	this.maskloading = false;
							// }, 1000);
							// if (res.msg == '10500-----') {

							// 	uni.showToast({
							// 		title: '系统异常，请重新尝试',
							// 		icon: 'none',
							// 		duration: 2000
							// 	});
							// } else {

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

						}
					})
				} else if (this.OrderdeviceInfos.onlineStatus == 0 || this.backfalse >= 1) {
					if (this.carstause) {


						let that = this
						uni.getLocation({
							type: 'gcj02',
							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.opencar()
										that.buleopen = false
										// console.log('发送了离线开锁请求');
										// that.getisInOrder()
										that.loadimg =
											'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
										that.buletxt = '解锁成功';
										that.toploadtxt = '解锁成功'
										that.backfalse = 0
										setTimeout(() => {
											that.maskloading = false;
											that.getisInOrder();
										}, 1000);
									} else {

										that.toploadtxt = '开锁失败'
										that.buletxt = '开锁失败';
										setTimeout(() => {
											that.maskloading = false;
											uni.showToast({
												title: res.msg,
												icon: 'none',
												duration: 2000
											});
										}, 1000);
										// 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()
								// 在这里处理获取位置信息失败的情况
							}

						})

					} else {
						// this.maskepage = 3
						this.buleopen = true
						this.Binddevice()
					}

				}

			},
			// ；临时锁车
			loackdevice() {
				if (this.OrderdeviceInfos.onlineStatus == 1 && this.backfalse < 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()
							this.backfalse = 0
							this.loadimg =
								'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
							this.toploadtxt = '锁车成功';
							this.buleclose = false
							setTimeout(() => {
								this.maskloading = false;
								this.getisInOrder();
							}, 1000);
						} else {
							this.backfalse = this.backfalse + 1
							this.loackdevice()
							// this.toploadtxt = '锁车失败';
							// setTimeout(() => {
							// 	this.maskloading = false;
							// 	uni.showToast({
							// 		title: res.msg,
							// 		icon: 'none',
							// 		duration: 2000
							// 	});
							// }, 1000);

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

						}
					})
				} else if (this.OrderdeviceInfos.onlineStatus == 0 || this.backfalse >= 1) {
					if (this.carstause) {


						let that = this
						uni.getLocation({
							type: 'gcj02',
							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.closecar()
										// console.log('发送了离线锁车请求');
										// that.getisInOrder()
										that.buleclose = false
										that.backfalse = 0
										that.loadimg =
											'https://lxnapi.ccttiot.com/bike/img/static/ukD735zCS1yQXw2aGun8';
										that.buletxt = '锁车成功';
										that.toploadtxt = '锁车成功'
										setTimeout(() => {
											that.maskloading = false;
											that.getisInOrder();
										}, 1000);
									} else {
										that.toploadtxt = '锁车失败'
										that.buletxt = '锁车失败';
										setTimeout(() => {
											that.maskloading = false;
											uni.showToast({
												title: res.msg,
												icon: 'none',
												duration: 2000
											});
										}, 1000);


										// 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()
								// 在这里处理获取位置信息失败的情况
							}

						})
					} else {
						this.buleclose = true
						this.Binddevice()
						// this.maskepage = 3
					}

				}

			},



			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();


							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
								// })
							}
						}
						if (options.result == false) {
							// this.loadingmask=false
							this.carstause = false
							if (this.maskepage == 4) {
								this.buletxt = '设备连接失败'


								setTimeout(() => {
									this.maskepage = 5
								}, 800)
							}

							// 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_CUSTON_DATA:

						// this.ver_data = this.parseCustomData(options.data)
						if (options.data) {
							this.carstause = true


							if (this.maskloading && this.maskepage == 4) {
								// setTimeout(() => {
								// 	this.maskloading = false
								// }, 700)
								if (this.buleback == false && this.buleopen == false && this.buleclose == false && this
									.bulebindcar == false) {
									if (this.buletxt == '蓝牙连接中') {
										this.buletxt = '蓝牙连接成功！'
									}

								}
								if (this.buleclose) {
									this.buleclose = false
									this.loackdevice()
								}
								if (this.buleopen) {
									this.buleopen = false
									this.unloackdevices()
								}
								if (this.buleback) {
									this.buleback = false
									this.cheackgps()
								}
								if (this.bulepayback) {
									this.bulepayback = false
									this.payback()
								}
								if (this.bulebindcar) {
									this.bulebindcar = false
									this.bluesub1()
								}

							}






						} else {
							this.carstause = false
							if (this.maskepage == 4) {
								this.buletxt = '设备连接失败'


								setTimeout(() => {
									this.maskepage = 5
								}, 800)
							}
						}
						console.log("1收到设备发来的自定义数据结果：", options.data);
						break;
					case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: {
						console.log('状态', options.result)
						if (options.result == false) {
							this.carstause = false
							if (this.maskepage == 4) {
								this.buletxt = '设备连接失败'


								setTimeout(() => {
									this.maskepage = 5
								}, 800)
							}
							// 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_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) {
				// this.loadingmask = true

				// 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: '连接蓝牙设备中...'
				// 		});
				// 	}
				// }
			},


			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 = '1'
						this.mac = this.OrderdeviceInfos.mac
						if (this.OrderdeviceInfos.onlineStatus == 0 && this.orderinfo.status != 3) {

							if (this.carstause == false) {

								// this.isnoline = true
							}

						}


					} 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 = new Date(this.orderinfo.returnTime).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'
				})
			},

			// 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) {
				console.log('调用了');
				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
			},
			// 无套餐取消预约

			// 套餐取消预约


			// 套餐直接开锁
			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
							});
						}
					})
				}

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

			},

			// 取消预约支付
			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() {
				if (this.ispaid == false) {
					this.ispaid = true
					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) {
									that.ispaid = false
									console.log('支付成功');
									// 支付成功逻辑
									clearInterval(that.timer)
									that.orderinfo = {}
									that.showdevice = false
									that.deviceIndex = 0
									that.getisInOrder()

								},
								fail(err) {
									that.ispaid = false
									// 支付失败逻辑
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						} else {
							that.ispaid = false
							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
					});
				}

			},


			// 开锁购买套餐
			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.showLoading({

				})
				// uni.showToast({
				// 	title: '响铃请求发送成功',
				// 	icon: 'none',
				// 	duration: 2000
				// });
				this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
					if (res.code === 200) {
						uni.hideLoading()
					}
				})
			},

			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()
							}, )

						}
					});


				}
			},
			getSNFromQRCode(url) {
				// 解码URL

				let decodedUrl = decodeURIComponent(url);

				// 使用正则表达式提取sn参数
				let snMatch = decodedUrl.match(/[\?&]sn=([^&#]*)/);
				if (snMatch) {
					return snMatch[1];
				} else {
					return null;
				}
			},
			getArea() {
				this.showmap = false
				// 发送请求获取数据
				this.areaInfo = {}
				console.log(this.qParam, 'qParamqParamqParamqParam');
				this.polyline = []
				// if(this.qParam){

				// }
				if (this.qParam != '' && this.qParam != null) {
					this.sn = this.getSNFromQRCode(this.qParam);
					if (this.sn != 0 && this.sn != '' && this.sn != null) {
						this.gps.sn = this.sn
					}
				}
				if (this.sn != '') {
					this.gps.sn = this.sn
				}
				setTimeout(() => {
					this.setMapScale()
				}, 300)

				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
						setTimeout(() => {
							let abb = this.cleanedText()
							console.log(abb.length, 'cleanedTextcleanedTextcleanedText');

							// 计算滚动时间，基于文本宽度
							this.duration = abb.length * 0.3; // 50 px/s 的速度
						}, 200)

						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();

						}
						if (this.sn) {
							setTimeout(()=>{
								this.deviceInfo(1)
								this.qParam = null
							},500)
						
						}

						// 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);
				});
			},

			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) {

					this.maskloading = false
					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) {
					// console.log('点击了');
					this.sn = ''
					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 (!this.orderinfo.sn) {
								this.mac = res.data.mac
							}
							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 == 6) {
									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) {

									if (this.areaInfo.areaId != res.data.areaId) {
										this.getArea()
									}
									// this.routePlanning(res.data.latitude, res.data.longitude)
									setTimeout(() => {
										this.showdevice = true
										this.type = 1;
										this.deviceIndex = 1;
									}, 600)

								}
							}
						} 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.getinfo()
												this.$u.get('/app/device/info?sn=' + this.sn)
													.then((
														res) => {
														if (res.code === 200) {
															this.deviceInfos = res.data;

															if (num == 0) {
																// this.routePlanning(res.data.latitude,
																// 	res.data.longitude)
																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 ==
																	6) {
																	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.routePlanning(res.data
																	// 	.latitude, res.data
																	// 	.longitude)
																	if (this.areaInfo != res.data
																		.areaId) {
																		this.getArea()
																	}
																	// this.routePlanning(res.data.latitude, res.data.longitude)
																	setTimeout(() => {
																		this.showdevice = true
																		this.type = 1;
																		this.deviceIndex = 1;
																	}, 600)
																}
															}
														} 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;

		.bottom_park {
			padding: 40rpx 42rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 100;
			width: 750rpx;
			// height: 674rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0 0;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);

			.gobtn {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 80rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				background: #64B6A7;
				border-radius: 30rpx;

			}

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

			.tip {
				margin-top: 12rpx;
				width: 100%;
				font-weight: 500;
				font-size: 28rpx;
				color: #808080;
			}

			.parkimg {
				margin-top: 40rpx;
				width: 672rpx;
				height: 388rpx;
			}

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

		.fixdivce {
			padding: 12rpx 22rpx 12rpx 22rpx;
			position: fixed;
			left: 0;
			top: 25vh;
			width: 334rpx;
			height: 460rpx;
			background: #FFFFFF;
			border-radius: 0 40rpx 40rpx 0;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);

			.scrollable-content {
				height: 100%;
				overflow-y: auto;

				.divce_li:last-child {
					border-bottom: 1rpx solid #fff;
				}

				.divce_li {
					padding: 10rpx 0;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					border-bottom: 1rpx solid #D8D8D8;

					.left_img {
						image {
							width: 44rpx;
							height: 70rpx;
						}
					}

					.right_cont {
						margin-left: 20rpx;
						display: flex;
						flex-wrap: wrap;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;

						.right_top {
							width: 100%;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;

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

								image {
									margin-right: 6rpx;
									width: 12rpx;
									height: 26rpx;
								}
							}

							.right_top_right {
								margin-left: auto;
							}
						}

						.right_bot {
							margin-top: 8rpx;
						}
					}
				}
			}
		}

		.maskload {

			position: fixed;
			padding: 46rpx;
			bottom: 0;
			width: 752rpx;
			height: 780rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			z-index: 101;

			.maskpage0 {
				.top_info {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						margin-right: 16rpx;
						width: 50rpx;
						height: 50rpx;
					}

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

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

				.tipsimg {
					margin-top: 60rpx;
					display: flex;
					// align-items: center;
					justify-content: center;
					width: 100%;

					image {
						width: 554rpx;
						height: 262rpx;

					}
				}
			}

			.maskpage1 {
				.top_info {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						margin-right: 16rpx;
						width: 50rpx;
						height: 50rpx;
					}

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

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

				.tipsimg {
					margin-top: 60rpx;
					display: flex;
					// align-items: center;
					justify-content: center;
					width: 100%;

					image {
						width: 554rpx;
						height: 262rpx;

					}
				}

				.btn_box {
					width: 750rpx;
					padding: 0 36rpx;
					position: absolute;
					bottom: 60rpx;
					left: 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.btn3 {
						// margin-right: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 300rpx;
						height: 90rpx;
						background: #64B6A8;
						border-radius: 45rpx 45rpx 45rpx 45rpx;

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

					.btn4 {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 300rpx;
						height: 90rpx;
						border-radius: 45rpx 45rpx 45rpx 45rpx;
						border: 2rpx solid #808080;

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

		}

		.navBarBox {
			position: fixed;
			z-index: 10;
			// background:#fff;
			// background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 70%, transparent);
			// background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 100%);
			// background: linear-gradient( 180deg, #FFFFFF 58%, rgba(255,255,255,0) 52%);

			.navBar {
				width: 100vw;
				// padding-top: 85rpx;

				display: flex;
				flex-direction: row;
				// justify-content: center;
				align-items: center;
				// align-items: center;
				// justify-content: center;

				image {
					margin-left: 20rpx;
					// position: absolute;

					width: 70rpx;
					height: 70rpx;
					z-index: 11;
				}

				.txts {
					margin-left: -80rpx;
					width: 100%;
					// position: absolute;
					z-index: 10;
					text-align: center;
					font-weight: 500;
					font-size: 36rpx;
					color: #3D3D3D;
					font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				}

			}

			// .order_tips {
			// 	display: flex;
			// 	flex-wrap: nowrap;
			// 	align-items: center;
			// 	margin-right: auto;
			// 	// margin: 0 auto;
			// 	margin-top: 38rpx;
			// 	padding: 28rpx 41rpx;
			// 	width: 688rpx;
			// 	height: 110rpx;
			// 	background: #3D3D3D;
			// 	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
			// 	border-radius: 53rpx 53rpx 53rpx 53rpx;

			// 	image {
			// 		margin-right: 34rpx;
			// 		width: 44rpx;
			// 		height: 51rpx;
			// 	}

			// 	.order_tips_txt {
			// 		font-weight: 400;
			// 		font-size: 36rpx;
			// 		color: #FFFFFF;
			// 	}

			// 	.icon-xiangyou1 {
			// 		margin-left: auto;
			// 		font-size: 36rpx;
			// 		color: #FFFFFF;
			// 	}
			// }
			.order_tips {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				// margin-top: 20rpx;
				margin-left: 34rpx;
				padding: 28rpx 41rpx;
				width: 688rpx;
				height: 110rpx;
				// background: #3D3D3D;
				background: rgba(61, 61, 61, 0.8);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
				border-radius: 53rpx;
				transition: width 0.5s, padding 0.5s;

				&.collapsed {
					width: 192rpx;
					padding: 28rpx 20rpx;
				}

				image {
					margin-right: 34rpx;
					width: 44rpx;
					height: 51rpx;
					transition: margin-right 0.5s;

					.order_tips.collapsed & {
						margin-right: 10rpx;
					}
				}

				.order_tips_txt {
					font-weight: 400;
					font-size: 36rpx;
					color: #FFFFFF;
					transition: opacity 0.5s, max-width 0.5s;
					overflow: hidden;
					white-space: nowrap;

					&.collapsed {
						opacity: 0;
						max-width: 0;
					}
				}

				.icon-xiangyou1 {
					margin-left: auto;
					font-size: 36rpx;
					color: #FFFFFF;
				}

				.icon-xiangzuo {
					margin-left: auto;
					font-size: 38rpx;
					color: #FFFFFF;
				}
			}

			.swiper_tips {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				padding: 18rpx 24rpx;
				margin: 0 auto;
				width: 688rpx;
				height: 72rpx;
				background: rgba(61, 61, 61, 0.8);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
				border-radius: 53rpx 53rpx 53rpx 53rpx;

				.cont {
					width: 90%;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 32rpx;
					}

					.scroll-container {
						overflow: hidden;
						width: calc(100% - 68rpx);
						/* Adjusting width to fit within container */
						display: flex;

						.scroll-text {
							white-space: nowrap;
							display: inline-block;
							// animation: scroll-text 40s linear infinite;
						}
					}
				}

				.icon-xiangyou1 {
					margin-left: auto;
					color: #fff;
					font-size: 30rpx;
				}
			}

			@keyframes scroll-text {
				0% {
					transform: translateX(0);
				}

				100% {
					transform: translateX(-100%);
				}
			}
		}

		.my-location {

			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 30rpx;
			top: 400rpx;
			// 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;
			top: 480rpx;
			// 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: 35.5vh;
			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 #64B6A8;
						font-weight: 500;
						font-size: 28rpx;
						color: #64B6A8;
					}
				}

				.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: #64B6A8;
						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: #64B6A8;

							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: #64B6A7;
								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 {

						// max-width:  600rpx !important; // 确保宽度被应用
						width: 450rpx !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;
							width: 100%;
							height: 70rpx;
							background: #64B6A8;
							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 #64B6A8;
					}
				}


				.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: #64B6A8;
						border-radius: 54rpx 54rpx 54rpx 54rpx;

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

			.page3 {


				.bot_btns {
					// position: relative;
					// display: flex;
					// justify-content: center;
					width: 750rpx;
					height: 640rpx;
					// background: #fff;
					// box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 50rpx 50rpx 0 0;
					// padding-left: 8rpx;
					padding-left: 10rpx;

					.infoss {

						// margin-top: 20rpx;

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



					.cardss {
						position: absolute;
						bottom: 240rpx;
						// 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;
						}

						.changebiketip {
							bottom: 20rpx;
							left: 280rpx;
							position: absolute;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							font-weight: 400;
							font-size: 28rpx;
							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: red;
									border-radius: 16rpx 16rpx 16rpx 16rpx;

									.speeds {
										// width: 90%;
										height: 100%;
										background: #64B6A7;
										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: 220rpx;
						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;
						padding-top: 30rpx;

						.changebiketip {
							bottom: 40rpx;
							left: 320rpx;
							position: absolute;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							font-weight: 400;
							font-size: 28rpx;
							color: #3D3D3D;
						}

						.btn {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 338rpx;
							height: 90rpx;
							background: #64B6A8;
							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: #64B6A8;
						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: #64B6A8;
				background: #64B6A8;
				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;
				}
			}

			.loading_box {
				width: 100%;
				// height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 336rpx;
					height: 154rpx;
				}

				// .loader {
				//   width: 120rpx;
				//   aspect-ratio: 1;
				//   border-radius: 50%;
				//   clip-path: inset(-360rpx); /* 4倍的比例调整 */
				//   box-shadow: -240rpx 60rpx, -240rpx 60rpx, -240rpx 60rpx; /* 4倍的比例调整 */
				//   transform: translateY(-60rpx); /* 4倍的比例调整 */
				//   animation: l19 1s infinite linear;
				// }

				// @keyframes l19 {
				//   16.67% {box-shadow:-240rpx 60rpx,-240rpx 60rpx,  76rpx 60rpx} /* 4倍的比例调整 */
				//   33.33% {box-shadow:-240rpx 60rpx,    0px 60rpx,  76rpx 60rpx} /* 4倍的比例调整 */
				//   40%,60%{box-shadow: -76rpx 60rpx,    0px 60rpx,  76rpx 60rpx} /* 4倍的比例调整 */
				//   66.67% {box-shadow: -76rpx 60rpx,    0px 60rpx, 240rpx 60rpx} /* 4倍的比例调整 */
				//   83.33% {box-shadow: -76rpx 60rpx, 240rpx 60rpx,240rpx 60rpx} /* 4倍的比例调整 */
				//   100%   {box-shadow: 240rpx 60rpx, 240rpx 60rpx,240rpx 60rpx} /* 4倍的比例调整 */
				// }

			}

			.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: #64B6A8;
					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: #64B6A8;
			}

			.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: #64B6A7;
							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: #1E807A;
				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>