pull/12/head
xiaozhiyong 2 years ago
parent 90e2d26117
commit 6df26c7fe5
  1. 69
      BagStation/pages/newRoutePlanning/chooseLocation.vue
  2. 241
      BagStation/pages/newRoutePlanning/components/footerScroll.vue
  3. 17
      BagStation/pages/newRoutePlanning/components/mapIcon.vue
  4. 79
      BagStation/pages/newRoutePlanning/components/screen.vue
  5. 95
      BagStation/pages/newRoutePlanning/newRoutePlanning.vue
  6. 188
      BagStation/pages/newRoutePlanning/siteList.vue
  7. 17
      pages.json
  8. 2
      pages/index/startPage/startPage.vue
  9. BIN
      static/img/empty.png
  10. BIN
      static/img/list.png
  11. BIN
      static/img/switch.png
  12. 6
      utils/request.js

@ -1,13 +1,13 @@
<template> <template>
<view class="seach_body"> <view class="seach_body">
<view class="seach_input"> <view class="seach_input">
<view @click="isShowFn" class="seach_input_left color-66"> <!-- <view @click="isShowFn" class="seach_input_left color-66">
<uni-icons class="mar" type="search" size="20"></uni-icons> <uni-icons class="mar" type="search" size="20"></uni-icons>
<view>{{addressData.city}}</view> <view>{{addressData.city}}</view>
<uni-icons color="#bbbbbb" class="bottom" type="back" size="15"></uni-icons> <uni-icons color="#bbbbbb" class="bottom" type="back" size="15"></uni-icons>
</view> </view> -->
<view class="seach_input_right"> <view class="seach_input_right">
<input v-model="seachValue" placeholder="请输入地址" type="text" @confirm="seachFn" /> <input style="flex:1" v-model="seachValue" placeholder="请输入地址" type="text" @confirm="seachFn" />
<view @click="seachFn" class="seach_input_butten"> 搜索</view> <view @click="seachFn" class="seach_input_butten"> 搜索</view>
<!-- <uni-combox @input="seachFn" emptyTips="请输入内容" class="seach_input_right_input" :border="false" :candidates="candidates" placeholder="Location..."></uni-combox> --> <!-- <uni-combox @input="seachFn" emptyTips="请输入内容" class="seach_input_right_input" :border="false" :candidates="candidates" placeholder="Location..."></uni-combox> -->
</view> </view>
@ -28,7 +28,7 @@
import amapFile from '@/utils/qqmap-wx-jssdk.js' import amapFile from '@/utils/qqmap-wx-jssdk.js'
import charge from './components/charge.vue' import charge from './components/charge.vue'
export default { export default {
components:{ components: {
charge charge
}, },
data() { data() {
@ -41,7 +41,7 @@
isShow: { isShow: {
address: false address: false
}, },
type:1, type: 1,
seachValue: '', seachValue: '',
List: [], List: [],
TXSDK: null, TXSDK: null,
@ -66,10 +66,14 @@
console.log(this.List, Boolean(Number(this.List))) console.log(this.List, Boolean(Number(this.List)))
this.TXSDK.reverseGeocoder({ this.TXSDK.reverseGeocoder({
sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil', sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
location:that.location, location: that.location,
success(e){ success(e) {
({province:that.addressData.province,city:that.addressData.city,district:that.addressData.area}=e.result.address_component) ({
console.log(e,that.addressData,'地址逆解析') province: that.addressData.province,
city: that.addressData.city,
district: that.addressData.area
} = e.result.address_component)
console.log(e, that.addressData, '地址逆解析')
}, },
fail(e) { fail(e) {
console.log(e, '地址逆解析 错误') console.log(e, '地址逆解析 错误')
@ -83,12 +87,12 @@
}); });
}, },
methods: { methods: {
seleClick(e){ seleClick(e) {
uni.$emit('UpdateAddress',e,this.type) uni.$emit('UpdateAddress', e, this.type)
uni.navigateBack() uni.navigateBack()
}, },
chargeChange(e){ chargeChange(e) {
this.addressData = Object.assign(this.addressData,e) this.addressData = Object.assign(this.addressData, e)
console.log(e) console.log(e)
}, },
isShowFn() { isShowFn() {
@ -106,14 +110,15 @@
}, 500); }, 500);
} }
}, },
getRegion(){ getRegion() {
let that = this let that = this
this.loding(true) this.loding(true)
this.TXSDK.search({ this.TXSDK.search({
sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil', sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
keyword: that.seachValue, keyword: that.seachValue,
auto_extend: '0', auto_extend: '0',
region:that.addressData.province.indexOf('市')!==-1? that.addressData.province : that.addressData.province + that.addressData.city, region: that.addressData.province.indexOf('市') !== -1 ? that.addressData.province : that
.addressData.province + that.addressData.city,
page_size: that.pageSize.page_size, page_size: that.pageSize.page_size,
location: that.location || '', location: that.location || '',
page_index: that.pageSize.page, page_index: that.pageSize.page,
@ -138,20 +143,45 @@
}, },
}) })
}, },
getSuggestion() {
this.loding(true)
this.TXSDK.getSuggestion({
sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
keyword: this.seachValue,
region: this.addressData.city || '全国',
page_size: this.pageSize.page_size,
page_index: this.pageSize.page,
success: e => {
this.loding(false)
if (e.message !== 'query ok') return
if (e.data.length == 0) {
uni.showToast({
title: '没有数据了',
icon: 'none'
})
}
if (this.pageSize.page > 1) {
this.List = this.List.concat(e.data)
return
}
this.List = e.data
}
})
},
seachFn(e) { seachFn(e) {
this.pageSize.page = 1 this.pageSize.page = 1
this.getRegion() this.getSuggestion()
}, },
lower() { lower() {
this.pageSize.page += 1 this.pageSize.page += 1
this.getRegion() this.getSuggestion()
}, },
} }
} }
</script> </script>
<style scoped> <style scoped>
.seach_input_butten{ .seach_input_butten {
color: #FF6700; color: #FF6700;
height: 100%; height: 100%;
white-space: nowrap; white-space: nowrap;
@ -159,6 +189,7 @@
align-items: center; align-items: center;
padding: 0 10rpx; padding: 0 10rpx;
} }
.list_item_samall_size { .list_item_samall_size {
color: #BBBBBB; color: #BBBBBB;
font-size: 24rpx; font-size: 24rpx;
@ -209,7 +240,7 @@
.seach_input_right { .seach_input_right {
flex: 1; flex: 1;
margin:0 10rpx; margin: 0 10rpx;
display: flex; display: flex;
align-items: center; align-items: center;
} }

@ -38,14 +38,37 @@
</view> </view>
<view class="screen_bottom">沿途站点</view> <view class="screen_bottom">沿途站点</view>
</view> --> </view> -->
<!-- 图标 --> <!-- 油站列表 -->
<mapIcon @swich='swich' @reset='reset' ref='mapIcon' :polyline='polyline' @strategy='strategy' /> <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> <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'/> <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"/> <serviceStation @openMapApp='openMapApp' @dragMap='dragMap' :details='details' v-if="isShow.serviceStation" />
</view> </view>
</template> </template>
<script> <script>
@ -54,16 +77,16 @@
import mapIcon from './mapIcon.vue' import mapIcon from './mapIcon.vue'
import serviceStation from './serviceStation.vue' import serviceStation from './serviceStation.vue'
export default { export default {
components:{ components: {
screen, screen,
recentSearch, recentSearch,
mapIcon, mapIcon,
serviceStation serviceStation
}, },
props: { props: {
selePrice:{ selePrice: {
type:Object, type: Object,
default:()=>{ default: () => {
return null return null
} }
}, },
@ -73,36 +96,41 @@
return [] return []
} }
}, },
details:{ details: {
type:Object, type: Object,
default:()=>{ default: () => {
return null return null
} }
},
markers:{
type: Array,
default: () => {
return []
}
} }
}, },
data() { data() {
return { return {
seleIndex:1, seleIndex: 'LEAST_TIME',
filterData:[ filterData: [{
{ lable: '所有价格',
lable:'所有价格', value: 0
value:0
}, },
{ {
lable:'低于7.72', lable: '低于7.72',
value:1 value: 1
}, },
{ {
lable:'最低价格', lable: '最低价格',
value:2 value: 2
} }
], ],
list: [], list: [],
isShow: { isShow: {
screen: false, //线 screen: false, //线
filterBox:false,// filterBox: false, //
strategy:false,//线 strategy: false, //线
serviceStation:false,// serviceStation: false, //
} }
} }
@ -110,60 +138,72 @@
created() { created() {
// //
this.list = uni.getStorageSync('recentSearch') || []; this.list = uni.getStorageSync('recentSearch') || [];
console.log(this.list) // console.log(this.list)
}, },
watch: { watch: {
//线 //线
polyline: function(n, o) { polyline: function(n, o) {
n.length !== 0 ? this.isShow.screen = true : this.isShow.screen = false n.length !== 0 ? this.isShow.screen = true : this.isShow.screen = false
}, },
details:function(n,o){ details: function(n, o) {
this.isShow.serviceStation = n? true:false this.isShow.serviceStation = n ? true : false
console.log(n,'油站点击','控件状态→',this.isShow.serviceStation) console.log(n, '油站点击', '控件状态→', this.isShow.serviceStation)
} }
}, },
methods: { methods: {
swich(e){ showSite() {
if(e){ 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() this.$refs.screen.closeFn()
}else{ } else {
this.$refs.mapIcon.isShow.strategy=false this.isShow.strategy = false
} }
this.$emit('closeAddressSelector') this.$emit('closeAddressSelector')
}, },
mapIconClose(){ mapIconClose() {
this.$refs.mapIcon.isShow.strategy=false this.isShow.strategy = false
}, },
screenClose(){ screenClose() {
this.$refs.screen.closeFn() this.$refs.screen.closeFn()
}, },
openMapApp(){ openMapApp() {
console.log('导')
this.$emit('openMapApp') this.$emit('openMapApp')
}, },
mapEventListeners(e,w,j=''){ mapEventListeners(e, w, j = '') {
console.log(e,w,'****') // console.log(e, w, '****')
this.$emit(e,w,j) this.$emit(e, w, j)
}, },
filter(){ filter() {
return { return {
enterprisePrice:this.$refs.screen.getprice() enterprisePrice: this.$refs.screen.getprice()
} }
}, },
reset(){ reset() {
this.$emit('mapEventListeners','reset') this.$emit('mapEventListeners', 'reset')
},
strategy(e){
this.$emit('mapEventListeners','updateRoute',null,null,e);
}, },
dragMap(e,w){ dragMap(e, w) {
console.log('组件内触发') // console.log('')
this.$emit('dragMap',e,w) this.$emit('dragMap', e, w)
}, },
//线 //线
mapRoutePlanning(e, i) { mapRoutePlanning(e, i) {
this.$emit('mapEventListeners','cardPlanning', e) this.$emit('mapEventListeners', 'cardPlanning', e)
}, },
// //
collection(e, i) { collection(e, i) {
@ -199,25 +239,100 @@
</script> </script>
<style lang="scss"> <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; height: 80rpx;
width: 180rpx; 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; border-radius: 10px;
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: top .3s,right 0.3s,opacity 0s; transition: top .3s, right 0.3s, opacity 0s;
overflow: hidden; overflow: hidden;
color: #FFFFFF;
} }
.mapIcon{
text-align: end; // .seleStrategy {
padding-right: 30rpx; // height: 80rpx;
padding-bottom: 15rpx; // width: 180rpx;
position: relative; // background-color: #FFFFFF;
height: 80rpx; // 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 { .filterBox {
position: absolute; position: absolute;
width: max-content; width: max-content;
@ -315,7 +430,7 @@
position: absolute; position: absolute;
z-index: 999999; z-index: 999999;
width: 100vw; width: 100vw;
bottom:0rpx; bottom: 0rpx;
// height: 300rpx; // height: 300rpx;
} }

@ -1,8 +1,10 @@
<template> <template>
<view class="mapIcon"> <view class="mapIcon">
<view class="Position"> <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('reset')" v-if="polyline.length==0"
<image @click="$emit('swich',true);isShow.strategy=!isShow.strategy" v-else src="../../../static/img/trajectory.png" ></image> 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> </view>
<!-- <uni-icons v-if="polyline.length!==0" @click=" isShow.strategy=!isShow.strategy" type="map-pin-ellipse" size='25'></uni-icons> --> <!-- <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')" <view @click="strategy('LEAST_TIME')"
@ -111,10 +113,12 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.Position image{ .Position image {
width: 45rpx;height: 45rpx; width: 45rpx;
height: 45rpx;
} }
.Position{
.Position {
border-radius: 10px; border-radius: 10px;
border-radius: 10px; border-radius: 10px;
background-color: #FFFFFF; background-color: #FFFFFF;
@ -123,6 +127,7 @@
float: right; float: right;
} }
.seleStrategy { .seleStrategy {
height: 80rpx; height: 80rpx;
width: 180rpx; width: 180rpx;
@ -132,7 +137,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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; overflow: hidden;
} }

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

@ -5,10 +5,10 @@
@mapEventListeners='mapEventListeners' :polyline="polyline" :Route="Route" /> @mapEventListeners='mapEventListeners' :polyline="polyline" :Route="Route" />
<footerScroll @closeAddressSelector='closeAddressSelector' @openMapApp='openMapApp' ref='footerScroll' <footerScroll @closeAddressSelector='closeAddressSelector' @openMapApp='openMapApp' ref='footerScroll'
:selePrice='selePrice' @dragMap='dragMap' :details='details' :polyline="polyline" :selePrice='selePrice' @dragMap='dragMap' :details='details' :polyline="polyline"
@mapEventListeners='mapEventListeners' /> @mapEventListeners='mapEventListeners' :markers="markers" />
<view class="map_body"> <view class="map_body">
<map @bindregionchange='bindregionchange' @tap='poitap' @updated='mapUpdated' :scale='mapScale' @callouttap='callouttap' <map @bindregionchange='bindregionchange' @tap='poitap' @updated='mapUpdated' :scale='mapScale'
:enable-scroll='enableScroll' @markertap='markertap' :polyline="polyline" @callouttap='callouttap' :enable-scroll='enableScroll' @markertap='markertap' :polyline="polyline"
subkey="UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN" layer-style='2' id="map_Id" :show-location="true" subkey="UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN" layer-style='2' id="map_Id" :show-location="true"
:markers="markers" class="map_xx" :latitude="coordinate.latitude" :longitude="coordinate.longitude"> :markers="markers" class="map_xx" :latitude="coordinate.latitude" :longitude="coordinate.longitude">
<cover-view slot="callout"> <cover-view slot="callout">
@ -83,14 +83,21 @@
key: 'UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN' key: 'UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN'
}); });
}, },
watch:{ watch: {
enableScroll:function(n,o){ enableScroll: function(n, o) {
console.log('全局是否可拖动',n) console.log('全局是否可拖动', n)
} }
}, },
methods: { methods: {
bindregionchange(e){ perspectives(item) {
console.log(e,'***********') let {
latitude,
longitude
} = item
this.newMapMoveToLocation(longitude, latitude, 'reset')
},
bindregionchange(e) {
console.log(e, '***********')
}, },
mapUpdated(e) { mapUpdated(e) {
let that = this let that = this
@ -111,7 +118,8 @@
async mapEventListeners(e) { async mapEventListeners(e) {
switch (e) { switch (e) {
case 'updateRoute': case 'updateRoute':
this.mapRoutePlanning(arguments[1] ? arguments[1] : this.Route.start, arguments[2] ? arguments[2] : this.Route.end, arguments[3] ? arguments[3] : 'LEAST_TIME') this.mapRoutePlanning(arguments[1] ? arguments[1] : this.Route.start, arguments[2] ? arguments[
2] : this.Route.end, arguments[3] ? arguments[3] : 'LEAST_TIME')
break; break;
case 'UpdateLocation': case 'UpdateLocation':
this.UpdateLocation(arguments[1], arguments[2]) this.UpdateLocation(arguments[1], arguments[2])
@ -134,6 +142,7 @@
let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi, let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
siteChannel); siteChannel);
// //
this.spareMarkers = this.locationProcessing(markerList); this.spareMarkers = this.locationProcessing(markerList);
this.markers = await this.filterMarkers(JSON.parse(JSON.stringify(this.spareMarkers))); this.markers = await this.filterMarkers(JSON.parse(JSON.stringify(this.spareMarkers)));
break; break;
@ -200,10 +209,14 @@
} = this.$refs.addressSelector.datassFn(); } = this.$refs.addressSelector.datassFn();
let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi, let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
siteChannel); siteChannel);
console.log('newRoutePlanning markerList', markerList)
// //
this.spareMarkers = this.locationProcessing(markerList); this.spareMarkers = this.locationProcessing(markerList);
console.log('newRoutePlanning spareMarkers', this.spareMarkers)
let markers = JSON.parse(JSON.stringify(this.spareMarkers)); let markers = JSON.parse(JSON.stringify(this.spareMarkers));
console.log('markers', markers)
this.markers = await this.filterMarkers(markers); this.markers = await this.filterMarkers(markers);
console.log('newRoutePlanning this.markers', this.markers)
}, },
// //
UpdateLocation(Route, type) { UpdateLocation(Route, type) {
@ -229,7 +242,7 @@
UpdateAddress() { UpdateAddress() {
let that = this let that = this
uni.$on('UpdateAddress', function(region, type) { uni.$on('UpdateAddress', function(region, type) {
console.log(`%c ${(type=='start'?'起点更新':'终点更新')} 地址→ ${region.title}`,'color:red;font-size:50px') // console.log(`%c ${(type=='start'?'':'')} ${region.title}`,'color:red;font-size:50px')
that.Route[type].longitude = region.location.lng; that.Route[type].longitude = region.location.lng;
that.Route[type].latitude = region.location.lat; that.Route[type].latitude = region.location.lat;
that.Route[type].title = region.title; that.Route[type].title = region.title;
@ -268,12 +281,12 @@
res(e) res(e)
}, },
fail(e) { fail(e) {
setTimeout(()=>{ setTimeout(() => {
uni.showToast({ uni.showToast({
title:e.msg, title: e.msg,
icon:"none" icon: "none"
}); });
},1000) }, 1000)
rej(e) rej(e)
console.log('获取路线规划失败', e) console.log('获取路线规划失败', e)
} }
@ -337,7 +350,7 @@
}, },
// //
poitap() { poitap() {
if(this.polyline.length==0) return; if (this.polyline.length == 0) return;
this.$refs.footerScroll.isShow.screen = true; this.$refs.footerScroll.isShow.screen = true;
this.$refs.footerScroll.isShow.serviceStation = false; this.$refs.footerScroll.isShow.serviceStation = false;
this.enableScroll = true; this.enableScroll = true;
@ -354,7 +367,9 @@
oilProductCode: oilProductCode ? oilProductCode : '0#', oilProductCode: oilProductCode ? oilProductCode : '0#',
juLi: juLi ? juLi : '5', juLi: juLi ? juLi : '5',
siteChannel: siteChannel, siteChannel: siteChannel,
countJuLi: points[0].distance countJuLi: points[0].distance,
latitude: this.coordinate.latitude,
longitude: this.coordinate.longitude
} }
let taht = this; let taht = this;
return new Promise(function(re, rj) { return new Promise(function(re, rj) {
@ -369,27 +384,17 @@
rj(markerList.code + markerList.msg) rj(markerList.code + markerList.msg)
return return
} }
// if (markerList.data.length == 0) {
// setTimeout(() => {
// uni.showToast({
// title: '' + markerList.data.length,
// icon: 'none'
// })
// }, 500)
// rj('' + markerList.data.length)
// return
// }
taht.selePrice = { taht.selePrice = {
middlePrice: markerList.data.middlePrice, middlePrice: markerList.data.middlePrice,
minPrice: markerList.data.minPrice minPrice: markerList.data.minPrice
} }
re(markerList.data.siteGeoVos) re(markerList.data.siteGeoVoList)
}) })
}) })
}, },
// //
locationProcessing(markerList) { locationProcessing(markerList) {
console.log(markerList, '----') // console.log(markerList, '----')
markerList.forEach((item, index) => { markerList.forEach((item, index) => {
let configure = { let configure = {
siteId: item.id, siteId: item.id,
@ -419,7 +424,7 @@
longitude: String(this.coordinate.longitude), longitude: String(this.coordinate.longitude),
siteId: seleMark[0].siteId siteId: seleMark[0].siteId
}); });
console.log(details, '***') // console.log(details, '***')
if (details.code !== 20000) { if (details.code !== 20000) {
uni.showToast({ uni.showToast({
title: details.msg, title: details.msg,
@ -485,7 +490,7 @@
}, },
// //
priceSort(list){ priceSort(list) {
let sort = list.sort((a, b) => { let sort = list.sort((a, b) => {
return a.enterprisePrice - b.enterprisePrice return a.enterprisePrice - b.enterprisePrice
}); });
@ -494,29 +499,35 @@
// //
filterMarkers(e, w) { filterMarkers(e, w) {
let that = this let that = this
return new Promise(function(re,rj){ return new Promise(function(re, rj) {
w = that.$refs.addressSelector.datassFn(); w = that.$refs.addressSelector.datassFn();
let filterMarkers = []; let filterMarkers = [];
// //
let highSpeedMarkers = Object.keys(w).includes('highSpeed') && w.highSpeed ? e.filter((item, index) => { let highSpeedMarkers = Object.keys(w).includes('highSpeed') && w.highSpeed ? e.filter((item,
index) => {
return Number(w.highSpeed) == 2 ? item : item.highSpeedMark == Number(w.highSpeed) return Number(w.highSpeed) == 2 ? item : item.highSpeedMark == Number(w.highSpeed)
}) : e; }) : e;
let sort = that.priceSort(highSpeedMarkers);
that.selePrice = sort.length !== 0? let copy = JSON.parse(JSON.stringify(highSpeedMarkers))
{
middlePrice: sort[Number.isInteger((sort.length / 2)) ? (sort.length / 2) : ((sort.length + 1) / 2) - 1].enterprisePrice, let sort = that.priceSort(copy);
that.selePrice = sort.length !== 0 ? {
middlePrice: sort[Number.isInteger((sort.length / 2)) ? (sort.length / 2) : ((sort
.length + 1) / 2) - 1].enterprisePrice,
minPrice: sort[0].enterprisePrice, minPrice: sort[0].enterprisePrice,
}:{}; } : {};
// this.$nextTick() // this.$nextTick()
setTimeout(()=>{w = Object.assign(w,that.$refs.footerScroll.filter());},0) setTimeout(() => {
w = Object.assign(w, that.$refs.footerScroll.filter());
}, 0)
// //
setTimeout(()=>{ setTimeout(() => {
filterMarkers = Object.keys(w).includes('enterprisePrice') && w.enterprisePrice ? filterMarkers = Object.keys(w).includes('enterprisePrice') && w.enterprisePrice ?
highSpeedMarkers.filter((item, index) => { highSpeedMarkers.filter((item, index) => {
return item.enterprisePrice <= Number(w.enterprisePrice) return item.enterprisePrice <= Number(w.enterprisePrice)
}) : highSpeedMarkers; }) : highSpeedMarkers;
re(filterMarkers) re(filterMarkers)
},0) }, 0)
}) })
}, },
@ -536,11 +547,11 @@
dragMap(e, w) { dragMap(e, w) {
let that = this let that = this
this.enableScroll = w; this.enableScroll = w;
console.log('辅助控件触发;是否可以拖动地图1>',that.enableScroll) console.log('辅助控件触发;是否可以拖动地图1>', that.enableScroll)
this.newMapMoveToLocation(e.longitude, e.latitude) this.newMapMoveToLocation(e.longitude, e.latitude)
uni.$on('dragMap', function(e) { uni.$on('dragMap', function(e) {
that.enableScroll = e that.enableScroll = e
console.log('辅助控件触发;是否可以拖动地图>',that.enableScroll) console.log('辅助控件触发;是否可以拖动地图>', that.enableScroll)
}) })
} }
} }

@ -0,0 +1,188 @@
<template>
<view class="site-list">
<view class="container" v-if="siteList.length">
<list >
<view class="item" v-for="item,index in siteList" :key="index">
<image
:src="item.siteImages || 'https://static.czb365.com/1647787216992.jpg?x-oss-process=image/resize,m_lfit,h_420,w_630/format,png'">
</image>
<view>{{item.siteName}}</view>
<view>
<view>{{item.address}}</view> <text>{{item.juli | adjust}}km</text>
</view>
<view>0# 7.94</view>
<view>
<view @click="lookPosition(item)">查看位置</view>
<view @click="jump(item)">查看详情</view>
</view>
</view>
</list>
</view>
<view v-else class="empty">
<image src="../../../static/img/empty.png"></image>
<view>当前线路附近暂无油站</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
siteList: []
}
},
onLoad(options) {
if (!options.markers) return
let markers = JSON.parse(decodeURIComponent(options.markers))
this.siteList = markers
console.log('site markers',markers)
},
filters: {
adjust(val) {
if (!val) return '--'
val = +val
return val.toFixed(2)
}
},
methods: {
lookPosition(item) {
// console.log(getCurrentPages())
getCurrentPages()[0].$vm.perspectives(item)
uni.navigateBack()
},
jump(item) {
let obj = {
siteId: item.id,
longitude: item.longitude,
latitude: item.latitude,
}
let itemS = JSON.stringify(obj)
// return
uni.navigateTo({
url: `../stationDetail/stationDetail?item=${itemS}&&types=map`
})
},
}
}
</script>
<style lang="scss">
// page {
// background: #f0f0f0;
// }
.empty {
padding-top: 150rpx;
width: 100%;
background: #fff;
text-align: center;
image {
width: 450rpx;
height: 381rpx;
}
view {
color: #999;
}
}
.site-list {
min-height: 100vh;
.container {
padding: 50rpx;
background: #f0f0f0;
}
}
.item {
position: relative;
padding: 30rpx 30rpx 100rpx 160rpx;
margin-bottom: 30rpx;
min-height: 200rpx;
background: #fff;
// border: 1px solid #333;
border-radius: 15rpx;
>view {
&:nth-of-type(1) {
font-weight: 550;
font-size: 32rpx;
}
&:nth-of-type(2) {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10rpx;
font-size: 24rpx;
color: #999;
view {
width: 80%;
}
// text {
// float: right;
// }
}
&:nth-of-type(3) {
font-weight: 550;
margin-top: 10rpx;
color: #FF8C00;
}
&:nth-of-type(4) {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80rpx;
&::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 1rpx;
background: #d3d3d3;
}
view {
display: inline-block;
width: 50%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
&:nth-of-type(1) {
color: #1E90FF;
}
&:nth-of-type(2) {
color: #FF8C00;
}
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
width: 1rpx;
height: 30rpx;
background: #d3d3d3;
}
}
}
image {
position: absolute;
left: 30rpx;
top: 13%;
width: 100rpx;
height: 100rpx;
}
}
</style>

@ -113,9 +113,8 @@
{ {
"root": "Activity", "root": "Activity",
"pages": [{ "pages": [{
"path" : "pages/index/index", "path": "pages/index/index",
"style" : "style": {
{
"navigationBarTitleText": "油站活动", "navigationBarTitleText": "油站活动",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"navigationStyle": "default", "navigationStyle": "default",
@ -123,8 +122,7 @@
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
} }]
]
}, },
{ {
"root": "Financial", "root": "Financial",
@ -308,6 +306,15 @@
} }
}, {
"path": "pages/newRoutePlanning/siteList",
"style": {
"navigationBarTitleText": "油站列表",
"enablePullDownRefresh": false,
"navigationStyle": "default",
"navigationBarBackgroundColor": "#F0F0F0",
"navigationBarTextStyle": "black"
}
}, { }, {
"path": "pages/overviewMap/overviewMap", "path": "pages/overviewMap/overviewMap",
"style": { "style": {

@ -93,8 +93,6 @@
}); });
}, },
async initFn(option) { async initFn(option) {
console.log(option, '启动页');
console.log(`%c 二维码进入 ${option.scene}`, 'color:red;font-size:50px')
const token = uni.getStorageSync('Authorization') const token = uni.getStorageSync('Authorization')
const openid = uni.getStorageSync('openid') const openid = uni.getStorageSync('openid')
this.key = ''; this.key = '';

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 344 B

@ -5,10 +5,10 @@ import utils from '@/utils/encode'
// const env = 'test' // const env = 'test'
const env = 'production' const env = 'production'
// 45 // 45
const testUrl = 'http://192.168.0.254:38080' const testUrl = 'http://192.168.1.132:38080'
const productUrl = 'https://www.xingoil.com/adminapi' // const productUrl = 'https://www.xingoil.com/adminapi'
// const productUrl = 'http://uat.xingoil.com/adminapi' const productUrl = 'http://uat.xingoil.com/adminapi'
// const productUrl = 'http://192.168.0.191:38080' // const productUrl = 'http://192.168.0.191:38080'
// const productUrl = 'http://121.196.213.68/adminapi' // const productUrl = 'http://121.196.213.68/adminapi'
const service = axios.create({ const service = axios.create({

Loading…
Cancel
Save