<template>
<view class="bg-gray h-full">
<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="padding">
<view class="cu-bar padding-tb-sm padding-bottom-sm padding-left-lg flex flex-direction align-between round-small margin-bottom-sm position-re bg-white">
<view class=" flex margin-bottom-sm">
<view class="dot-orange">
<text>始</text>
</view>
<view class="padding-top-sm padding-left-lg">
<taogewan-combox-remote style="width:100%;" ref='inputs1' :placeholder="origin.name ? origin.name : '请输入起点'" :candidates="origin.tips" @input="orignInput" @select="orignSelect" @clear="clear(1)" />
</view>
</view>
<view class=" flex">
<view class="dot-red">
<text>终</text>
</view>
<view class="padding-top-sm padding-left-lg">
<taogewan-combox-remote style="width: 100%;" ref='inputs2' :placeholder="destination.name ? destination.name : '请输入终点'" :candidates="destination.tips" @input="destinationInput" @select="destinationSelect" @clear="clear(2)" />
</view>
</view>
<!-- <view class="position-ab img_icons" @tap='changeInputs'>
<image src="../../static/img/zh_icon.png" style="width:56rpx;height:56rpx;" mode=""></image>
</view> -->
</view>
<button class=" cu-btn margin-bottom-sm block bg-main-oil lg" @tap="gotoRoutePlain()">开始规划路线</button>
<!-- 顶部tab -->
<view class="ju-container bg-white round-small padding-bottom-lg margin-top-sm bg-container" >
<!-- <view class="text-center m-auto line-5 text-black text-bold">附近的油站</view> -->
<div style="margin-bottom: 9px;">
<scroll-view scroll-x class="my-bg nav">
<view class="flex bg-white text-center m-auto line-5 text-black text-bold">
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
v-for="(item,index) in tabList" :key="index" @tap="tabSelect(index)" :data-id="index">
<view class="text-center m-auto line-5 text-black text-bold padding-top-xs">{{item.title}}</view>
</view>
</view>
</scroll-view>
</div>
<!-- 显示附件油站 -->
<view v-if="TabCur == 0">
<view class="flex w-full margin-left-xs lines" v-for="(item,index) in nearSite" :key="index" style="margin-bottom: 14px;">
<view class="margin-left-sm margin-right-sm " @tap="gotoNearSite(item)">
<image style="width: 70rpx;height: 70rpx;" :src="item.iconPath" mode=""></image>
</view>
<view style="flex: 1;" class="flex flex-direction " @tap="gotoNearSite(item)">
<text style="font-size: 28rpx;" class="siteName text-black padding-bottom-xs">{{item.siteName}}</text>
<text style="font-size: 25rpx;" class="font-sm address">{{item.address}}</text>
</view>
<view class="margin-top-sm margin-right-lg text-red-deep juli" @tap="gotoSite(item)">
<text class='cuIcon-location'></text>
<text >{{item.distance}}KM</text>
</view>
</view>
</view>
<!-- 收藏处 -->
<view v-if="TabCur == 1">
<view v-for="(item,index) in collectionList" :key="index" class="collection-item solid-bottom flex margin-right-lg">
<uniIcons type="star-filled" size="18" color="#FF8800" @tap="gotoStarNaviate(index)" />
<view class="overflow-line flex align-center text-df margin-left-sm" style="flex: 1" @tap='gotoCollectionMap(item)'>
{{item.origin.name}} >
{{item.destination.name}}
</view>
</view>
</view>
<!-- 历史记录处 -->
<view v-if="TabCur == 2">
<view v-for="(item,index) in historyList" :key="index" class="collection-item solid-bottom flex margin-right-lg">
<view @tap="addCollection(index)">
<uniIcons type="star" size="18" :color="isLight(index) ? '#FF8800':''" />
</view>
<view class="overflow-line flex align-center text-df margin-left-sm" style="flex: 1" @tap="gotoNaviate(item)">
{{item.origin.name}} > {{item.destination.name}}
</view>
<view @tap="gotoTrash(index)">
<uniIcons type="trash" size="16" />
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import amapFile from '../../../utils/amap-wx.130.js'
import taogewanComboxRemote from '@/components/taogewan-combox-remote/taogewan-combox-remote.vue'
import oilSiteApi from '@/api/oil-site.js'
import uniIcons from '../../../components/uni-icons/uni-icons'
export default {
components: {
taogewanComboxRemote,
uniIcons
},
data() {
return {
locationList: [],
nearSite: [],
origin: { //起点
longitude: '',
latitude: '',
tips: [],
address: '',
name:''
},
destination: { //终点
longitude: '',
latitude: '',
tips: [],
address: ''
},
scrollLeft: 0,
lightStar: [],
TabCur: 0,
myAmapFun: '',
collectionList: [],
isNotFirst: false,
historyList: [],
historys :[],
tabList: [{
title: '附近的油站'
}, {
title: '收藏'
}, {
title: '搜索记录'
}],
}
},
computed: {
},
onShow() {
// this.clear(1)
// this.clear(2)
// let tempOrigin = uni.getStorageSync("origins")
// let tempDestination = uni.getStorageSync("destination")
// if(tempOrigin){
// this.origin = tempDestination
// }
// if(tempDestination){
// this.destination = tempDestination
// }
},
onLoad() {
this.myAmapFun = new amapFile.AMapWX({key: '88f3d3a38da95c4dea388978a76d0b81'});
//console.log(this.myAmapFun)
var that = this;
this.collectionList = uni.getStorageSync("collectionList");
//console.log(this.collectionList)
if(this.collectionList == null ){
this.collectionList = []
}
this.myAmapFun.getRegeo({
success: function(data){
//console.log('map返回的data',data)
//成功回调
that.origin.address = data[0].name
that.origin.longitude = data[0].longitude
that.origin.latitude = data[0].latitude
let data1 ={
currentPage: 1,
pageSize: 10,
params: {
longitude :that.origin.longitude,
latitude :that.origin.latitude
}
}
oilSiteApi.getSiteList(data1).then(res => {
//console.log(res)
if (res.code == 20000) {
that.nearSite = res.data.list
let userLocation = uni.getStorageSync('userLocation')
let list = userLocation.split(','),
longitude = list[0],
latitude = list[1]
//console.log('这里是进入map',that.nearSite)
that.nearSite = that.nearSite.map(item=>{
let iconPath;
if(item.siteChannel == "XOIL"){
iconPath ='../../static/img/XOIL.png';
}else if(item.siteChannel == "WJY"){
iconPath ='../../static/img/WJY.png';
}else if(item.siteChannel == "LV"){
iconPath ='../../static/img/LV.png';
}else if(item.siteChannel == "TY"){
iconPath ='../../static/img/TY.png';
}else if(item.siteChannel == "YDJY"){
iconPath ='../../static/img/YDJY.png';
}else{
iconPath ='../../static/img/XOIL.png';
}
item.distance = item.juli/1000
item.iconPath = iconPath;
return item;
})
}
// oilSiteApi.getByNearPoints(that.origin.longitude,that.origin.latitude).then(res=>{
// //console.log('that.nearSite++++',res)
// that.nearSite = res.data
// let userLocation = uni.getStorageSync('userLocation')
// let list = userLocation.split(','),
// longitude = list[0],
// latitude = list[1]
// //console.log('这里是进入map',that.nearSite)
// that.nearSite = that.nearSite.map(item=>{
// let iconPath;
// if(item.siteChannel == "XOIL"){
// iconPath ='../../static/img/XOIL.png';
// }else if(item.siteChannel == "WJY"){
// iconPath ='../../static/img/WJY.png';
// }else if(item.siteChannel == "LV"){
// iconPath ='../../static/img/LV.png';
// }else if(item.siteChannel == "TY"){
// iconPath ='../../static/img/TY.png';
// }else if(item.siteChannel == "YDJY"){
// iconPath ='../../static/img/YDJY.png';
// }else{
// iconPath ='../../static/img/XOIL.png';
// }
// item.distance = that.distanceCheck(longitude,latitude,item.longitude,item.latitude)
// item.iconPath = iconPath;
// return item;
// })
})
},
fail: function(info){
//失败回调
//console.log(info)
}
})
},
methods: {
gotoSite(item){
//console.log(item)
uni.openLocation({
latitude: item.latitude,
longitude: item.longitude,
success: function () {
//console.log('success');
}
});
},
//计算坐标点与当前位置的距离
distanceCheck(la1, lo1, la2, lo2) {
var La1 = la1 * Math.PI / 180.0;
var La2 = la2 * Math.PI / 180.0;
var La3 = La1 - La2;
var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
s = s * 6378.137;//地球半径
s = Math.round(s * 10000) / 10000/1000;
s=s.toFixed(2)
//console.log("计算结果",s,'KM');
return s
},
changeInputs(){
//console.log()
},
// 点击收藏前往收藏路径轨迹
gotoCollectionMap(item){
// //console.log('点击收藏前往路径',item)
this.origin = item.origin
this.destination = item.destination
this.histGoto()
},
histGoto(){
let key = '88f3d3a38da95c4dea388978a76d0b81'
if(!this.origin.name){
uni.showToast({
title:'请选择起点',
icon:'none'
})
return
}
if(!this.destination.name){
uni.showToast({
title:'请选择终点',
icon:'none'
})
return
}
// uni.setStorageSync("origins",this.origin)
// uni.setStorageSync("destination",this.destination)
let originTem = JSON.stringify(this.origin)
let destinationTem = JSON.stringify(this.destination)
delete originTem.tips
delete destinationTem.tips
// originTem=''
// destinationTem=''
uni.removeStorage({
key:'searchInfo',
success() {
//console.log('删除成功')
}
})
uni.removeStorage({
key:'ishighSpeedMark',
success() {
//console.log('删除成功')
}
})
uni.navigateTo({
url:`/BagStation/pages/routePlainMap/routePlainMap?origin=${originTem}&destination=${destinationTem}`
})
this.$refs.inputs1.clearSelector()
this.$refs.inputs2.clearSelector()
this.clear(1)
this.clear(2)
this.historyList = []
this.historyList = uni.getStorageSync("historyList")
this.collectionList = uni.getStorageSync("collectionList");
},
gotoNearSite(item){
//console.log(item)
let itemS = JSON.stringify(item)
//console.log(itemS)
if (uni.getStorageSync('user')) {
uni.navigateTo({
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}&&type=map`,
fail: (err) => {
// //console.log(err)
},
success: () => {
// //console.log('err')
}
})
} else {
uni.showModal({
title:'请您登录',
content:"登录小星加油才可以加油 |˛˙꒳˙)♡",
confirmText:'去登陆',
success: (res) => {
if(res.confirm){
uni.reLaunch({
url:'../../../BagAuth/pages/login/login'
})
}
}
})
}
},
isLight(index){
return this.lightStar.filter(item=>item == index) != null
},
// 历史记录 点击前往历史记录路径规划
gotoNaviate(item){
//console.log(item)
this.origin = item.origin
this.destination = item.destination
this.histGoto()
// setTimeout(()=>{
// let record = this.historyList[index];
// this.origin = record.origin
// this.destination = record.destination
// //console.log(record)
// },250)
},
//取消收藏
gotoStarNaviate(index){
this.collectionList.splice(index,1)
uni.setStorageSync("collectionList",this.collectionList)
uni.showToast({
title: '取消收藏',
duration: 1000,
icon:'none'
});
// setTimeout(()=>{
// let record = this.collectionList[index];
// //console.log('这里是收藏处列表',record)
// this.origin = record.origin
// this.destination = record.destination
// },250)
},
// 删除当前历史记录
gotoTrash(index){
this.historyList.splice(index,1)
//console.log(this.historyList)
uni.setStorageSync("historyList",this.historyList)
uni.showToast({
title: '删除成功',
duration: 1000,
icon:'none'
});
},
addCollection(index){
this.collectionList = uni.getStorageSync("collectionList");
//console.log(this.collectionList)
if(this.collectionList == null || this.collectionList == '' ){
this.collectionList = []
}
// //console.log(this.collectionList)
// //console.log('这类似点击收藏',this.collectionList)
// //console.log('这里是历史记录点击收藏处',this.historyList[index].destination.name,this.historyList[index].origin.name)
let historyList = this.historyList[index]
for(let i=0;i<this.collectionList.length;i++){
if(historyList.destination.name == this.collectionList[i].destination.name && historyList.origin.name == this.collectionList[i].origin.name ){
//console.log('这里是打印收藏Listmap', this.collectionList[i])
uni.showToast({
title:'已收藏',
icon:'none'
})
return false
}
}
// this.collectionList.map((item)=>{
// if(historyList.destination.name == item.destination.name && historyList.origin.name == item.origin.name ){
// //console.log('这里是打印收藏Listmap', item)
// uni.showToast({
// title:'已收藏',
// icon:'none'
// })
// }
// return false
// })
this.collectionList.push(this.historyList[index])
//console.log( '这里是map循环外的',this.historyList[index])
uni.setStorageSync("collectionList",this.collectionList)
uni.showToast({
title: '收藏成功',
duration: 1000,
icon:'none'
});
this.lightStar.push(index);
},
// 起点根据起点input值 回显list
orignInput(val){
//console.log(val)
let _that = this
this.myAmapFun.getInputtips({
keywords: val,
location: '',
success: (data) => {
//console.log('检索data',data)
if(data && data.tips){ //
let itmeList = []
data.tips.forEach((item)=>{
if(item.location.length !=0 ){
if(item.address.length ==0){
let obj = {
'key':item.district,
'value':item.name,
'location': item.location,
'detail': item.district + " "+item.address
}
itmeList.push(obj)
}else{
let obj = {
'key':item.address,
'value':item.name,
'location': item.location,
'detail': item.district + " "+item.address
}
itmeList.push(obj)
}
}
})
_that.origin.tips = itmeList
//console.log('这里是回显内',_that.origin)
}
}})
//console.log('这里是回显处',_that.origin)
},
// 结束点根据结束点input值 回显list
destinationInput(val){
this.myAmapFun.getInputtips({
keywords: val,
location: '',
success: (data) => {
if(data && data.tips){
let itemList = []
data.tips.forEach((item)=>{
if(item.location.length !=0){
let obj ={
'key':item.address,
'value':item.name,
'location': item.location,
'detail': item.district + " "+item.address
}
itemList.push(obj)
}
})
this.destination.tips = itemList
}
}})
},
orignSelect(val){
//console.log('这里是开始点击选中的val',val)
this.origin.address = val
if(this.destination.address){
let result = this.origin.tips.filter(item=>item.key == val)
let result2 = this.destination.tips.filter(item=>item.key == this.destination.address)
//console.log('这里是result处',result[0].value)
//console.log('这里是result处this.origin',this.origin)
this.origin.name = result[0].value
let record = {
origin: this.origin,
destination: this.destination
}
//console.log('这里是开始地址', result)
if(result[0]&&result[0].location) {
this.origin.longitude = result[0].location.split(",")[0]
this.origin.latitude = result[0].location.split(",")[1]
//console.log('这里是开始的地址longitude',this.origin.longitude)
//console.log('这里是开始的地址latitude',this.origin.latitude)
}else{
uni.showToast({
title:"提示请输入具体地址",
icon:'none'
})
return
}
this.historys=record
// this.historyList = uni.getStorageSync("historyList")
// if(this.historyList == null || this.historyList == ''){
// this.historyList = []
// }
// this.historyList.push(record)
// uni.setStorageSync("historyList",this.historyList)
//console.log('这里是historyList',this.historyList)
}
},
destinationSelect(val){
//console.log('这里是',val)
this.destination.address = val
//console.log(this.destination )
//console.log('this.destination结束点回显处 ',this.destination )
if(this.origin.address){
//console.log('这里是进入address')
let tempOriginAddress=null;
let result = null;
// if(!this.isNotFirst){
//console.log('this.isNotFirst 为flase')
this.isNotFirst = true;
tempOriginAddress = this.origin.address
//console.log("监控1")
//console.log(tempOriginAddress)
// }else{
// //console.log('这里是结束result处',result)
// //console.log('这里是结束result处this.origin',this.origin)
// //console.log('这里是结束地址', result)
// if(result[0]&&result[0].location) {
// // this.origin.longitude = result[0].location.split(",")[0]
// // this.origin.latitude = result[0].location.split(",")[1]
// result = this.origin.tips.filter(item=>item.key == this.origin.address)
// tempOriginAddress = result[0].value
// this.origin.longitude = result[0].location.split(",")[0]
// this.origin.latitude = result[0].location.split(",")[1]
// //console.log('这里是结束地址longitude',this.origin.longitude)
// //console.log('这里是结束地址latitude',this.origin.latitude)
// //console.log("监控2")
// //console.log(result)
// }else{
// uni.showToast({
// title:"提示请输入具体地址",
// icon:'none'
// })
// return
// }
// }
let result2 = this.destination.tips.filter(item=>item.key == val)
if(result2[0] != null){
this.destination.longitude = result2[0].location.split(",")[0]
this.destination.latitude = result2[0].location.split(",")[1]
this.destination.name = result2[0].value
}
if(tempOriginAddress == null){
//console.log('+++++',result)
this.origin.name = result[0].value
}else{
/* 第一次走这里 */
let rrr = this.origin.tips.filter(item=>item.key == tempOriginAddress)
//console.log("走这里")
if(rrr && rrr[0]){
//console.log('这里是rrr',rrr)
this.origin.name=rrr[0].value
this.origin.longitude = rrr[0].location.split(",")[0]
this.origin.latitude = rrr[0].location.split(",")[1]
//console.log(this.origin)
//console.log(rrr)
}
}
let record = {
origin: this.origin,
destination: this.destination
}
//console.log('++++++record',record)
this.historys=record
//console.log(this.historys)
// this.historyList = uni.getStorageSync("historyList")
if(this.historyList == null || this.historyList == ''){
this.historyList = []
}
// this.historyList.push(record)
// uni.setStorageSync("historyList",this.historyList)
}
},
gotoRoutePlain(){
//console.log('+++----++++****++++',destinationTem)
// 获取起点 终点定位
let key = '88f3d3a38da95c4dea388978a76d0b81'
//console.log('这里起点',this.origin.name,typeof(this.origin.name))
//console.log('这里是终点',this.destination.name,typeof(this.destination.name))
if(!this.origin.name){
uni.showToast({
title:'请选择起点',
icon:'none'
})
this.$refs.inputs1.clearSelector()
this.clear(1)
return
}
if(!this.destination.name){
uni.showToast({
title:'请选择终点',
icon:'none'
})
this.$refs.inputs2.clearSelector()
this.clear(2)
return
}
uni.removeStorage({
key:'searchInfo',
success() {
//console.log('删除成功')
}
})
uni.removeStorage({
key:'ishighSpeedMark',
success() {
//console.log('删除成功')
}
})
this.historyList = uni.getStorageSync('historyList')
let record = {
origin: this.historys.origin,
destination: this.historys.destination
}
if(this.historyList == null || this.historyList == ''){
this.historyList = []
}
this.historyList.push(record)
uni.setStorageSync("historyList",this.historyList)
// uni.setStorageSync("origins",this.origin)
// uni.setStorageSync("destination",this.destination)
let originTem = JSON.stringify(this.origin)
let destinationTem = JSON.stringify(this.destination)
delete originTem.tips
delete destinationTem.tips
uni.navigateTo({
url:`/BagStation/pages/routePlainMap/routePlainMap?origin=${originTem}&destination=${destinationTem}`
})
// originTem=''
// destinationTem=''
this.$refs.inputs1.clearSelector()
this.$refs.inputs2.clearSelector()
this.clear(1)
this.clear(2)
this.historyList = []
this.historyList = uni.getStorageSync("historyList")
this.collectionList = uni.getStorageSync("collectionList");
//console.log('跳转后---',)
},
tabSelect(index) {
this.TabCur = index
this.historyList = uni.getStorageSync("historyList")
},
clear(index){
if(index == 1){
this.origin.name=''
this.origin.tips = []
this.origin.latitude = ''
this.origin.longitude = ''
this.origin.address = ''
this.collectionList = []
this.historyList = []
this.historyList = uni.getStorageSync("historyList")
this.collectionList = uni.getStorageSync("collectionList");
}else{
this.destination.name=''
this.destination.tips = []
this.destination.latitude = ''
this.destination.longitude = ''
this.destination.address = ''
this.collectionList = []
this.historyList = []
this.historyList = uni.getStorageSync("historyList")
this.collectionList = uni.getStorageSync("collectionList");
}
}
}
}
</script>
<style >
.h-full{
height: 100%;
}
.round-small{
border-radius: 8rpx;
}
.dot-orange{
width: 65rpx;
height: 65rpx;
background-color: #FF8800;
color: white;
border-radius: 50%;
text-align: center;
line-height: 1.9;
font-size: 35rpx;
}
.dot-red{
width: 65rpx;
height: 65rpx;
background-color: #FF4D4D;
color: white;
border-radius: 50%;
text-align: center;
line-height: 1.9;
font-size: 35rpx;
}
.align-between{
align-items: flex-start;
}
.uni-combox{
width: 139%!important;
}
.m-auto{
margin: auto;
}
.w-full{
}
.line-5{
line-height: 2.7;
margin-bottom: 9rpx;
}
.font-sm{
font-size: 20rpx;
color: #666666;
font-weight: 370;
}
.text-red-deep{
color: #FE0505;
}
.address{
width: 50vw;
white-space: nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.siteName{
width: 50vw;
white-space: nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.juli-container{
position: relative;
}
.juli{
position: absolute;
right: 15px;
}
.text-orange,
.line-orange,
.lines-orange {
color: #f37b1d;
}
.cur {
background-color: white;
}
.collection-item{
padding: 12rpx 7rpx;
margin-left: 12px;
line-height: 2;
}
.overflow-line{
white-space: nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.bg-container{
height: 73vh;
background-color: white;
/* overflow: scroll; */
}
.lines{
padding-bottom: 5px;
border-bottom: 1px solid #EEEEEE;
}
.img_icons{
right: 4%;
bottom: 30%;
}
</style>