caoliancun/zhongPin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
xiaozhiyong
2024-07-22 08:59:59 +08:00
parent 90ebfec3e9
commit 96ed774959
2 changed files with 225 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
BagStation/pages/routePlain/routePlain.vue
View File

@@ -170,7 +170,7 @@
latitude :that.origin.latitude
}
}
oilSiteApi.getSiteList(data1).then(res => {
oilSiteApi.findKASiteInfoByPage(data1).then(res => {
//console.log(res)
if (res.code == 20000) {
that.nearSite = res.data.list

410
BagStation/pages/stationMap/stationMap.vue
View File

@@ -1,79 +1,109 @@
<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="加油站名称" />
<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="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 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 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="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="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>
<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="￥.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="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 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>
@@ -81,17 +111,16 @@
</view>
</view>
</view>
</view>
</template>
<script>
import oilSiteApi from '@/api/oil-site.js'
import oilSiteApi from "@/api/oil-site.js";
export default {
data() {
return {
siteInfo: {},
showSite: '',
showSite: "",
imgUrl: this.global.imgURL,
siteList: [],
InputBottom: 0,
@@ -99,67 +128,73 @@ export default {
siteCount: 1,
currentPage: 1,
isLoadMore: false, //是否加载中
baseDriver: uni.getStorageSync('baseDriver'),
baseDriver: uni.getStorageSync("baseDriver"),
selLocation: {},
title: 'map',
location: uni.getStorageSync('location'),
title: "map",
location: uni.getStorageSync("location"),
latitude: 39.909,
longitude: 116.39742,
covers: [],
fillColor: '#ffd75e',
borderColor: '#12A1DD',
fillColor: "#ffd75e",
borderColor: "#12A1DD",
scale: 12, //地图层级
controls: [{ //在地图上显示控件，控件不随着地图移动
id: 1, //控件id
position: { //控件在地图的位置
left: 0,
top: 15,
width: 50,
height: 50
controls: [
{
//在地图上显示控件，控件不随着地图移动
id: 1, //控件id
position: {
//控件在地图的位置
left: 0,
top: 15,
width: 50,
height: 50,
},
},
}],
polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
points: [],
color: "#0000AA", //线的颜色
width: 2, //线的宽度
dottedLine: true, //是否虚线
arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
}],
],
polyline: [
{
//指定一系列坐标点，从数组第一项连线至最后一项
points: [],
color: "#0000AA", //线的颜色
width: 2, //线的宽度
dottedLine: true, //是否虚线
arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
},
],
};
},
onLoad() {
let that = this
this.getSiteList()
let that = this;
this.getSiteList();
},
filters: {
distanceFilter(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) {
if (value) {
return value.toFixed(2)
return value.toFixed(2);
} else {
return '0.00'
return "0.00";
}
}
},
},
methods: {
getSiteInfo(id) {
let data2 = {
...uni.getStorageSync('location'),
siteId: id
}
oilSiteApi.getSiteDetailsByKA(data2).then(res => {
...uni.getStorageSync("location"),
siteId: id,
};
oilSiteApi.getSiteDetailsByKA(data2).then((res) => {
if (res.code == 20000) {
this.siteInfo = res.data
this.siteInfo = res.data;
}
})
});
},
openMap() {
let that = this
let that = this;
uni.openLocation({
latitude: this.siteInfo.latitude,
longitude: this.siteInfo.longitude,
@@ -176,21 +211,22 @@ export default {
complete: () => {
// // console.log('made')
},
});
})
var map = uni.createMapContext('map')
map.moveToLocation()
var map = uni.createMapContext("map");
map.moveToLocation();
},
makerTap(e) {
// // console.log(e)
// // console.log(e.detail)
this.showSite = ''
this.showSite = "";
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)
this.showSite = 'show'
this.siteInfo = this.siteList[index]
this.showSite = "show";
this.siteInfo = this.siteList[index];
}
},
refreshLocation() {
@@ -200,7 +236,6 @@ export default {
// uni.setStorageSync('location', res)
// this.location = res
// this.addLocationCurrent()
// }
// });
},
@@ -209,104 +244,105 @@ export default {
id: 0,
latitude: this.location.latitude, //纬度
longitude: this.location.longitude, //经度
label: { //为标记点旁边增加标签
label: {
//为标记点旁边增加标签
content: "我的位置", //文本
color: '#12A1DD', //文本颜色
color: "#12A1DD", //文本颜色
anchorX: 5, //label的坐标，原点是 marker 对应的经纬度
anchorY: -10, //label的坐标，原点是 marker 对应的经纬度
bgColor: '#fff', //背景色
anchorY: -10, //label的坐标，原点是 marker 对应的经纬度
bgColor: "#fff", //背景色
padding: 5, //文本边缘留白
borderWidth: 1, //边框宽度
borderRadius: 10,
borderColor: '#12A1DD', //边框颜色 textAlign: 'right' //文本对齐方式。
}
})
borderColor: "#12A1DD", //边框颜色 textAlign: 'right' //文本对齐方式。
},
});
},
loadMore() {
this.getSiteList()
this.getSiteList();
},
getSiteList() {
this.refreshLocation()
this.refreshLocation();
let data1 = {
currentPage: this.currentPage,
pageSize: 20,
params: { //类型：Object 必有字段 备注：// 筛选对象
params: {
//类型：Object 必有字段 备注：// 筛选对象
sort: "juli", //类型：String 必有字段 备注：// 智能排序 ( price：价格最低 juli：距离最近 ) 默认距离排序
siteName: this.siteName,
...uni.getStorageSync('location'),
...this.filterData
...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 => {
},
};
oilSiteApi.findKASiteInfoByPage(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)
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
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
title: "没有查到相关油站",
icon: "none",
});
this.latitude = this.location.latitude;
this.longitude = this.location.longitude;
}
tmp.forEach(item => {
this.addCover(item)
})
if (tmp.length == 0) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
tmp.forEach((item) => {
this.addCover(item);
});
if (tmp.length == 0) {
//判断接口返回数据量小于请求数据量，则表示此为最后一页
// this.$emit('changeLoad', 'nomore', true)
uni.showToast({
title: '没有更多油站了',
icon: 'none'
})
title: "没有更多油站了",
icon: "none",
});
} else {
this.currentPage++
this.currentPage++;
// this.$emit('changeLoad', 'load', false)
}
}
})
});
},
onInput() {
setTimeout(() => {
this.currentPage = 1
this.siteList = []
this.covers = []
this.getSiteList()
}, 100)
this.currentPage = 1;
this.siteList = [];
this.covers = [];
this.getSiteList();
}, 100);
},
onSearch() {
this.currentPage = 1
this.siteList = []
this.covers = []
this.getSiteList()
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')
}
})
}
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：一点加油（壳牌）)
@@ -315,28 +351,30 @@ export default {
latitude: site.latitude, //纬度
longitude: site.longitude, //经度
// iconPath: this.imgUrl + 'map-' + site.channelCode + '.png',
iconPath: this.imgUrl + 'map-' +'XOIL' + '.png',
iconPath: this.imgUrl + "map-" + "XOIL" + ".png",
width: 100,
height: 50,
title: site.siteName, //标注点名
label: { //为标记点旁边增加标签
content: '￥' + site.sitePrice, //文本
label: {
//为标记点旁边增加标签
content: "￥" + site.sitePrice, //文本
// color: '#F76350', //文本颜色
color: '#fff', //文本颜色
fontSize: '16',
textAlign:'center',
color: "#fff", //文本颜色
fontSize: "16",
textAlign: "center",
anchorX: -5, //label的坐标，原点是 marker 对应的经纬度
anchorY: -45, //label的坐标，原点是 marker 对应的经纬度
anchorY: -45, //label的坐标，原点是 marker 对应的经纬度
// x:39.909,//这个组件微信在1.2.0以后就废弃了
// y:116.39742,
bgColor: '#FF0000', //背景色
bgColor: "#FF0000", //背景色
borderRadius: 10,
// borderWidth: 1, //边框宽度
// borderColor: '#D84C29', //边框颜色 textAlign: 'center' //文本对齐方式。
},
callout: { //自定义标记点上方的气泡窗口 点击有效
callout: {
//自定义标记点上方的气泡窗口 点击有效
content: site.siteName,
color: '#F76350',
color: "#F76350",
fontSize: 12,
borderRadius: 5,
},
@@ -344,10 +382,10 @@ export default {
// x:5,
// y:1,
// }
})
}
}
}
});
},
},
};
</script>
<style scoped>