星油企业版
This commit is contained in:
caolc
378
BagStation/pages/mapList/mapList.vue
Normal file
378
BagStation/pages/mapList/mapList.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user