You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
186 lines
3.9 KiB
186 lines
3.9 KiB
<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>
|
|
|