<template>
	<view class="page">
		<!-- 	<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">
			<view class="img" src="https://course.jchen.art/static/images/icon-location.png"
				@click="getMyLocation"></view>
		</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="qrCode()">
						扫码用车
					</view>
					<view class="right_btn" @click="Reserve()">
						预约用车
					</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"></view>
									<view class="right  " 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>
							</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" @click="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=""
						style="width: 32rpx;height: 32rpx;"></image>
					<view class="text">
						用车指南
					</view>
				</view>
				<view class="cont" @click="topage(4)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uFaJV6NJGhmmodpEuWMy" mode=""
						style="width: 32rpx;height: 32rpx;"></image>
					<view class="text">
						编号开锁
					</view>
				</view>
				<view class="cont" @click="showindex=1">
					<image src="https://api.ccttiot.com/smartmeter/img/static/udQjw62ubIRDIUQqlsTT" mode=""
						style="width: 32rpx;height: 32rpx;"></image>
					<view class="text">
						更多
					</view>
				</view>
			</view>
		</view>
		<view class="tipss" v-if="orderinfo.status" @click="starTime">
			您有正在进行中的订单 <view class="iconfont icon-xiangyou1">

			</view>
		</view>
		<u-mask :show="showtcs" @click="showtc = false" :z-index='100' />
		<u-mask :show="show" @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">
				我已知晓
			</view>
		</view>
		<view class="pops" v-if="show">
			<view class="tit">
				安全骑行 禁止超载
			</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">
				我已阅读同意
			</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",
				},
				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

				// 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()
							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()
							this.showdevice = true
							this.deviceIndex = 1
							this.type = 1
						}
					}, 1000)

				}

			}
		},
		onShow() {
			if (this.seeDetail == false) {

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

				}

				console.log(this.userId);



				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');
						if(!that.areaInfo.areaId){
							that.getArea()
						}
						// that.getmarks()
						

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

				})
			}


		},

		computed: {
			appointmentServiceFee() {
				return this.$store.getters.appointmentServiceFee;
			},
			dispatchFee() {
				return this.$store.getters.dispatchFee;
			},
			vehicleManagementFee() {
				return this.$store.getters.vehicleManagementFee;
			},
			startingPrice() {
				return this.$store.getters.startingPrice;
			},
			timeFee() {
				return this.$store.getters.timeFee;
			},
			timeMinutes() {
				return this.$store.getters.timeMinutes;
			},
			startingHowManyMinutes() {
				return this.$store.getters.startingHowManyMinutes;
			},
			userId() {
				return this.$store.getters.userId;
			},
			isMeal() {
				return this.$store.getters.isMeal;
			},
		},
		methods: {
			getMyLocation() {
				uni.createMapContext("map", this).moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude,
				});
			},
			// 查看费用详情
			tofeeDetail() {
				uni.navigateTo({
					url: '/page_user/ckmx?orderId=' + this.orderinfo.orderNo
				})
			},
			// 扫码开锁
			qecodelock() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {

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

						this.sn = sn
						if (this.sn != '') {
							setTimeout(() => {
								if (!this.orderinfo.status) {
									this.deviceInfo()
									this.showdevice = true
									this.deviceIndex = 1
									this.type = 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 {
							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.ruleId != null && this.orderinfo.sn == '') {
				// 	this.showdevice = false;
				// 	this.deviceIndex = 0;
				// 	this.showtc = true
				// 	const ruleEndTimeTimestamp = new Date(this.orderinfo.ruleEndTime).getTime();

				// 	// 定义定时器
				// 	this.timer = setInterval(() => {
				// 		const currentTime = Date.now();
				// 		// const timePassed = currentTime - createTimeTimestamp;
				// 		const timeRemaining = ruleEndTimeTimestamp - currentTime;

				// 		if (timeRemaining <= 0) {
				// 			clearInterval(this.timer);
				// 			this.timeString = "00:00:00";
				// 			// 可以在这里添加时间结束后的逻辑
				// 			return;
				// 		}

				// 		const secondsRemaining = Math.floor(timeRemaining / 1000);

				// 		// 转换为时分秒格式
				// 		const hours = Math.floor(secondsRemaining / 3600);
				// 		const minutes = Math.floor((secondsRemaining % 3600) / 60);
				// 		const seconds = secondsRemaining % 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);
				// 	}, 1000);
				// } else if (this.orderinfo.status == 0 && this.orderinfo.ruleId != null) {
				// 	this.showdevice = true;
				// 	this.deviceIndex = 2;
				// 	// const createTimeTimestamp = new Date(this.orderinfo.payTime).getTime();
				// 	const ruleEndTimeTimestamp = new Date(this.orderinfo.ruleEndTime).getTime();

				// 	// 定义定时器
				// 	this.timer = setInterval(() => {
				// 		const currentTime = Date.now();
				// 		// const timePassed = currentTime - createTimeTimestamp;
				// 		const timeRemaining = ruleEndTimeTimestamp - currentTime;
				// 		console.log(timeRemaining);
				// 		if (timeRemaining <= 0) {
				// 			clearInterval(this.timer);
				// 			this.timeString = "00:00:00";
				// 			// 可以在这里添加时间结束后的逻辑
				// 			return;
				// 		}

				// 		const secondsRemaining = Math.floor(timeRemaining / 1000);

				// 		// 转换为时分秒格式
				// 		const hours = Math.floor(secondsRemaining / 3600);
				// 		const minutes = Math.floor((secondsRemaining % 3600) / 60);
				// 		const seconds = secondsRemaining % 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);
				// 	}, 1000);
				// } else if (this.orderinfo.status == 2 && this.orderinfo.ruleId != null) {
				// 	this.showdevice = true;
				// 	this.deviceIndex = 2;
				// 	// const createTimeTimestamp = new Date(this.orderinfo.payTime).getTime();
				// 	const ruleEndTimeTimestamp = new Date(this.orderinfo.ruleEndTime).getTime();

				// 	// 定义定时器
				// 	this.timer = setInterval(() => {
				// 		const currentTime = Date.now();
				// 		// const timePassed = currentTime - createTimeTimestamp;
				// 		const timeRemaining = ruleEndTimeTimestamp - currentTime;
				// 		console.log(timeRemaining);
				// 		if (timeRemaining <= 0) {
				// 			clearInterval(this.timer);
				// 			this.timeString = "00:00:00";
				// 			// 可以在这里添加时间结束后的逻辑
				// 			return;
				// 		}

				// 		const secondsRemaining = Math.floor(timeRemaining / 1000);

				// 		// 转换为时分秒格式
				// 		const hours = Math.floor(secondsRemaining / 3600);
				// 		const minutes = Math.floor((secondsRemaining % 3600) / 60);
				// 		const seconds = secondsRemaining % 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);
				// 	}, 1000);
				// }


				// 预约中
				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)
						// console.log(this.money,'this.areaInfo.appointmentServiceFeethis.areaInfo.appointmentServiceFee');
						// if (totalMinutes <= this.startingHowManyMinutes) {
						// 	this.money = this.startingPrice;
						// } else {
						// 	const extraTime = totalMinutes - this.startingHowManyMinutes;
						// 	const extraIntervals = Math.floor(extraTime / parseFloat(this.timeMinutes)) + 1;
						// 	console.log(extraIntervals * this.timeFee, 'extraIntervalsextraIntervals');
						// 	this.money = parseFloat(this.startingPrice) + (extraIntervals * parseFloat(this
						// 		.timeFee));
						// }
						// console.log("已经过去了：" + timeString);
						// console.log("增加了" +money+ "元费用");
						// 每隔十分钟增加费用
						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;

					// if (totalMinutes <= this.startingHowManyMinutes) {
					// 	this.money = this.startingPrice;
					// } else {
					// 	const extraTime = totalMinutes - this.startingHowManyMinutes;
					// 	const extraIntervals = Math.floor(extraTime / parseFloat(this.timeMinutes)) + 1;
					// 	console.log(extraIntervals * this.timeFee, 'extraIntervalsextraIntervals');
					// 	this.money = parseFloat(this.startingPrice) + (extraIntervals * parseFloat(this.timeFee));
					// }
					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);
										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) {
					uni.navigateTo({
						url: '/pages/my'
					})
				} 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.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.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() {
				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.showdevice = false
								this.deviceIndex = 0
							}
						} else {

						}
					})
				}

			},
			changefree(item, index) {
				this.freeInfo = item
				this.freeListIndex = index
			},
			getlist() {
				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
				}


			},
			// 扫码用车
			qrCode() {
				if (this.$store.getters.userId == null) {
					this.$u.get("/getAppInfo").then((res) => {
						console.log('进入跳转');
						if (res.code == 200) {
							this.$store.commit('SET_USERID', res.user.userId);
							this.scanQRCode()
						} else {
							uni.showToast({
								title: '未登录，请登录后尝试',
								icon: 'none',
								duration: 2000
							});
						}
					});
				}

			},
			// 关闭弹出
			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()
					
					

				}

			},
			deviceInfo() {
				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
							this.showindex = 0
							this.showdevice = true
						}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 markers = data.map(item => {
						//            return {
						//                id: item.deviceId,
						//                latitude: parseFloat(item.latitude),
						//                longitude: parseFloat(item.longitude),
						//                title: item.deviceName,
						//  width : 25,
						// height : 30,
						// iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
						//            };
						//        });
						this.listData.forEach(item => {
							this.markers.push({
								id: parseFloat(item.sn),
								latitude: parseFloat(item.latitude),
								longitude: parseFloat(item.longitude),
								// title: item.deviceName,
								width: 40,
								height: 28,
								iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
							})
						})
						// this.markers = markers;
						// console.log(this.markers, '  this.markers  this.markers');
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			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
							// if (this.areaInfo.authentication == 1) {
							// 	if (res.user.isAuthentication == 0) {
							// 		uni.navigateTo({
							// 			url: "/page_user/idcard_test"
							// 		})
							// 	}
							// }
						} else {
							// setTimeout(()=>{
							// 	this.getinfo()
							// 	this.getlist()
							// },1000)
						}
					});


				}
			},
			getArea() {
				this.showmap=false
				// 发送请求获取数据
				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(this.areaInfo, 'areaInfoareaInfo');
						uni.setStorageSync('areaId', res.data.areaId);
						this.getinfo()
						this.getmarks()
						this.getlist()
						this.getParking()
						if (uni.getStorageSync('token')) {
							this.getisInOrder()

						}

						// 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() {
				// 发送请求获取数据
				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);
						// 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 lang="scss">
	page {
		// background-color: ;
	}

	.page {
		width: 750rpx;

		.my-location {

			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 30rpx;
			bottom: 300rpx;
			background-color: #fff;
			border-radius: 50%;
			width: 60rpx;
			height: 60rpx;
			z-index: 10;
			.img {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.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 {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: nowrap;
			bottom: 304rpx;
			left: 38rpx;
			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: 84vh;
		}

		.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: 30rpx;
				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: #F7F7F7;
					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;

			.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: 80rpx;

					image {
						width: 29.33rpx;
						height: 31.97rpx;
					}

					.text {
						margin-top: 12rpx;
						width: 80px;
						text-align: center;
						font-weight: 400;
						font-size: 20rpx;
						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;
			}

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

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