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

		</map>
		<view class="my-location" @click="setMapScale">
			<image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uBgKFW3JgiBfjM4ea3uV"
				></image>
		</view>
		<view class="park" @click="toggleIconAndCallout">
			<image src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode=""></image>
		</view>
		<view class="botmbox2" v-if="showdevice">
			<view class="close" @click="close()">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uBeBBKwQu2K2ZBdT7iN7" mode=""></image>
			</view>
			<view class="page1" v-if="deviceIndex==0">
				<view class="top">
					<view class="left">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uD9pXetaMb5dmw8aSvoM" mode=""></image>
					</view>
					<view class="top_center">
						<view class="cent_top">
							车辆编号：{{deviceInfos.sn}}
						</view>
						<view class="cent_bot">
							骑行前请检查车辆状态
						</view>
					</view>
					<view class="top_right" @click="findBike()">
						响铃寻车
					</view>
				</view>
				<view class="center">
					<view class="center_left">
						<view class="center_left_top">
							剩余骑行
						</view>
						<view class="center_left_bot">
							{{deviceInfos.remainingMileage}}公里
						</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="deviceInfo(1)">
						解锁用车
					</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>
					<view class="right">
						<view class="text">
							剩余电量
						</view>
						<view class="txt" style="font-size: 36rpx;">
							{{ deviceInfos.remainingPower}}%
							<!-- {{startingPrice}}<span style="font-size: 40rpx;">元</span> -->
						</view>
						<view class="speed">
							<view class="speeds" :style="{ width: deviceInfos.remainingPower + '%' }">

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

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

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

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

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




							<!-- <view class="nmtxt">
								<view class="left">

								</view>
								<view class="right">
									原价 <span style=" text-decoration: line-through;">{{item.originalFee}}元</span>
								</view>
							</view>
							<view class="tip">
								超出起步价包含时长后收取
							</view> -->
						</view>
						<view class="tips_btn" @click.stop='feedetail(item,index+1)'>
							查看详情
						</view>
					</view>
				</view>
				<view class="bot" style="margin-top: 20rpx;">
					<view class="btn" @click="sub1()" v-if="type==1">
						确认开锁
					</view>
					<!-- <view class="btn" @click="sub6()" v-if="type==1&&orderinfo.ruleId!=null">
						确认开锁
					</view>
					<view class="btn" @click="sub2()" v-if="type==1&&freeListIndex!=0">
						确认套餐
					</view> -->
					<!-- <view class="btn" @click="sub3()" v-if="type==2&&freeListIndex==0&&orderinfo.ruleId==null">
						确认预约
					</view> -->
					<!-- <view class="btn" @click="sub5()" v-if="type==2&&orderinfo.ruleId!=null">
						确认预约
					</view> -->
					<view class="btn" @click="sub3()" v-if="type==2">
						确认预约
					</view>
				</view>
			</view>

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

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

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

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


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


						<view class="btn" style="	margin-right: 16rpx;" v-if="OrderdeviceInfos.status==3"
							@click="loackdevice()">
							临时锁车
						</view>
						<view class="btn" style="	margin-right: 16rpx;" v-if="OrderdeviceInfos.status==4"
							@click="unloackdevices()">
							解锁用车
						</view>
						<view class="btn1" @click="backDevice()">
							还车
						</view>
					</view>
					<!-- <view class="bot" style="margin-top: 20rpx;">
						
						<view class="btn1" >
							临时锁车
						</view>
						<view class="btn" >
							还车
						</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">
			<view class="top_btn" @tap="qecodelock()">
				<image src="https://api.ccttiot.com/smartmeter/img/static/un6Wi8CefEjy04qzvn67" mode=""></image>
				扫码开锁
			</view>

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

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

						</view>
					</view>
				</swiper-item>
				<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>
			<!-- <swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx' circular :autoplay="autoplay" interval='500'>
				<swiper-item>
					<view class="tipss" v-if="orderinfo.status" @click="starTime">
						您有正在进行中的订单 <view class="iconfont icon-xiangyou1" style="margin-left: 20rpx;">

						</view>
					</view>
				</swiper-item>
				<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 class="tipss" v-if="orderinfo.status" @click="starTime"> -->



		</view>

		<u-mask :show="showtcs" @click="showtc = false" :z-index='100' />
		<u-mask :show="showTips" @click="show = false" :z-index='100' />
		<view class="pops" v-if="showtcs">
			<view class="tit">
				{{orderinfo.rule.name}}
			</view>
			<view class="text">
				<view class="yuan">

				</view>
				<span>在套餐时间为结束是可随意进行车辆预约和解锁</span>

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

				</view>
				<span>车辆二维码模糊可使用下方编号开锁</span>
				<view class="time">

				</view>
			</view>
			<view class="time">
				{{timeString}}后
			</view>
			<view class="time" style="color:#3D3D3D ;font-size: 28rpx;">
				您将失去该套餐
			</view>
			<view class="btn" @click="showtcs=false" style="margin-bottom: 50rpx;">
				我已知晓
			</view>
		</view>
		<view class="pops" v-if="showTips" >
			<view class="tit">
				安全骑行 禁止超载
			</view>
			<view class="cont" v-html="areaInfo.agreement" >
				
			</view>
			<!-- <view class="text">
				<view class="yuan">

				</view>
				<span>临时锁车：相当于拔钥匙，还在租借中</span>

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

				</view>
				<span>结束订单：在还车点结束订单，押金可在【个人中心-押金】申请押金退还</span>

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

				</view>
				<span>严禁超载：一辆车最多坐两个人</span>

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

				</view>
				<span>请爱护车辆，且注意查看车辆剩余电量</span>

			</view> -->
			<view class="btn" @click="changetips()">
				我已阅读同意
			</view>
		</view>
		<view class="feeDetail" v-if="showfeeDetail">
			<view class="close" @click="showfeeDetail=false">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uBeBBKwQu2K2ZBdT7iN7" mode=""></image>
			</view>
			<view class="feeCard">
				<view class="tit1">
					收费价格说明
				</view>
				<view class="cont">
					<view class="left">
						免费时长
					</view>
					<view class="right" style="color:#3D3D3D ;">
						{{freeInfo.freeRideTime}}分钟
					</view>
				</view>
				<view class="cont" v-if="freeInfo.ridingRule==1">
					<view class="left">
						起步价
					</view>
					<view class="right">
						{{freeInfo.ridingRuleJson.startingPrice}}元（含{{freeInfo.ridingRuleJson.startingTime}}<span
							v-if="freeInfo.rentalUnit=='minutes'">分钟</span><span
							v-if="freeInfo.rentalUnit=='hours'">小时</span><span
							v-if="freeInfo.rentalUnit=='day'">天</span>）
					</view>
				</view>
				<view class="cont" v-if="freeInfo.ridingRule==1">
					<view class="left">
						超起步价后
					</view>
					<view class="right">
						{{freeInfo.ridingRuleJson.timeoutPrice}}元/{{ freeInfo.ridingRuleJson.timeoutTime}}<span
							v-if="freeInfo.rentalUnit=='minutes'">分钟</span><span
							v-if="freeInfo.rentalUnit=='hours'">小时</span><span
							v-if="freeInfo.rentalUnit=='day'">天</span>
					</view>
				</view>

				<view class="cont" v-if="freeInfo.ridingRule==2">
					<view class="left">
						计费规则
					</view>
					<view class="right">
						<view class="li" v-for="(items,index) in freeInfo.ridingRuleJson.rule"
							v-if="index!=freeInfo.ridingRuleJson.rule.length-1">
							{{items.start}}-{{items.end}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
							<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
							<span v-if="freeInfo.rentalUnit=='day'">天</span>,
							每{{items.eachUnit}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
							<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
							<span v-if="freeInfo.rentalUnit=='day'">天</span>/{{items.fee}}元
						</view>
						<view class="li" v-for="(items,index) in freeInfo.ridingRuleJson.rule"
							v-if="index==freeInfo.ridingRuleJson.rule.length-1">
							>{{items.start}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
							<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
							<span v-if="freeInfo.rentalUnit=='day'">天</span>,
							每{{items.eachUnit}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
							<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
							<span v-if="freeInfo.rentalUnit=='day'">天</span>/{{items.fee}}元
						</view>
					</view>
				</view>
				<view class="cont">
					<view class="left">

					</view>
					<view class="right" style="font-size: 24rpx;color: #808080;">
						不足1<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
						<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
						<span v-if="freeInfo.rentalUnit=='day'">天</span>，按1<span
							v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
						<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
						<span v-if="freeInfo.rentalUnit=='day'">天</span>算
					</view>
				</view>
				<view class="cont">
					<view class="left">
						调度费
					</view>
					<view class="right" style="color:#3D3D3D ;">
						{{areaInfo.vehicleManagementFee}}元（停车点外还车）
					</view>
				</view>
				<view class="cont">
					<view class="left">

					</view>
					<view class="right" style="color:#3D3D3D ;">
						{{areaInfo.dispatchFee}}元（运营区域外还车）
					</view>
				</view>
				<view class="cont">
					<view class="left">

					</view>
					<view class="right">
						P点外归还设备将收取调度费
					</view>
				</view>
				<!-- <view class="cont">
					<view class="left">
						支付订单后
					</view>
					<view class="right" style="color:#3D3D3D ;">
						自动退押金
					</view>
				</view> -->

			</view>
			<view class="feeCard" v-html='freeInfo.instructions'>

			</view>
		</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(2)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uFHC2R6R3pgUOTShLxoQ" 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">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ulQHy1cQ28kiMLI0T0Uh" 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>
	</view>
</template>

<script>
	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: {},
				deviceInfos: {},
				OrderdeviceInfos: {},
				showdevice: false,
				deviceIndex: 0,
				type: 0,
				freList: [],
				freeListIndex: 0,
				freeInfo: {},
				socket: null,
				sn: '',
				eventKey: 0,
				orderinfo: {},
				timer: null,
				timeString: '',
				money: 0,
				showtc: false,
				showtcs: false,
				areaInfo: {},
				// feeInfo:{},
				showfeeDetail: false,
				seeDetail: false,
				showmap: true,
				userinfo: {},
				parkingList: [],
				timer: null,
				listData: [],
				oldMarkers: [],
				curtitidx: 0,
				swiperHeight: 50,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				showTips:false,
				// userId:this.$store.getters.userId,
			}
		},
		watch: {
			userId(newValue, oldValue) {
				// 处理userId变化的逻辑
				console.log('userId 发生变化', newValue, oldValue);
				this.getisInOrder()
			}
		},
		
		onLoad(e) {
			console.log(e, 'eeeeeeeeeeeeeeeeeee');
			if (e.q) {
				let qParam = e.q;

				// 第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;
						}
					});
				}
				this.sn = sn
				if (this.sn != '') {


					setTimeout(() => {
						if (!this.orderinfo.status) {
							this.deviceInfo(1)
							// this.showdevice = true
							// this.deviceIndex = 1
							// this.type = 1
						}
					}, 1000)


				}

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

				}

			}
			setTimeout(()=>{
				this.$store.commit('SET_SHOWTIPS', true);
			},500)
		},
		onShow() {
			if (this.seeDetail == false) {

				if (uni.getStorageSync('role')) {
					let abb = uni.getStorageSync('role')

				}




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

						that.gps.latitude = lb.latitude;
						that.gps.longitude = lb.longitude;
						// that.gps.latitude = '26.940805',
						// 	that.gps.longitude = '120.356157';
						that.latitude = Number(lb.latitude.toFixed(5)) - 0.005
						that.longitude = Number(lb.longitude.toFixed(5)) + 0.005
						console.log(that.areaInfo, 'that.areaInfo');
						that.getArea()
						// that.getmarks()


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

				})
			} else {
				this.getinfo()
			}
			this.timer = setInterval(() => {
				// console.log('定时器运行中...');
				this.getmarks()
				// 在这里执行你的逻辑
			}, 3000); // 每秒执行一次

		},
		onHide() {
			// 页面隐藏时清除定时器
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
				console.log('定时器已清除');
			}
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
				console.log('定时器已清除');
			}
		},
		computed: {
			appointmentServiceFee() {
				return this.$store.getters.appointmentServiceFee;
			},
			dispatchFee() {
				return this.$store.getters.dispatchFee;
			},
			vehicleManagementFee() {
				return this.$store.getters.vehicleManagementFee;
			},
			startingPrice() {
				return this.$store.getters.startingPrice;
			},
			timeFee() {
				return this.$store.getters.timeFee;
			},
			timeMinutes() {
				return this.$store.getters.timeMinutes;
			},
			startingHowManyMinutes() {
				return this.$store.getters.startingHowManyMinutes;
			},
			userId() {
				return this.$store.getters.userId;
			},
			// showTips() {
			// 	return this.$store.getters.showTips;
			// },
			isMeal() {
				return this.$store.getters.isMeal;
			},
		},
		methods: {
			changetips() {
				if (this.showTips) {
					
					uni.setStorageSync('hasShownPopup', false);
					this.showTips=uni.getStorageSync('hasShownPopup')
				} else {
					uni.setStorageSync('hasShownPopup', true);
					this.showTips=uni.getStorageSync('hasShownPopup')
				}

			},
			toggleIconAndCallout() {
				this.showIconAndCallout = !this.showIconAndCallout;
				if (this.showIconAndCallout) {
					const newMarkers = [];
					this.parkingList.forEach(item => {
						newMarkers.push({
							id: parseFloat(item.parkingId),
							latitude: parseFloat(item.latitude),
							longitude: parseFloat(item.longitude),
							width: 20,
							height: 40,
							iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
							callout: {
								content: item.parkingName, // 修改为你想要显示的文字内容
								color: '#ffffff', // 修改为文字颜色
								fontSize: 14, // 修改为文字大小
								borderRadius: 10, // 修改为气泡圆角大小
								bgColor: '#000000', // 修改为气泡背景颜色
								padding: 6, // 修改为气泡内边距
								display: 'ALWAYS' // 修改为气泡的显示策略
							}
						});
					});
					this.$set(this, 'markers', [...this.markers, ...newMarkers]);
				} else {
					const parkingIds = this.parkingList.map(item => parseFloat(item.parkingId));
					this.$set(this, 'markers', this.markers.filter(marker => !parkingIds.includes(marker.id)));
				}


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

								}
							}, 1000)

						}

					},
					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
			},
			// 无套餐取消预约
			cancel() {
				this.$u.post('/appVerify/device/cancelAppointment?userId=' + this.userId + '&orderNo=' + this.orderinfo
					.orderNo).then((res) => {
					if (res.code === 200) {
						this.getisInOrder()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// 套餐取消预约
			cancel1() {
				this.$u.post('/appVerify/device/cancelAppointment?userId=' + this.userId + '&orderNo=' + this.orderinfo
					.orderNo + '&ruleId=' + this.orderinfo.ruleId).then((res) => {
					if (res.code === 200) {
						this.getisInOrder()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			backDevice() {
				this.$u.post('/appVerify/device/return?returnType=1&orderNo=' + this.orderinfo.orderNo).then((res) => {
					if (res.code === 200) {
						this.getisInOrder()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// 套餐直接开锁
			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() {
				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) => {
						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) => {
						if (res.code === 200) {
							this.getisInOrder()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}

			},
			unloackdevices() {
				this.$u.post('/appVerify/device/unlock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
					.orderNo).then((res) => {
					if (res.code === 200) {
						this.getisInOrder()
					} else {

					}
				})
			},
			// ；临时锁车
			loackdevice() {
				this.$u.post('/appVerify/device/lock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
					.orderNo).then((res) => {
					if (res.code === 200) {
						this.getisInOrder()
					} else {

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


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

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

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

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

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

					// 定义定时器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

					// 定义定时器

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

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

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

					this.showdevice = true
					this.deviceIndex = 3
				}



				// 将 createTime 转换为时间戳

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

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


				}
				console.log('点击了');
				let that = this
				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) {
								// 支付成功逻辑
								that.getisInOrder()

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

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


				}
				console.log('点击了');
				let that = this
				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) {
								console.log('支付成功');
								// 支付成功逻辑
								that.getisInOrder()

							},
							fail(err) {
								// 支付失败逻辑
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			topage(num) {
				if (num == 0) {
					// uni.navigateTo({
					// 	url:''
					// })
				} else if (num == 1) {
					let that = this
					wx.login({
						success(res) {
							if (res.code) {
								console.log('登录！', res);
								let data = {
									wxOpenId: res.code,

								};
								let areaId = uni.getStorageSync('areaId');
								that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId).then(
									res => {
										uni.hideLoading();
										if (res.code == 200) {
											uni.setStorageSync('token', res.token);
											if (that.areaInfo.authentication == 1) {
												that.$u.get("/getAppInfo").then((res) => {
													console.log('进入跳转');
													if (res.code == 200) {
														that.userinfo = res.user
														that.$store.commit('SET_USERID', res.user
															.userId);
														if (res.user.isAuthentication == 0) {
															that.seeDetail = true
															uni.navigateTo({
																url: "/page_user/idcard_test"
															})
														} else {
															uni.navigateTo({
																url: '/page_user/yj'
															})
														}

													} else {
														uni.showToast({
															title: '未登录，请登录后尝试',
															icon: 'none',
															duration: 2000
														});
													}
												});

											} else {
												uni.navigateTo({
													url: '/page_user/yj'
												})
											}



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

					});


				} else if (num == 2) {
					uni.navigateTo({
						url: '/page_user/jfgz'
					})
				} else if (num == 3) {
					uni.navigateTo({
						url: '/page_user/yczn'
					})
				} else if (num == 4) {
					uni.navigateTo({
						url: '/page_user/bhks'
					})
				} else if (num == 5) {
					uni.navigateTo({
						url: '/page_user/gzsb'
					})
				} else if (num == 6) {
					let that = this
					wx.login({
						success(res) {
							if (res.code) {
								console.log('登录！', res);
								let data = {
									wxOpenId: res.code,

								};
								let areaId = uni.getStorageSync('areaId');
								that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId).then(
									res => {
										uni.hideLoading();
										if (res.code == 200) {
											uni.setStorageSync('token', res.token);
											if (that.areaInfo.authentication == 1) {
												that.$u.get("/getAppInfo").then((res) => {
													console.log('进入跳转');
													if (res.code == 200) {
														that.userinfo = res.user
														that.$store.commit('SET_USERID', res.user
															.userId);
														if (res.user.isAuthentication == 0) {
															that.seeDetail = true
															uni.navigateTo({
																url: "/page_user/idcard_test"
															})
														} else {
															uni.navigateTo({
																url: '/pages/my'
															})
														}

													} else {
														uni.showToast({
															title: '未登录，请登录后尝试',
															icon: 'none',
															duration: 2000
														});
													}
												});

											} else {
												uni.navigateTo({
													url: '/pages/my'
												})
											}



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

					});

				} else if (num == 7) {
					uni.navigateTo({
						url: '/page_user/gzsb?sn=' + this.sn
					})
				}
			},
			createWebSocket() {
				// 创建 WebSocket 实例，传入 token
				let token = uni.getStorageSync('token')
				let that = this
				this.socket = uni.connectSocket({
					url: `ws://192.168.2.8:8080/appVerify/ws/${this.eventKey}`, // WebSocket 服务器地址
					header: {
						'Authorization': token // 设置 Authorization 请求头
					},
					success(res) {

						console.log('WebSocket 连接成功', res);
					},
					fail(err) {
						console.error('WebSocket 连接失败', err);
					}
				});

				// 监听 WebSocket 接收到消息事件
				this.socket.onMessage(res => {
					console.log('收到消息：', res.data);
				});

				// 监听 WebSocket 错误事件
				this.socket.onError(err => {
					console.error('WebSocket 错误：', err);
				});

				// 监听 WebSocket 连接关闭事件
				this.socket.onClose(() => {
					console.log('WebSocket 连接已关闭');
				});
			},
			sendMessage() {
				// console.log('发送了消息');
				// 发送消息给服务器
				this.socket.send({
					data: 'Hello, server!'
				});
			},
			closeConnection() {
				// 关闭 WebSocket 连接
				this.socket.close({
					code: 1000, // 关闭连接的代码
					reason: 'Closing connection' // 关闭连接的原因
				});
			},
			sub5() {
				if (this.orderinfo.ruleId) {
					this.$u.post('/appVerify/device/appointment?userId=' + this.userId + '&sn=' + this.sn + '&ruleId=' +
						this
						.orderinfo.ruleId + '&type=2' + '&orderNo=' + this.orderinfo.orderNo).then((res) => {
						if (res.code === 200) {
							uni.showLoading({
								title: '预约中...'
							})
							setTimeout(() => {
								this.getisInOrder()
								uni.hideLoading()
							}, 1000)
							// this.freList=res.rows

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

			},
			// 确认开锁
			sub1() {
				if (this.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,
							// money: this.freeInfo.fee,
							mark: "确认开锁",
							type: '1'


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

							} 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.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 {
									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 {
								uni.showToast({
									title: res.msg,
									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() {
				this.orderinfo = {}
				if (this.userId) {
					this.$u.post('/app/user/isInOrder?userId=' + this.userId, ).then((res) => {
						if (res.code === 200) {
							// this.freList=res.rows
							if (res.data != '') {
								this.orderinfo = res.data[0]

								this.starTime()
							} else {
								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.$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() {
				this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
					if (res.code === 200) {

					}
				})
			},
			onMarkerTap(e) {
				if (e.type === 'markertap') {
					console.log('点击了标记：', e.markerId);
					// 这里可以根据需要处理点击标记的逻辑
					// 阻止事件冒泡\
					this.sn = e.markerId
					this.deviceInfo(0)



				}

			},
			deviceInfo(num) {
				let that = this
				if (uni.getStorageSync('token')) {
					this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
						if (res.code === 200) {
							this.deviceInfos = res.data
							if (num == 0) {
								// this.showindex = 0
								this.showdevice = true
								this.type = 0
							} else {
								// this.showindex = 1
								this.showdevice = true
								this.type = 1
								this.deviceIndex = 1
							}

						} else {
							this.showdevice = false
							this.deviceIndex = 0
							this.type = 0
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					wx.login({
						success(res) {
							if (res.code) {
								console.log('登录！', res);
								let data = {
									wxOpenId: res.code,

								};
								let areaId = uni.getStorageSync('areaId');
								that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId).then(
									res => {
										uni.hideLoading();
										if (res.code == 200) {
											uni.setStorageSync('token', res.token);
											that.$u.get('/app/device/info?sn=' + that.sn).then((res) => {
												if (res.code === 200) {
													that.deviceInfos = res.data
													that.showindex = 0
													that.showdevice = true
												} else {
													that.showdevice = false
													that.deviceIndex = 0
													that.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 {
											// console.log("老用户登录",res.data)
											uni.redirectTo({
												url: '/pages/login/login'
											})
										}
									});
							}
						},

					});
				}



			},
			// onMapTap(e) {
			//     console.log('点击了地图非标记区域：', e);
			//     // 这里可以根据需要处理点击地图非标记区域的逻辑
			// },
			getmarks() {
				let data = {
					areaId: this.areaInfo.areaId
				};

				this.$u.get(`/app/allVehicleByArea`, data).then((res) => {
					if (res.code === 200) {
						this.listData = res.data;

						const newMarkers = this.listData.map(item => ({
							id: parseFloat(item.sn),
							latitude: parseFloat(item.latitude),
							longitude: parseFloat(item.longitude),
							width: 40,
							height: 28,
							iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
						}));

						// 检查新数据和旧数据是否有变化
						if (this.oldMarkers.length === 0 || this.isMarkersChanged(newMarkers)) {
							console.log('有变化');
							this.markers = newMarkers;
							this.oldMarkers = [...newMarkers];
						}

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

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

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

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

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

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

							// 							} else {

							// 							}
							// 						})


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

							// });
						}
					});


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

						}
					const hasShownPopup = uni.getStorageSync('hasShownPopup');
					console.log(hasShownPopup, 'hasShownPopup');
					
					if (hasShownPopup === '' || hasShownPopup === null) {
					  console.log('1111111111');
					  this.showTips = true;
					  uni.setStorageSync('hasShownPopup', true);
					} else {
					  console.log('222');
					  this.showTips = uni.getStorageSync('hasShownPopup');
					  console.log(this.showTips, 'this.showTips');
					}
					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);
				});
			},
			// getArea() {
			// 	// 发送请求获取数据
			// 	this.$u.get('/app/area/list',this.gps).then((res) => {
			// 		if (res.code === 200) {
			// 			// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
			// 			const polylines = res.rows
			// 				.filter(area => area.boundaryStr) // 过滤掉boundary为空的数据
			// 				.map(area => this.convertBoundaryToPolyline(area.boundaryStr));
			// 			// 更新折线数据
			// 			this.polyline = polylines;
			// 			this.getlist()
			// 			// console.log(this.polyline);
			// 		}
			// 	}).catch(error => {
			// 		console.error("Error fetching area data:", error);
			// 	});
			// },
			convertBoundaryToPolylines(boundaries) {
				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: "#55888840", //填充颜色
						strokeColor: "#558888", //描边颜色
						strokeWidth: 2, //描边宽度
						zIndex: 1, //层级

					};
				}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
			},
			getParking() {
				// 发送请求获取数据
				// this.polyline=[]
				let data = {
					areaId: this.areaInfo.areaId
				}
				this.$u.get('/app/parking/list?', data).then((res) => {
					if (res.code === 200) {
						// 处理接口返回的数据
						const validBoundaries = res.rows.map(row => row.boundaryStr).filter(boundary =>
							typeof boundary === 'string' && boundary.trim() !== '');
						const polylines = this.convertBoundaryToPolylines(validBoundaries);

						// 将处理后的数据添加到 this.polyline 中
						this.polyline = this.polyline.concat(polylines);
						this.parkingList = res.rows

						// console.log(this.polyline);
					}
				}).catch(error => {
					console.error("Error fetching parking data:", error);
				});
			},
			convertBoundaryToPolyline(boundary) {
				if (!boundary) return null;

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

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

				return polyline;
			},
			//   convertBoundaryToPolylines(boundaries) {
			//     // 确保 boundaries 是一个有效的数组
			//     if (!Array.isArray(boundaries)) {
			//       console.error("Boundaries is not an array:", boundaries);
			//       return [];
			//     }

			//     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: "#55888840", //填充颜色
			//         strokeColor: "#22FF00", //描边颜色
			//         strokeWidth: 2, //描边宽度
			//         zIndex: 1, //层级
			//       };
			//     }).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
			//   },
		}
	}
</script>
<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

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

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

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

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

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

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

	.page {
		width: 750rpx;

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

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

				width: 60rpx;
				height: 60rpx;
			}

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

		.my-location {

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

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

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

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

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

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

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

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

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

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

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

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

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

			.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: 40rpx 32rpx;
			width: 750rpx;
			// height: 272rpx;
			background: #fff;
			border-radius: 50rpx 50rpx 0 0;
			z-index: 100;

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

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

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

					.left {

						width: 56rpx;
						height: 56rpx;

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

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

						.cent_top {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

						.txt {

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

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

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

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

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

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

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

						.tit {
							padding: 18rpx 0 0 18rpx;
							width: 350rpx;
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 36rpx;
							color: #3D3D3D;
						}

						.nmtxt {

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

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

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

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

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

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

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

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


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

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

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

			.page3 {
				.bot_btn {

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

					.info {
						padding: 0 60rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: space-between;
						width: 708rpx;
						height: 100rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}

					view {}

					.card {
						margin-top: 12rpx;
						padding: 20rpx 30rpx;
						width: 708rpx;
						height: 288rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;

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

						.cont {
							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: #EFEFEF;
									border-radius: 16rpx 16rpx 16rpx 16rpx;

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

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

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

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

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

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

						.btn1 {

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

			.page4 {
				.bot_btn {
					// padding: 26rpx 34rpx 48rpx 34rpx;
					// position: fixed;
					// display: flex;
					// flex-wrap: wrap;
					// justify-content: center;
					// bottom: 0;
					width: 750rpx;
					height: 420rpx;
					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;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 680rpx;
						height: 90rpx;
						background: #4C97E7;
						border-radius: 54rpx 54rpx 54rpx 54rpx;
						font-weight: 500;
						font-size: 40rpx;
						color: #FFFFFF;
					}

				}
			}
		}

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

			.guangggao {
				margin-top: 34rpx;

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

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

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

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

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

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

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

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

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

			.time {
				margin-top: 20rpx;
				text-align: center;
				font-weight: 500;
				font-size: 48rpx;
				color: #4C97E7;
			}
			.cont{
				height: 300rpx;
				 overflow-x: hidden;
				 overflow-y: auto;
			}
			.tit {
				// width: 604rpx;
				text-align: center;
				font-weight: 500;
				font-size: 36rpx;
				color: #3D3D3D;
				margin-bottom: 54rpx;
			}

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

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

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

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

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