星油企业版

BagStation/pages/overviewMap/components/footer.vue

@@ -0,0 +1,186 @@
+<template>
+	<view class="footer_body">
+		<view @click="$emit('reset')" class="myPosition">
+			<image src="@/static/img/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:'20KM',
+						value:20000
+					},
+					{
+						lable:'30KM',
+						value:30000
+					},
+					{
+						lable:'50KM',
+						value:50000
+					}
+				]
+			}
+		},
+		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>