caoliancun/MP_XOIL_company_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
xiaozhiyong
2023-08-30 11:32:32 +08:00
parent 90e2d26117
commit 6df26c7fe5
12 changed files with 590 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
BagStation/pages/newRoutePlanning/components/footerScroll.vue
View File

@@ -38,14 +38,37 @@
</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 class="site" v-if="isShow.screen">
<view @click="showSite">油站列表</view>
</view>
<view class="line" v-if="isShow.screen">
<view @click="showLine">线路切换(3)</view>
<view v-if="isShow.strategy">
<view @click="strategy('LEAST_TIME')" style="top:-270rpx" class="strategy-item"
:class="seleIndex=='LEAST_TIME'? 'active' :'' ">
推荐路线
</view>
<view @click="strategy('LEAST_FEE')" style="top:-180rpx" class="strategy-item"
:class="seleIndex=='LEAST_FEE'? 'active' :'' ">费用最少</view>
<view @click="strategy('AVOID_HIGHWAY')" style="top:-90rpx" class="strategy-item"
:class="seleIndex=='AVOID_HIGHWAY'? 'active' :'' ">不走高速</view>
</view>
</view>
<!-- 定位 -->
<view class="position">
<image @click="reset" src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/myPosition.png"></image>
</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>
@@ -54,16 +77,16 @@
import mapIcon from './mapIcon.vue'
import serviceStation from './serviceStation.vue'
export default {
components:{
components: {
screen,
recentSearch,
mapIcon,
serviceStation
},
props: {
selePrice:{
type:Object,
default:()=>{
selePrice: {
type: Object,
default: () => {
return null
}
},
@@ -73,97 +96,114 @@
return []
}
},
details:{
type:Object,
default:()=>{
details: {
type: Object,
default: () => {
return null
}
},
markers:{
type: Array,
default: () => {
return []
}
}
},
data() {
return {
seleIndex:1,
filterData:[
{
lable:'所有价格',
value:0
seleIndex: 'LEAST_TIME',
filterData: [{
lable: '所有价格',
value: 0
},
{
lable:'低于7.72',
value:1
lable: '低于7.72',
value: 1
},
{
lable:'最低价格',
value:2
lable: '最低价格',
value: 2
}
],
list: [],
isShow: {
screen: false, //路线规划价格筛选条件
filterBox:false,//价格显示控制，已迁移组件内部
strategy:false,//路线规划策略选着
serviceStation:false,//油站详情控件
filterBox: false, //价格显示控制，已迁移组件内部
strategy: false, //路线规划策略选着
serviceStation: false, //油站详情控件
}
}
},
created() {
//获取最近地址列表
this.list = uni.getStorageSync('recentSearch') || [];
console.log(this.list)
// 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)
details: function(n, o) {
this.isShow.serviceStation = n ? true : false
console.log(n, '油站点击', '控件状态→', this.isShow.serviceStation)
}
},
methods: {
swich(e){
if(e){
showSite() {
console.log('footerScroll this.markers',this.markers)
let markers = encodeURIComponent(JSON.stringify(this.markers))
uni.navigateTo({
url:`/BagStation/pages/newRoutePlanning/siteList?markers=${markers}`
})
},
showLine() {
this.isShow.strategy = !this.isShow.strategy
},
strategy(e) {
this.seleIndex = e;
setTimeout(() => {
this.isShow.strategy = false
this.$emit('mapEventListeners', 'updateRoute', null, null, this.seleIndex);
}, 500)
},
swich(e) {
if (e) {
this.$refs.screen.closeFn()
}else{
this.$refs.mapIcon.isShow.strategy=false
} else {
this.isShow.strategy = false
}
this.$emit('closeAddressSelector')
},
mapIconClose() {
this.isShow.strategy = false
},
mapIconClose(){
this.$refs.mapIcon.isShow.strategy=false
},
screenClose(){
screenClose() {
this.$refs.screen.closeFn()
},
openMapApp(){
console.log('导')
openMapApp() {
this.$emit('openMapApp')
},
mapEventListeners(e,w,j=''){
console.log(e,w,'****')
this.$emit(e,w,j)
mapEventListeners(e, w, j = '') {
// console.log(e, w, '****')
this.$emit(e, w, j)
},
filter(){
filter() {
return {
enterprisePrice:this.$refs.screen.getprice()
enterprisePrice: this.$refs.screen.getprice()
}
},
reset(){
this.$emit('mapEventListeners','reset')
reset() {
this.$emit('mapEventListeners', 'reset')
},
strategy(e){
this.$emit('mapEventListeners','updateRoute',null,null,e);
},
dragMap(e,w){
console.log('组件内触发')
this.$emit('dragMap',e,w)
dragMap(e, w) {
// console.log('组件内触发')
this.$emit('dragMap', e, w)
},
//点击最近开始路线规划
mapRoutePlanning(e, i) {
this.$emit('mapEventListeners','cardPlanning', e)
this.$emit('mapEventListeners', 'cardPlanning', e)
},
//修改缓存最近搜索逻辑
collection(e, i) {
@@ -199,25 +239,100 @@
</script>
<style lang="scss">
.seleStrategy{
.site {
position: absolute;
top: -95rpx;
right: 350rpx;
padding: 0 20rpx 0 45rpx;
width: 180rpx;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
border-radius: 15rpx;
background: url('../../../../static/img/list.png') #fff 10rpx center/32rpx 32rpx no-repeat;
}
.line {
position: absolute;
top: -95rpx;
right: 110rpx;
padding: 0 20rpx 0 45rpx;
width: 212rpx;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
border-radius: 15rpx;
background: url('../../../../static/img/switch.png') #fff 10rpx center/33rpx 33rpx no-repeat;
}
.position {
position: absolute;
top: -90rpx;
right: 30rpx;
padding-top: 8rpx;
width: 60rpx;
height: 60rpx;
border-radius: 15rpx;
background: #fff;
text-align: center;
image {
width: 45rpx;
height: 45rpx;
}
}
.strategy-item {
position: absolute;
left: 0;
top: 0;
height: 80rpx;
width: 180rpx;
background-color: #FFFFFF;
text-align: center;
line-height: 80rpx;
background: #fff;
border-radius: 10px;
&.active {
background: #FF6700;
color: #fff;
}
}
.Strategy {
height: 80rpx;
width: 180rpx;
background-color: #FF6700;
border-radius: 10px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
transition: top .3s,right 0.3s,opacity 0s;
transition: top .3s, right 0.3s, opacity 0s;
overflow: hidden;
color: #FFFFFF;
}
.mapIcon{
text-align: end;
padding-right: 30rpx;
padding-bottom: 15rpx;
position: relative;
height: 80rpx;
}
// .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;
@@ -315,7 +430,7 @@
position: absolute;
z-index: 999999;
width: 100vw;
bottom:0rpx;
bottom: 0rpx;
// height: 300rpx;
}

31
BagStation/pages/newRoutePlanning/components/mapIcon.vue
View File

@@ -1,8 +1,10 @@
<template>
<view class="mapIcon">
<view class="Position">
<image @click="$emit('reset')" v-if="polyline.length==0" src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/myPosition.png" ></image>
<image @click="$emit('swich',true);isShow.strategy=!isShow.strategy" v-else src="../../../static/img/trajectory.png" ></image>
<view class="Position">
<image @click="$emit('reset')" v-if="polyline.length==0"
src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/myPosition.png"></image>
<image @click="$emit('swich',true);isShow.strategy=!isShow.strategy" v-else
src="../../../static/img/trajectory.png"></image>
</view>
<!-- <uni-icons v-if="polyline.length!==0" @click=" isShow.strategy=!isShow.strategy" type="map-pin-ellipse" size='25'></uni-icons> -->
<view @click="strategy('LEAST_TIME')"
@@ -111,18 +113,21 @@
</script>
<style lang="scss">
.Position image{
width: 45rpx;height: 45rpx;
.Position image {
width: 45rpx;
height: 45rpx;
}
.Position{
.Position {
border-radius: 10px;
border-radius: 10px;
background-color: #FFFFFF;
padding: 10rpx;
width: min-content;
float: right;
border-radius: 10px;
background-color: #FFFFFF;
padding: 10rpx;
width: min-content;
float: right;
}
.seleStrategy {
height: 80rpx;
width: 180rpx;
@@ -132,7 +137,7 @@
display: flex;
align-items: center;
justify-content: center;
transition: top .3s, right 0.3s, opacity 0s,display 0s;
transition: top .3s, right 0.3s, opacity 0s, display 0s;
overflow: hidden;
}

107
BagStation/pages/newRoutePlanning/components/screen.vue
View File

@@ -1,25 +1,26 @@
<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 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>
<image style="width: 40rpx;height: 25rpx;" src="../../../static/img/chevron-up.png"></image>
</view>
<view @click="move" class="screen_bottom">{{site?'沿途站点':'全路径'}}</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:()=>{
selePrice: {
type: Object,
default: () => {
return null
}
},
@@ -32,82 +33,84 @@
},
data() {
return {
site:true,
seleIndex:1,
filterData:[],
site: true,
seleIndex: 1,
filterData: [],
list: [],
isShow: {
screen: false,
filterBox:false,
strategy: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');
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){
if (n) {
Object.keys(this.selePrice).forEach((item, index) => {
if (this.selePrice[item] !== null) {
this.filterData.push({
lable:item=='middlePrice'?'低于' + this.moneyIntercept(this.selePrice.middlePrice) :'最低价格',
value:item=='middlePrice'? this.moneyIntercept(this.selePrice.middlePrice) : this.moneyIntercept(this.selePrice.minPrice)
lable: item == 'middlePrice' ? '低于' + this.moneyIntercept(this
.selePrice.middlePrice) : '最低价格',
value: item == 'middlePrice' ? this.moneyIntercept(this.selePrice
.middlePrice) : this.moneyIntercept(this.selePrice.minPrice)
})
}
})
this.filterData.unshift({
lable:'所有价格',
value:99999
lable: '所有价格',
value: 99999
});
if( this.filterData.length==1){
this.seleIndex = 0;
}else{
if (this.filterData.length == 1) {
this.seleIndex = 0;
} else {
this.seleIndex = 1;
}
}
}
},
methods: {
closeFn(){
this.isShow.filterBox=false
closeFn() {
this.isShow.filterBox = false
},
showFn(e){
this.isShow.filterBox=!this.isShow.filterBox;
this.$emit('swich',false);
showFn(e) {
this.isShow.filterBox = !this.isShow.filterBox;
this.$emit('swich', false);
},
move(){
this.$emit('mapEventListeners','mapEventListeners','MoveToLocation',this.site);
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
getprice() {
if (this.filterData.length == 1) this.seleIndex = 0;
return this.filterData[this.seleIndex].value || 0.00
},
priceSele(e,w){
priceSele(e, w) {
this.seleIndex = w;
this.isShow.filterBox = false;
this.$emit('mapEventListeners','mapEventListeners','localScreen','footer')
this.$emit('mapEventListeners', 'mapEventListeners', 'localScreen', 'footer')
console.log(e)
},
mapRoutePlanning(e,i) {
this.$emit('mapEventListeners','cardPlanning', e)
mapRoutePlanning(e, i) {
this.$emit('mapEventListeners', 'cardPlanning', e)
},
collection(e, i) {
let recentSearch = uni.getStorageSync('recentSearch');
@@ -142,7 +145,7 @@
</script>
<style lang="scss">
.seleStrategy{
.seleStrategy {
height: 80rpx;
width: 180rpx;
background-color: #FFFFFF;
@@ -151,16 +154,18 @@
display: flex;
align-items: center;
justify-content: center;
transition: top .3s,right 0.3s,opacity 0s;
transition: top .3s, right 0.3s, opacity 0s;
overflow: hidden;
}
.mapIcon{
.mapIcon {
text-align: end;
padding-right: 30rpx;
padding-bottom: 15rpx;
position: relative;
height: 80rpx;
}
.filterBox {
position: absolute;
width: max-content;