From 96ed77495925ef1bfdc2b41995b2dde9234c87b9 Mon Sep 17 00:00:00 2001
From: xiaozhiyong <xiaozhiyong@sdxkhlw.cn>
Date: Mon, 22 Jul 2024 08:59:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 BagStation/pages/routePlain/routePlain.vue |   2 +-
 BagStation/pages/stationMap/stationMap.vue | 408 +++++++++++----------
 2 files changed, 224 insertions(+), 186 deletions(-)

diff --git a/BagStation/pages/routePlain/routePlain.vue b/BagStation/pages/routePlain/routePlain.vue
index c8fbafe..021dd2e 100644
--- a/BagStation/pages/routePlain/routePlain.vue
+++ b/BagStation/pages/routePlain/routePlain.vue
@@ -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
diff --git a/BagStation/pages/stationMap/stationMap.vue b/BagStation/pages/stationMap/stationMap.vue
index 31d3a6b..6945bd7 100644
--- a/BagStation/pages/stationMap/stationMap.vue
+++ b/BagStation/pages/stationMap/stationMap.vue
@@ -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="加油站名称" />
-
-      </view>
-      <view class="action" @tap="loadMore">
-        更多
+    <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>
-    <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 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>
-  <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="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>
-      <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 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>