MP_XOIL_company_new/BagStation/pages/overviewMap/components/footer.vue

<template>
	<view class="footer_body">
		<view @click="$emit('reset')" class="myPosition">
			<image src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/myPosition.png"></image>
		</view>
		<view v-if="!details" class="selector">
			<view  class="selector_left" >
				<view class="selector_left_d">
					<view v-if="isShow.km" class="selector_left_d_popup">
						<view @click="seleKm(index)" :style="{color:seleIndex==index?'':'#bbbbbb'}" v-for="(item,index) in kmData" :key="index">{{item.lable}}</view>
					</view>
					<image style="width: 50rpx;height: 50rpx;" src="../../../static/img/price.png"></image>
					<text style="margin: 0 20rpx;" @click="isShow.km=!isShow.km">
						{{kmData[seleIndex].lable}}
					</text>
					<image style="width: 40rpx;height: 25rpx;transform: rotate(180deg);" src="../../../static/img/chevron-up.png"></image>
				</view>
			</view>
			<view @click="upScale" class="screen_bottom">全站 / 区域</view>
		</view>
		<serviceStation v-if="details" @openMapApp='openMapApp' @dragMap='dragMap'  :details='details'></serviceStation>
	</view>
</template>

<script>
	import serviceStation from '../../newRoutePlanning/components/serviceStation.vue'
	export default{
		components:{
			serviceStation
		},
		props:{
			value:{
				type:Number,
				default:2000
			},
			mapScale:{
				type:Number,
				default:9
			},
			spareMapScale:{
				type:Number,
				default:9
			},
			details:{
				type:Object,
				default:()=>{
					return null
				}
			}
		},
		data() {
			return {
				isShow:{
					km:false
				},
				seleIndex:0,
				kmData:[
					{
						lable:'5KM',
						value:5000
					},
					{
						lable:'10KM',
						value:10000
					},
					{
						lable:'30KM',
						value:30000
					}
				]
			}
		},
		methods:{
			close(){
				this.isShow.km=false
			},
			seleKm(e){
				this.seleIndex = e;
				setTimeout(()=>{
					this.isShow.km=false;
				},500);
				this.$emit('input',this.kmData[this.seleIndex].value);
			},
			upScale(){
				this.$emit('upScale')
			},
			openMapApp(){
				console.log('导')
				let that = this
				wx.openLocation({
					latitude: that.details.latitude, // 纬度
					longitude: that.details.longitude, // 经度
					name: that.details.siteName, // 地址名称
					address: that.details.siteName, // 详细地址
					success: function(r) {
						console.log(r)
					},
					fail: function(res) {
						console.log('拉起失败啦', res)
					}
				})
			},
			dragMap(e,w){
				this.$emit('dragMap',e,w)
			},
		}
	}
</script>

<style scoped>
	.selector_left_d_popup{
		position: absolute;
		width: 100%;
		background-color: #FFFFFF;
		height: 200rpx;
		overflow-y: auto;
		top: -220rpx;
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}
	.selector_left_d{
		font-size: 36rpx;
		color: #666666;
		font-weight: 600;
		/* gap:20rpx; */
		display: flex;
		align-items: center;
		height: 100%;
		    width: max-content;
			position: relative;
	}
	.selector_left{
		flex: 1;
	}
	.screen_bottom {
		width: 240rpx;
		height: 80rpx;
		background: #FF6700;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: 600;
	}
	.myPosition{
		    display: flex;
		    background-color: #ffffff;
		    width: 70rpx;
		    height: 70rpx;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    border-radius: 10px;
		    margin-left: 85%;
			margin-bottom: 20rpx;
	}
	.myPosition image{
		/* background-color: #FFFFFF; */
		width: 45rpx;
		height: 45rpx;
	}
	.selector{
		width: calc(80% + 50rpx);
		background-color: #FFFFFF;
		border-radius: 10px;
		margin: 0 auto;
		margin-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: flex-end;
		padding: 10rpx 25rpx;
		
	}
	.footer_body{
		position: absolute;
		z-index: 999999;
		bottom: 0;
		width: 100%;
		color: #000000;
		width: 100vw;
	}
</style>