359 lines
11 KiB
Vue
359 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<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>
|
||
<view class="cu-bar search bg-white">
|
||
<view class="search-form round">
|
||
<text class="cuIcon-search"></text>
|
||
<input confirm-type="search" @input="onInput" @confirm="onSearch" v-model="siteName" :adjust-position="false" type="text" placeholder="加油站名称" />
|
||
|
||
</view>
|
||
<view class="action" @tap="loadMore">
|
||
更多
|
||
</view>
|
||
</view>
|
||
<view class="page-body">
|
||
<view class="page-section page-section-gap">
|
||
<map style="width: 100%; height:100vh;" :controls="controls" :polyline='polyline' :scale="scale" :latitude="latitude" @labeltap='makerTap' @markertap="makerTap" :longitude="longitude" :markers="covers">
|
||
</map>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="cu-modal bottom-modal" :class="showSite">
|
||
<view class="cu-dialog" @tap.stop="">
|
||
<view class="cu-bar bg-white justify-end">
|
||
<view class="content"> {{siteInfo.siteName?siteInfo.siteName:'油站名称'}}</view>
|
||
<view class="action" @tap="showSite=''">
|
||
<text class="cuIcon-close text-red"></text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-sub">
|
||
<view class="cu-list menu padding-sm radius my-shadow bg-white yu-card-xuan">
|
||
<view class="cu-item ">
|
||
<view class="content" @tap="toDetail(siteInfo)">
|
||
<view class="strong padding-bottom-xs">
|
||
{{siteInfo.siteName?siteInfo.siteName:'油站名称'}}
|
||
</view>
|
||
<view class="text-gray flex">
|
||
<view class="text-bold yellow-oil; text-xl padding-right-xs">
|
||
{{siteInfo.oilProductCode}}
|
||
</view>
|
||
<view class="oil-main-color text-xl text-bold padding-right-xs">
|
||
|
||
￥{{siteInfo.sitePrice|moneyFormat}}
|
||
|
||
</view>
|
||
<view class="">
|
||
<text class="cu-tag oil-tag radius text-xs" v-if="siteInfo.oilSitePrice - siteInfo.sitePrice>0">省￥{{(siteInfo.oilSitePrice - siteInfo.sitePrice)|moneyFormat}}</text>
|
||
</view>
|
||
|
||
<view class="text-cut padding-left-sm text-lg">
|
||
|
||
<text class="text-delete color-333 text-sm padding-right-xs">
|
||
|
||
￥{{siteInfo.oilSitePrice|moneyFormat}}/L
|
||
|
||
</text>
|
||
|
||
<!-- <my-icon iconName="￥.png" class="padding-right-xs icon-rectangle"></my-icon>
|
||
|
||
<my-icon iconName="f.png" class="padding-right-xs "></my-icon> -->
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<view class="font-12 text-left color-999 site-label text-cut">
|
||
{{siteInfo.address?siteInfo.siteName:'油站地址'}}
|
||
</view>
|
||
</view>
|
||
<view class="action " @tap="openMap">
|
||
<view class="oil-main-color">
|
||
<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
|
||
{{siteInfo.juli|distanceFilter}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import oilSiteApi from '@/api/oil-site.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
siteInfo: {},
|
||
showSite: '',
|
||
imgUrl: this.global.imgURL,
|
||
siteList: [],
|
||
InputBottom: 0,
|
||
show: false,
|
||
siteCount: 1,
|
||
currentPage: 1,
|
||
isLoadMore: false, //是否加载中
|
||
baseDriver: uni.getStorageSync('baseDriver'),
|
||
selLocation: {},
|
||
title: 'map',
|
||
location: uni.getStorageSync('location'),
|
||
latitude: 39.909,
|
||
longitude: 116.39742,
|
||
covers: [],
|
||
fillColor: '#ffd75e',
|
||
borderColor: '#12A1DD',
|
||
scale: 12, //地图层级
|
||
controls: [{ //在地图上显示控件，控件不随着地图移动
|
||
id: 1, //控件id
|
||
position: { //控件在地图的位置
|
||
left: 0,
|
||
top: 15,
|
||
width: 50,
|
||
height: 50
|
||
},
|
||
}],
|
||
polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
|
||
points: [],
|
||
color: "#0000AA", //线的颜色
|
||
width: 2, //线的宽度
|
||
dottedLine: true, //是否虚线
|
||
arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
|
||
}],
|
||
|
||
};
|
||
},
|
||
onLoad() {
|
||
let that = this
|
||
this.getSiteList()
|
||
},
|
||
filters: {
|
||
distanceFilter(value) {
|
||
if (value) {
|
||
return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
|
||
}
|
||
},
|
||
moneyFormat(value) {
|
||
if (value) {
|
||
return value.toFixed(2)
|
||
} else {
|
||
return '0.00'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getSiteInfo(id) {
|
||
let data2 = {
|
||
...uni.getStorageSync('location'),
|
||
siteId: id
|
||
}
|
||
oilSiteApi.getSiteDetails(data2).then(res => {
|
||
if (res.code == 20000) {
|
||
this.siteInfo = res.data
|
||
}
|
||
})
|
||
},
|
||
openMap() {
|
||
let that = this
|
||
uni.openLocation({
|
||
latitude: this.siteInfo.latitude,
|
||
longitude: this.siteInfo.longitude,
|
||
name: this.siteInfo.siteName,
|
||
address: this.siteInfo.address,
|
||
scale: 12,
|
||
success: function () {
|
||
// // console.log('success')
|
||
},
|
||
fail: (error) => {
|
||
// // console.log('error')
|
||
// // console.log(error)
|
||
},
|
||
complete: () => {
|
||
// // console.log('made')
|
||
},
|
||
|
||
})
|
||
|
||
var map = uni.createMapContext('map')
|
||
map.moveToLocation()
|
||
},
|
||
makerTap(e) {
|
||
// // console.log(e)
|
||
// // console.log(e.detail)
|
||
this.showSite = ''
|
||
if (e.detail.markerId !== 0) {
|
||
const index = this.siteList.findIndex(s => s.markerId === e.detail.markerId)
|
||
// // console.log(index)
|
||
this.showSite = 'show'
|
||
this.siteInfo = this.siteList[index]
|
||
}
|
||
},
|
||
refreshLocation() {
|
||
// uni.getLocation({
|
||
// type: 'wgs84',
|
||
// success: (res) => {
|
||
// uni.setStorageSync('location', res)
|
||
// this.location = res
|
||
// this.addLocationCurrent()
|
||
|
||
// }
|
||
// });
|
||
},
|
||
addLocationCurrent() {
|
||
this.covers.push({
|
||
id: 0,
|
||
latitude: this.location.latitude, //纬度
|
||
longitude: this.location.longitude, //经度
|
||
label: { //为标记点旁边增加标签
|
||
content: "我的位置", //文本
|
||
color: '#12A1DD', //文本颜色
|
||
anchorX: 5, //label的坐标，原点是 marker 对应的经纬度
|
||
anchorY: -10, //label的坐标，原点是 marker 对应的经纬度
|
||
bgColor: '#fff', //背景色
|
||
padding: 5, //文本边缘留白
|
||
borderWidth: 1, //边框宽度
|
||
borderRadius: 10,
|
||
borderColor: '#12A1DD', //边框颜色 textAlign: 'right' //文本对齐方式。
|
||
}
|
||
})
|
||
},
|
||
loadMore() {
|
||
this.getSiteList()
|
||
},
|
||
getSiteList() {
|
||
this.refreshLocation()
|
||
|
||
let data1 = {
|
||
currentPage: this.currentPage,
|
||
pageSize: 20,
|
||
params: { //类型：Object 必有字段 备注：// 筛选对象
|
||
sort: "juli", //类型：String 必有字段 备注：// 智能排序 ( price：价格最低 juli：距离最近 ) 默认距离排序
|
||
siteName: this.siteName,
|
||
...uni.getStorageSync('location'),
|
||
...this.filterData
|
||
// siteBrand: "", // 备注：// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
|
||
// channelCode: "", // 备注：// 渠道编码 ( OIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
|
||
// oilProductCode: "" // 备注：// 油号选择 ( 0# 92# 92#)
|
||
}
|
||
|
||
}
|
||
oilSiteApi.getSiteList(data1).then(res => {
|
||
if (res.code == 20000) {
|
||
const tmp = res.data.list
|
||
tmp.forEach(e => {
|
||
e.markerId = this.siteCount++
|
||
})
|
||
this.siteList = this.siteList.concat(tmp)
|
||
if (this.siteList.length != 0) {
|
||
this.latitude = this.siteList[0].latitude
|
||
this.longitude = this.siteList[0].longitude
|
||
} else {
|
||
uni.showToast({
|
||
title: '没有查到相关油站',
|
||
icon: 'none'
|
||
})
|
||
this.latitude = this.location.latitude
|
||
this.longitude = this.location.longitude
|
||
}
|
||
|
||
tmp.forEach(item => {
|
||
this.addCover(item)
|
||
})
|
||
if (tmp.length == 0) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||
// this.$emit('changeLoad', 'nomore', true)
|
||
uni.showToast({
|
||
title: '没有更多油站了',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
this.currentPage++
|
||
// this.$emit('changeLoad', 'load', false)
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onInput() {
|
||
setTimeout(() => {
|
||
this.currentPage = 1
|
||
this.siteList = []
|
||
this.covers = []
|
||
this.getSiteList()
|
||
}, 100)
|
||
},
|
||
onSearch() {
|
||
this.currentPage = 1
|
||
this.siteList = []
|
||
this.covers = []
|
||
this.getSiteList()
|
||
},
|
||
toDetail(item) {
|
||
let itemS = JSON.stringify(item)
|
||
console.log('++++++')
|
||
console.log(itemS)
|
||
if (uni.getStorageSync('user')) {
|
||
uni.navigateTo({
|
||
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
|
||
fail: (err) => {
|
||
// console.log(err)
|
||
},
|
||
success: () => {
|
||
// console.log('err')
|
||
}
|
||
})
|
||
}
|
||
},
|
||
addCover(site) {
|
||
// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
|
||
this.covers.push({
|
||
id: site.markerId,
|
||
latitude: site.latitude, //纬度
|
||
longitude: site.longitude, //经度
|
||
// iconPath: this.imgUrl + 'map-' + site.channelCode + '.png',
|
||
iconPath: this.imgUrl + 'map-' +'XOIL' + '.png',
|
||
width: 100,
|
||
height: 50,
|
||
title: site.siteName, //标注点名
|
||
label: { //为标记点旁边增加标签
|
||
content: '￥' + site.sitePrice, //文本
|
||
// color: '#F76350', //文本颜色
|
||
color: '#fff', //文本颜色
|
||
fontSize: '16',
|
||
textAlign:'center',
|
||
anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
|
||
anchorY: -45, //label的坐标，原点是 marker 对应的经纬度
|
||
// x:39.909,//这个组件微信在1.2.0以后就废弃了
|
||
// y:116.39742,
|
||
bgColor: '#FF0000', //背景色
|
||
borderRadius: 10,
|
||
// borderWidth: 1, //边框宽度
|
||
// borderColor: '#D84C29', //边框颜色 textAlign: 'center' //文本对齐方式。
|
||
},
|
||
callout: { //自定义标记点上方的气泡窗口 点击有效
|
||
content: site.siteName,
|
||
color: '#F76350',
|
||
fontSize: 12,
|
||
borderRadius: 5,
|
||
},
|
||
// anchor:{//经纬度在标注图标的锚点，默认底边中点
|
||
// x:5,
|
||
// y:1,
|
||
// }
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.cu-modal {
|
||
background-color: transparent;
|
||
top: initial;
|
||
}
|
||
</style>
|