星油企业版
This commit is contained in:
caolc
298
BagStation/pages/newRoutePlanning/components/addressSelector.vue
Normal file
298
BagStation/pages/newRoutePlanning/components/addressSelector.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
|
||||
<view :style="{top:(styles.top + styles.height + 10 )+'px'}" class="header">
|
||||
<view class="sele_car">
|
||||
<view @click="backFn()" class="flex ac">
|
||||
<uni-icons type="back" size="30"></uni-icons>
|
||||
<!-- <uni-icond type="back" size="30"></uni-icond> -->
|
||||
</view>
|
||||
<view class=" flex sele_car_right">
|
||||
<view @click="chooseLocation('start')" class=" Padding flex ac flexone">
|
||||
<view class="yuan" />
|
||||
<view class="flexone margin size">{{Route.start.title}}</view>
|
||||
</view>
|
||||
<view @click="chooseLocation('end')" class=" Padding addressInput flex ac flexone">
|
||||
<view style="background-color: #FF6700;" class="yuan" />
|
||||
<view class="flexone margin size colorb">{{Route.end.title||'请输入终点'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isShow.conditions" class="filter">
|
||||
<view v-for="(item,index) in menuList" :key='index' class="filter_item">
|
||||
<view @click="seleFilter(item,index)"> {{ item.value?item.value.split('/')[0]:item.title}} </view>
|
||||
<view :style="{maxHeight:item.SublistOpen?'200rpx':'0rpx'}" class="conditions">
|
||||
<view :style="{color:item.value?item.value.split('/')[0] == items.lable?'#666666':'#bbbbbb':'#bbbbbb'}" @click="filterItemSele(index,indexs)" v-for="(items,indexs) in item.Sublist" :key='indexs' style="margin-bottom: 10rpx; font-size: 25rpx;">{{items.lable}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import oilSiteApi from '@/api/oil-site.js'
|
||||
export default {
|
||||
props: {
|
||||
Route: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
polyline: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
polyline: function(n, o) {
|
||||
if (n.length !== 0) {
|
||||
this.isShow.conditions = true
|
||||
} else {
|
||||
this.isShow.conditions = false
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
styles: {},
|
||||
isShow: {
|
||||
conditions: false
|
||||
},
|
||||
header:null,
|
||||
menuList: [{
|
||||
title: '距离',
|
||||
value: '5KM/5',
|
||||
field: 'juLi',
|
||||
SublistOpen: false,
|
||||
Sublist: [{
|
||||
lable: '5KM',
|
||||
value: '5'
|
||||
}, {
|
||||
lable: '20KM',
|
||||
value: '20'
|
||||
}, {
|
||||
lable: '30KM',
|
||||
value: '30'
|
||||
},{
|
||||
lable: '50KM',
|
||||
value: '50'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: '全类型',
|
||||
value: '全部/2',
|
||||
field: 'highSpeed',
|
||||
SublistOpen: false,
|
||||
Sublist: [
|
||||
{
|
||||
lable: '全部',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
lable: '高速',
|
||||
value: '1'
|
||||
}, {
|
||||
lable: '非高速',
|
||||
value: '0'
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.styles = uni.getMenuButtonBoundingClientRect();
|
||||
console.log(this.styles);
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.header').boundingClientRect(data => {
|
||||
console.log("得到布局位置信息" + JSON.stringify(data));
|
||||
this.header = data
|
||||
console.log("节点离页面顶部的距离为" + data.top);
|
||||
}).exec();
|
||||
},
|
||||
created() {
|
||||
this.getConditionMenu();
|
||||
|
||||
},
|
||||
methods: {
|
||||
getElement(){
|
||||
return this.styles.top + this.styles.height + 10 + this.header.height
|
||||
},
|
||||
filterItemSele(index,indexs){
|
||||
this.menuList[index].value = `${this.menuList[index].Sublist[indexs].lable}/${this.menuList[index].Sublist[indexs].value}`;
|
||||
this.menuList[index].SublistOpen=false;
|
||||
console.log(this.datassFn(),'/-/-/');
|
||||
if(index==2){
|
||||
this.$emit('mapEventListeners','localScreen',this.datassFn())
|
||||
}else{
|
||||
this.$emit('mapEventListeners','apiScreen',this.datassFn())
|
||||
}
|
||||
},
|
||||
getConditionMenu() {
|
||||
oilSiteApi.getConditionMenu().then(res => {
|
||||
if (res.code !== 20000) return
|
||||
Object.keys(res.data).forEach((item,index)=>{
|
||||
let data = {
|
||||
title: index==0?'全渠道':'油品',
|
||||
value: index==0?'全渠道/':'0#/0#',
|
||||
field: index==0?'siteChannel':'oilProductCode',
|
||||
SublistOpen: false,
|
||||
Sublist: []
|
||||
}
|
||||
res.data[item].forEach(items=>{
|
||||
data.Sublist.push({
|
||||
lable:index==0?items.name:items.id,
|
||||
value:items.id
|
||||
})
|
||||
})
|
||||
this.menuList.push(data)
|
||||
})
|
||||
this.menuList[2].Sublist.unshift({
|
||||
lable:'全渠道',
|
||||
value:''
|
||||
});
|
||||
// [this.menuList[1],this.menuList[3]]=[this.menuList[3],this.menuList[1]]
|
||||
[this.menuList[0],this.menuList[1],this.menuList[2],this.menuList[3]] = [this.menuList[0],this.menuList[3],this.menuList[1],this.menuList[2]];
|
||||
console.log(this.menuList, '***')
|
||||
})
|
||||
},
|
||||
datassFn(){
|
||||
let data = {}
|
||||
this.menuList.forEach((item,index)=>{
|
||||
data[item.field] = item.value?item.value.split('/')[1]:''
|
||||
})
|
||||
return data
|
||||
},
|
||||
seleFilter(e, w) {
|
||||
this.menuList.forEach((item,index)=>{
|
||||
if(w==index) return
|
||||
item.SublistOpen = false
|
||||
})
|
||||
e.SublistOpen = !e.SublistOpen;
|
||||
this.$emit('closeFooterScroll')
|
||||
},
|
||||
chooseLocation(e) {
|
||||
uni.navigateTo({
|
||||
url: './chooseLocation?type=' +
|
||||
`${e}/${this.Route.start.latitude},${this.Route.start.longitude}`
|
||||
})
|
||||
},
|
||||
backFn() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.conditions {
|
||||
position: absolute;
|
||||
background-color: #FFFFFF;
|
||||
width: 100%;
|
||||
max-height: 200rpx;
|
||||
top: 68rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15rpx;
|
||||
/* padding: 21rpx 0; */
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
overflow: auto;
|
||||
transition: max-height 0.3s, opacity 0.3s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.filter_item {
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
margin-top: 30rpx;
|
||||
padding: 24rpx 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
/* border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px; */
|
||||
}
|
||||
|
||||
.filter {
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.colorb {
|
||||
color: #BBBBBB;
|
||||
}
|
||||
|
||||
.Padding {
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
.addressInput {
|
||||
background: #F0F0F0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.textoverflow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.size {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.margin {
|
||||
margin: 0 28rpx;
|
||||
}
|
||||
|
||||
.flexone {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: #2E8EF7;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sele_car_right {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
/* padding: 0 27.2rpx; */
|
||||
padding-left: 27.2rpx;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jc {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ac {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sele_car {
|
||||
height: 194rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
padding: 18rpx 32rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
padding: 0 44rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user