星油企业版
This commit is contained in:
caolc
326
BagStation/pages/newRoutePlanning/components/footerScroll.vue
Normal file
326
BagStation/pages/newRoutePlanning/components/footerScroll.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user