星油企业版
This commit is contained in:
caolc
269
BagStation/pages/newRoutePlanning/components/screen.vue
Normal file
269
BagStation/pages/newRoutePlanning/components/screen.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<view class="screen">
|
||||
<view class="screen_left">
|
||||
<!-- <uni-icons type="smallcircle-filled" size='25'></uni-icons> -->
|
||||
<image style="width: 50rpx;height: 50rpx;" src="../../../static/img/price.png"></image>
|
||||
<view class="screen_text">
|
||||
<text @click="showFn" >{{filterData[seleIndex].lable}}</text>
|
||||
<view v-if="isShow.filterBox" class="filterBox">
|
||||
<view @click="priceSele(item,index)" :style="{color:index==seleIndex?'#666666':''}" v-for="(item,index) in filterData">{{item.lable}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<image style="width: 40rpx;height: 25rpx;" src="../../../static/img/chevron-up.png"></image>
|
||||
</view>
|
||||
<view @click="move" class="screen_bottom">{{site?'沿途站点':'全路径'}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
selePrice:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return null
|
||||
}
|
||||
},
|
||||
polyline: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
site:true,
|
||||
seleIndex:1,
|
||||
filterData:[],
|
||||
list: [],
|
||||
isShow: {
|
||||
screen: false,
|
||||
filterBox:false,
|
||||
strategy: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;
|
||||
|
||||
},
|
||||
selePrice: function(n, o) {
|
||||
console.log(this.selePrice,'jiage');
|
||||
// this.filterData[1].lable = '低于' + this.selePrice.middlePrice;
|
||||
// this.filterData[1].value = this.selePrice.middlePrice;
|
||||
// this.filterData[2].lable = '最低价格';
|
||||
// this.filterData[2].value = this.selePrice.minPrice;
|
||||
// this.filterData
|
||||
this.filterData = []
|
||||
if(n){
|
||||
Object.keys(this.selePrice).forEach((item,index)=>{
|
||||
if(this.selePrice[item]!==null){
|
||||
this.filterData.push({
|
||||
lable:item=='middlePrice'?'低于' + Number( this.selePrice.middlePrice).toFixed(2) :'最低价格',
|
||||
value:item=='middlePrice'? Number(this.selePrice.middlePrice).toFixed(2) : Number(this.selePrice.minPrice).toFixed(2)
|
||||
})
|
||||
}
|
||||
})
|
||||
this.filterData.unshift({
|
||||
lable:'所有价格',
|
||||
value:99999
|
||||
});
|
||||
if( this.filterData.length==1){
|
||||
this.seleIndex = 0;
|
||||
}else{
|
||||
this.seleIndex = 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeFn(){
|
||||
this.isShow.filterBox=false
|
||||
},
|
||||
showFn(e){
|
||||
this.isShow.filterBox=!this.isShow.filterBox;
|
||||
this.$emit('swich',false);
|
||||
},
|
||||
move(){
|
||||
this.$emit('mapEventListeners','mapEventListeners','MoveToLocation',this.site);
|
||||
this.site = !this.site;
|
||||
|
||||
},
|
||||
getprice(){
|
||||
if( this.filterData.length==1) this.seleIndex = 0;
|
||||
return this.filterData[this.seleIndex].value||0.00
|
||||
},
|
||||
priceSele(e,w){
|
||||
this.seleIndex = w;
|
||||
this.isShow.filterBox = false;
|
||||
this.$emit('mapEventListeners','mapEventListeners','localScreen','footer')
|
||||
console.log(e)
|
||||
},
|
||||
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: 20px;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user