<template>
	<view class="page">
		<image class="topimg" @click="btnmy" src="/static/image/icon11.png" mode=""></image>
		<!-- 地图 -->
		<view class="">
			<image class="picimg" v-if="iconflag" src="https://api.ccttiot.com/smartmeter/img/static/uU4DEpKYqBND0oXDiqod"
				mode=""></image>
		</view>
		<map class='map' id="map"  :latitude="latitude" :longitude="longitude" :markers="covers"
			@markertap="handleMarkerClick" @regionchange="regionchange" :circles="circles" :polygons="polyline" :show-location="true">
		</map>
		<view class="lticon">
			 
		</view>
		<!-- 右侧图标 -->
		<view class="rticon">
			<!-- <image v-if="rtindex != 1" src="https://api.ccttiot.com/smartmeter/img/static/uRtmbcCSrLLZ7hkGFeg2"
				@click="btntap(1)" mode=""></image>
			<image v-if="rtindex == 1" src="https://api.ccttiot.com/smartmeter/img/static/u8zXd0xYhLKD0BvgZDVv"
				@click="btntap(1)" mode=""></image>
			<image v-if="rtindex != 2" src="https://api.ccttiot.com/smartmeter/img/static/uySqZZMETPWLmP26Qajc"
				@click="btntap(2)" mode=""></image>
			<image v-if="rtindex == 2" :src="iconobj.bikertpicgl"
				@click="btntap(2)" mode=""></image>
			<image v-if="rtindex != 3" src="https://api.ccttiot.com/smartmeter/img/static/unaFMV8lmyqWVyY2uOhR"
				@click="btntap(3)" mode=""></image>
			<image v-if="rtindex == 3" src="https://api.ccttiot.com/smartmeter/img/static/uEWVQFGBf10XJn8aTlaZ"
				@click="btntap(3)" mode=""></image> -->
			<image style="width: 80rpx;height: 80rpx;" @click="toggleIconAndCallout(2)"
				src="/static/image/icon7.png" mode=""></image>
			<image style="width: 80rpx;height: 80rpx;" src="/static/image/icon8.png" @click="btnhuiz" mode=""></image>
			<image style="width: 80rpx;height: 90rpx;" src="/static/image/icon9.png"
				@click="btntap(3)" mode=""></image>
		</view> 
		<!-- 点击地图门店弹窗 -->
		<!-- <view class="shoptc" v-if="shoptcflag" @click="btnmendain">
			<view class="top">
				<view class="name">
					云行租车（汇丰公寓）
				</view>
				<view class="zu">
					1辆可租 <image src="https://api.ccttiot.com/smartmeter/img/static/uX3GfXzwzS4GY1J55raG" mode="">
					</image>
				</view>
			</view>
			<view class="juli">
				<view class="mi">
					727m
				</view>
				<view class="dizhi">
					福建省宁德市霞浦县六一七路402号台铃...
				</view>
			</view>
			<view class="cont">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uK5bAmrXLEHVxbH6FcFD" mode=""></image>
				<view class="shuoming">
					<view class="name">
						全新车网红泡泡50KM...
					</view>
					<view class="price">
						日租￥<text>108</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 车辆弹窗 -->
		<view class="biketc" v-if="taocanflag">
			<view class="topfor">
				<image src="/static/image/icon12.png" v-if="huiyuanlist.length > 0" class="qixing" mode="" @click="btnhuiyuan"></image>
				<view class="bikesy">
					<view class="bikert">
						<view class="bikegongli" style="color: #16BC32;">
							{{cheobj.remainingPower == null ? '--' : cheobj.remainingPower}} <text style="font-size: 24rpx;margin-left: 10rpx;">%</text>
						</view>
						<view class="bikets">
							车辆剩余电量
						</view>
					</view>
					<view class="bikelt">
						<view class="bikegongli">
							{{cheobj.remainEndurance == null ? '--' : cheobj.remainEndurance}} <text style="font-size: 24rpx;margin-left: 10rpx;">km</text>
						</view>
						<view class="bikets">
							可骑行距离约
						</view>
					</view>
				</view>
				<view class="bikeyc" @click="btncheyc">
					×
				</view>
			</view>
			<view class="anniuks">
				<image src="/static/image/icon13.png" @click="btnxlxc" mode=""></image> <text @click="btndetaxq">解锁骑行</text>
			</view>
			<view class="" style="color: #7C7C7C;font-size: 24rpx;margin-top: 30rpx;width: 100%;text-align: center;">
				车牌：{{cheobj.vehicleNum == null ? '--' : cheobj.vehicleNum}}        <text style="margin-left: 40rpx;">SN：{{cheobj.sn == null ? '--' : cheobj.sn}}</text>
			</view>
		</view>
		<view class="clmask" v-if="taocanflag"></view>
		<view class="mask" v-if="fjflag"></view>
		<!-- 公告 -->
		<view class="gonggao" @click="btntopgg">
			<u-icon name="volume-fill" color="#333" style="position: absolute;left: 20rpx;" size="32"></u-icon>
			<view class="container">
			    <view class="scroll-text">
			      <view class="scroll-item">
			        {{announcements.title == null ? '欢迎使用本小程序，祝您骑行愉快！！！' : announcements.title}}
			      </view>
			    </view>
			</view>
			<u-icon name="arrow-right" color="#333" style="position: absolute;right: 10rpx;" size="32"></u-icon>
		</view>
		<!-- 商户中心入口 -->
		<image v-if="guanliflag || adminflag" @click="btngl" class="rukou" src="/static/image/icon10.png" mode=""></image>
		<!-- 公告弹窗 -->
		<view class="noticetc" v-if="gonggaoflag">
			<view class="name">
				公告
			</view>
			<view class="biaoti">
				{{announcements.title}}
			</view>
			<u-parse :html="announcements.content" style="width: 100%;height: 620rpx;background-color: #efefef;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
			<view class="btn" @click="btnggtc">
				我知道了
			</view>
		</view>
		<view class="mask" v-if="gonggaoflag"></view>
		
		<view class="botbox" v-if="!taocanflag">
			<view class="saoma" style="font-weight: 400;" v-if="weizhifu == true" @click="btnweizhifu">
				您有订单未支付 <u-icon name="arrow-right" color="#fff" style="margin-left: 20rpx;" size="32"></u-icon> 
			</view>
			<view class="" v-else>
				<view class="saoma" style="font-weight: 400;" v-if="orderflag == true" @click="btnjinx">
					 您有正在进行中订单 <u-icon name="arrow-right" color="#fff" style="margin-left: 20rpx;" size="32"></u-icon> 
				</view>
				<view class="saoma" @click="btnsaoma" v-else>
					<image src="/static/image/icon6.png" mode=""></image> 扫码开锁
				</view>
			</view>
			<view class="kuaijie">
				<image @click="btnpage(2)" :src="appimg.indexOrder" mode=""></image> <!-- 订单 -->
				<image @click="btntiao(2)" :src="appimg.indexHelp" mode=""></image> <!-- 使用帮助 -->
				<image @click="btnpage(4)" :src="appimg.indexSn" mode=""></image> <!-- 编号开锁 -->
				<!-- <image @click="btntiao(3)" src="https://api.ccttiot.com/smartmeter/img/static/uViw2fP4m96qI56WKgfO" mode=""></image> <!-- 意见反馈 -->
				<image @click="btnpage(5)" :src="appimg.indexVehicle" mode=""></image>
				<image @click="btnkf" :src="appimg.indexService" mode=""></image> <!-- 客服 -->
			</view>
			<!-- 商户轮播图 广告 -->
			<view class="guanggao">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in tiaozhuanlist" :key="index">
						<view class="swiper-item" v-if="item.provider == 2" style="width: 700rpx;height: 180rpx;border-radius: 10rpx;overflow: hidden;">
							<ad-custom :unit-id="item.content" ad-intervals="30"></ad-custom>
						</view>
						<view class="swiper-item" v-if="item.provider == 1" style="width: 700rpx;height: 180rpx;border-radius: 10rpx;overflow: hidden;">
							<image @click="btnshangjia(item,index)" style="width: 700rpx;height: 180rpx;border-radius: 10rpx;" :src="item.content" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="xuanfu" v-if="orderflag == true" @click="btnorder">
			<image src="/static/image/icon6.png" mode=""></image>
		</view>
		<!-- 平台客服弹窗 -->
		<view class="kefutc" v-if="kefuflag">
			<image class="bj" src="/static/image/icon14.png" mode="" @click="kefuflag = false"></image>
			<view class="box">
				<view class="" style="max-height: 640rpx;overflow: scroll;">
					<view class="" style="font-weight: 600;color: #3D3D3D;">
						订单要售后:
					</view>
					<view class="top" v-for="(item,index) in kefulist" :key="index">
						<view class="dianhua">
							{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
							<view class="wz">
								工作时间：{{item.startTime}}~{{item.endTime}}
							</view>
						</view>
						<view class="boda" @click.stop="btnptkf(item.contact)">
							<image src="/static/image/icon15.png" mode=""></image>
							<text>拨打</text>
						</view>
					</view>
					<view class="" style="margin-top: 20rpx;font-weight: 600;color: #3D3D3D;" v-if="kefuarr.length > 0">
						骑行前咨询:
					</view>
					<view class="top" v-for="(item,index) in kefuarr" :key="index" v-if="orderflag == false">
						<view class="dianhua">
							{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
							<view class="wz">
								工作时间：{{item.startTime}}~{{item.endTime}}
							</view>
						</view>
						<view class="boda" @click.stop="btnptkf(item.contact)">
							<image src="/static/image/icon15.png" mode=""></image>
							<text>拨打</text>
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="wzs">
						客服电话高峰期可能遇忙，请耐心等待
					</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if="kefuflag"></view>
		
		<view class="custom-select" v-if="show">
		    <view class="mask" @click="show = false"></view>
		    <view class="select-content">
		      <view class="select-header">
		        <text>选择运营区</text>
		        <text class="close" @click="show = false">×</text>
		      </view>
		      <view class="search-box">
		        <input 
		          type="text" 
		          v-model="searchKey" 
		          placeholder="搜索运营区" 
		          @input="handleSearch"
		        />
		      </view>
			  <scroll-view scroll-y class="select-list">
					<view class="select-item" v-for="item in displayList" :key="item.value" @click="selectItem(item)"
						:class="{ 'highlight': searchKey && item.label.includes(searchKey) }">
						{{ item.label }}
						<view style="font-size: 24rpx;color: #999;margin-left: auto;"> {{ item.deptName == null ? '--' : item.deptName}}</view>
					</view>
					</scroll-view>
		    </view>
		  </view>
		<!-- <tab-bar :indexs='1'></tab-bar> -->
		<view class="daohang" v-if="daohangflag">
			<view class="name">
				 {{chexq.name == null ? '--' : chexq.name}} 
				 <text v-if="chexq.type == 1">停车区</text>
				 <text v-if="chexq.type == 2">禁停区</text>
				 <text v-if="chexq.type == 3">禁行区</text>
				 <text v-if="chexq.type == 4">景区</text>
			</view>
			<view class="shuom">
				{{chexq.remark == null ? '暂无说明' : chexq.remark}}
			</view>
			<image :src="chexq.picture" mode="aspectFill"></image>
			<view class="anniu" @click="btndh">
				导航前往
			</view>
			<view class="cha" @click="daohangflag = false">
				×
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconobj:this.$store.state.iconobj,
				appimg:{},
				bgc: {
					backgroundColor: "",
				},
				latitude: '',
				longitude: '',
				lat: '',
				lng: '',
				latsc: '',
				lngsc: '',
				rtindex: 2,
				covers: [],
				shoptcflag: false,
				iconPath: '',
				tcindex: 0,
				taocanflag: false,
				kefuflag: false,
				iconflag: false,
				cheobj: {},
				jingweidu: '',
				taocaolist: [],
				polyline: [],
				kefulist: [],
				orderAreaId: '',
				areaId: '',
				orderobj: {},
				orderAreaReturnVerify: '',
				fajinobj: {},
				fjflag: false,
				showIconAndCallout: false,
				xianshinum:1,
				orderflag: false,
				hei: {
					height: '64vh'
				},
				sockedata: {},
				socketTask: null,
				messages: [],
				reconnectAttempts: 0,
				maxReconnectAttempts: 5,
				reconnectInterval: 3000,
				isPageActive: true,
				deviceMac: '',
				newMarkers: '',
				count: 0,
				timer: null,
				user: {},
				xllat: '',
				xllng: '',
				circles: [],
				nearbyMarkers: [],
				listData: [],
				yyid: '',
				cachedPolyline: [], // 缓存多边形数据
				cachedParkingData: {}, // 缓存停车区域数据
				isFirstLoad: true ,// 是否是首次加载
				/** 地图区域请求序号：多次拖动/缩放时以最后一次为准，避免旧请求后返回把数据盖回去 */
				_aoneRequestSeq: 0,

				gonggaoxq:{},
				gonggaoflag:false,
				announcements: {},
				lists: [],
				tiaozhuanlist:[],
				kefuflag:false,
				kefulist:[],
				kefuarr:[],
				jinweidu:'',
				parkingList:[],
				qbtype:'',
				adminflag:false,
				guanliflag:false,
				list:[],
				searchKey: '',
				displayList:[],
				show:false,
				weizhifu:false,
				weizhifuid:'',
				huiyuanlist:[],
				chexq:{},
				daohangflag:false,
				wzobj:{}
			}
		},
		onLoad(option) {
			this.getimg()
            if(option.qbtype){
				this.qbtype = option.qbtype
			}
		},
		onShow() {
			this.$store.dispatch('jiance');
			this.getinfo()
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.jinweidu = res.longitude + ',' + res.latitude
					this.xllat = res.latitude
					this.xllng = res.longitude
					console.log('每次获取定位',res);
				},
				fail: (err) => {
					console.error('获取位置失败：', err)
				}
			})
			this.getAone()
			// 不在请求前清空 covers/多边形，等接口成功后再一次替换，避免先空一帧
			this.sockedata = ''
			this.getMyLocation()
			setTimeout(()=>{
				this.setMapScale()
				this.getgonggao()
				this.getlunbo()
			},1000)
			this.isFirstLoad = true // 重置首次加载标志
			setTimeout(()=>{
				// this.toggleIconAndCallout(1)
			},3000)
		},
		onUnload() {
			this.clearTimer()
		},
		onHide() {
			this.clearTimer()
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '快来一起骑行吧',  
		      path: '/pages/nearbystores/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '快来一起骑行吧',  
		      query: '',  
		      path: '/pages/nearbystores/index'  
		    }  
		  },
		methods: {
			// 支持多订单进行扫码跳转
			btnorder(){
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						console.log(res)
						function getQueryParam(url, paramName) {
							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							let results = regex.exec(url)
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue)
						this.sn = getQueryParam(decodedValue, 's')
						this.$u.get(`/app/device/availableDetail?sn=${this.sn}`).then((res) => {
							if (res.code == 200) {
							  if(res.data){
								  this.modelId = res.data.modelId
								  uni.navigateTo({
								  	url:'/page_fenbao/storedlist/trueorder/index?modelId=' + this.modelId + '&sn=' + this.sn + '&duoirder=1'
								  })
							  }else{
								 uni.showModal({
								   title: '提示',
								   content: '当前车辆不可用',
								   showCancel: false,
								   confirmText: '知道了'
								 })
							  }
							}else{
							  uni.showModal({
							    title: '提示',
							    content: res.msg,
							    showCancel: false,
							    confirmText: '知道了'
							  })
							}
						})
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 获取动态图片
			getimg(){
				this.$u.get(`/app/app/detail?id=${this.$store.state.appid}`).then(res =>{
					if(res.code == 200){
						this.$store.state.app = res.data
						this.appimg = this.$store.state.app.imgConfig
						if(res.data.startArticleEnabled == true){
							if(uni.getStorageSync('xieyi')){
								console.log('已同意过');
							}else{
								uni.navigateTo({
									url:'/pages/agreement?startArticleId=' + res.data.startArticleId
								})
							}
						}
					}
				})
			},
			// 点击去支付
			btnweizhifu(){
				uni.navigateTo({
					url:'/page_user/yongche/orderxq?id=' + this.weizhifuid
				})
			},
			// 获取个人信息
			getinfo(){
				this.$u.get("/getInfo").then(res => {
					if(res.code == 200){
						this.user = res.user
						uni.setStorageSync('user',res.user)
						this.getzhifu()
						this.getorderdevice()
						res.roles.filter(item => {
							if(item == 'sys_admin'){
								this.adminflag = true
							}
						})
						console.log('000000000000000000000000000000000000000000000000000000');
						// if(res.roles != null || res.roles.length > 0){
							this.$u.get('/bst/area/list?pageNum=1&pageSize=999').then((res) => {
								if (res.code == 200) {
									console.log('1111111111111111111111111111111111111111111111111111111111');
									if(res.rows.length > 0){
										this.guanliflag = true
										this.list = res.rows.map(item => ({
											value: item.id,
											label: item.name,
											deptName: item.userName
										}))
										this.displayList = this.list; // 重置显示列表
										console.log(this.displayList,'0000')
									}else{
										this.guanliflag = false
									}
								}
							})
						// }
					}else if(res.code == 401){
						this.getlogo()
					}
				})
			},
			// 静默登录
			getlogo(){
				let taht = this
				wx.login({
					success(res) {
						if (res.code) {
							let data = {
								loginCode: res.code,
								appId:taht.$store.state.appid
							}
							taht.$u.post('/wxLogin', data).then(res => {
			                    if (res.code == 200) {
									uni.setStorageSync('token', res.token)
									taht.getinfo()
									taht.getlunbo()
								}
							})
						}
					},
				})
			},
			handleSearch(e) {
				const value = e.detail.value;
				console.log(e,value);
				if (!value) {
					// 搜索框为空时显示全部数据
					this.displayList = this.list;
				} else {
					// 有搜索内容时过滤数据
					this.displayList = this.list.filter(item => {
					  const label = String(item.label || '').toLowerCase();
					  const deptName = String(item.deptName || '').toLowerCase();
					  const searchValue = String(value || '').toLowerCase();
					  return label.includes(searchValue) || deptName.includes(searchValue);
					});
				}
			},
			selectItem(item) {
				this.confirm(item)
				this.show = false
				this.searchKey = '' // 选择后清空搜索框
				this.displayList = this.list // 重置显示列表
			},
			// 选择好运营区
			confirm(e) {
				console.log(e,e.value)
				uni.setStorageSync('adminAreaid', e.value)
				uni.setStorageSync('adminname', e.label)
				uni.navigateTo({
					url: `/page_shanghu/guanli/admin_worke?id=${e.value}&entryFrom=nearbystores`
				})
			},
			// 获取本人正在使用的订单设备
			getorderdevice() {
				this.$u.get("/app/order/mineProcessing").then((res) => {
					if (res.code == 200) {
						if (res.data) {
							this.orderflag = true
							if(this.qbtype == 1){
								console.log('11');
							}else{
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						}else{
							this.orderflag = false
						}
					}
				})
			},
			// 点击进行中订单进行跳转
			btnjinx(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			// 点击扫码
			btnsaoma(){
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						console.log(res)
						function getQueryParam(url, paramName) {
							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							let results = regex.exec(url)
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue)
						this.sn = getQueryParam(decodedValue, 's') || getQueryParam(decodedValue, 'sn')
						// 解析t参数（套餐id）
						let taocanId = getQueryParam(decodedValue, 't') || ''
						this.$u.get("/app/order/mineProcessing").then(res =>{
							if(res.code == 200){
								if(res.data){
									uni.switchTab({
										url:'/pages/nearbystores/index'
									})
								}else{
									this.$u.get(`/app/device/availableDetail?sn=${this.sn}`).then((res) => {
										if (res.code == 200) {
										  if(res.data){
											  this.modelId = res.data.modelId
											  // 构建跳转URL，如果有t参数则带上
											  let navigateUrl = '/page_fenbao/storedlist/trueorder/index?modelId=' + this.modelId + '&sn=' + this.sn
											  if(taocanId && taocanId !== ''){
											  	navigateUrl += '&t=' + taocanId
											  }
											  uni.navigateTo({
											  	url: navigateUrl
											  })
										  }else{
											 uni.showModal({
											   title: '提示',
											   content: '当前车辆不可用',
											   showCancel: false,
											   confirmText: '知道了'
											 })
										  }
										}else{
										  console.log('系统');
										  uni.showModal({
										    title: '提示',
										    content: res.msg,
										    showCancel: false,
										    confirmText: '知道了'
										  })
										}
									})
								}
							}
						})
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 点击显示客服
			btnkf(){
				this.$u.get(`/app/customerService/indexList?radius=1000&center=${this.jinweidu}&areaId=${this.user.areaId}`).then(res => {
					if(res.code == 200){
						this.kefulist = res.after
						this.kefuarr = res.before
						if(this.kefulist.length > 0 || this.kefuarr.length > 0){
							this.kefuflag = true
						}else{
							uni.showToast({
								title: '当前暂无客服',
								icon: 'none',
								duration: 5000
							})
						}
					}
				})
			},
			// 点击进行跳转页面
			btntiao(num){
				if(num == 2){ //跳转到使用帮助页
					uni.navigateTo({
						url:'/page_user/bangzhu'
					})
				}else if(num == 3){ //跳转到车辆故障上报
					uni.navigateTo({
						url:'/page_user/guzhang/index'
					})
				}
			},
			btnpage(num){
				if(num == 2){ //跳转到我的订单页面
					uni.navigateTo({
						url:'/pages/myorder/index'
					})
				}else if(num == 4){
					uni.navigateTo({
						url:'/page_fenbao/index'
					})
				}else{
					uni.navigateTo({
						url:'/page_fenbao/chepai?areaId=' + this.yyid
					})
				}
			},
			// 请求查询是否有未支付订单
			getzhifu(){
				this.$u.get("/app/order/unpaid").then((res) => {
					if (res.code == 200) {
						if(res.data){
							this.weizhifuid = res.data.id
							this.weizhifu = true
							let that = this
							uni.showModal({
								title: '提示',
								content: '您当前还有未支付订单，是否前去支付？',
								showCancel: true,
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/page_user/yongche/orderxq?id=' + that.weizhifuid
										})
									} else if (res.cancel) {
									    console.log('取消') // 用户点击取消
									}
								}
							})
						}else{
							this.weizhifu = false
						}
					}
				})
			},
			// 获取广告轮播图
			getlunbo(){
				this.$u.get(`/app/ad?appId=${this.$store.state.appid}&areaId=${this.yyid}`).then(res => {
					if(res.code == 200){
						this.lists = []
						this.tiaozhuanlist = res.data
					}
				})
			},
			// 点击跳转轮播图跳转
			btnshangjia(item,index){
				console.log(item,index,'000');
				if(item.urlType == 1){
					uni.navigateTo({
						url: '/page_fenbao/webview?url=' + item.url
					})
				}else{
					uni.navigateTo({
						url: '/' + item.url
					})
				}
			},
			// 点击跳转到我的
			btnmy(){
				uni.switchTab({
					url:'/pages/my'
				})
			},
			// 点击头部滚动通知
			btntopgg(){
				if(this.announcements.content){
					this.gonggaoflag = true
				}
			},
			// 点击公告我知道了
			btnggtc(){
				this.gonggaoflag = false
				uni.setStorageSync('noticeId', this.announcements.id)
			},
			// 获取最新公告
			getgonggao(){
				this.$u.get(`/app/article/first?code=USER_NOTICE&appId=${this.$store.state.appid}`).then(res =>{
					if(res.code == 200){
						this.announcements = res.data
						if(res.data.id != uni.getStorageSync('noticeId')){
							this.gonggaoflag = true
						}
					}
				})
			},
			
			// 地图视野变化：begin 时显示中心点图标 picimg；end 时仅拖动拉数据，缩放不重复拉区划
			regionchange(e) {
				if (!e.detail) {
					return
				}
				// 与微信行为一致：拖动/缩放开始时显示中心定位钉，结束后再隐藏
				if (e.type === 'begin') {
					this.iconflag = true
					return
				}
				if (e.type !== 'end') {
					return
				}
				const causedBy = e.detail.causedBy
				if (causedBy === 'scale') {
					this.iconflag = false
					return
				}
				if (this.rtindex != 2) {
					this.iconflag = false
					return
				}
				const loc = e.detail.centerLocation
				if (!loc || loc.longitude == null || loc.latitude == null) {
					this.iconflag = false
					return
				}
				this.jingweidu = loc.longitude + ',' + loc.latitude
				this.getAone()
				this.iconflag = false
				setTimeout(() => {
					this.showIconAndCallout = true
					this.toggleIconAndCallout(1)
				}, 1000)
			},
			debounceUpdate() {
				if (this.updateTimer) {
					clearTimeout(this.updateTimer)
				}
				this.updateTimer = setTimeout(() => {
					this.getAone()
				}, 300) // 延迟300ms执行更新
			},
			getNearbyMarkers(clickedLat, clickedLon) {
					const nearbyMarkers = this.listData.filter(item => {
						if (item.latitude && item.longitude) {
							const distance = this.haversineDistance(
								parseFloat(clickedLat),
								parseFloat(clickedLon),
								parseFloat(item.latitude),
								parseFloat(item.longitude)
							);
							return distance <= 100
						}
						return false
					})
					// 更新 circles 数组来绘制淡灰色的圆形区域
					this.circles = [{
						latitude: clickedLat,
						longitude: clickedLon,
						color: '#fff', // 圆形边框颜色（淡灰色）
						fillColor: '#00000010', // 圆形填充颜色（淡灰色）
						radius: 100, // 圆的半径（单位：米）
						strokeWidth: 1
					}]
					this.nearbyMarkers = nearbyMarkers
			},
			haversineDistance(lat1, lon1, lat2, lon2) {
				const R = 6371e3 // 地球半径/米
				const toRad = angle => angle * Math.PI / 180
				const dLat = toRad(lat2 - lat1)
				const dLon = toRad(lon2 - lon1)
				const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2)
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
				return R * c
			},
			status(item) {
				if (item.status == 0) {
					return '仓库中'
				} else if (item.status == 1) {
					return '待租'
				} else if (item.status == 2) {
					return '预约中'
				} else if (item.status == 3) {
					return '骑行中'
				} else if (item.status == 4) {
					return '临时锁车中'
				} else if (item.status == 6) {
					return '调度中'
				} else if (item.status == 7) {
					return '未绑定'
				} else if (item.status == 8) {
					return '禁用中'
				}
			},
			startTimer() {
			  this.timer = setInterval(() => {
			    this.count++
			    // 这里替换为你的实际逻辑
				this.setMapScale()
			  }, 5000)
			},
			// 清除定时器
			clearTimer() {
			  if (this.timer) {
			    clearInterval(this.timer)
			    this.timer = null
			    console.log("定时器已清除")
			  }
			},
			// 点击地图中的店铺操作
			handleMarkerClick(e) {
				console.log(e,'45454545454545');
				if(this.orderflag == true){
					uni.showToast({
						title: '当前已有进行中订单',
						icon: 'none',
						duration: 2000
					})
				}else{
					let id = String(e.detail.markerId)
					if (id.slice(-1) == 1) {
						console.log('店铺')
						this.covers.filter(item => {
							if (item.id == id) {
								item.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/u8ONjRuMpydcZ4WuA6vP'
								this.shoptcflag = true
							}
						})
					} else if (id.slice(-1) == 2) {
						console.log('车辆')
						if (this.orderAreaId == '') {
							this.covers.filter(item => {			
								if (item.id == id) {
									this.taocanflag = true
									this.$u.get(`/app/device/availableDetail?id=${id.slice(0, -1)}`).then((res) => {
										if (res.code == 200) {
											this.cheobj = res.data
											this.areaId = res.data.areaId
											this.gethuiyuan()
											this.getArea()
										}else{
											uni.showToast({
												title: res.msg,
												icon: 'none',
												duration: 2000
											})
										}
									})
								}
							})
						} else {
							console.log('进行中订单');
							uni.showToast({
								title: '当前已有订单',
								icon: 'none',
								duration: 2000
							})
						}
					} else if (id.slice(-1) == 3) {
						console.log('导览')
					} else if (id.slice(-1) == 4) {
						console.log('停车区')
						this.daohangflag = true
						this.getcha(id.slice(0,-1))
					} else if (id.slice(-1) == 5) {
						console.log('禁停区')
						this.daohangflag = true
						this.getcha(id.slice(0,-1))
					} else if (id.slice(-1) == 6) {
						console.log('禁行区')
						this.daohangflag = true
						this.getcha(id.slice(0,-1))
					} else if (id.slice(-1) == 7) {
						console.log('景区')
						this.daohangflag = true
						this.getcha(id.slice(0,-1))
					}
				}
			},
			getcha(id){
				this.$u.get(`/app/areaSub/detail?id=${id}`).then(res =>{
					if(res.code == 200){
						this.chexq = res.data
					}
				})
			},
			// 点击跳转导航
			btndh(){
				uni.openLocation({
					latitude: this.chexq.latitude, //纬度-目的地/坐标点
					longitude: this.chexq.longitude, //经度-目的地/坐标点
					name: this.chexq.name, //地点名称
					address:this.chexq.name //详细地点名称
				})
			},
			// 请求会员卡列表
			gethuiyuan(){
			    this.$u.get(`/app/vip/listByArea?areaId=${this.areaId}`).then(res=>{
					if(res.code == 200){
						this.huiyuanlist = res.data
					}
				})				
			},
			// 点击跳转到购买会员列表
			btnhuiyuan(){
				uni.navigateTo({
					url:'/page_fenbao/huiyuan/index?areaId=' + this.areaId
				})
			},
			
			// 点击进入商户中心
			btngl(){
				if(this.user.authTypes.includes('1')){
					if(uni.getStorageSync('wzid')){
						if (this.list.length < 2) {
							uni.setStorageSync('adminAreaid', this.list[0].value);
							uni.setStorageSync('adminname', this.list[0].label)
							uni.navigateTo({
							    url: `/page_shanghu/guanli/admin_worke?id=${this.list[0].value}&entryFrom=nearbystores`
							})
						} else {
							this.show = true
						}
					}else{
						uni.navigateTo({
							url:'/pages/xiqian'
						})
					}
				}else{
					uni.navigateTo({
						url:'/page_user/shiming'
					})
				}
			},
			// 点击去下单
			btndetaxq() {
				this.$u.get(`/getInfo`).then(res => {
					if (res.code == 200) {
						this.taocanflag = false
						uni.navigateTo({
							url: '/page_fenbao/storedlist/trueorder/index?modelId=' + this.cheobj.modelId + '&sn=' + this.cheobj.sn
						})
					} else if (res.code == 401) {
						uni.showModal({
							title: '提示',
							content: '您当前未登录，是否前去登录？',
							showCancel: true,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: '/pages/login/login'
									})
								} else if (res.cancel) {

								}
							}
						})
					}
				})
			},
			// 点击响铃寻车
			btnxlxc() {
				// 响铃获取自身经纬度判断是否在车辆旁边
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.jinweidu = res.longitude + ',' + res.latitude
						this.xllat = res.latitude
						this.xllng = res.longitude
						console.log('每次获取定位',res);
					},
					fail: (err) => {
						console.error('获取位置失败：', err)
					}
				})
				let arr = []
				if(this.devicesar && this.devicesar.length > 0){
					    arr = this.devicesarr.map(item => {
					    const name = item.name || ''
					    return name.slice(-12)
					})
				}
				
				let data = {
					id: this.cheobj.id,
					requiredIot:true,
					lat: this.xllat,
					lon: this.xllng,
					macList:arr
				}
				this.$u.put(`/app/device/iot/ring`,data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						})
					} else if (res.code == 401) {
						uni.showModal({
							title: '提示',
							content: '您当前未登录，是否前去登录？',
							showCancel: true,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: '/pages/login/login'
									})
								} else if (res.cancel) {

								}
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击隐藏车辆弹窗
			btncheyc() {
				this.taocanflag = false
				this.newMarkers = ''
			},
			// 点击选择骑行套餐
			btntcxz(index) {
				this.tcindex = index
			},
			// 点击拨打平台客服电话
			btnptkf(contact) {
				uni.makePhoneCall({
					phoneNumber: contact,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击跳转到租车门店
			btnmendain() {
				uni.navigateTo({
					url: '/page_fenbao/storedlist/index'
				})
			},
			// 点击右侧图标
			btntap(num) {
				if (num == 3) {
					uni.navigateTo({
						url:'/page_user/luru/daolan'
					})
				} else {
					this.rtindex = num
					this.shoptcflag = false
					// 不在切换时先清空，由 getqingqiu 成功回调一次替换
					this.getqingqiu()
				}
			},
			// 点击调用回到地图中心点
			btnhuiz() {
				this.setMapScale()
			},
			// 回到地图中心点
			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)
					}
				})
			},
			// 请求附近车辆and门店
			getqingqiu() {
				if (this.rtindex == 1) {
					this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/upX2lLilhrRi4tttdHlo'
				} else if (this.rtindex == 2) {
					this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uX0FBv86yDIR5tIqjoe2'
					this.$u.get(`/app/device/listNearBy?radius=10000&center=${this.jingweidu}&areaId=${this.user.areaId == undefined ? null : this.user.areaId}`).then((res) => {
						if (res.code == 200) {
							this.listData = res.data
							const extra = Array.isArray(this.newMarkers) ? this.newMarkers : []
							const nextCovers = [...extra]
							if (this.sockedata && this.sockedata.latitude) {
								nextCovers.push({
									latitude: this.sockedata.latitude,
									longitude: this.sockedata.longitude,
									width: 8,
									height: 8,
									iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uow9Zq3edTUYCVHI9H60',
								})
							}
							res.data.forEach((item) => {
								const shopCover = {
									id: this.rtindex == 1 ? parseInt(item.id + "1") : this.rtindex == 2 ? parseInt(item.id + "2") : parseInt(item.id + "3"),
									latitude: item.latitude,
									longitude: item.longitude,
									width: 35,
									height: 40,
									iconPath: item.modelIcon == null ? this.iconPath : item.modelIcon,
									callout: {
										content: item.vehicleNum == null ? item.sn : '' + item.vehicleNum,
										color: '#0D75E5',
										fontSize: 10,
										borderRadius: 10,
										bgColor: '#fff',
										padding: 3,
										display: 'ALWAYS',
									}
								}
								nextCovers.push(shopCover)
							})
							this.covers = nextCovers
						}
					})
				} else if (this.rtindex == 3) {
					this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/un7ecyEN8vsJhlEnXfD4'
				} else {
					this.iconPath = null
				}
			},
			// 获取自身位置
			getMyLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.latitude = Number(res.latitude) - 0.005
						this.longitude = Number(res.longitude) + 0.005
						this.jingweidu = this.longitude + ',' + this.latitude
						this.getqingqiu()
					},
					fail: (err) => {
						console.error('获取位置失败：', err)
					}
				})
			},
			convertBoundaryToPolyline(boundary) {
				if (!boundary) return null
				const points = JSON.parse(boundary).map(coord => ({
					latitude: coord[1],
					longitude: coord[0]
				}))
				const polyline = {
					points: points,
					fillColor: "#55888820",
					strokeColor: "#22FF00",
					strokeWidth: 1,
					zIndex: 1,
					isOperationArea: true
				}
				return polyline
			},
			convertBoundaryToPolylines(boundaries, num) {
				if (!Array.isArray(boundaries)) {
					console.error('边界数据不是数组:', boundaries)
					return []
				}
				const polylines = boundaries.map(boundary => {
					if (!boundary) {
						console.warn('边界数据为空')
						return null
					}
					let coords
					try {
						coords = JSON.parse(boundary)
					} catch (error) {
						console.error('解析边界JSON失败:', error)
						return null
					}
					if (!Array.isArray(coords)) {
						console.error('解析后的边界数据不是数组:', coords)
						return null
					}
					const points = coords.map(coord => {
						if (!Array.isArray(coord) || coord.length < 2) {
							console.warn('坐标数据格式错误:', coord)
							return null
						}
						return {
							latitude: parseFloat(coord[1]),
							longitude: parseFloat(coord[0])
						}
					}).filter(point => point !== null)
					
					if (points.length < 3) {
						console.warn('有效坐标点不足3个，无法构成多边形')
						return null
					}
					// 根据类型设置不同的样式
					let style = {}
					if (num == 1) { // 停车区
						style = {
							fillColor: "#88888850",
							strokeColor: "#88888850",
							strokeWidth: 1,
							zIndex: 1,
							isOperationArea: false
						}
					} else if (num == 2) { // 禁停区
						style = {
							fillColor: "#FF473E40",
							strokeColor: "#FF473E",
							strokeWidth: 2,
							zIndex: 1,
							isOperationArea: false
						}
					} else if (num == 3) { // 禁行区
						style = {
							fillColor: "#FFC10740",
							strokeColor: "#FFC107",
							strokeWidth: 2,
							zIndex: 1,
							isOperationArea: false
						}
					}else if (num == 4) { // 景区
						style = {
							fillColor: "#4abd2040",
							strokeColor: "#4abd20",
							strokeWidth: 2,
							zIndex: 1,
							isOperationArea: false
						}
					}
					return {
						points: points,
						...style
					}
				}).filter(polyline => polyline !== null)
				return polylines
			},
			toggleIconAndCallout(num) {
				if (this.cheobj == '') {
					uni.showToast({
						title: '请选选择车辆',
						icon: 'none',
						duration: 2000
					})
				} else {
					if(num == 2){
						this.showIconAndCallout = !this.showIconAndCallout
						if(this.xianshinum == 1){
							this.xianshinum = 2
						}else if(this.xianshinum == 2){
							this.xianshinum = 3
						}else if(this.xianshinum == 3){
							this.xianshinum = 1
						}
					}
					if (this.xianshinum == 1) {
						const newMarkers = []
						this.parkingList.forEach(item => {
							newMarkers.push({
								id: item.type == 1 ? parseInt(item.id + "4") : item.type == 2 ? parseInt(item.id + "5") : item.type == 3 ? parseInt(item.id + "6") : parseInt(item.id + "7"),
								latitude: parseFloat(item.latitude),
								longitude: parseFloat(item.longitude),
								width: 18,
								height: 26,
								iconPath: item.type == 1 ? 'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item.type == 2 ? 'https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq' : item.type == 3 ? 'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' : 'https://api.ccttiot.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250829161752_210_17-1756455764351.png',
								callout: {
									content: item.name,
									color: '#ffffff',
									fontSize: 12,
									borderRadius: 8,
									bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FF473E' : item.type == 3 ? '#FFC107' : '#3bbd55',
									padding: 4,
									display: 'ALWAYS'
								},
								isCalloutVisible: true // 添加标记
							})
						})
						this.newMarkers = newMarkers
						this.$set(this, 'covers', [...this.covers, ...newMarkers])
					} else if(this.xianshinum == 2) {
						// 过滤掉所有气泡显示的标记
						this.$set(this, 'covers', this.covers.filter(marker => !marker.isCalloutVisible))
					}else if(this.xianshinum == 3){
						const newMarkers = []
						this.parkingList.forEach(item => {
							newMarkers.push({
								id: item.type == 1 ? parseInt(item.id + "4") : item.type == 2 ? parseInt(item.id + "5") : item.type == 3 ? parseInt(item.id + "6") : parseInt(item.id + "7"),
								latitude: parseFloat(item.latitude),
								longitude: parseFloat(item.longitude),
								width: 18,
								height: 26,
								iconPath: item.type == 1 ? 'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item.type == 2 ? 'https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq' : item.type == 3 ? 'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' : 'https://api.ccttiot.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250829161752_210_17-1756455764351.png',
								// callout: {
								// 	content: item.name,
								// 	color: '#ffffff',
								// 	fontSize: 12,
								// 	borderRadius: 8,
								// 	bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FF473E' : item.type == 3 ? '#FFC107' : '#3bbd55',
								// 	padding: 4,
								// 	display: 'ALWAYS'
								// },
								isCalloutVisible: true // 添加标记
							})
						})
						this.newMarkers = newMarkers
						this.$set(this, 'covers', [...this.covers, ...newMarkers])
					}
				}
			},
			// 获取停车点的所有数据
			getParking() {
				if(!this.yyid) {
					console.warn('用户区域ID不存在，无法获取停车区域数据')
					return
				}
				// 检查缓存
				// if(this.cachedParkingData[this.yyid] && !this.isFirstLoad) {
				// 	this.updatePolylineFromCache()
				// 	return
				// }
				this.$u.get(`/app/areaSub/listByArea?areaId=${this.yyid}`).then((res) => {
					if (res.code === 200 && Array.isArray(res.data)) {
						// 缓存数据
						 const filteredData = res.data.filter(item => item.status != 1);
						this.cachedParkingData[this.yyid] = filteredData
						const type1Data = []
						const type2Data = []
						const type3Data = []
						const type4Data = []
						filteredData.forEach(row => {
							if(row.type == 1) type1Data.push(row)
							else if(row.type == 2) type2Data.push(row)
							else if(row.type == 3) type3Data.push(row)
							else if(row.type == 4) type4Data.push(row)
						})
						const processBoundaries = (data, type) => {
							const validBoundaries = data.map(row => row.boundaryStr).filter(boundary => boundary && typeof boundary === 'string' && boundary.trim() !== '')
							if(validBoundaries.length > 0) {
								const polylines = this.convertBoundaryToPolylines(validBoundaries, type)
								if(polylines && polylines.length > 0) {
									return polylines
								}
							}
							return []
						}
						// 先处理所有边界数据
						const type1Polylines = processBoundaries(type1Data, 1)
						const type2Polylines = processBoundaries(type2Data, 2)
						const type3Polylines = processBoundaries(type3Data, 3)
						const type4Polylines = processBoundaries(type4Data, 4)
						// 保留现有的运营区边界
						const operationAreaPolylines = this.polyline.filter(p => p.isOperationArea)
						// 合并所有边界数据
						const allPolylines = [
							...operationAreaPolylines,
							...type1Polylines,
							...type2Polylines,
							...type3Polylines,
							...type4Polylines
						]
						// 缓存多边形数据
						this.cachedPolyline = allPolylines
						// 更新显示
						this.polyline = allPolylines
						this.parkingList = filteredData
						this.isFirstLoad = false
					}
				})
			},
			// 计算运营区边界线条
			updatePolylineFromCache() {
				// 保留现有的运营区边界
				const operationAreaPolylines = this.polyline.filter(p => p.isOperationArea)
				// 从缓存中获取其他边界数据
				const otherPolylines = this.cachedPolyline.filter(p => !p.isOperationArea)
				// 合并数据
				const allPolylines = [...operationAreaPolylines, ...otherPolylines]
				// 更新显示
				this.polyline = allPolylines
			},
			// 请求运营区停车点，禁行区，
			getArea() {
				this.$u.get(`/app/area/detail?id=${this.areaId}`).then((res) => {
					if (res.code == 200) {
						const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
						if (polylines) {
							this.$set(this, 'polyline', [polylines])
						}
						this.getParking()
					}
				})
			},
			// 第一次请求运营区停车点，禁行区，
			getAone() {
				this._aoneRequestSeq = (this._aoneRequestSeq || 0) + 1
				const requestSeq = this._aoneRequestSeq
				this.$u.get(`/app/area/nearby?id=${this.user.areaId == null ? '' : this.user.areaId}&radius=10000&center=${this.jingweidu}&appId=${this.$store.state.appid}`).then((resp) => {
					if (requestSeq !== this._aoneRequestSeq) {
						return
					}
					if (resp.code == 200) {
						if(resp.data){
							this.yyid = resp.data.id
							this.getlunbo()
						}
						if(resp.data && resp.data.boundaryStr) {
							const polylines = this.convertBoundaryToPolyline(resp.data.boundaryStr)
							if(polylines) {
								// 只替换「运营区」多边形，保留子区域(停车/禁行等)直到 getParking 回来，避免中间一帧只有运营区、子区域全空导致闪烁
								const otherPolylines = (this.polyline || []).filter(
									(p) => p && !p.isOperationArea
								)
								// 若当前 poly 已被清成单运营区，cachedPolyline 里可能还有上一次的子区域，拿来顶住过渡更稳
								const fromCache = (this.cachedPolyline || []).filter(
									(p) => p && !p.isOperationArea
								)
								const others = otherPolylines.length
									? otherPolylines
									: fromCache
								this.$set(this, 'polyline', [polylines, ...others])
								this.getParking()
								if(resp.data && resp.data.id){
									this.loadNearbyDevices(resp.data.id)
								}
							}
						}
					}
				})
			},
			loadNearbyDevices(areaId) {
				if (this.rtindex == 2) {
					const mapReqSeq = this._aoneRequestSeq
					this.$u.get(`/app/device/listNearBy?radius=10000&center=${this.jingweidu}&areaId=${areaId}`).then((res) => {
						if (mapReqSeq !== this._aoneRequestSeq) {
							return
						}
						if (res.code == 200) {
							this.listData = res.data
							this.updateMarkers()
						}
					})
				}
			},
			updateMarkers() {
				const newMarkers = []
				this.listData.forEach(item => {
					if(item.latitude && item.longitude) {
						const marker = {
							id: this.rtindex == 1 ? parseInt(item.id + "1") : this.rtindex == 2 ? parseInt(item.id + "2") : parseInt(item.id + "3"),
							latitude: parseFloat(item.latitude),
							longitude: parseFloat(item.longitude),
							width: 35,
							height: 40,
							iconPath: item.modelIcon == null ? this.getIconPath() : item.modelIcon,
							callout: {
								content: item.vehicleNum || item.sn || '',
								color: '#0D75E5',
								fontSize: 10,
								borderRadius: 10,
								bgColor: '#fff',
								padding: 3,
								display: 'ALWAYS'
							}
						}
						newMarkers.push(marker)
					}
				})
				this.tempCovers = newMarkers
				// 仅替换「车辆」图钉（id 以 2 结尾为附近车辆模式），保留停车点/其它加塞的 cover，避免请求间隙整图点标先空再出
				if (this.rtindex == 2) {
					const kept = (this.covers || []).filter((m) => {
						if (m == null) return false
						if (m.id === undefined || m.id === null) return true
						return String(m.id).slice(-1) !== '2'
					})
					this.covers = [...kept, ...newMarkers]
				} else {
					this.covers = this.tempCovers
				}
			},
			getIconPath() {
				if (this.rtindex == 1) {
					return 'https://api.ccttiot.com/smartmeter/img/static/upX2lLilhrRi4tttdHlo'
				} else if (this.rtindex == 2) {
					return this.iconobj.mappic
				} else if (this.rtindex == 3) {
					return 'https://api.ccttiot.com/smartmeter/img/static/un7ecyEN8vsJhlEnXfD4'
				}
				return null
			},
			updatePolyline(newPolylines) {
				// 使用Vue的响应式更新
				this.tempPolyline = [...newPolylines]
				this.polyline = this.tempPolyline
			},
			updateCovers(newCovers) {
				// 使用Vue的响应式更新
				this.tempCovers = [...newCovers]
				this.covers = this.tempCovers
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.xuanfu{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #4297F3;
		position: fixed;
		left: 22rpx;
		top: 58%;
		text-align: center;
		line-height: 60rpx;
		image{
			width: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
		}
	}
	.active {
		image {
			z-index: 99 !important;
		}
		.bike_item {
			border: 1px solid #4297F3 !important;
		}
	}
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@keyframes fadeIn {
	  from {
	    opacity: 0;
	  }
	  to {
	    opacity: 1;
	  }
	}
	.daohang{
		width: 750rpx;
		height: 652rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		position: fixed;
		left: 0;
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
		padding: 44rpx 38rpx;
		box-sizing: border-box;
		z-index: 999 !important;
		.cha{
			font-size: 60rpx;
			font-weight: 600;
			position: absolute;
			top: 30rpx;
			right: 34rpx;
		}
		.name{
			font-weight: 600;
			font-size: 44rpx;
			color: #3D3D3D;
			display: flex;
			align-items: center;
			text{
				padding: 6rpx 10rpx;
				background-color: #0D75E5;
				color: #fff;
				margin-left: 10rpx;
				border-radius: 6rpx;
				font-size: 26rpx;
			}
		}
		.shuom{
			font-weight: 600;
			font-size: 32rpx;
			color: #808080;
			margin-top: 22rpx;
		}
		image{
			width: 680rpx;
			height: 234rpx;
			margin-top: 30rpx;
		}
		.anniu{
			width: 682rpx;
			height: 90rpx;
			background: #4C97E7;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
			margin-top: 62rpx;
		}
	}
	.rukou{
		width: 198rpx;
		height: 56rpx;
		margin-top: 290rpx;
		margin-left: 40rpx;
	}
	.custom-select {
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 999;
		}
		.select-content {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;
			z-index: 1000;
			height: 50vh; // 最大高度
			display: flex;
			flex-direction: column;
			padding-bottom: 20rpx;
			.select-header {
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #eee;
				.close {
					font-size: 40rpx;
					color: #999;
				}
			}
			.search-box {
				padding: 15rpx 20rpx;
				border-bottom: 1px solid #eee;
				input {
					width: 100%;
					height: 60rpx;
					background: #f5f5f5;
					border-radius: 30rpx;
					padding: 0 30rpx;
					font-size: 28rpx;
				}
			}
			.select-list {
				flex: 1;
				max-height: calc(50vh - 140rpx);
				min-height: 260rpx; // 为列表添加最小高度
				.select-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 30rpx;
					border-bottom: 1px solid #eee;
					font-size: 28rpx;
					&.highlight {
						background-color: #f0f9ff;
						color: #2d8cf0;
					}
					&:active {
						background: #f5f5f5;
					}
				}
			}
		}
	}
	.kefutc{
		animation: fadeIn 0.5s ease-in-out forwards;
		position: fixed;
		top: 580rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		.bot{
			margin-top: 30rpx;
			.wz{
				margin-top: 10rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}
			.wzs{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #7C7C7C;
			}
		}
		.top{
			width: 570rpx;
			height: 122rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 14rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.dianhua{
				font-size: 24rpx;
				color: #666;
				padding-left: 26rpx;
				box-sizing: border-box;
			}
			.boda{
				width: 94rpx;
				height: 94rpx;
				background: #DCEDFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				padding-top: 8rpx;
				box-sizing: border-box;
				image{
					width: 42rpx;
					height: 40rpx;
				}
				text{
					display: block;
				}
			}
		}
		.bj{
			position: absolute;
			top: -280rpx;
			z-index: -1;
			left: 50%;
			transform: translateX(-50%);
			width: 614rpx;
			height: 1140rpx;
		}
	}
	.guanggao{
		width: 700rpx;
		height: 180rpx;
		margin: auto;
		margin-top: 34rpx;
		position: relative;
		overflow: hidden;
		.kefu{
			width: 108rpx;
			height: 146rpx;
			position: absolute;
			bottom: -80rpx;
			right: 10rpx;
		}
	}
	.botbox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 520rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		.saoma{
			image{
				width: 56rpx;
				height: 56rpx;
				margin-right: 8rpx;
			}
			font-size: 40rpx;
			font-weight: 600;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 686rpx;
			height: 90rpx;
			background-color: #4C97E7;
			border-radius: 50rpx;
			margin: auto;
			margin-top: 34rpx;
		}
		.kuaijie{
			display: flex;
			justify-content: space-between;
			padding: 0 26rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
			image{
				width: 96rpx;
				height: 96rpx;
			}
		}
	}
	.topimg{
		width: 136rpx;
		height: 56rpx;
		position: fixed;
		top: 104rpx;
		left: 36rpx;
		z-index: 99;
	}
	.noticetc{
		width: 680rpx;
		height: 950rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 340rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		.btn{
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			background-color: #4297F3;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			margin: auto;
			margin-top: 30rpx;
		}
		.name{
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 30rpx;
		}
		.biaoti{
			font-size: 32rpx;
			margin-top: 20rpx;
		}
		.cont{
			width: 100%;
			height: 620rpx;
			overflow: scroll;
			background-color: #ececec;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
	.scroll-text {
	  width: 100%;
	  overflow: hidden;
	  box-sizing: border-box;
	  display: inline-block;
	  white-space: nowrap;
	  animation: scroll 8s linear infinite;
	  height: 72rpx;
	  line-height: 72rpx;
	}
	.scroll-item {
	  display: inline-block;
	  padding: 0 10px;
	  font-size: 16px;
	  height: 72rpx;
	  line-height: 72rpx;
	}
	@keyframes scroll {
	  0% {
	    transform: translateX(100%);
	  }
	  100% {
	    transform: translateX(-100%);
	  }
	}
	.gonggao{
		width: 682rpx;
		height: 72rpx;
		overflow: hidden;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.3);
		border-radius: 53rpx 53rpx 53rpx 53rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		margin: auto;
		margin-top: 186rpx;
		padding-left: 70rpx;
		.container{
			width: 560rpx;
			overflow: hidden;
			height: 72rpx;
			line-height: 72rpx;
		}
	}
    .fixdivce {
    	padding: 12rpx 22rpx 12rpx 22rpx;
    	position: fixed;
    	left: 0;
    	top: 34vh;
    	width: 280rpx;
    	height: 40vh;
    	background: #FFFFFF10;
    	border-radius: 0 40rpx 40rpx 0;
    	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
    	.scrollable-content::-webkit-scrollbar {
    		display: none;
    	}
    	.scrollable-content {
    		height: 100%;
    		overflow-y: auto;
    		.divce_li:last-child {
    			border-bottom: 1rpx solid #fff;
    		}
    		.divce_li {
    			padding: 10rpx 0;
    			display: flex;
    			flex-wrap: nowrap;
    			align-items: center;
    			border-bottom: 1rpx solid #D8D8D8;
    			.left_img {
    				image {
    					width: 44rpx;
    					height: 70rpx;
    				}
    			}
    			.right_cont {
    				margin-left: 20rpx;
    				display: flex;
    				flex-wrap: wrap;
    				font-weight: 400;
    				font-size: 24rpx;
    				color: #3D3D3D;
    				.right_top {
    					width: 100%;
    					display: flex;
    					flex-wrap: nowrap;
    					align-items: center;
    					.right_top_left {
    						margin-left: auto;
    						display: flex;
    						flex-wrap: nowrap;
    						align-items: center;
    						image {
    							margin-right: 6rpx;
    							width: 12rpx;
    							height: 26rpx;
    						}
    					}
    				}
    				.right_bot {
    					width: 100%;
    					display: flex;
    					flex-wrap: nowrap;
    					justify-content: space-between;
    					margin-top: 8rpx;
    				}
    			}
    		}
    	}
    }
	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
		z-index: 9;
	}
	.tingchetc {
		width: 624rpx;
		height: 610rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		top: 572rpx;
		z-index: 99;
		padding: 28rpx 36rpx;
		box-sizing: border-box;
		.btnan {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			.fj {
				width: 252rpx;
				height: 72rpx;
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				border: 2rpx solid #808080;
				font-weight: 600;
				font-size: 32rpx;
				color: #808080;
				text-align: center;
				line-height: 72rpx;
			}
			.qx {
				width: 252rpx;
				height: 72rpx;
				background: #4C97E7;
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				text-align: center;
				line-height: 72rpx;
				box-sizing: border-box;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		.tcimg {
			width: 552rpx;
			height: 300rpx;
			margin-top: 28rpx;
		}
		.shuom {
			font-size: 26rpx;
			color: #3D3D3D;
			margin-top: 18rpx;
			text {
				color: #4C97E7;
			}
		}
		.topname {
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			display: flex;
			align-items: center;
			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 14rpx;
			}
		}
	}
	.conts_box {
		width: 680rpx;
		height: 360rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		margin-top: 38rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding-bottom: 20rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 220rpx;
		.orderzt {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			width: 100%;
		}
		.txtss {
			margin-top: 18rpx;
			padding-left: 20rpx;
			width: 100%;
			font-weight: 500;
			font-size: 28rpx;
			color: #808080;
		}
		.dh {
			width: 160rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			border: 1px solid #333;
			font-size: 28rpx;
			padding-top: 10rpx;
			box-sizing: border-box;
		}
		.suocheanniu {
			display: flex;
			align-items: center;
			.lssc {
				width: 160rpx;
				height: 60rpx;
				border-radius: 30rpx;
				text-align: center;
				background-color: #0D75E5;
				color: #fff;
				font-size: 28rpx;
				box-sizing: border-box;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.cont_li {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			.left {
				display: flex;
				flex-wrap: wrap;
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				.km {
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.speed {
					margin-top: 18rpx;
					width: 226rpx;
					height: 22rpx;
					background: #ccc;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					.speeds {
						height: 100%;
						background: #4297F3;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}
				}
				.NO {
					width: 100%;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 18rpx;
				}
			}
			.right {
				width: 70%;
				padding-right: 20rpx;
				font-size: 24rpx;
				color: #333;
				image {
					width: 160rpx;
					height: 110rpx;
				}
			}
		}
	}
	.picimg {
		width: 46rpx;
		height: 76rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		top: 30%;
		z-index: 99;
	}
	.kefutc {
		animation: fadeIn 0.5s ease-in-out forwards;
		position: fixed;
		top: 660rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		.bot {
			margin-top: 30rpx;
			.wz {
				margin-top: 10rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}
			.wzs {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #7C7C7C;
			}
		}
		.top {
			width: 538rpx;
			height: 122rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 14rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.dianhua {
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
				padding-left: 26rpx;
				box-sizing: border-box;
			}
			.boda {
				width: 94rpx;
				height: 94rpx;
				background: #DCEDFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				padding-top: 8rpx;
				box-sizing: border-box;
				text {
					display: block;
				}
			}
		}
	}
	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 98;
		background-color: rgba(0, 0, 0, 0.08);
		top: 0;
		left: 0;
	}
	.clmask {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 98;
		background-color: rgba(0, 0, 0, 0.08);
		top: 0;
		left: 0;
	}
	.biketc {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		z-index: 99;
		background-color: #fff;
		border-radius: 30rpx;
		width: 100%;
		margin: auto;
		padding-bottom: 60rpx;
		box-sizing: border-box;
		.topfor {
			width: 100%;
			margin: auto;
			max-height: 664rpx;
			background: #fff;
			border-radius: 30rpx 30rpx 0 0;
			padding: 44rpx 34rpx;
			box-sizing: border-box;
			position: relative;
            .qixing{
				width: 100%;
				height: 130rpx;
				position: absolute;
				top: -90rpx;
				left: 0;
				z-index: -1;
			}
			.bikeyc {
				position: absolute;
				top: 20rpx;
				right: 32rpx;
				font-size: 70rpx;
				font-weight: 600;
			}
			.biketaocan {
				display: flex;
				overflow: scroll;
				.bikelist {
					margin-right: 22rpx;
					.bike_item {
						border: 1px solid #fff;
						margin-top: 36rpx;
						padding-top: 16rpx;
						padding-left: 24rpx;
						padding-right: 24rpx;
						box-sizing: border-box;
						width: 368rpx;
						height: 280rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						position: relative;
						overflow: hidden;
						image {
							width: 82rpx;
							height: 50rpx;
							position: absolute;
							top: 0;
							right: 0;
							z-index: -1;
						}
						.name {
							font-weight: 600;
							font-size: 32rpx;
							color: #3D3D3D;
						}
						.qibu {
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							color: #3D3D3D;
							margin-top: 16rpx;
						}
						.ckxq {
							width: 368rpx;
							height: 58rpx;
							background: #4297F3;
							font-weight: 600;
							font-size: 28rpx;
							color: #FFFFFF;
							position: absolute;
							left: 0;
							bottom: 0;
							text-align: center;
							line-height: 58rpx;
						}
					}
				}
			}
			.bikesy {
				width: 100%;
				margin-top: 30rpx;
				padding-top: 36rpx;
				box-sizing: border-box;
				display: flex;
				.bikelt {
					width: 50%;
					text-align: center;
					.bikegongli {
						font-weight: 600;
						font-size: 48rpx;
						color: #3D3D3D;
					}
					.bikets {
						font-size: 28rpx;
						color: #808080;
						margin-top: 18rpx;
					}
					image {
						width: 48rpx;
						height: 36rpx;
						margin-right: 18rpx;
					}
				}
				.bikert {
					width: 50%;
					text-align: center;
					.bikegongli {
						font-weight: 600;
						font-size: 48rpx;
						color: #3D3D3D;
					}
					.bikets {
						font-size: 28rpx;
						color: #808080;
						margin-top: 18rpx;
					}
					image {
						width: 22rpx;
						height: 48rpx;
						margin-right: 18rpx;
					}
				}
			}
		}
		.anniuks {
			width: 100%;
			height: 90rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			image{
				width: 90rpx;
				height: 88rpx;
			}
			text {
				display: inline-block;
				height: 90rpx;
				width: 546rpx;
				background: #4C97E7;
				border-radius: 20rpx;
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
	.shoptc {
		position: fixed;
		width: 696rpx;
		max-height: 312rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 28rpx 34rpx;
		box-sizing: border-box;
		.cont {
			margin-top: 40rpx;
			display: flex;
			.shuoming {
				.name {
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.price {
					font-size: 24rpx;
					color: #FF1C1C;
					margin-top: 20rpx;

					text {
						font-size: 44rpx;
					}
				}
			}
			image {
				width: 166rpx;
				height: 128rpx;
				margin-right: 26rpx;
			}
		}
		.juli {
			display: flex;
			align-items: center;
			margin-top: 12rpx;
			.mi {
				padding: 0 10rpx;
				box-sizing: border-box;
				height: 38rpx;
				line-height: 38rpx;
				background: #DCEDFF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				font-size: 24rpx;
				color: #0D75E5;
				margin-right: 20rpx;
			}
			.dizhi {
				font-size: 28rpx;
				color: #808080;
			}
		}
		.top {
			display: flex;
			justify-content: space-between;
			.name {
				font-size: 32rpx;
				color: #3D3D3D;
				font-weight: 600;
			}
			.zu {
				font-size: 24rpx;
				color: #3D3D3D;
				display: flex;
				align-items: center;
				image {
					width: 22rpx;
					height: 22rpx;
				}
			}
		}
	}
	.rticon {
		position: fixed;
		right: 28rpx;
		bottom: 600rpx;
		image {
			width: 78rpx;
			height: 96rpx;
			display: block;
			margin-top: 32rpx;
		}
	}
	.lticon {
		position: fixed;
		left: 28rpx;
		top: 300rpx;
		image {
			width: 88rpx;
			height: 88rpx;
			display: block;
			margin-top: 32rpx;
		}
	}
	.map {
		width: 100%;
		height: 130vh;
		position: absolute;
		top: -30vh;
		z-index: -1;
		.center-marker {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -80%); /* 定位在中心点上方 */
		  pointer-events: none; /* 使其不可点击 */
		}
	}
</style>