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.
378 lines
10 KiB
378 lines
10 KiB
<template> |
|
<view class=""> |
|
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
|
<block slot="backText">返回</block> |
|
<block slot="content">油站列表</block> |
|
</cu-custom> |
|
<view class="mapList_heat"> |
|
<view class="mapList_heat_list" v-for="(list,i) in programmeList" :key='i' :class="[ProgrammeAtive==i?'ProgrammeAtive':'']" @tap='changeProgramme(i)'> |
|
<view class="mapList_heat_list_title text-center">{{list.title}}</view> |
|
<view class="mapList_heat_list_value text-center">{{list.value}}KM</view> |
|
</view> |
|
</view> |
|
<view class="mapList_screen"> |
|
<view class="mapList_screen_list" v-for="(list , i ) in screenList" :key='i' :class="[screenAtive==i?'ProgrammeAtive':'']" @tap='changeScreen(i)' > |
|
<view class="text-center">{{list.title}}</view> |
|
</view> |
|
</view> |
|
<view class="mapList_List"> |
|
<view class="mapList_List_item" v-for="(list,i) in SiteInfoList" :key='i' @tap='gotoDetail(list.siteId)'> |
|
<view class="mapList_List_item_left"> |
|
<image :src="list.icon" mode=""></image> |
|
</view> |
|
<view class="mapList_List_item_right"> |
|
<view class="mapList_List_item_right_title"> |
|
{{list.siteTitle}} |
|
</view> |
|
<view class="mapList_List_item_right_address"> |
|
{{list.siteAddre}} |
|
</view> |
|
<view class="mapList_List_item_right_oilMoeny"> |
|
{{list.siteOliCode}} {{list.siteOliName}} <view class="mapList_List_item_right_oilMoeny_money"><text> {{list.siteOliMoney}}</text>元/升</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import oilMongoApi from '../../../api/oil-mongo.js' |
|
import amapFile from '../../../utils/amap-wx.130.js' |
|
export default { |
|
data(){ |
|
return{ |
|
programmeList:[ |
|
{ |
|
title:'方案一', |
|
value:0, |
|
programme:10 |
|
},{ |
|
title:'方案二', |
|
value:0, |
|
programme:18 |
|
},{ |
|
title:'方案三', |
|
value:0, |
|
programme:13 |
|
}, |
|
], |
|
screenList:[ |
|
{ |
|
title:'默认排序', |
|
value:'id' |
|
},{ |
|
title:'距离最近', |
|
value:'distance' |
|
},{ |
|
title:'价格最低', |
|
value:'price' |
|
}, |
|
], |
|
SiteInfoList:[], |
|
SiteList:{ |
|
points:[], //拆分的路径点 |
|
juLi:20000,//距离 |
|
oilProductCode:'',//油品编号 |
|
siteChannel:'',//油站渠道 |
|
highSpeedMark:'',//是否为高速 |
|
sort:'',//排序字段默认: id距离: distance价格: price |
|
oilCardNature:2//来源性质 |
|
}, |
|
screenAtive:0, |
|
ProgrammeAtive:0, |
|
origin:{}, |
|
destination:{}, |
|
myAmapFun:new amapFile.AMapWX({key: '88f3d3a38da95c4dea388978a76d0b81'}), |
|
} |
|
}, |
|
methods:{ |
|
gotoDetail(ids){ //前往油站 |
|
let data = { |
|
id:ids, |
|
oilCardNature : 2 |
|
} |
|
oilMongoApi.getSiteInfoById(data).then(res=>{ |
|
if(res.code == 20000){ |
|
let obj = { |
|
siteId : res.data.id, |
|
siteCode:res.data.siteCode, |
|
siteChannel:res.data.siteChannel, |
|
longitude:res.data.location.coordinates[0], |
|
latitude:res.data.location.coordinates[1], |
|
} |
|
let itemS = JSON.stringify(obj) |
|
uni.navigateTo({ |
|
url: `../stationDetail/stationDetail?item=${itemS}&&types=map` |
|
}) |
|
} |
|
}) |
|
}, |
|
changeProgramme(i){ |
|
this.ProgrammeAtive = i |
|
let code = this.programmeList[i].programme |
|
this.getDriving(code) |
|
}, |
|
getDriving(code){ |
|
var that = this; |
|
this.myAmapFun.getDrivingRoute({ |
|
origin: this.origin.longitude+","+this.origin.latitude, |
|
destination: this.destination.longitude+","+this.destination.latitude, |
|
strategy:code, |
|
success: function(data){ |
|
var coverList = [] |
|
if(data.paths && data.paths[0] && data.paths[0].steps){ |
|
var steps = data.paths[0].steps; |
|
for(var i = 0; i < steps.length; i++){ |
|
var poLen = steps[i].polyline.split(';'); |
|
for(var j = 0;j < poLen.length; j++){ |
|
coverList.push({ |
|
lng: parseFloat(poLen[j].split(',')[0]), |
|
lat: parseFloat(poLen[j].split(',')[1]) |
|
}) |
|
} |
|
} |
|
} |
|
that.SiteList.points = coverList |
|
console.log(coverList) |
|
that.SiteList.points =that.SiteList.points.filter((item,index)=>{ |
|
return index % 20 == 0 |
|
}); |
|
let isCheck = uni.getStorageSync('Authorization') |
|
if(isCheck){ |
|
that.getByGeoHash() |
|
}else{ |
|
that.getList() |
|
} |
|
}, |
|
fail: function(info){ |
|
} |
|
}) |
|
}, |
|
getByGeoHash(){ |
|
var that = this |
|
oilMongoApi.getByGeoHash(this.SiteList).then( ele=>{ |
|
let siteinfoList=[] |
|
ele.data.forEach(item =>{ |
|
let iconPath,oliName; |
|
if(item.siteChannel === 'LV'){ |
|
iconPath ='../../static/img/LV.png'; |
|
}else if(item.siteChannel == 'TY'){ |
|
iconPath ='../../static/img/change_TY.png'; |
|
}else if(item.siteChannel == 'WJY'){ |
|
iconPath ='../../static/img/change_wjy.png'; |
|
}else if(item.siteChannel == 'XOIL'){ |
|
iconPath ='../../static/img/change_xy.png'; |
|
}else if(item.siteChannel == 'YDJY'){ |
|
iconPath ='../../static/img/YDJY.png'; |
|
} else{ |
|
iconPath ='../../static/img/change_qt.png'; |
|
} |
|
if(item.siteOilsPrice[0].oilProductType === 'DIESEL'){ |
|
oliName ='柴油'; |
|
}else if(item.siteOilsPrice[0].oilProductType == 'PETROL'){ |
|
oliName ='汽油'; |
|
}else if(item.siteOilsPrice[0].oilProductType == 'GAS'){ |
|
oliName ='天然气'; |
|
}else if(item.siteOilsPrice[0].oilProductType == 'OTHER'){ |
|
oliName ='其他'; |
|
} |
|
let result = { |
|
siteId:item.id, |
|
icon: iconPath, |
|
siteTitle:item.siteName, |
|
siteAddre:item.address, |
|
siteOliCode:item.siteOilsPrice[0].oilProductCode, |
|
siteOliName:oliName, |
|
siteOliMoney:item.siteOilsPrice[0].personalPrice |
|
} |
|
siteinfoList.push(result) |
|
}) |
|
that.SiteInfoList = siteinfoList |
|
}) |
|
}, |
|
getProgramme(value,i){ |
|
let _that = this; |
|
var money = 0 |
|
_that.myAmapFun.getDrivingRoute({ |
|
origin: _that.origin.longitude+","+_that.origin.latitude, |
|
destination: _that.destination.longitude+","+_that.destination.latitude, |
|
strategy:value, |
|
success: function(data){ |
|
_that.programmeList[i].value= parseInt(data.paths[0].duration)/100 |
|
}, |
|
fail: function(info){} |
|
}) |
|
}, |
|
getList(){ |
|
var that = this |
|
oilMongoApi.getSiteByGeoHash(that.SiteList).then( res=>{ |
|
let siteinfoList=[] |
|
res.data.forEach(item =>{ |
|
let iconPath,oliName; |
|
if(item.siteChannel === 'LV'){ |
|
iconPath ='../../static/img/LV.png'; |
|
}else if(item.siteChannel == 'TY'){ |
|
iconPath ='../../static/img/change_TY.png'; |
|
}else if(item.siteChannel == 'WJY'){ |
|
iconPath ='../../static/img/change_wjy.png'; |
|
}else if(item.siteChannel == 'XOIL'){ |
|
iconPath ='../../static/img/change_xy.png'; |
|
}else if(item.siteChannel == 'YDJY'){ |
|
iconPath ='../../static/img/YDJY.png'; |
|
} else{ |
|
iconPath ='../../static/img/change_qt.png'; |
|
} |
|
if(item.siteOilsPrice[0].oilProductType === 'DIESEL'){ |
|
oliName ='柴油'; |
|
}else if(item.siteOilsPrice[0].oilProductType == 'PETROL'){ |
|
oliName ='汽油'; |
|
}else if(item.siteOilsPrice[0].oilProductType == 'GAS'){ |
|
oliName ='天然气'; |
|
}else if(item.siteOilsPrice[0].oilProductType == 'OTHER'){ |
|
oliName ='其他'; |
|
} |
|
let result = { |
|
siteId:item.id, |
|
icon: iconPath, |
|
siteTitle:item.siteName, |
|
siteAddre:item.address, |
|
siteOliCode:item.siteOilsPrice[0].oilProductCode, |
|
siteOliName:oliName, |
|
siteOliMoney:item.siteOilsPrice[0].personalPrice |
|
} |
|
siteinfoList.push(result) |
|
}) |
|
that.SiteInfoList = siteinfoList |
|
}) |
|
}, |
|
changeScreen(i){ |
|
this.screenAtive = i |
|
this.SiteList.sort = this.screenList[i].value |
|
this.getList() |
|
} |
|
}, |
|
onLoad(option) { |
|
this.origin = JSON.parse(option.origin) |
|
this.destination = JSON.parse(option.destination) |
|
console.log(option) |
|
let code = parseInt(option.check) |
|
this.programmeList.map((ele,i)=>{ |
|
if(ele.programme ===code){this.ProgrammeAtive = i;} |
|
this.getProgramme(ele.programme,i) |
|
}) |
|
this.getDriving(code) |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.text-center{ |
|
text-align: center; |
|
} |
|
.mapList_List_item{ |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-start; |
|
width: 100%; |
|
background-color: #fff; |
|
padding: 4%; |
|
margin-bottom: 3%; |
|
border-radius: 10rpx; |
|
} |
|
.mapList_List_item_left{ |
|
width: 20%; |
|
flex: 0 0 auto; |
|
display: flex; |
|
margin-right: 4%; |
|
justify-content: center; |
|
} |
|
.mapList_List_item_left image{ |
|
width: 80rpx; |
|
height: 80rpx; |
|
display: block; |
|
} |
|
.mapList_List_item_right_title{ |
|
font-weight: 700; |
|
font-size: 32rpx; |
|
margin-bottom: 2%; |
|
} |
|
.mapList_List_item_right_address{ |
|
font-size: 25rpx; |
|
color: #8a8a8a; |
|
margin-bottom: 2%; |
|
} |
|
.mapList_List_item_right_oilMoeny{ |
|
display: flex; |
|
justify-content: flex-start; |
|
align-items: center; |
|
width: 100%; |
|
} |
|
.mapList_List_item_right_oilMoeny_money{ |
|
display: flex; |
|
justify-content: flex-start; |
|
align-items: center; |
|
color: red; |
|
font-size: 25rpx; |
|
width: 61%; |
|
} |
|
.mapList_List_item_right_oilMoeny_money text{ |
|
font-weight: 700; |
|
font-size: 34rpx; |
|
margin-left: 2%; |
|
margin-right: 2%; |
|
} |
|
.mapList_List_item_right{ |
|
display: flex; |
|
justify-content: flex-start; |
|
align-items: flex-start; |
|
flex-direction: column; |
|
width: 75%; |
|
flex: 0 0 auto; |
|
} |
|
.mapList_List{ |
|
background-color: #E8E8E8; |
|
display: flex; |
|
justify-content: flex-start; |
|
align-items: flex-start; |
|
flex-direction: column; |
|
padding: 3%; |
|
} |
|
.mapList_screen{ |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding: 3% 0; |
|
border-bottom: 1px solid #e8e8e8; |
|
} |
|
.mapList_screen_list{ |
|
width: 33.3%; |
|
font-size: 30rpx; |
|
font-weight: 700; |
|
} |
|
.mapList_heat_list_title{ |
|
margin-bottom: 4%; |
|
font-size: 24rpx; |
|
} |
|
.mapList_heat{ |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
border-top: 1px solid #EFEFEF; |
|
border-bottom: 1px solid #EFEFEF; |
|
} |
|
.mapList_heat_list{ |
|
width: 33.3%; |
|
background-color: #ffffff; |
|
color: #333; |
|
padding: 1% 0; |
|
box-sizing: border-box; |
|
} |
|
.ProgrammeAtive{ |
|
color: red; |
|
} |
|
.mapList_heat_list_value{ |
|
font-size: 32rpx; |
|
font-weight: 700; |
|
} |
|
</style>
|
|
|