停车场列表/包月

common/apiurl.js

@@ -45,6 +45,10 @@ const apiurl = {
   nearRoadslUrl: '/client/roadinfo/nearRoads',
   // 获取路段收费规则
   roadsChargeRuleUrl: '/client/roadinfo/feeRule/',
+	// 获取附近的停车场
+	nearParkingLotUrl: '/client/parkingInfo/pageList',
+	// 获取停车场收费规则
+	parkingLotChargeRuleUrl: '/client/parkingInfo/feeRule/',
   //包月信息
   monthInfoUrl: '/client/memberinfo/monthInfo',
   //创建包月

common/http.api.js

@@ -58,6 +58,9 @@ const install = (Vue, vm) => {
   let nearRoadsl = (params = {}) => vm.$u.post(apiurl.nearRoadslUrl, params);
   let roadChargeRule = (params = {}) => vm.$u.get(apiurl.roadsChargeRuleUrl + params.roadNo);
 
+	let nearParkingLot = (params = {}) => vm.$u.get(apiurl.nearParkingLotUrl, params);
+	let parkingLotChargeRule = (params = {}) => vm.$u.get(apiurl.parkingLotChargeRuleUrl + params.parkNo, params);
+
   let monthInfo = (params = {}) => vm.$u.get(apiurl.monthInfoUrl, params);
   let createMonth = (params = {}) => vm.$u.post(apiurl.createMonthUrl, params);
   let monthPay = (params = {}) => vm.$u.post(apiurl.monthPayUrl, params);
@@ -135,6 +138,8 @@ const install = (Vue, vm) => {
     gzbank,
     nearRoadsl,
     roadChargeRule,
+		nearParkingLot,
+		parkingLotChargeRule,
     getMessageList,
     payGzbank,
     monthInfo,

pages/chargeStandard/chargeStandard.vue

@@ -47,6 +47,7 @@ export default {
   data() {
     return {
       roadNo: '',
+			parkNo: '',
       info: {
         freeTime: '',
         topAmt: ''
@@ -57,12 +58,16 @@ export default {
     };
   },
   onLoad(page) {
-    const { roadNo } = page;
+    const { roadNo, parkNo } = page;
     if (roadNo) {
       this.roadNo = roadNo;
       this.getSysterms(3);
       this.getChargeRulesInfo(roadNo);
-    } else {
+    } else if (parkNo) {
+			this.parkNo = parkNo;
+			this.getSysterms(3);
+			this.getParkingChargeRulesInfo(parkNo);
+		} else {
       uni.showToast({
         title: '参数丢失,返回上一个页面',
         duration: 2000,
@@ -139,6 +144,72 @@ export default {
         }
       });
     },
+		/**
+		 * 获取收费标准
+		 * {roadNo} 路段
+		 * */
+		getParkingChargeRulesInfo(parkNo) {
+		  this.$u.api.parkingLotChargeRule({ parkNo }).then((res) => {
+		    if (res.code === 200) {
+		      // 数据整合后
+		      let chargeRulesArr = [];
+		      for (let i = 0; i < res.data.length; i++) {
+		        let item = res.data[i];
+		        this.info.freeTime = res.data[0].freeTime;
+		        this.info.topAmt = res.data[0].topAmt;
+		        const obj = {
+		          feeName: item.feeName,
+		          feeNo: item.feeNo,
+		          feePeriod: item.feePeriod,
+		          feeStep: item.feeStep,
+		          feeType: item.feeType,
+		          freeTime: item.freeTime,
+		          topAmt: item.topAmt,
+		          id: item.id,
+		          list: [],
+		          repeatList: [] // 用来检验已存在
+		        };
+		        for (let j = 0; j < item.vehicleRules.length; j++) {
+		          let jItem = item.vehicleRules[j];
+		          const obj1 = {
+		            amt: jItem.amt,
+		            beginTime: jItem.beginTime,
+		            endTime: jItem.endTime,
+		            vehicleFeeNo: jItem.vehicleFeeNo,
+		            vehicleType: jItem.vehicleType,
+		            list: []
+		          };
+		          if (obj.repeatList.indexOf(jItem.vehicleType) === -1) {
+		            obj.repeatList.push(jItem.vehicleType);
+		            obj1.list.push(jItem);
+		          } else {
+		            for (let k = 0; k < item.vehicleRules.length; k++) {
+		              if (obj1.vehicleType === item.vehicleRules[k].vehicleType) {
+		                obj1.list.push(item.vehicleRules[k]);
+		                obj.list.push(obj1);
+		              }
+		            }
+		          }
+		        }
+		        // 存在重复,去除重复操作
+		        let obj2 = {};
+		        obj.list = obj.list.reduce((cur, next) => {
+		          obj[next.vehicleType] ? '' : (obj[next.vehicleType] = true && cur.push(next));
+		          return cur;
+		        }, []);
+		        chargeRulesArr.push(obj);
+		      }
+		      this.chargeRulesInfo = chargeRulesArr;
+		    } else {
+		      uni.showToast({
+		        title: `${res.msg}`,
+		        duration: 3000,
+		        icon: 'none',
+		        mask: true
+		      });
+		    }
+		  });
+		},
     /**
      * 获取收费标准
      * */

pages/parkingLists/copy/parkingLists20221110.scss

@@ -0,0 +1,441 @@
+.parking {
+  background-color: #008cff;
+  position: relative;
+}
+.parking-header {
+  padding: 36rpx 40rpx;
+  display: flex;
+  justify-content: space-between;
+}
+.parking-header .icon {
+  margin-left: 42rpx;
+}
+.parking-details {
+  position: absolute;
+  width: calc(100% - 60rpx);
+  margin: 0 auto;
+  bottom: 68rpx;
+  z-index: 1000;
+  left: 30rpx;
+  background-color: #fff;
+  border-radius: 26.5rpx;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.parking-details-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 40rpx;
+}
+.parking-details-left-address {
+  font-size: 28rpx;
+  font-weight: 700;
+}
+.parking-details-left-number {
+  display: flex;
+  flex-direction: row;
+  color: rgba(47, 47, 47, 0.5);
+  justify-content: space-between;
+  margin-top: 10rpx;
+}
+.parking-details-left-number text {
+  font-size: 40rpx;
+  color: rgba(0, 140, 255, 1);
+}
+.parking-details-button {
+  background-color: #008cff;
+  height: 103rpx;
+  line-height: 103rpx;
+  border-bottom-left-radius: 26.5rpx;
+  border-bottom-right-radius: 26.5rpx;
+  text-align: center;
+  color: #fff;
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium;
+}
+.parking-details-right-time,
+.parking-details-right-distance {
+  height: 44rpx;
+  line-height: 44rpx;
+  color: #008cff;
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 20rpx;
+  margin-top: 30rpx;
+}
+.parking-details-right-time image,
+.parking-details-right-distance image {
+  width: 44rpx;
+  height: 44rpx;
+  margin-right: 10rpx;
+}
+.parking-details-right-time text,
+.parking-details-right-distance text {
+  display: block;
+  font-weight: 500;
+}
+.parking-current-address {
+  position: absolute;
+  bottom: 80rpx;
+  z-index: 1000;
+  width: 100%;
+  height: 345rpx;
+}
+.parking-current-address .swiper {
+  height: 430rpx;
+}
+.parking-current-address .swiper-item {
+  background-color: #fff;
+  transform: scaleY(0.9);
+  margin: 0 10rpx;
+  border-radius: 25rpx;
+  padding: 30rpx;
+}
+.parking-current-address .swiper-item > view:first-child {
+  font-size: 32rpx;
+  color: #484848;
+  line-height: 50rpx;
+}
+.parking-current-address .swiper-item > view:nth-child(2) {
+  font-size: 24rpx;
+  color: #969696;
+  line-height: 50rpx;
+}
+.parking-current-address .swiper-item > view:nth-child(3) {
+  display: flex;
+  flex-direction: row;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f4f7ff)); /*谷歌*/
+  background: linear-gradient(to right, #fff 0%, #f4f7ff 50%, #fff 100%);
+  justify-content: space-around;
+  height: 71rpx;
+  line-height: 71rpx;
+  border-radius: 20rpx;
+  margin-top: 20rpx;
+  margin-bottom: 20rpx;
+}
+.parking-current-address .swiper-item > view:nth-child(4) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.parking-current-address .swiper-item > view:nth-child(5) {
+  text-align: center;
+  margin-top: 30rpx;
+  color: #a4a4a4;
+  font-size: 24rpx;
+}
+.parking-address-list {
+  position: absolute;
+  z-index: 99;
+  width: 100%;
+  padding: 32rpx 28rpx;
+  bottom: 0;
+  max-height: 65vh;
+  overflow-y: scroll;
+  // background-image: linear-gradient(top, rgba(246, 245, 255, 0) 0%, rgba(246, 245, 255, 1) 100%);
+  background-image: url('./../../static/img/parking-search-list-bg.png');
+  background-size: 100% 100%;
+}
+.parking-address-list-item {
+  background-color: #fff;
+  border-radius: 25rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 26rpx;
+  margin-top: 20rpx;
+}
+.pali-left {
+  width: 74%;
+}
+.pali-left view:first-child {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #484848;
+}
+.pali-left view:last-child {
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #969696;
+  margin-top: 10rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pali-right image {
+  width: 58rpx;
+  height: 58rpx;
+}
+.pali-right view {
+  color: #969696;
+  font-size: 20rpx;
+}
+.yellow-font {
+  color: #fa6400;
+  margin-left: 10rpx;
+}
+.swiper-item-font {
+  color: #6d6d6d;
+  font-size: 28rpx;
+}
+.swiper-item-button button {
+  width: 48%;
+  height: 70rpx;
+  line-height: 70rpx;
+  font-size: 30rpx;
+}
+.swiper-item-button button:first-child {
+  border: solid 1px #008cff;
+  color: #008cff;
+  margin-right: 4%;
+}
+.swiper-item-button button:last-child {
+  background-color: #008cff;
+  color: #fff;
+}
+.swiper-item-button .disabled {
+  background-color: #d2d2d2 !important;
+}
+.loading {
+  width: 100%;
+  height: calc(100vh - 100rpx);
+  line-height: calc(100vh - 100rpx);
+  position: absolute;
+  z-index: 99999;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.parking-address-details {
+  position: absolute;
+  bottom: 50rpx;
+  z-index: 1000000;
+  background: transparent;
+  width: 100%;
+}
+.parking-address-details-title {
+  width: calc(100% - 30rpx);
+  margin: 0 auto;
+  background: url(../../static/img/parking-info-bg.png) center center;
+  background-size: 100% 100%;
+}
+.padt-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 25rpx;
+}
+.padt-header > view > view:nth-child(1) {
+  color: #484848;
+  font-size: 32rpx;
+}
+.padt-header > view.padt-header-title > view:nth-child(2) {
+  color: #969696;
+  font-size: 24rpx;
+  margin-top: 16rpx;
+}
+.padt-header-icon {
+  text-align: center;
+}
+.padt-header-icon view {
+  font-size: 18rpx;
+  color: #3a3a3a;
+}
+.padt-header image {
+  width: 45rpx;
+  height: 45rpx;
+}
+.padt-timeline {
+  padding-left: 25rpx;
+  padding-bottom: 25rpx;
+  font-size: 25rpx;
+  color: #727275;
+}
+.padt-timeline text {
+  color: #fa6b0b;
+  margin-left: 5rpx;
+  font-size: 29rpx;
+}
+.parking-address-details-numer {
+  background-color: #fff;
+  border-radius: 25rpx;
+  width: calc(100% - 30rpx);
+  margin: 10rpx auto 0;
+  padding: 35rpx 25rpx;
+  display: flex;
+  flex-direction: row;
+}
+.parking-address-details-numer > view {
+  width: 48%;
+  height: 110rpx;
+  padding: 15rpx;
+  text-align: center;
+  background: linear-gradient(359deg, #ffffff 0%, #f6f6ff 100%);
+  border-radius: 15px;
+}
+.parking-address-details-numer > view > view:first-child {
+  color: #008cff;
+  font-size: 56rpx;
+  font-weight: 400;
+}
+.parking-address-details-numer > view > view:last-child {
+  color: #838383;
+  font-size: 24rpx;
+  font-weight: 400;
+}
+.parking-address-details-numer > view:last-child {
+  margin-left: 4%;
+}
+.parking-address-details-price {
+  background-color: #fff;
+  border-radius: 25rpx;
+  width: calc(100% - 30rpx);
+  margin: 10rpx auto 0;
+}
+.parking-address-details-price > view:first-child {
+  font-size: 24rpx;
+  color: #787878;
+  font-weight: 400;
+  text-align: center;
+  padding-top: 24rpx;
+}
+.parking-address-details-price > view > text:first-child {
+  font-size: 66rpx;
+  color: #008cff;
+}
+.parking-address-details-price > view:last-child {
+  width: 100%;
+  height: 81rpx;
+  line-height: 81rpx;
+  background: linear-gradient(180deg, #efefff 0%, #ffffff 100%);
+  border-bottom-left-radius: 25rpx;
+  border-bottom-right-radius: 25rpx;
+  text-align: center;
+  margin-top: 36rpx;
+}
+.parking-address-details-button {
+  width: calc(100% - 80rpx);
+  height: 96rpx;
+  line-height: 96rpx;
+  margin: 103rpx auto 57rpx;
+  background-color: #008cff;
+  border-radius: 10rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #fff;
+}
+.address-box {
+  width: calc(100% - 60rpx);
+	height: 70vh;
+  padding: 15rpx 0;
+  position: absolute;
+  left: 30rpx;
+  bottom: 0;
+  z-index: 1000;
+  background-color: #f9f9f9;
+	transition: height .5s linear;
+  &-down-icon {
+    width: 32rpx;
+    height: 28rpx;
+    margin: 0 auto;
+    background: url('./../../static/img/down-icon.svg') no-repeat center center;
+    background-size: 100% 100%;
+		transform: rotate(0deg);
+		transition: transform 0.5s linear;
+  }
+  .up-icon {
+    transform: rotate(180deg);
+  }
+  &-scroll {
+    overflow: hidden;
+  }
+  &-list {
+    padding: 12rpx 30rpx;
+    &-item {
+      padding: 30rpx 40rpx;
+      background-color: #fff;
+      box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.08);
+      border-radius: 16rpx;
+      margin-bottom: 20rpx;
+      .abli-header {
+        padding-bottom: 26rpx;
+        margin-bottom: 26rpx;
+        border-bottom: dashed 1px #e1e5eb;
+        &-title {
+          font-size: 30rpx;
+          font-weight: 500;
+          color: #333333;
+          margin-bottom: 16rpx;
+        }
+        &-subtitle {
+          font-size: 26rpx;
+          color: #999;
+          margin-bottom: 26rpx;
+          margin-left: 30rpx;
+        }
+        &-surplus {
+          display: flex;
+          justify-content: space-between;
+          &-left {
+            font-size: 26rpx;
+            color: #999999;
+            text {
+              font-size: 30rpx;
+              color: #ff6d6d;
+              margin-left: 10rpx;
+            }
+          }
+          &-right {
+            padding: 6rpx 17rpx;
+            background-color: #008cff;
+            border-radius: 4rpx;
+            color: #fff;
+            font-size: 24rpx;
+          }
+          .disabled {
+            background-color: #cccccc;
+          }
+        }
+      }
+      .abli-bottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        &-left {
+          display: flex;
+          align-items: center;
+          &-navigation {
+            color: #008cff;
+            font-size: 26rpx;
+            border-right: solid 1px #cccccc;
+            padding-right: 20rpx;
+            &::before {
+              content: '';
+              display: inline-block;
+              width: 40rpx;
+              height: 31rpx;
+              background: url('./../../static/img/navigation-icon.svg') no-repeat center center;
+              background-size: 100% 100%;
+              margin-right: 10rpx;
+              vertical-align: middle;
+            }
+          }
+          &-distance {
+            padding-left: 20rpx;
+            color: #666666;
+            font-size: 26rpx;
+          }
+        }
+        &-right {
+          color: #999999;
+          font-size: 22rpx;
+        }
+      }
+    }
+  }
+}
+.address-down {
+	height: 60vh;
+}
+.address-up {
+	height: 20vh;
+}

pages/parkingLists/copy/parkingLists20221110.vue

@@ -0,0 +1,420 @@
+<template>
+  <view class="parking">
+    <view class="loading" v-show="loading">
+      <u-loadmore status="loading" icon-type="flower" :load-text="{ loading: '正在定位中...' }" />
+    </view>
+    <view class="parking-header">
+      <u-search placeholder="搜索停车点" v-model="searchContent" :show-action="false" @change="searchInputChange"> </u-search>
+      <u-icon
+        v-if="!searchContent && isShowSearchParking == false"
+        class="icon"
+        name="list"
+        size="44"
+        color="#ffffff"
+        placeholder-color="#B5B5B5"
+        search-icon-color="#B3B3B3"
+        @click="listIconClick"
+      >
+      </u-icon>
+      <u-icon
+        v-if="searchContent || isShowSearchParking == true"
+        class="icon"
+        name="close"
+        size="36"
+        color="#ffffff"
+        placeholder-color="#B5B5B5"
+        search-icon-color="#B3B3B3"
+        @click="clearSearchInput"
+      >
+      </u-icon>
+    </view>
+    <view class="parking-map">
+      <map
+        id="pagemap"
+        style="width: 100%; height: calc(100vh - 240rpx)"
+        :show-location="true"
+        :latitude="latitude"
+        :longitude="longitude"
+        @markertap="markertap"
+        :enable-traffic="true"
+        :enable-zoom="true"
+        :scale="scale"
+        :markers="covers"
+      ></map>
+    </view>
+    <view class="address-box" :class="nearParkingObj.type == 'down' ? 'address-down' : 'address-up'" v-if="nearParkingFlag">
+      <view class="address-box-down-icon" :class="{ 'up-icon': nearParkingObj.type === 'up' }" @click="pullDown"> </view>
+      <scroll-view scroll-y class="address-box-scroll" :style="{ height: `calc(${nearParkingObj.height} - 76rpx)` }">
+        <view class="address-box-list">
+          <view class="address-box-list-item" v-for="(item, index) in nearParkingList" :key="index" @click="positionAddress(item)">
+            <view class="abli-header">
+              <view class="abli-header-title"
+                >{{ item.roadName }} <text class="abli-header-subtitle">{{ item.areaName }}</text></view
+              >
+              <!-- <view class="abli-header-subtitle">{{ item.areaName }}</view> -->
+              <view class="abli-header-surplus">
+                <view class="abli-header-surplus-left"
+                  >余位<text>{{ item.spaceIdle }}</text></view
+                >
+                <view class="abli-header-surplus-right" :class="{ disabled: !item.monthAmount }" @click.stop="createMonth(item)">办理包月</view>
+              </view>
+            </view>
+            <view class="abli-bottom">
+              <view class="abli-bottom-left">
+                <view class="abli-bottom-left-navigation" @click.stop="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
+                <view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
+              </view>
+              <view class="abli-bottom-right" @click.stop="lookParkingRule(item)">收费规则</view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="parking-address-list" v-if="isShowSearchParking">
+      <view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'" @click="clickSearchParking(item)">
+        <view class="pali-left">
+          <view>{{ item.roadName }}</view>
+          <view>{{ item.areaName }}</view>
+        </view>
+        <view class="pali-right">
+          <image src="../../static/img/distance-icon.png" mode="" @click.stop="navigation(item.latitude, item.longitude, item.areaName)"></image>
+          <view>路线</view>
+        </view>
+      </view>
+    </view>
+    <u-select v-model="mapSelect" :list="mapSelectList" @confirm="mapSelectConfirm"></u-select>
+    <map id="map" hidden="true"></map>
+    <u-toast ref="uToast" />
+  </view>
+</template>
+
+<script>
+import { qqMapTransBMap } from '@/utils/mapTrans.js';
+export default {
+  data() {
+    return {
+      searchContent: '',
+      page_map: '',
+      loading: false,
+      latitude: 26.64969,
+      longitude: 106.636453,
+      scale: 16,
+      currentPosition: {
+        latitude: 26.64969,
+        longitude: 106.636453
+      },
+      covers: [],
+      // 附近列表是否显示
+      nearParkingFlag: false,
+      // 轮播选中
+      swiperCurrent: 0,
+      // 附近停车列表
+      nearParkingList: [],
+      // 是否显示停车场列表
+      isShowSearchParking: false,
+      // 搜索停车场列表
+      searchParkingList: [],
+      // 显示单个停车场数据
+      isShowParkingDetail: false,
+      // 单个停车场数据
+      parkingDetailData: {},
+      mapSelect: false,
+      mapSelectList: [
+        {
+          value: '1',
+          label: '腾讯地图'
+        },
+        {
+          value: '2',
+          label: '百度地图'
+        },
+        {
+          value: '3',
+          label: '高德地图'
+        }
+      ],
+      // 选中位置经纬度
+      currentPositionHover: {},
+      nearParkingObj: {
+        height: '60vh',
+        type: 'down'
+      }
+    };
+  },
+  onLoad(page) {
+    this.getLocation();
+    if (page.keyword) {
+      this.searchContent = page.keyword;
+      this.searchInputChange(page.keyword);
+    }
+  },
+  methods: {
+    /**
+     * 查询输入框发生变化
+     * @date 2021-08-10
+     * @param {String} value
+     */
+    searchInputChange(value) {
+      // 为空时关闭搜索列表
+      if (value === '') {
+        this.isShowSearchParking = false;
+      }
+      this.isShowParkingDetail = false;
+      this.getNearRoadsl();
+    },
+    /**
+     * 获取定位
+     * @date 2021-08-10
+     * @returns {any}
+     */
+    getLocation() {
+      const that = this;
+      console.log('请求定位');
+      // that.getNearRoadsl();
+      that.loading = true;
+      if (navigator.geolocation) {
+        // 判断是否有这个对象
+        navigator.geolocation.getCurrentPosition(function (pos) {
+          console.log('经度：' + pos.coords.longitude + '纬度：' + pos.coords.latitude);
+          that.latitude = pos.coords.latitude;
+          that.longitude = pos.coords.longitude;
+          that.currentPosition.latitude = pos.coords.latitude;
+          that.currentPosition.longitude = pos.coords.longitude;
+          that.loading = false;
+          that.getNearRoadsl();
+        });
+      } else {
+        this.$refs.uToast.show({
+          title: '当前系统不支持GPS API',
+          type: 'error'
+        });
+      }
+    },
+    /**
+     * 导航
+     * @date 2021-08-10
+     * @param {Number} latitude
+     * @param {Number} longitude
+     * @returns {any}
+     */
+    navigation(latitude, longitude, areaName) {
+      this.currentPositionHover = {
+        latitude,
+        longitude,
+        areaName
+      };
+      this.mapSelect = true;
+    },
+    // 多地图选择
+    mapSelectConfirm(item) {
+      const name = item[0].label;
+      switch (name) {
+        case '腾讯地图':
+          location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.currentPosition.latitude},${this.currentPosition.longitude}&to=${this.currentPositionHover.areaName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
+          break;
+        case '百度地图':
+          const lnglatObj = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover.latitude);
+          location.href = `http://api.map.baidu.com/marker?location=
+			${lnglatObj.lat},${lnglatObj.lng}&title=目的地&content=${this.currentPositionHover.areaName}
+			&output=html&src=webapp.baidu.openAPIdemo`;
+          break;
+        case '高德地图':
+          location.href = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+          break;
+      }
+    },
+    /**
+     * 清空搜索框内容
+     * @date 2021-08-10
+     * @returns {any}
+     */
+    clearSearchInput() {
+      this.searchContent = '';
+      this.isShowSearchParking = false;
+      this.getNearRoadsl();
+    },
+    /**
+     * 默认首个点放大 如果有传入经纬度则对应的点放大
+     * @date 2021-08-10
+     * @param {Number} lon
+     * @param {Number} lat
+     * @returns {any}
+     */
+    getNearRoadsl(lon, lat) {
+      this.$u.api
+        .nearRoadsl({
+          latitude: this.currentPosition.latitude,
+          longitude: this.currentPosition.longitude,
+          roadName: this.searchContent
+        })
+        .then((res) => {
+          const nearParkingList = []; // 附近停车场列表
+          this.covers = [];
+          res.data.forEach((item, index, arr) => {
+            if (item.latitude && item.longitude) {
+              nearParkingList.push(item);
+              const marker = {
+                latitude: item.latitude,
+                longitude: item.longitude,
+                id: String(index),
+                iconPath: require('./../../static/img/parking-icon.png'),
+                width: 20,
+                height: 25
+              };
+              // 选中经纬度图标变大
+              if (lon && lat) {
+                if (lon === item.longitude && lat === item.latitude) {
+                  marker.width = 40;
+                  marker.height = 50;
+                }
+              } else {
+                if (this.covers.length > 0) {
+                  this.covers[0].width = 40;
+                  this.covers[0].height = 50;
+                }
+              }
+              this.covers.push(marker);
+            }
+          });
+          this.nearParkingList = nearParkingList;
+          if (nearParkingList.length > 0) {
+            this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
+            this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
+          } else {
+            this.$refs.uToast.show({
+              title: '没有相关停车场信息',
+              type: 'warning'
+            });
+          }
+          this.nearParkingFlag = true;
+          if (this.searchContent) {
+            this.searchParkingList = nearParkingList;
+            this.isShowSearchParking = true;
+            this.nearParkingFlag = false;
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: err.msg,
+            type: 'error'
+          });
+        });
+    },
+    /**
+     * 点击地图上的标记点触发
+     **/
+    markertap(e) {
+      let lon, lat;
+      this.covers.forEach((item, index) => {
+        if (e.detail.markerId === item.id) {
+          lon = item.longitude;
+          lat = item.latitude;
+          this.swiperCurrent = index;
+        }
+      });
+      this.getNearRoadsl(lon, lat);
+    },
+    /**
+     * 地址发生变化
+     * @date 2021-08-10
+     * @param {Object} item
+     * @returns {any}
+     */
+    swiperChange(item) {
+      const map = uni.createMapContext('pagemap');
+      map.moveToLocation({
+        longitude: this.nearParkingList[item.detail.current].longitude,
+        latitude: this.nearParkingList[item.detail.current].latitude
+      });
+      this.getNearRoadsl(this.nearParkingList[item.detail.current].longitude, this.nearParkingList[item.detail.current].latitude);
+    },
+    /**
+     * 点击单个地址
+     * @date 2022-08-31
+     * @param {any} item
+     * @returns {any}
+     */
+    positionAddress(item) {
+      const map = uni.createMapContext('pagemap');
+      map.moveToLocation({
+        longitude: item.longitude,
+        latitude: item.latitude
+      });
+      this.getNearRoadsl(item.longitude, item.latitude);
+    },
+    /**
+     * 点击单个停车场看详情
+     * @date 2021-08-10
+     * @param {Object} item 为选中项参数
+     * @returns {any}
+     */
+    clickSearchParking(item) {
+      if (item.monthAmount) {
+        this.$u.route({
+          url: 'pages/parkingInformation/parkingInformation',
+          params: {
+            roadInfo: JSON.stringify(item),
+            longitude: this.currentPosition.longitude,
+            latitude: this.currentPosition.latitude
+          }
+        });
+      }
+    },
+    /**
+     * 跳转停车标准页面
+     * @date 2021-08-10
+     * @param {Object} item
+     * @returns {any}
+     */
+    lookParkingRule(item) {
+      this.$u.route({
+        url: 'pages/chargeStandard/chargeStandard',
+        params: {
+          roadNo: item.roadNo
+        }
+      });
+    },
+    /**
+     * 搜索右侧按钮点击
+     **/
+    listIconClick() {
+      this.isShowSearchParking = true;
+      this.nearParkingFlag = false;
+      this.searchParkingList = this.nearParkingList;
+    },
+    /**
+     * 跳转包月
+     * @date 2021-08-10
+     * @param {Object} item
+     * @returns {any}
+     */
+    createMonth(item) {
+      if (item.monthAmount) {
+        this.$u.route({
+          url: 'pages/handleMonthly/handleMonthly',
+          params: {
+            roadNo: item.roadNo
+          }
+        });
+      }
+    },
+    pullDown() {
+      if (this.nearParkingObj.height === '20vh') {
+        this.nearParkingObj.height = '60vh';
+        this.nearParkingObj.type = 'down';
+      } else {
+        this.nearParkingObj.height = '20vh';
+        this.nearParkingObj.type = 'up';
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  margin-top: 20vh;
+}
+
+@import './parkingLists.scss';
+</style>

pages/parkingLists/parkingLists.vue

@@ -1,420 +1,530 @@
 <template>
-  <view class="parking">
-    <view class="loading" v-show="loading">
-      <u-loadmore status="loading" icon-type="flower" :load-text="{ loading: '正在定位中...' }" />
-    </view>
-    <view class="parking-header">
-      <u-search placeholder="搜索停车点" v-model="searchContent" :show-action="false" @change="searchInputChange"> </u-search>
-      <u-icon
-        v-if="!searchContent && isShowSearchParking == false"
-        class="icon"
-        name="list"
-        size="44"
-        color="#ffffff"
-        placeholder-color="#B5B5B5"
-        search-icon-color="#B3B3B3"
-        @click="listIconClick"
-      >
-      </u-icon>
-      <u-icon
-        v-if="searchContent || isShowSearchParking == true"
-        class="icon"
-        name="close"
-        size="36"
-        color="#ffffff"
-        placeholder-color="#B5B5B5"
-        search-icon-color="#B3B3B3"
-        @click="clearSearchInput"
-      >
-      </u-icon>
-    </view>
-    <view class="parking-map">
-      <map
-        id="pagemap"
-        style="width: 100%; height: calc(100vh - 240rpx)"
-        :show-location="true"
-        :latitude="latitude"
-        :longitude="longitude"
-        @markertap="markertap"
-        :enable-traffic="true"
-        :enable-zoom="true"
-        :scale="scale"
-        :markers="covers"
-      ></map>
-    </view>
-    <view class="address-box" :class="nearParkingObj.type == 'down' ? 'address-down' : 'address-up'" v-if="nearParkingFlag">
-      <view class="address-box-down-icon" :class="{ 'up-icon': nearParkingObj.type === 'up' }" @click="pullDown"> </view>
-      <scroll-view scroll-y class="address-box-scroll" :style="{ height: `calc(${nearParkingObj.height} - 76rpx)` }">
-        <view class="address-box-list">
-          <view class="address-box-list-item" v-for="(item, index) in nearParkingList" :key="index" @click="positionAddress(item)">
-            <view class="abli-header">
-              <view class="abli-header-title"
-                >{{ item.roadName }} <text class="abli-header-subtitle">{{ item.areaName }}</text></view
-              >
-              <!-- <view class="abli-header-subtitle">{{ item.areaName }}</view> -->
-              <view class="abli-header-surplus">
-                <view class="abli-header-surplus-left"
-                  >余位<text>{{ item.spaceIdle }}</text></view
-                >
-                <view class="abli-header-surplus-right" :class="{ disabled: !item.monthAmount }" @click.stop="createMonth(item)">办理包月</view>
-              </view>
-            </view>
-            <view class="abli-bottom">
-              <view class="abli-bottom-left">
-                <view class="abli-bottom-left-navigation" @click.stop="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
-                <view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
-              </view>
-              <view class="abli-bottom-right" @click.stop="lookParkingRule(item)">收费规则</view>
-            </view>
-          </view>
-        </view>
-      </scroll-view>
-    </view>
-    <view class="parking-address-list" v-if="isShowSearchParking">
-      <view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'" @click="clickSearchParking(item)">
-        <view class="pali-left">
-          <view>{{ item.roadName }}</view>
-          <view>{{ item.areaName }}</view>
-        </view>
-        <view class="pali-right">
-          <image src="../../static/img/distance-icon.png" mode="" @click.stop="navigation(item.latitude, item.longitude, item.areaName)"></image>
-          <view>路线</view>
-        </view>
-      </view>
-    </view>
-    <u-select v-model="mapSelect" :list="mapSelectList" @confirm="mapSelectConfirm"></u-select>
-    <map id="map" hidden="true"></map>
-    <u-toast ref="uToast" />
-  </view>
+	<view class="parking">
+		<view class="loading" v-show="loading">
+			<u-loadmore status="loading" icon-type="flower" :load-text="{ loading: '正在定位中...' }" />
+		</view>
+		<view class="parking-header">
+			<u-search placeholder="搜索停车点" v-model="searchContent" :show-action="false" @change="searchInputChange">
+			</u-search>
+			<u-icon v-if="!searchContent && isShowSearchParking == false" class="icon" name="list" size="44"
+				color="#ffffff" placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="listIconClick">
+			</u-icon>
+			<u-icon v-if="searchContent || isShowSearchParking == true" class="icon" name="close" size="36"
+				color="#ffffff" placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="clearSearchInput">
+			</u-icon>
+		</view>
+		<view class="parking-map">
+			<map id="pagemap" style="width: 100%; height: calc(100vh - 240rpx)" :show-location="true"
+				:latitude="latitude" :longitude="longitude" @markertap="markertap" :enable-traffic="true"
+				:enable-zoom="true" :scale="scale" :markers="covers"></map>
+		</view>
+		<view class="address-box" :class="nearParkingObj.type == 'down' ? 'address-down' : 'address-up'"
+			v-if="nearParkingFlag">
+			<view class="address-box-down-icon" :class="{ 'up-icon': nearParkingObj.type === 'up' }" @click="pullDown">
+			</view>
+			<!-- tab -->
+			<u-tabs :list="tabObj.tabList" :is-scroll="false" :current="tabObj.current" bg-color="transparent"
+				@change="tabChange"></u-tabs>
+			<scroll-view scroll-y class="address-box-scroll"
+				:style="{ height: `calc(${nearParkingObj.height} - 164rpx)` }">
+				<view class="address-box-list">
+					<view class="address-box-list-item" v-for="(item, index) in nearParkingList" :key="index"
+						@click="positionAddress(item)">
+						<view class="abli-header">
+							<view class="abli-header-title">{{ item.roadName || item.parkName }} <text
+									class="abli-header-subtitle">{{ item.areaName }}</text></view>
+							<view class="abli-header-surplus">
+								<view class="abli-header-surplus-left">
+									余位<text>{{ item.spaceIdle || item.surplusPlace }}</text></view>
+								<template v-if="tabObj.current === 1">
+									<view class="abli-header-surplus-right" @click.stop="createMonth(item)">办理包月</view>
+								</template>
+								<template v-else>
+									<view class="abli-header-surplus-right" :class="{ disabled: !item.monthAmount }"
+										@click.stop="createMonth(item)">办理包月</view>
+								</template>
+							</view>
+						</view>
+						<view class="abli-bottom">
+							<view class="abli-bottom-left">
+								<view class="abli-bottom-left-navigation"
+									@click.stop="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
+								<view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
+							</view>
+							<view class="abli-bottom-right" @click.stop="lookParkingRule(item)">收费规则</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="parking-address-list" v-if="isShowSearchParking">
+			<view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'"
+				@click="clickSearchParking(item)">
+				<view class="pali-left">
+					<view>{{ item.roadName || item.parkName }}</view>
+					<view>{{ item.areaName }}</view>
+				</view>
+				<view class="pali-right">
+					<image src="../../static/img/distance-icon.png" mode=""
+						@click.stop="navigation(item.latitude, item.longitude, item.areaName)"></image>
+					<view>路线</view>
+				</view>
+			</view>
+		</view>
+		<u-select v-model="mapSelect" :list="mapSelectList" @confirm="mapSelectConfirm"></u-select>
+		<map id="map" hidden="true"></map>
+		<u-toast ref="uToast" />
+	</view>
 </template>
 
 <script>
-import { qqMapTransBMap } from '@/utils/mapTrans.js';
-export default {
-  data() {
-    return {
-      searchContent: '',
-      page_map: '',
-      loading: false,
-      latitude: 26.64969,
-      longitude: 106.636453,
-      scale: 16,
-      currentPosition: {
-        latitude: 26.64969,
-        longitude: 106.636453
-      },
-      covers: [],
-      // 附近列表是否显示
-      nearParkingFlag: false,
-      // 轮播选中
-      swiperCurrent: 0,
-      // 附近停车列表
-      nearParkingList: [],
-      // 是否显示停车场列表
-      isShowSearchParking: false,
-      // 搜索停车场列表
-      searchParkingList: [],
-      // 显示单个停车场数据
-      isShowParkingDetail: false,
-      // 单个停车场数据
-      parkingDetailData: {},
-      mapSelect: false,
-      mapSelectList: [
-        {
-          value: '1',
-          label: '腾讯地图'
-        },
-        {
-          value: '2',
-          label: '百度地图'
-        },
-        {
-          value: '3',
-          label: '高德地图'
-        }
-      ],
-      // 选中位置经纬度
-      currentPositionHover: {},
-      nearParkingObj: {
-        height: '60vh',
-        type: 'down'
-      }
-    };
-  },
-  onLoad(page) {
-    this.getLocation();
-    if (page.keyword) {
-      this.searchContent = page.keyword;
-      this.searchInputChange(page.keyword);
-    }
-  },
-  methods: {
-    /**
-     * 查询输入框发生变化
-     * @date 2021-08-10
-     * @param {String} value
-     */
-    searchInputChange(value) {
-      // 为空时关闭搜索列表
-      if (value === '') {
-        this.isShowSearchParking = false;
-      }
-      this.isShowParkingDetail = false;
-      this.getNearRoadsl();
-    },
-    /**
-     * 获取定位
-     * @date 2021-08-10
-     * @returns {any}
-     */
-    getLocation() {
-      const that = this;
-      console.log('请求定位');
-      // that.getNearRoadsl();
-      that.loading = true;
-      if (navigator.geolocation) {
-        // 判断是否有这个对象
-        navigator.geolocation.getCurrentPosition(function (pos) {
-          console.log('经度：' + pos.coords.longitude + '纬度：' + pos.coords.latitude);
-          that.latitude = pos.coords.latitude;
-          that.longitude = pos.coords.longitude;
-          that.currentPosition.latitude = pos.coords.latitude;
-          that.currentPosition.longitude = pos.coords.longitude;
-          that.loading = false;
-          that.getNearRoadsl();
-        });
-      } else {
-        this.$refs.uToast.show({
-          title: '当前系统不支持GPS API',
-          type: 'error'
-        });
-      }
-    },
-    /**
-     * 导航
-     * @date 2021-08-10
-     * @param {Number} latitude
-     * @param {Number} longitude
-     * @returns {any}
-     */
-    navigation(latitude, longitude, areaName) {
-      this.currentPositionHover = {
-        latitude,
-        longitude,
-        areaName
-      };
-      this.mapSelect = true;
-    },
-    // 多地图选择
-    mapSelectConfirm(item) {
-      const name = item[0].label;
-      switch (name) {
-        case '腾讯地图':
-          location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.currentPosition.latitude},${this.currentPosition.longitude}&to=${this.currentPositionHover.areaName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
-          break;
-        case '百度地图':
-          const lnglatObj = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover.latitude);
-          location.href = `http://api.map.baidu.com/marker?location=
-			${lnglatObj.lat},${lnglatObj.lng}&title=目的地&content=${this.currentPositionHover.areaName}
+	import {
+		qqMapTransBMap
+	} from '@/utils/mapTrans.js';
+	export default {
+		data() {
+			return {
+				tabObj: {
+					current: 0,
+					tabList: [{
+						name: '路段'
+					}, {
+						name: '停车场'
+					}],
+				},
+				searchContent: '',
+				page_map: '',
+				loading: false,
+				latitude: 26.64969,
+				longitude: 106.636453,
+				scale: 16,
+				currentPosition: {
+					latitude: 26.64969,
+					longitude: 106.636453
+				},
+				covers: [],
+				// 附近列表是否显示
+				nearParkingFlag: false,
+				// 轮播选中
+				swiperCurrent: 0,
+				// 附近停车列表
+				nearParkingList: [],
+				// 是否显示停车场列表
+				isShowSearchParking: false,
+				// 搜索停车场列表
+				searchParkingList: [],
+				// 显示单个停车场数据
+				isShowParkingDetail: false,
+				// 单个停车场数据
+				parkingDetailData: {},
+				mapSelect: false,
+				mapSelectList: [{
+						value: '1',
+						label: '腾讯地图'
+					},
+					{
+						value: '2',
+						label: '百度地图'
+					},
+					{
+						value: '3',
+						label: '高德地图'
+					}
+				],
+				// 选中位置经纬度
+				currentPositionHover: {},
+				nearParkingObj: {
+					height: '60vh',
+					type: 'down'
+				}
+			};
+		},
+		onLoad(page) {
+			this.getLocation();
+			if (page.keyword) {
+				this.searchContent = page.keyword;
+				this.searchInputChange(page.keyword);
+			}
+		},
+		methods: {
+			/**
+			 * 查询输入框发生变化
+			 * @date 2021-08-10
+			 * @param {String} value
+			 */
+			searchInputChange(value) {
+				// 为空时关闭搜索列表
+				if (value === '') {
+					this.isShowSearchParking = false;
+				}
+				this.isShowParkingDetail = false;
+				const obj = {
+					0: 'getNearRoadsl',
+					1: 'getParkingLotList'
+				}
+				this[obj[this.tabObj.current]]()
+			},
+			/**
+			 * 获取定位
+			 * @date 2021-08-10
+			 * @returns {any}
+			 */
+			getLocation() {
+				const that = this;
+				console.log('请求定位');
+				// const obj = {
+				// 	0: 'getNearRoadsl',
+				// 	1: 'getParkingLotList'
+				// }
+				// this[obj[this.tabObj.current]]()
+				that.loading = true;
+				if (navigator.geolocation) {
+					// 判断是否有这个对象
+					navigator.geolocation.getCurrentPosition(function(pos) {
+						console.log('经度：' + pos.coords.longitude + '纬度：' + pos.coords.latitude);
+						that.latitude = pos.coords.latitude;
+						that.longitude = pos.coords.longitude;
+						that.currentPosition.latitude = pos.coords.latitude;
+						that.currentPosition.longitude = pos.coords.longitude;
+						that.loading = false;
+						const obj = {
+							0: 'getNearRoadsl',
+							1: 'getParkingLotList'
+						}
+						that[obj[that.tabObj.current]]()
+					});
+				} else {
+					this.$refs.uToast.show({
+						title: '当前系统不支持GPS API',
+						type: 'error'
+					});
+				}
+			},
+			/**
+			 * 导航
+			 * @date 2021-08-10
+			 * @param {Number} latitude
+			 * @param {Number} longitude
+			 * @returns {any}
+			 */
+			navigation(latitude, longitude, areaName) {
+				this.currentPositionHover = {
+					latitude,
+					longitude,
+					areaName
+				};
+				this.mapSelect = true;
+			},
+			// 多地图选择
+			mapSelectConfirm(item) {
+				const name = item[0].label;
+				switch (name) {
+					case '腾讯地图':
+						location.href =
+							`https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.currentPosition.latitude},${this.currentPosition.longitude}&to=${this.currentPositionHover.areaName || item.parkName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
+						break;
+					case '百度地图':
+						const lnglatObj = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover
+							.latitude);
+						location.href = `http://api.map.baidu.com/marker?location=
+			${lnglatObj.lat},${lnglatObj.lng}&title=目的地&content=${this.currentPositionHover.areaName || item.parkName}
 			&output=html&src=webapp.baidu.openAPIdemo`;
-          break;
-        case '高德地图':
-          location.href = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
-          break;
-      }
-    },
-    /**
-     * 清空搜索框内容
-     * @date 2021-08-10
-     * @returns {any}
-     */
-    clearSearchInput() {
-      this.searchContent = '';
-      this.isShowSearchParking = false;
-      this.getNearRoadsl();
-    },
-    /**
-     * 默认首个点放大 如果有传入经纬度则对应的点放大
-     * @date 2021-08-10
-     * @param {Number} lon
-     * @param {Number} lat
-     * @returns {any}
-     */
-    getNearRoadsl(lon, lat) {
-      this.$u.api
-        .nearRoadsl({
-          latitude: this.currentPosition.latitude,
-          longitude: this.currentPosition.longitude,
-          roadName: this.searchContent
-        })
-        .then((res) => {
-          const nearParkingList = []; // 附近停车场列表
-          this.covers = [];
-          res.data.forEach((item, index, arr) => {
-            if (item.latitude && item.longitude) {
-              nearParkingList.push(item);
-              const marker = {
-                latitude: item.latitude,
-                longitude: item.longitude,
-                id: String(index),
-                iconPath: require('./../../static/img/parking-icon.png'),
-                width: 20,
-                height: 25
-              };
-              // 选中经纬度图标变大
-              if (lon && lat) {
-                if (lon === item.longitude && lat === item.latitude) {
-                  marker.width = 40;
-                  marker.height = 50;
-                }
-              } else {
-                if (this.covers.length > 0) {
-                  this.covers[0].width = 40;
-                  this.covers[0].height = 50;
-                }
-              }
-              this.covers.push(marker);
-            }
-          });
-          this.nearParkingList = nearParkingList;
-          if (nearParkingList.length > 0) {
-            this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
-            this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
-          } else {
-            this.$refs.uToast.show({
-              title: '没有相关停车场信息',
-              type: 'warning'
-            });
-          }
-          this.nearParkingFlag = true;
-          if (this.searchContent) {
-            this.searchParkingList = nearParkingList;
-            this.isShowSearchParking = true;
-            this.nearParkingFlag = false;
-          }
-        })
-        .catch((err) => {
-          this.$refs.uToast.show({
-            title: err.msg,
-            type: 'error'
-          });
-        });
-    },
-    /**
-     * 点击地图上的标记点触发
-     **/
-    markertap(e) {
-      let lon, lat;
-      this.covers.forEach((item, index) => {
-        if (e.detail.markerId === item.id) {
-          lon = item.longitude;
-          lat = item.latitude;
-          this.swiperCurrent = index;
-        }
-      });
-      this.getNearRoadsl(lon, lat);
-    },
-    /**
-     * 地址发生变化
-     * @date 2021-08-10
-     * @param {Object} item
-     * @returns {any}
-     */
-    swiperChange(item) {
-      const map = uni.createMapContext('pagemap');
-      map.moveToLocation({
-        longitude: this.nearParkingList[item.detail.current].longitude,
-        latitude: this.nearParkingList[item.detail.current].latitude
-      });
-      this.getNearRoadsl(this.nearParkingList[item.detail.current].longitude, this.nearParkingList[item.detail.current].latitude);
-    },
-    /**
-     * 点击单个地址
-     * @date 2022-08-31
-     * @param {any} item
-     * @returns {any}
-     */
-    positionAddress(item) {
-      const map = uni.createMapContext('pagemap');
-      map.moveToLocation({
-        longitude: item.longitude,
-        latitude: item.latitude
-      });
-      this.getNearRoadsl(item.longitude, item.latitude);
-    },
-    /**
-     * 点击单个停车场看详情
-     * @date 2021-08-10
-     * @param {Object} item 为选中项参数
-     * @returns {any}
-     */
-    clickSearchParking(item) {
-      if (item.monthAmount) {
-        this.$u.route({
-          url: 'pages/parkingInformation/parkingInformation',
-          params: {
-            roadInfo: JSON.stringify(item),
-            longitude: this.currentPosition.longitude,
-            latitude: this.currentPosition.latitude
-          }
-        });
-      }
-    },
-    /**
-     * 跳转停车标准页面
-     * @date 2021-08-10
-     * @param {Object} item
-     * @returns {any}
-     */
-    lookParkingRule(item) {
-      this.$u.route({
-        url: 'pages/chargeStandard/chargeStandard',
-        params: {
-          roadNo: item.roadNo
-        }
-      });
-    },
-    /**
-     * 搜索右侧按钮点击
-     **/
-    listIconClick() {
-      this.isShowSearchParking = true;
-      this.nearParkingFlag = false;
-      this.searchParkingList = this.nearParkingList;
-    },
-    /**
-     * 跳转包月
-     * @date 2021-08-10
-     * @param {Object} item
-     * @returns {any}
-     */
-    createMonth(item) {
-      if (item.monthAmount) {
-        this.$u.route({
-          url: 'pages/handleMonthly/handleMonthly',
-          params: {
-            roadNo: item.roadNo
-          }
-        });
-      }
-    },
-    pullDown() {
-      if (this.nearParkingObj.height === '20vh') {
-        this.nearParkingObj.height = '60vh';
-        this.nearParkingObj.type = 'down';
-      } else {
-        this.nearParkingObj.height = '20vh';
-        this.nearParkingObj.type = 'up';
-      }
-    }
-  }
-};
+						break;
+					case '高德地图':
+						location.href =
+							`https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName || item.parkName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+						break;
+				}
+			},
+			/**
+			 * 清空搜索框内容
+			 * @date 2021-08-10
+			 * @returns {any}
+			 */
+			clearSearchInput() {
+				this.searchContent = '';
+				this.isShowSearchParking = false;
+				const obj = {
+					0: 'getNearRoadsl',
+					1: 'getParkingLotList'
+				}
+				this[obj[this.tabObj.current]]()
+			},
+			/**
+			 * 默认首个点放大 如果有传入经纬度则对应的点放大
+			 * @date 2021-08-10
+			 * @param {Number} lon
+			 * @param {Number} lat
+			 * @returns {any}
+			 */
+			getNearRoadsl(lon, lat) {
+				this.$u.api
+					.nearRoadsl({
+						latitude: this.currentPosition.latitude,
+						longitude: this.currentPosition.longitude,
+						roadName: this.searchContent
+					})
+					.then((res) => {
+						const nearParkingList = []; // 附近停车场列表
+						this.covers = [];
+						res.data.forEach((item, index, arr) => {
+							if (item.latitude && item.longitude) {
+								nearParkingList.push(item);
+								const marker = {
+									latitude: item.latitude,
+									longitude: item.longitude,
+									id: String(index),
+									iconPath: require('./../../static/img/parking-icon.png'),
+									width: 20,
+									height: 25
+								};
+								// 选中经纬度图标变大
+								if (lon && lat) {
+									if (lon === item.longitude && lat === item.latitude) {
+										marker.width = 40;
+										marker.height = 50;
+									}
+								} else {
+									if (this.covers.length > 0) {
+										this.covers[0].width = 40;
+										this.covers[0].height = 50;
+									}
+								}
+								this.covers.push(marker);
+							}
+						});
+						this.nearParkingList = nearParkingList;
+						if (nearParkingList.length > 0) {
+							this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
+							this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
+						} else {
+							this.$refs.uToast.show({
+								title: '没有相关停车场信息',
+								type: 'warning'
+							});
+						}
+						this.nearParkingFlag = true;
+						if (this.searchContent) {
+							this.searchParkingList = nearParkingList;
+							this.isShowSearchParking = true;
+							this.nearParkingFlag = false;
+						}
+					})
+					.catch((err) => {
+						this.$refs.uToast.show({
+							title: err.msg,
+							type: 'error'
+						});
+					});
+			},
+			getParkingLotList(lon, lat) {
+				this.$u.api
+					.nearParkingLot({
+						status: 1,
+						latitude: this.currentPosition.latitude,
+						longitude: this.currentPosition.longitude,
+						parkName: this.searchContent
+					})
+					.then((res) => {
+						const nearParkingList = []; // 附近停车场列表
+						this.covers = [];
+						res?.data?.rows.forEach((item, index, arr) => {
+							if (item.latitude && item.longitude) {
+								nearParkingList.push(item);
+								const marker = {
+									latitude: item.latitude,
+									longitude: item.longitude,
+									id: String(index),
+									iconPath: require('./../../static/img/parking-icon.png'),
+									width: 20,
+									height: 25
+								};
+								// 选中经纬度图标变大
+								if (lon && lat) {
+									if (lon === item.longitude && lat === item.latitude) {
+										marker.width = 40;
+										marker.height = 50;
+									}
+								} else {
+									if (this.covers.length > 0) {
+										this.covers[0].width = 40;
+										this.covers[0].height = 50;
+									}
+								}
+								this.covers.push(marker);
+							}
+						});
+						this.nearParkingList = nearParkingList;
+						if (nearParkingList.length > 0) {
+							this.latitude = nearParkingList[0]?.latitude || this.currentPosition.latitude;
+							this.longitude = nearParkingList[0]?.longitude || this.currentPosition.longitude;
+						} else {
+							this.$refs.uToast.show({
+								title: '没有相关停车场信息',
+								type: 'warning'
+							});
+						}
+						this.nearParkingFlag = true;
+						if (this.searchContent) {
+							this.searchParkingList = nearParkingList;
+							this.isShowSearchParking = true;
+							this.nearParkingFlag = false;
+						}
+					})
+					.catch((err) => {
+						this.$refs.uToast.show({
+							title: err.msg,
+							type: 'error'
+						});
+					});
+			},
+			/**
+			 * 点击地图上的标记点触发
+			 **/
+			markertap(e) {
+				let lon, lat;
+				this.covers.forEach((item, index) => {
+					if (e.detail.markerId === item.id) {
+						lon = item.longitude;
+						lat = item.latitude;
+						this.swiperCurrent = index;
+					}
+				});
+				const obj = {
+					0: 'getNearRoadsl',
+					1: 'getParkingLotList'
+				}
+				this[obj[this.tabObj.current]](lon, lat)
+			},
+			/**
+			 * 地址发生变化
+			 * @date 2021-08-10
+			 * @param {Object} item
+			 * @returns {any}
+			 */
+			swiperChange(item) {
+				const map = uni.createMapContext('pagemap');
+				map.moveToLocation({
+					longitude: this.nearParkingList[item.detail.current].longitude,
+					latitude: this.nearParkingList[item.detail.current].latitude
+				});
+				const obj = {
+					0: 'getNearRoadsl',
+					1: 'getParkingLotList'
+				}
+				this[obj[this.tabObj.current]](this.nearParkingList[item.detail.current].longitude, this.nearParkingList[
+					item.detail
+					.current].latitude)
+			},
+			/**
+			 * 点击单个地址
+			 * @date 2022-08-31
+			 * @param {any} item
+			 * @returns {any}
+			 */
+			positionAddress(item) {
+				const map = uni.createMapContext('pagemap');
+				map.moveToLocation({
+					longitude: item.longitude,
+					latitude: item.latitude
+				});
+				const obj = {
+					0: 'getNearRoadsl',
+					1: 'getParkingLotList'
+				}
+				this[obj[this.tabObj.current]](item.longitude, item.latitude)
+			},
+			/**
+			 * 点击单个停车场看详情
+			 * @date 2021-08-10
+			 * @param {Object} item 为选中项参数
+			 * @returns {any}
+			 */
+			clickSearchParking(item) {
+				if (item.monthAmount) {
+					this.$u.route({
+						url: 'pages/parkingInformation/parkingInformation',
+						params: {
+							roadInfo: JSON.stringify(item),
+							longitude: this.currentPosition.longitude,
+							latitude: this.currentPosition.latitude
+						}
+					});
+				}
+			},
+			/**
+			 * 跳转停车标准页面
+			 * @date 2021-08-10
+			 * @param {Object} item
+			 * @returns {any}
+			 */
+			lookParkingRule(item) {
+				const obj = {
+					0: 'roadNo',
+					1: 'parkNo'
+				}
+				const params = {}
+				params[obj[this.tabObj.current]] = item[obj[this.tabObj.current]]
+				this.$u.route({
+					url: 'pages/chargeStandard/chargeStandard',
+					params
+				});
+			},
+			/**
+			 * 搜索右侧按钮点击
+			 **/
+			listIconClick() {
+				this.isShowSearchParking = true;
+				this.nearParkingFlag = false;
+				this.searchParkingList = this.nearParkingList;
+			},
+			/**
+			 * 跳转包月
+			 * @date 2021-08-10
+			 * @param {Object} item
+			 * @returns {any}
+			 */
+			createMonth(item) {
+				const obj = {
+					0: 'roadNo',
+					1: 'parkNo'
+				}
+				const params = {}
+				params[obj[this.tabObj.current]] = item[obj[this.tabObj.current]]
+				this.$u.route({
+					url: 'pages/handleMonthly/handleMonthly',
+					params
+				})
+			},
+			pullDown() {
+				if (this.nearParkingObj.height === '20vh') {
+					this.nearParkingObj.height = '60vh';
+					this.nearParkingObj.type = 'down';
+				} else {
+					this.nearParkingObj.height = '20vh';
+					this.nearParkingObj.type = 'up';
+				}
+			},
+			/**
+			 * tab切换触发
+			 * @param {Object} val
+			 */
+			tabChange(val) {
+				this.tabObj.current = val
+				const obj = {
+					0: 'getNearRoadsl',
+					1: 'getParkingLotList'
+				}
+				this[obj[val]]()
+			}
+		}
+	};
 </script>
 
 <style lang="scss" scoped>
-.wrap {
-  margin-top: 20vh;
-}
+	.wrap {
+		margin-top: 20vh;
+	}
 
-@import './parkingLists.scss';
+	@import './parkingLists.scss';
 </style>