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.
299 lines
6.5 KiB
299 lines
6.5 KiB
2 years ago
|
<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>
|