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.
327 lines
7.8 KiB
327 lines
7.8 KiB
2 years ago
|
<template>
|
||
|
|
<view class="footerScroll_body">
|
||
|
|
<!-- <view class="mapIcon">
|
||
|
|
<uni-icons @click=" isShow.strategy=!isShow.strategy" type="map-pin-ellipse" size='25'></uni-icons>
|
||
|
|
<view :style="{top:!isShow.strategy?'0px':'-180rpx',right:!isShow.strategy?'120rpx':'40rpx',opacity:!isShow.strategy?'0':'1'}" class="seleStrategy">推荐路线</view>
|
||
|
|
<view :style="{top:!isShow.strategy?'0px':'-90rpx',right:!isShow.strategy?'120rpx':'80rpx',opacity:!isShow.strategy?'0':'1'}" class="seleStrategy">推荐路线</view>
|
||
|
|
<view :style="{opacity:!isShow.strategy?'0':'1'}" style="top: 0;right: 120rpx;" class="seleStrategy">推荐路线</view>
|
||
|
|
</view> -->
|
||
|
|
<!-- <swiper v-if="!isShow.screen" previous-margin='30rpx' class="swiper" next-margin='380rpx' :duration="500">
|
||
|
|
<swiper-item v-for="(item,index) in list" :key='index'>
|
||
|
|
<view @click="mapRoutePlanning(item,index)" class="swiper-item">
|
||
|
|
<view style="position: relative;">
|
||
|
|
<uni-icons @click="collection(item,index)" :color="item.type=='lately'?'#BBBBBB':'#FF9C58'"
|
||
|
|
type="star" size='20'></uni-icons>
|
||
|
|
<view v-if="item.type=='lately'" class="lately">最近搜索</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<view class="swiper-item_title">起点</view>
|
||
|
|
<view class="swiper-item_text">{{item.start.title}}</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<view class="swiper-item_title">终点</view>
|
||
|
|
<view class="swiper-item_text">{{item.end.title}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper> -->
|
||
|
|
<!-- <view v-if="isShow.screen" class="screen">
|
||
|
|
<view class="screen_left">
|
||
|
|
<uni-icons type="smallcircle-filled" size='25'></uni-icons>
|
||
|
|
<view class="screen_text">
|
||
|
|
<text @click="isShow.filterBox=!isShow.filterBox" >{{filterData[seleIndex].lable}}</text>
|
||
|
|
<view v-if="isShow.filterBox" class="filterBox">
|
||
|
|
<view :style="{color:index==seleIndex?'#666666':''}" v-for="(item,index) in filterData">{{item.lable}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<uni-icons type="heart-filled" size='25'></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view class="screen_bottom">沿途站点</view>
|
||
|
|
</view> -->
|
||
|
|
<!-- 图标 -->
|
||
|
|
<mapIcon @swich='swich' @reset='reset' ref='mapIcon' :polyline='polyline' @strategy='strategy' />
|
||
|
|
<!-- 收藏 -->
|
||
|
|
<recentSearch ref='recentSearch' v-if='!isShow.screen&&list.length!==0' @mapRoutePlanning='mapRoutePlanning'></recentSearch>
|
||
|
|
<!-- 价格筛选 -->
|
||
|
|
<screen @swich='swich' @mapEventListeners='mapEventListeners' ref = 'screen' @filter='filter' v-show="isShow.screen&&!isShow.serviceStation" :selePrice='selePrice'/>
|
||
|
|
<!-- 详情 -->
|
||
|
|
<serviceStation @openMapApp='openMapApp' @dragMap='dragMap' :details='details' v-if="isShow.serviceStation"/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import screen from './screen.vue'
|
||
|
|
import recentSearch from './recentSearch.vue'
|
||
|
|
import mapIcon from './mapIcon.vue'
|
||
|
|
import serviceStation from './serviceStation.vue'
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
screen,
|
||
|
|
recentSearch,
|
||
|
|
mapIcon,
|
||
|
|
serviceStation
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
selePrice:{
|
||
|
|
type:Object,
|
||
|
|
default:()=>{
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
polyline: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
details:{
|
||
|
|
type:Object,
|
||
|
|
default:()=>{
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
seleIndex:1,
|
||
|
|
filterData:[
|
||
|
|
{
|
||
|
|
lable:'所有价格',
|
||
|
|
value:0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
lable:'低于7.72',
|
||
|
|
value:1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
lable:'最低价格',
|
||
|
|
value:2
|
||
|
|
}
|
||
|
|
],
|
||
|
|
list: [],
|
||
|
|
isShow: {
|
||
|
|
screen: false, //路线规划价格筛选条件
|
||
|
|
filterBox:false,//价格显示控制，已迁移组件内部
|
||
|
|
strategy:false,//路线规划策略选着
|
||
|
|
serviceStation:false,//油站详情控件
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
//获取最近地址列表
|
||
|
|
this.list = uni.getStorageSync('recentSearch') || [];
|
||
|
|
console.log(this.list)
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
//是否开始路线规划控制最近搜索显示隐藏
|
||
|
|
polyline: function(n, o) {
|
||
|
|
n.length !== 0 ? this.isShow.screen = true : this.isShow.screen = false
|
||
|
|
},
|
||
|
|
details:function(n,o){
|
||
|
|
this.isShow.serviceStation = n? true:false
|
||
|
|
console.log(n,'油站点击','控件状态→',this.isShow.serviceStation)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
swich(e){
|
||
|
|
if(e){
|
||
|
|
this.$refs.screen.closeFn()
|
||
|
|
}else{
|
||
|
|
this.$refs.mapIcon.isShow.strategy=false
|
||
|
|
}
|
||
|
|
this.$emit('closeAddressSelector')
|
||
|
|
},
|
||
|
|
mapIconClose(){
|
||
|
|
this.$refs.mapIcon.isShow.strategy=false
|
||
|
|
},
|
||
|
|
screenClose(){
|
||
|
|
this.$refs.screen.closeFn()
|
||
|
|
},
|
||
|
|
openMapApp(){
|
||
|
|
console.log('导')
|
||
|
|
this.$emit('openMapApp')
|
||
|
|
},
|
||
|
|
mapEventListeners(e,w,j=''){
|
||
|
|
console.log(e,w,'****')
|
||
|
|
this.$emit(e,w,j)
|
||
|
|
},
|
||
|
|
filter(){
|
||
|
|
return {
|
||
|
|
enterprisePrice:this.$refs.screen.getprice()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
reset(){
|
||
|
|
this.$emit('mapEventListeners','reset')
|
||
|
|
},
|
||
|
|
strategy(e){
|
||
|
|
this.$emit('mapEventListeners','updateRoute',null,null,e);
|
||
|
|
|
||
|
|
},
|
||
|
|
dragMap(e,w){
|
||
|
|
this.$emit('dragMap',e,w)
|
||
|
|
},
|
||
|
|
//点击最近开始路线规划
|
||
|
|
mapRoutePlanning(e, i) {
|
||
|
|
this.$emit('mapEventListeners','cardPlanning', e)
|
||
|
|
},
|
||
|
|
//修改缓存最近搜索逻辑
|
||
|
|
collection(e, i) {
|
||
|
|
let recentSearch = uni.getStorageSync('recentSearch');
|
||
|
|
if (e.type == 'lately') {
|
||
|
|
e.type = 'collection';
|
||
|
|
if (i == 0 && e.id != recentSearch[0].id) {
|
||
|
|
recentSearch.splice(i + 1, 0, e);
|
||
|
|
} else {
|
||
|
|
recentSearch.splice(i, 1, e);
|
||
|
|
}
|
||
|
|
} else if (e.type == 'collection') {
|
||
|
|
this.list.splice(i, 1);
|
||
|
|
recentSearch.splice(i, 1);
|
||
|
|
}
|
||
|
|
uni.setStorageSync('recentSearch', recentSearch);
|
||
|
|
},
|
||
|
|
checkFn(e, list) {
|
||
|
|
let check = true
|
||
|
|
for (let i = 0; i < list.length; i++) {
|
||
|
|
if (list[i].id == e.id) {
|
||
|
|
check = false
|
||
|
|
return
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return check
|
||
|
|
},
|
||
|
|
lower(e) {
|
||
|
|
console.log(e)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.seleStrategy{
|
||
|
|
height: 80rpx;
|
||
|
|
width: 180rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
border-radius: 10px;
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: top .3s,right 0.3s,opacity 0s;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.mapIcon{
|
||
|
|
text-align: end;
|
||
|
|
padding-right: 30rpx;
|
||
|
|
padding-bottom: 15rpx;
|
||
|
|
position: relative;
|
||
|
|
height: 80rpx;
|
||
|
|
}
|
||
|
|
.filterBox {
|
||
|
|
position: absolute;
|
||
|
|
width: max-content;
|
||
|
|
height: 244rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
top: -280rpx;
|
||
|
|
border-radius: 10px;
|
||
|
|
font-size: 28rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10rpx 25rpx;
|
||
|
|
color: #BBBBBB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen_left {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen_text {
|
||
|
|
margin: 0 30rpx;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #666666;
|
||
|
|
font-weight: 600;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screen {
|
||
|
|
margin: 0 30rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 15px;
|
||
|
|
margin-bottom: 90rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 15rpx;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lately {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: -22rpx;
|
||
|
|
width: 90rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
background-color: #FF9C58;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 16rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-item_text {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #666666;
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 5rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-item_title {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #BBBBBB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-item {
|
||
|
|
width: 300rpx;
|
||
|
|
height: 300rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 22rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footerScroll_body {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999999;
|
||
|
|
width: 100vw;
|
||
|
|
bottom:0rpx;
|
||
|
|
// height: 300rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
width: 100%;
|
||
|
|
height: 300rpx;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
</style>
|