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.
379 lines
10 KiB
379 lines
10 KiB
2 years ago
|
<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>
|