更新
This commit is contained in:
@@ -170,7 +170,7 @@
|
|||||||
latitude :that.origin.latitude
|
latitude :that.origin.latitude
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
oilSiteApi.getSiteList(data1).then(res => {
|
oilSiteApi.findKASiteInfoByPage(data1).then(res => {
|
||||||
//console.log(res)
|
//console.log(res)
|
||||||
if (res.code == 20000) {
|
if (res.code == 20000) {
|
||||||
that.nearSite = res.data.list
|
that.nearSite = res.data.list
|
||||||
|
|||||||
@@ -1,79 +1,109 @@
|
|||||||
<template>
|
<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>
|
||||||
<view class="cu-bar search bg-white">
|
<cu-custom
|
||||||
<view class="search-form round">
|
class="main-totextbar bg-main-oil"
|
||||||
<text class="cuIcon-search"></text>
|
:isBack="true"
|
||||||
<input confirm-type="search" @input="onInput" @confirm="onSearch" v-model="siteName" :adjust-position="false" type="text" placeholder="加油站名称" />
|
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>
|
||||||
<view class="action" @tap="loadMore">
|
<view class="page-body">
|
||||||
更多
|
<view class="page-section page-section-gap">
|
||||||
</view>
|
<map
|
||||||
</view>
|
style="width: 100%; height: 100vh"
|
||||||
<view class="page-body">
|
:controls="controls"
|
||||||
<view class="page-section page-section-gap">
|
:polyline="polyline"
|
||||||
<map style="width: 100%; height:100vh;" :controls="controls" :polyline='polyline' :scale="scale" :latitude="latitude" @labeltap='makerTap' @markertap="makerTap" :longitude="longitude" :markers="covers">
|
:scale="scale"
|
||||||
</map>
|
:latitude="latitude"
|
||||||
</view>
|
@labeltap="makerTap"
|
||||||
</view>
|
@markertap="makerTap"
|
||||||
|
:longitude="longitude"
|
||||||
</view>
|
:markers="covers"
|
||||||
<view class="cu-modal bottom-modal" :class="showSite">
|
>
|
||||||
<view class="cu-dialog" @tap.stop="">
|
</map>
|
||||||
<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>
|
</view>
|
||||||
<view class="flex-sub">
|
</view>
|
||||||
<view class="cu-list menu padding-sm radius my-shadow bg-white yu-card-xuan">
|
<view class="cu-modal bottom-modal" :class="showSite">
|
||||||
<view class="cu-item ">
|
<view class="cu-dialog" @tap.stop="">
|
||||||
<view class="content" @tap="toDetail(siteInfo)">
|
<view class="cu-bar bg-white justify-end">
|
||||||
<view class="strong padding-bottom-xs">
|
<view class="content">
|
||||||
{{siteInfo.siteName?siteInfo.siteName:'油站名称'}}
|
{{ siteInfo.siteName ? siteInfo.siteName : "油站名称" }}</view
|
||||||
</view>
|
>
|
||||||
<view class="text-gray flex">
|
<view class="action" @tap="showSite = ''">
|
||||||
<view class="text-bold yellow-oil; text-xl padding-right-xs">
|
<text class="cuIcon-close text-red"></text>
|
||||||
{{siteInfo.oilProductCode}}
|
</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>
|
||||||
<view class="oil-main-color text-xl text-bold padding-right-xs">
|
<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>
|
||||||
|
|
||||||
¥{{siteInfo.sitePrice|moneyFormat}}
|
<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>
|
||||||
|
|
||||||
</view>
|
<!-- <my-icon iconName="¥.png" class="padding-right-xs icon-rectangle"></my-icon>
|
||||||
<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> -->
|
<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>
|
</view>
|
||||||
<view class="font-12 text-left color-999 site-label text-cut">
|
<view class="action" @tap="openMap">
|
||||||
{{siteInfo.address?siteInfo.siteName:'油站地址'}}
|
<view class="oil-main-color">
|
||||||
</view>
|
<my-icon
|
||||||
</view>
|
iconName="sy-der-icon.png"
|
||||||
<view class="action " @tap="openMap">
|
class="padding-right-xs text-sm"
|
||||||
<view class="oil-main-color">
|
></my-icon>
|
||||||
<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
|
{{ siteInfo.juli | distanceFilter }}
|
||||||
{{siteInfo.juli|distanceFilter}}
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -81,17 +111,16 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import oilSiteApi from '@/api/oil-site.js'
|
import oilSiteApi from "@/api/oil-site.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
siteInfo: {},
|
siteInfo: {},
|
||||||
showSite: '',
|
showSite: "",
|
||||||
imgUrl: this.global.imgURL,
|
imgUrl: this.global.imgURL,
|
||||||
siteList: [],
|
siteList: [],
|
||||||
InputBottom: 0,
|
InputBottom: 0,
|
||||||
@@ -99,67 +128,73 @@ export default {
|
|||||||
siteCount: 1,
|
siteCount: 1,
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
isLoadMore: false, //是否加载中
|
isLoadMore: false, //是否加载中
|
||||||
baseDriver: uni.getStorageSync('baseDriver'),
|
baseDriver: uni.getStorageSync("baseDriver"),
|
||||||
selLocation: {},
|
selLocation: {},
|
||||||
title: 'map',
|
title: "map",
|
||||||
location: uni.getStorageSync('location'),
|
location: uni.getStorageSync("location"),
|
||||||
latitude: 39.909,
|
latitude: 39.909,
|
||||||
longitude: 116.39742,
|
longitude: 116.39742,
|
||||||
covers: [],
|
covers: [],
|
||||||
fillColor: '#ffd75e',
|
fillColor: "#ffd75e",
|
||||||
borderColor: '#12A1DD',
|
borderColor: "#12A1DD",
|
||||||
scale: 12, //地图层级
|
scale: 12, //地图层级
|
||||||
controls: [{ //在地图上显示控件,控件不随着地图移动
|
controls: [
|
||||||
id: 1, //控件id
|
{
|
||||||
position: { //控件在地图的位置
|
//在地图上显示控件,控件不随着地图移动
|
||||||
left: 0,
|
id: 1, //控件id
|
||||||
top: 15,
|
position: {
|
||||||
width: 50,
|
//控件在地图的位置
|
||||||
height: 50
|
left: 0,
|
||||||
|
top: 15,
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}],
|
],
|
||||||
polyline: [{ //指定一系列坐标点,从数组第一项连线至最后一项
|
polyline: [
|
||||||
points: [],
|
{
|
||||||
color: "#0000AA", //线的颜色
|
//指定一系列坐标点,从数组第一项连线至最后一项
|
||||||
width: 2, //线的宽度
|
points: [],
|
||||||
dottedLine: true, //是否虚线
|
color: "#0000AA", //线的颜色
|
||||||
arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
|
width: 2, //线的宽度
|
||||||
}],
|
dottedLine: true, //是否虚线
|
||||||
|
arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
let that = this
|
let that = this;
|
||||||
this.getSiteList()
|
this.getSiteList();
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
distanceFilter(value) {
|
distanceFilter(value) {
|
||||||
if (value) {
|
if (value) {
|
||||||
return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
|
return value > 1000 ? (value / 1000).toFixed(2) + "km" : value + "m";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
moneyFormat(value) {
|
moneyFormat(value) {
|
||||||
if (value) {
|
if (value) {
|
||||||
return value.toFixed(2)
|
return value.toFixed(2);
|
||||||
} else {
|
} else {
|
||||||
return '0.00'
|
return "0.00";
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getSiteInfo(id) {
|
getSiteInfo(id) {
|
||||||
let data2 = {
|
let data2 = {
|
||||||
...uni.getStorageSync('location'),
|
...uni.getStorageSync("location"),
|
||||||
siteId: id
|
siteId: id,
|
||||||
}
|
};
|
||||||
oilSiteApi.getSiteDetailsByKA(data2).then(res => {
|
oilSiteApi.getSiteDetailsByKA(data2).then((res) => {
|
||||||
if (res.code == 20000) {
|
if (res.code == 20000) {
|
||||||
this.siteInfo = res.data
|
this.siteInfo = res.data;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
openMap() {
|
openMap() {
|
||||||
let that = this
|
let that = this;
|
||||||
uni.openLocation({
|
uni.openLocation({
|
||||||
latitude: this.siteInfo.latitude,
|
latitude: this.siteInfo.latitude,
|
||||||
longitude: this.siteInfo.longitude,
|
longitude: this.siteInfo.longitude,
|
||||||
@@ -176,21 +211,22 @@ export default {
|
|||||||
complete: () => {
|
complete: () => {
|
||||||
// // console.log('made')
|
// // console.log('made')
|
||||||
},
|
},
|
||||||
|
});
|
||||||
|
|
||||||
})
|
var map = uni.createMapContext("map");
|
||||||
|
map.moveToLocation();
|
||||||
var map = uni.createMapContext('map')
|
|
||||||
map.moveToLocation()
|
|
||||||
},
|
},
|
||||||
makerTap(e) {
|
makerTap(e) {
|
||||||
// // console.log(e)
|
// // console.log(e)
|
||||||
// // console.log(e.detail)
|
// // console.log(e.detail)
|
||||||
this.showSite = ''
|
this.showSite = "";
|
||||||
if (e.detail.markerId !== 0) {
|
if (e.detail.markerId !== 0) {
|
||||||
const index = this.siteList.findIndex(s => s.markerId === e.detail.markerId)
|
const index = this.siteList.findIndex(
|
||||||
|
(s) => s.markerId === e.detail.markerId
|
||||||
|
);
|
||||||
// // console.log(index)
|
// // console.log(index)
|
||||||
this.showSite = 'show'
|
this.showSite = "show";
|
||||||
this.siteInfo = this.siteList[index]
|
this.siteInfo = this.siteList[index];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
refreshLocation() {
|
refreshLocation() {
|
||||||
@@ -200,7 +236,6 @@ export default {
|
|||||||
// uni.setStorageSync('location', res)
|
// uni.setStorageSync('location', res)
|
||||||
// this.location = res
|
// this.location = res
|
||||||
// this.addLocationCurrent()
|
// this.addLocationCurrent()
|
||||||
|
|
||||||
// }
|
// }
|
||||||
// });
|
// });
|
||||||
},
|
},
|
||||||
@@ -209,104 +244,105 @@ export default {
|
|||||||
id: 0,
|
id: 0,
|
||||||
latitude: this.location.latitude, //纬度
|
latitude: this.location.latitude, //纬度
|
||||||
longitude: this.location.longitude, //经度
|
longitude: this.location.longitude, //经度
|
||||||
label: { //为标记点旁边增加标签
|
label: {
|
||||||
|
//为标记点旁边增加标签
|
||||||
content: "我的位置", //文本
|
content: "我的位置", //文本
|
||||||
color: '#12A1DD', //文本颜色
|
color: "#12A1DD", //文本颜色
|
||||||
anchorX: 5, //label的坐标,原点是 marker 对应的经纬度
|
anchorX: 5, //label的坐标,原点是 marker 对应的经纬度
|
||||||
anchorY: -10, //label的坐标,原点是 marker 对应的经纬度
|
anchorY: -10, //label的坐标,原点是 marker 对应的经纬度
|
||||||
bgColor: '#fff', //背景色
|
bgColor: "#fff", //背景色
|
||||||
padding: 5, //文本边缘留白
|
padding: 5, //文本边缘留白
|
||||||
borderWidth: 1, //边框宽度
|
borderWidth: 1, //边框宽度
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
borderColor: '#12A1DD', //边框颜色 textAlign: 'right' //文本对齐方式。
|
borderColor: "#12A1DD", //边框颜色 textAlign: 'right' //文本对齐方式。
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
loadMore() {
|
loadMore() {
|
||||||
this.getSiteList()
|
this.getSiteList();
|
||||||
},
|
},
|
||||||
getSiteList() {
|
getSiteList() {
|
||||||
this.refreshLocation()
|
this.refreshLocation();
|
||||||
|
|
||||||
let data1 = {
|
let data1 = {
|
||||||
currentPage: this.currentPage,
|
currentPage: this.currentPage,
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
params: { //类型:Object 必有字段 备注:// 筛选对象
|
params: {
|
||||||
|
//类型:Object 必有字段 备注:// 筛选对象
|
||||||
sort: "juli", //类型:String 必有字段 备注:// 智能排序 ( price:价格最低 juli:距离最近 ) 默认距离排序
|
sort: "juli", //类型:String 必有字段 备注:// 智能排序 ( price:价格最低 juli:距离最近 ) 默认距离排序
|
||||||
siteName: this.siteName,
|
siteName: this.siteName,
|
||||||
...uni.getStorageSync('location'),
|
...uni.getStorageSync("location"),
|
||||||
...this.filterData
|
...this.filterData,
|
||||||
// siteBrand: "", // 备注:// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
|
// siteBrand: "", // 备注:// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
|
||||||
// channelCode: "", // 备注:// 渠道编码 ( OIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
|
// channelCode: "", // 备注:// 渠道编码 ( OIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
|
||||||
// oilProductCode: "" // 备注:// 油号选择 ( 0# 92# 92#)
|
// oilProductCode: "" // 备注:// 油号选择 ( 0# 92# 92#)
|
||||||
}
|
},
|
||||||
|
};
|
||||||
}
|
oilSiteApi.findKASiteInfoByPage(data1).then((res) => {
|
||||||
oilSiteApi.getSiteList(data1).then(res => {
|
|
||||||
if (res.code == 20000) {
|
if (res.code == 20000) {
|
||||||
const tmp = res.data.list
|
const tmp = res.data.list;
|
||||||
tmp.forEach(e => {
|
tmp.forEach((e) => {
|
||||||
e.markerId = this.siteCount++
|
e.markerId = this.siteCount++;
|
||||||
})
|
});
|
||||||
this.siteList = this.siteList.concat(tmp)
|
this.siteList = this.siteList.concat(tmp);
|
||||||
if (this.siteList.length != 0) {
|
if (this.siteList.length != 0) {
|
||||||
this.latitude = this.siteList[0].latitude
|
this.latitude = this.siteList[0].latitude;
|
||||||
this.longitude = this.siteList[0].longitude
|
this.longitude = this.siteList[0].longitude;
|
||||||
} else {
|
} else {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '没有查到相关油站',
|
title: "没有查到相关油站",
|
||||||
icon: 'none'
|
icon: "none",
|
||||||
})
|
});
|
||||||
this.latitude = this.location.latitude
|
this.latitude = this.location.latitude;
|
||||||
this.longitude = this.location.longitude
|
this.longitude = this.location.longitude;
|
||||||
}
|
}
|
||||||
|
|
||||||
tmp.forEach(item => {
|
tmp.forEach((item) => {
|
||||||
this.addCover(item)
|
this.addCover(item);
|
||||||
})
|
});
|
||||||
if (tmp.length == 0) { //判断接口返回数据量小于请求数据量,则表示此为最后一页
|
if (tmp.length == 0) {
|
||||||
|
//判断接口返回数据量小于请求数据量,则表示此为最后一页
|
||||||
// this.$emit('changeLoad', 'nomore', true)
|
// this.$emit('changeLoad', 'nomore', true)
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '没有更多油站了',
|
title: "没有更多油站了",
|
||||||
icon: 'none'
|
icon: "none",
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
this.currentPage++
|
this.currentPage++;
|
||||||
// this.$emit('changeLoad', 'load', false)
|
// this.$emit('changeLoad', 'load', false)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
onInput() {
|
onInput() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.currentPage = 1
|
this.currentPage = 1;
|
||||||
this.siteList = []
|
this.siteList = [];
|
||||||
this.covers = []
|
this.covers = [];
|
||||||
this.getSiteList()
|
this.getSiteList();
|
||||||
}, 100)
|
}, 100);
|
||||||
},
|
},
|
||||||
onSearch() {
|
onSearch() {
|
||||||
this.currentPage = 1
|
this.currentPage = 1;
|
||||||
this.siteList = []
|
this.siteList = [];
|
||||||
this.covers = []
|
this.covers = [];
|
||||||
this.getSiteList()
|
this.getSiteList();
|
||||||
},
|
},
|
||||||
toDetail(item) {
|
toDetail(item) {
|
||||||
let itemS = JSON.stringify(item)
|
let itemS = JSON.stringify(item);
|
||||||
console.log('++++++')
|
console.log("++++++");
|
||||||
console.log(itemS)
|
console.log(itemS);
|
||||||
if (uni.getStorageSync('user')) {
|
if (uni.getStorageSync("user")) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
|
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
// console.log(err)
|
// console.log(err)
|
||||||
},
|
},
|
||||||
success: () => {
|
success: () => {
|
||||||
// console.log('err')
|
// console.log('err')
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
addCover(site) {
|
addCover(site) {
|
||||||
// 渠道编码 ( XOIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
|
// 渠道编码 ( XOIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
|
||||||
@@ -315,28 +351,30 @@ export default {
|
|||||||
latitude: site.latitude, //纬度
|
latitude: site.latitude, //纬度
|
||||||
longitude: site.longitude, //经度
|
longitude: site.longitude, //经度
|
||||||
// iconPath: this.imgUrl + 'map-' + site.channelCode + '.png',
|
// iconPath: this.imgUrl + 'map-' + site.channelCode + '.png',
|
||||||
iconPath: this.imgUrl + 'map-' +'XOIL' + '.png',
|
iconPath: this.imgUrl + "map-" + "XOIL" + ".png",
|
||||||
width: 100,
|
width: 100,
|
||||||
height: 50,
|
height: 50,
|
||||||
title: site.siteName, //标注点名
|
title: site.siteName, //标注点名
|
||||||
label: { //为标记点旁边增加标签
|
label: {
|
||||||
content: '¥' + site.sitePrice, //文本
|
//为标记点旁边增加标签
|
||||||
|
content: "¥" + site.sitePrice, //文本
|
||||||
// color: '#F76350', //文本颜色
|
// color: '#F76350', //文本颜色
|
||||||
color: '#fff', //文本颜色
|
color: "#fff", //文本颜色
|
||||||
fontSize: '16',
|
fontSize: "16",
|
||||||
textAlign:'center',
|
textAlign: "center",
|
||||||
anchorX: -5, //label的坐标,原点是 marker 对应的经纬度
|
anchorX: -5, //label的坐标,原点是 marker 对应的经纬度
|
||||||
anchorY: -45, //label的坐标,原点是 marker 对应的经纬度
|
anchorY: -45, //label的坐标,原点是 marker 对应的经纬度
|
||||||
// x:39.909,//这个组件微信在1.2.0以后就废弃了
|
// x:39.909,//这个组件微信在1.2.0以后就废弃了
|
||||||
// y:116.39742,
|
// y:116.39742,
|
||||||
bgColor: '#FF0000', //背景色
|
bgColor: "#FF0000", //背景色
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
// borderWidth: 1, //边框宽度
|
// borderWidth: 1, //边框宽度
|
||||||
// borderColor: '#D84C29', //边框颜色 textAlign: 'center' //文本对齐方式。
|
// borderColor: '#D84C29', //边框颜色 textAlign: 'center' //文本对齐方式。
|
||||||
},
|
},
|
||||||
callout: { //自定义标记点上方的气泡窗口 点击有效
|
callout: {
|
||||||
|
//自定义标记点上方的气泡窗口 点击有效
|
||||||
content: site.siteName,
|
content: site.siteName,
|
||||||
color: '#F76350',
|
color: "#F76350",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
borderRadius: 5,
|
borderRadius: 5,
|
||||||
},
|
},
|
||||||
@@ -344,10 +382,10 @@ export default {
|
|||||||
// x:5,
|
// x:5,
|
||||||
// y:1,
|
// y:1,
|
||||||
// }
|
// }
|
||||||
})
|
});
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -1,149 +1,159 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 三个最近的油站弹窗 -->
|
<!-- 三个最近的油站弹窗 -->
|
||||||
<view>
|
<view>
|
||||||
<view class="cu-modal" :class="showThreeSites?'show':''">
|
<view class="cu-modal" :class="showThreeSites ? 'show' : ''">
|
||||||
<view class="cu-dialog">
|
<view class="cu-dialog">
|
||||||
<view class="cu-bar bg-white justify-end">
|
<view class="cu-bar bg-white justify-end">
|
||||||
<view class="content">选择油站</view>
|
<view class="content">选择油站</view>
|
||||||
<view class="action" @tap="hideModal('sites')">
|
<view class="action" @tap="hideModal('sites')">
|
||||||
<text class="cuIcon-close text-red"></text>
|
<text class="cuIcon-close text-red"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="padding-xl bg-white">
|
<view class="padding-xl bg-white">
|
||||||
<view class="" v-if="siteList.length>0">
|
<view class="" v-if="siteList.length > 0">
|
||||||
<three-item v-for="(item,index) in siteList" :key="item.id" :site-item="item" :first="index==0"
|
<three-item
|
||||||
class="cu-list menu-avatar cu-item " @tap="toDetail(item)">
|
v-for="(item, index) in siteList"
|
||||||
</three-item>
|
:key="item.id"
|
||||||
</view>
|
:site-item="item"
|
||||||
<view class="" v-else>
|
:first="index == 0"
|
||||||
<my-empty></my-empty>
|
class="cu-list menu-avatar cu-item"
|
||||||
</view>
|
@tap="toDetail(item)"
|
||||||
<view class="btn-box padding-top">
|
>
|
||||||
<button @tap="toSitePage" class="cu-tn bg-red round margin-bottom lg" color="#3982F6"
|
</three-item>
|
||||||
size="large">前往油站列表查找
|
</view>
|
||||||
</button>
|
<view class="" v-else>
|
||||||
</view>
|
<my-empty></my-empty>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="btn-box padding-top">
|
||||||
</view>
|
<button
|
||||||
|
@tap="toSitePage"
|
||||||
</view>
|
class="cu-tn bg-red round margin-bottom lg"
|
||||||
|
color="#3982F6"
|
||||||
|
size="large"
|
||||||
|
>
|
||||||
|
前往油站列表查找
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import oilSiteApi from '@/api/oil-site.js'
|
import oilSiteApi from "@/api/oil-site.js";
|
||||||
import threeItem from './three-item.vue'
|
import threeItem from "./three-item.vue";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
threeItem
|
threeItem,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
showThreeSites: {
|
showThreeSites: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
siteList: [],
|
siteList: [],
|
||||||
imgURL: this.global.baseURL,
|
imgURL: this.global.baseURL,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getSiteList()
|
this.getSiteList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toSitePage(){
|
toSitePage() {
|
||||||
// uni.setStorageSync('activeCur','station')
|
// uni.setStorageSync('activeCur','station')
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: '/pages/tabbar/station/stationList'
|
url: "/pages/tabbar/station/stationList",
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
refreshLocation(){
|
refreshLocation() {
|
||||||
uni.getLocation({
|
uni.getLocation({
|
||||||
type: 'wgs84',
|
type: "wgs84",
|
||||||
success: function (res) {
|
success: function (res) {
|
||||||
uni.setStorageSync('location',res)
|
uni.setStorageSync("location", res);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getSiteList() {
|
getSiteList() {
|
||||||
this.refreshLocation()
|
this.refreshLocation();
|
||||||
let data1 = {
|
let data1 = {
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 3,
|
pageSize: 3,
|
||||||
params: { //类型:Object 必有字段 备注:// 筛选对象
|
params: {
|
||||||
sort: "juli", //类型:String 必有字段 备注:// 智能排序 ( price:价格最低 juli:距离最近 ) 默认距离排序
|
//类型:Object 必有字段 备注:// 筛选对象
|
||||||
...uni.getStorageSync('location'),
|
sort: "juli", //类型:String 必有字段 备注:// 智能排序 ( price:价格最低 juli:距离最近 ) 默认距离排序
|
||||||
...this.filterData,
|
...uni.getStorageSync("location"),
|
||||||
clientBelong:'BAICHUAN',
|
...this.filterData,
|
||||||
bcDisable:'ENABLE',
|
clientBelong: "BAICHUAN",
|
||||||
// siteBrand: "", // 备注:// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
|
bcDisable: "ENABLE",
|
||||||
// channelCode: "", // 备注:// 渠道编码 ( OIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
|
// siteBrand: "", // 备注:// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
|
||||||
// oilProductCode: "" // 备注:// 油号选择 ( 0# 92# 92#)
|
// channelCode: "", // 备注:// 渠道编码 ( OIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
|
||||||
}
|
// oilProductCode: "" // 备注:// 油号选择 ( 0# 92# 92#)
|
||||||
|
},
|
||||||
}
|
};
|
||||||
oilSiteApi.getSiteList(data1).then(res => {
|
oilSiteApi.findKASiteInfoByPage(data1).then((res) => {
|
||||||
if (res.code == 20000) {
|
if (res.code == 20000) {
|
||||||
this.siteList = res.data.list
|
this.siteList = res.data.list;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
toDetail(item) {
|
toDetail(item) {
|
||||||
let itemS = JSON.stringify(item)
|
let itemS = JSON.stringify(item);
|
||||||
console.log(itemS)
|
console.log(itemS);
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
|
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
|
||||||
fail: (err) => {
|
fail: (err) => {
|
||||||
// console.log(err)
|
// console.log(err)
|
||||||
},
|
},
|
||||||
success: () => {
|
success: () => {
|
||||||
// console.log('err')
|
// console.log('err')
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
callShipper() {
|
callShipper() {
|
||||||
uni.makePhoneCall({
|
uni.makePhoneCall({
|
||||||
phoneNumber: this.waybillData.shippePhone
|
phoneNumber: this.waybillData.shippePhone,
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
hideModal(name) {
|
hideModal(name) {
|
||||||
this.$emit('hideOneModal', name)
|
this.$emit("hideOneModal", name);
|
||||||
},
|
},
|
||||||
registerContracts() {
|
registerContracts() {
|
||||||
this.$emit('registerContracts')
|
this.$emit("registerContracts");
|
||||||
},
|
},
|
||||||
toSetLocation() {
|
toSetLocation() {
|
||||||
this.$emit('toSetLocation')
|
this.$emit("toSetLocation");
|
||||||
},
|
},
|
||||||
toAuth() {
|
toAuth() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '认证路径'
|
url: "认证路径",
|
||||||
})
|
});
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.cu-list.menu-avatar>.cu-item .action {
|
.cu-list.menu-avatar > .cu-item .action {
|
||||||
width: 130rpx;
|
width: 130rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ro-right {
|
.ro-right {
|
||||||
max-width: 100upx;
|
max-width: 100upx;
|
||||||
/* position: absolute; */
|
/* position: absolute; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.position-re {
|
.position-re {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.postion-ab {
|
.postion-ab {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -0.8rem;
|
top: -0.8rem;
|
||||||
left: 0.2rem;
|
left: 0.2rem;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user