调整停车导航页面

pages/parkingInformation/parkingInformation.vue

@@ -1,90 +1,144 @@
 <template>
-	<view class="parking-information">
-		<view class="parking-information-slider">
-			<image src="../../static/img/parking-info-bg.png" mode=""></image>
-		</view>
-		<view class="parking-information-content">
-			<view class="parking-information-content-title">
-				<view class="pict-left">
-					<view class="title">{{roadInfo.areaName}}</view>
-					<view class="subtitle">{{roadInfo.roadName}}</view>
-				</view>
-				<view class="pict-right" @click="navigation(roadInfo.latitude, roadInfo.longitude)">
-					<image src="../../static/img/distance-icon.png" mode=""></image>
-					<view class="m">{{roadInfo.distance|kmUnit}}</view>
-				</view>
-			</view>
-			<view class="parking-information-content-time">
-				<view>服务时间：<text>{{roadInfo.workBeginTime}}-{{roadInfo.workEndTime}}</text></view>
-				<view>包月费用：<text>{{roadInfo.monthAmount}}</text>元</view>
-			</view>
-			<view class="parking-information-content-cars">
-				<view class="picc-tag">
-					<view>{{roadInfo.spaceTotal}}</view>
-					<view>共有车位</view>
-				</view>
-				<view class="picc-tag">
-					<view>{{roadInfo.spaceIdle}}</view>
-					<view>空闲车位</view>
-				</view>
-			</view>
-			<view class="parking-information-content-price" @click="lookParkingRule(roadInfo)">
-				<text>点击查看停车规则</text>
-				<u-icon name="arrow-right"></u-icon>
-			</view>
-			<u-button class="parking-information-content-button" @click="createMonth(roadInfo)">办理包月</u-button>
-		</view>
-	</view>
+  <view class="parking-information">
+    <view class="parking-information-slider">
+      <image src="../../static/img/parking-info-bg.png" mode=""></image>
+    </view>
+    <view class="parking-information-content">
+      <view class="parking-information-content-title">
+        <view class="pict-left">
+          <view class="title">{{ roadInfo.areaName }}</view>
+          <view class="subtitle">{{ roadInfo.roadName }}</view>
+        </view>
+        <view class="pict-right" @click="navigation(roadInfo.latitude, roadInfo.longitude, roadInfo.areaName)">
+          <image src="../../static/img/distance-icon.png" mode=""></image>
+          <view class="m">{{ roadInfo.distance | kmUnit }}</view>
+        </view>
+      </view>
+      <view class="parking-information-content-time">
+        <view
+          >服务时间：<text>{{ roadInfo.workBeginTime }}-{{ roadInfo.workEndTime }}</text></view
+        >
+        <view
+          >包月费用：<text>{{ roadInfo.monthAmount }}</text
+          >元</view
+        >
+      </view>
+      <view class="parking-information-content-cars">
+        <view class="picc-tag">
+          <view>{{ roadInfo.spaceTotal }}</view>
+          <view>共有车位</view>
+        </view>
+        <view class="picc-tag">
+          <view>{{ roadInfo.spaceIdle }}</view>
+          <view>空闲车位</view>
+        </view>
+      </view>
+      <view class="parking-information-content-price" @click="lookParkingRule(roadInfo)">
+        <text>点击查看停车规则</text>
+        <u-icon name="arrow-right"></u-icon>
+      </view>
+      <u-button class="parking-information-content-button" @click="createMonth(roadInfo)">办理包月</u-button>
+    </view>
+    <u-select v-model="mapSelect" :list="mapSelectList" @confirm="mapSelectConfirm"></u-select>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				roadInfo:[],
-			}
-		},
-		onLoad(page) {
-			this.roadInfo = JSON.parse(page.roadInfo);
-			console.log('this.roadInfo',this.roadInfo);
-		},
-		methods: {
-			/**
-			 * 跳转停车标准页面
-			 * {roadNo} 路段编码
-			  * */
-			lookParkingRule (item) {
-				this.$u.route({
-					url: 'pages/chargeStandard/chargeStandard',
-					params: {
-						roadNo: item.roadNo
-					}
-				})
-			},
-			createMonth(item){
-				this.$u.route({
-					url: 'pages/handleMonthly/handleMonthly',
-					params: {
-						roadNo:item.roadNo
-					}
-				});
-			},
-			/**
-			  * 导航 
-			  * */
-			navigation (lat, lon) {
-				// uni.openLocation({
-				// 	latitude: parseFloat(lat),
-				// 	longitude: parseFloat(lon),
-				// 	scale: 18
-				// })
-				uni.navigateTo({
-				  url: '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:'+lat+','+lon+'&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
-				})
-			},
-			
-		}
-	}
+export default {
+  data() {
+    return {
+      roadInfo: [],
+      latitude: '',
+      longitude: '',
+      mapSelect: false,
+      mapSelectList: [
+        {
+          value: '1',
+          label: '腾讯地图'
+        },
+        {
+          value: '2',
+          label: '百度地图'
+        },
+        {
+          value: '3',
+          label: '高德地图'
+        }
+      ],
+      // 选中位置经纬度
+      currentPositionHover: {}
+    };
+  },
+  onLoad(page) {
+    this.roadInfo = JSON.parse(page.roadInfo);
+    const { latitude, longitude, roadInfo } = page;
+    this.latitude = latitude;
+    this.longitude = longitude;
+    this.roadInfo = JSON.parse(roadInfo);
+    console.log('this.roadInfo', this.roadInfo);
+  },
+  methods: {
+    /**
+     * 跳转停车标准页面
+     * {roadNo} 路段编码
+     * */
+    lookParkingRule(item) {
+      this.$u.route({
+        url: 'pages/chargeStandard/chargeStandard',
+        params: {
+          roadNo: item.roadNo
+        }
+      });
+    },
+    createMonth(item) {
+      this.$u.route({
+        url: 'pages/handleMonthly/handleMonthly',
+        params: {
+          roadNo: item.roadNo
+        }
+      });
+    },
+    /**
+     * 导航
+     * */
+    navigation(latitude, longitude, areaName) {
+      this.currentPositionHover = {
+        latitude,
+        longitude,
+        areaName
+      };
+      this.mapSelect = true;
+    },
+    // 多地图选择
+    mapSelectConfirm(item) {
+      const name = item[0].label;
+      switch (name) {
+        case '腾讯地图':
+          // uni.navigateTo({
+          //   url:
+          //     '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
+          //     this.currentPositionHover.latitude +
+          //     ',' +
+          //     this.currentPositionHover.longitude +
+          //     '&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
+          // });
+          location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.latitude},${this.longitude}&to=${this.currentPositionHover.areaName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
+          break;
+        case '百度地图':
+          location.href = `http://api.map.baidu.com/marker?location=
+			${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&title=目的地&content=${this.currentPositionHover.areaName}
+			&output=html&src=webapp.baidu.openAPIdemo`;
+          break;
+        case '高德地图':
+          console.log(this.longitude);
+          // const gdurl = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},终点&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+          // window.location.href = gdurl;
+          location.href = `https://uri.amap.com/navigation?from=${this.longitude},${this.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+          break;
+      }
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

pages/parkingLists/map_web_view/map_web_view.vue

@@ -1,24 +1,19 @@
 <template>
-	<!-- webview用来装地图容器 -->
-	 <web-view :src="url"></web-view>
+  <!-- webview用来装地图容器 -->
+  <web-view :src="url"></web-view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				url: ''
-			}
-		},
-		onLoad(e) {
-		  this.url = e.url;
-		},
-		methods: {
-			
-		}
-	}
+export default {
+  data() {
+    return {
+      url: ''
+    };
+  },
+  onLoad(e) {
+    this.url = e.url;
+  }
+};
 </script>
 
-<style>
-
-</style>
+<style></style>

pages/parkingLists/parkingLists - 副本.vue

@@ -0,0 +1,414 @@
+<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="parking-current-address" v-if="nearParkingFlag">
+      <swiper
+        class="swiper"
+        :current="swiperCurrent"
+        :indicator-dots="false"
+        :vertical="true"
+        :autoplay="false"
+        previous-margin="30rpx"
+        next-margin="30rpx"
+        @change="swiperChange"
+      >
+        <swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
+          <view class="swiper-item">
+            <view @click="clickSearchParking(item)">{{ item.roadName }}</view>
+            <view>{{ item.areaName }}</view>
+            <view class="swiper-item-font">
+              <view>
+                <text>空闲车位</text>
+                <text class="yellow-font">{{ item.spaceIdle }}</text>
+              </view>
+              <view v-if="item.monthAmount">
+                <text>包月费用</text>
+                <text class="yellow-font">{{ item.monthAmount }}元</text>
+              </view>
+              <view>
+                <text>距离</text>
+                <text>{{ item.distance | kmUnit }}</text>
+              </view>
+            </view>
+            <view class="swiper-item-button">
+              <button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
+              <button type="default" :disabled="!item.monthAmount" :class="{ disabled: !item.monthAmount }" @click="createMonth(item)">
+                办理包月
+              </button>
+            </view>
+            <view @click="lookParkingRule(item)">
+              <text>点击查看停车规则</text>
+              <u-icon name="arrow-right"></u-icon>
+            </view>
+          </view>
+        </swiper-item>
+      </swiper>
+    </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)"></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: {}
+    };
+  },
+  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) {
+      this.currentPositionHover = {
+        latitude: latitude,
+        longitude: longitude
+      };
+      this.mapSelect = true;
+    },
+    // 多地图选择
+    mapSelectConfirm(item) {
+      const name = item[0].label;
+      switch (name) {
+        case '腾讯地图':
+          uni.navigateTo({
+            url:
+              '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
+              this.currentPositionHover.latitude +
+              ',' +
+              this.currentPositionHover.longitude +
+              '&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
+          });
+          break;
+        case '百度地图':
+          const bdOriginPoint = qqMapTransBMap(this.currentPosition.longitude, this.currentPosition.latitude); // 起点坐标
+          const bdCurrPoint = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover.latitude); // 终点坐标
+          const baiduMap = 'https://map.baidu.com/mobile/webapp/index/index/foo=bar/vt=map';
+          const bdurl = `https://api.map.baidu.com/direction?origin=latlng:${bdOriginPoint.lat},${bdOriginPoint.lng}|name:起点&destination=latlng:${bdCurrPoint.lat},${bdCurrPoint.lng}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`;
+          console.log('百度地图theurl', bdurl);
+          window.location.href = baiduMap;
+          break;
+        case '高德地图':
+          const gdurl = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},终点&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+          console.log('高德地图theurl', gdurl);
+          window.location.href = gdurl;
+          // window.open(url, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
+          // uni.navigateTo({
+          //   url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`//uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},终点&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 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)
+          }
+        });
+      }
+    },
+    /**
+     * 跳转停车标准页面
+     * @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) {
+      this.$u.route({
+        url: 'pages/handleMonthly/handleMonthly',
+        params: {
+          roadNo: item.roadNo
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  margin-top: 20vh;
+}
+
+@import url('./parkingLists.scss');
+</style>

pages/parkingLists/parkingLists.scss

@@ -1,325 +1,440 @@
 .parking {
-	background-color: #008CFF;
-	position: relative;
+  background-color: #008cff;
+  position: relative;
 }
 .parking-header {
-	padding: 36rpx 40rpx;
-	display: flex;
-	justify-content: space-between;
+  padding: 36rpx 40rpx;
+  display: flex;
+  justify-content: space-between;
 }
 .parking-header .icon {
-	margin-left: 42rpx;
+  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)
+  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;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 40rpx;
 }
 .parking-details-left-address {
-	font-size: 28rpx;
-	font-weight: 700;
+  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;
+  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);
+  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;
+  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;
+  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;
+  width: 44rpx;
+  height: 44rpx;
+  margin-right: 10rpx;
 }
 .parking-details-right-time text,
 .parking-details-right-distance text {
-	display: block;
-	font-weight: 500;
+  display: block;
+  font-weight: 500;
 }
 .parking-current-address {
-	position: absolute;
-	bottom: 80rpx;
-	z-index: 1000;
-	width: 100%;
-	height: 345rpx;
+  position: absolute;
+  bottom: 80rpx;
+  z-index: 1000;
+  width: 100%;
+  height: 345rpx;
 }
 .parking-current-address .swiper {
-	height: 430rpx;
+  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;
+  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%;
+  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;
+  background-color: #fff;
+  border-radius: 25rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 26rpx;
+  margin-top: 20rpx;
 }
 .pali-left {
-	width: 74%;
+  width: 74%;
 }
 .pali-left view:first-child {
-	font-size: 32rpx;
-	font-weight: 500;
-	color: #484848;
+  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;
+  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;
+  width: 58rpx;
+  height: 58rpx;
 }
 .pali-right view {
-	color: #969696;
-	font-size: 20rpx;
+  color: #969696;
+  font-size: 20rpx;
 }
 .yellow-font {
-	color: #FA6400;
-	margin-left: 10rpx;
+  color: #fa6400;
+  margin-left: 10rpx;
 }
 .swiper-item-font {
-	color: #6D6D6D;
-	font-size: 28rpx;
+  color: #6d6d6d;
+  font-size: 28rpx;
 }
 .swiper-item-button button {
-	width: 48%;
-	height: 70rpx;
-	line-height: 70rpx;
-	font-size: 30rpx;
+  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%;
+  border: solid 1px #008cff;
+  color: #008cff;
+  margin-right: 4%;
 }
 .swiper-item-button button:last-child {
-	background-color: #008CFF;
-	color: #fff;
+  background-color: #008cff;
+  color: #fff;
 }
 .swiper-item-button .disabled {
-	background-color: #d2d2d2!important;
+  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);
+  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%;
+  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%;
+  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;
+  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 > 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 > view.padt-header-title > view:nth-child(2) {
+  color: #969696;
+  font-size: 24rpx;
+  margin-top: 16rpx;
 }
 .padt-header-icon {
-	text-align: center;
+  text-align: center;
 }
 .padt-header-icon view {
-	font-size: 18rpx;
-	color: #3A3A3A;
+  font-size: 18rpx;
+  color: #3a3a3a;
 }
 .padt-header image {
-	width: 45rpx;
-	height: 45rpx;
+  width: 45rpx;
+  height: 45rpx;
 }
 .padt-timeline {
-	padding-left: 25rpx;
-	padding-bottom: 25rpx;
-	font-size: 25rpx;
-	color: #727275;
+  padding-left: 25rpx;
+  padding-bottom: 25rpx;
+  font-size: 25rpx;
+  color: #727275;
 }
 .padt-timeline text {
-	color: #FA6B0B;
-	margin-left: 5rpx;
-	font-size: 29rpx;
+  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%;
+  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;
+  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;
-}
+  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: 20rpx 0;
+  position: absolute;
+  left: 30rpx;
+  bottom: 0;
+  z-index: 1000;
+  background-color: #f9f9f9;
+	transition: height .5s linear;
+  &-down-icon {
+    width: 52rpx;
+    height: 50rpx;
+    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: 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;
+        }
+        &-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: 70vh;
+}
+.address-up {
+	height: 25vh;
+}

pages/parkingLists/parkingLists.vue

@@ -1,423 +1,423 @@
 <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="parking-current-address" v-if="nearParkingFlag">
-			<swiper class="swiper" :current="swiperCurrent" :indicator-dots="false" :vertical="true" :autoplay="false" previous-margin="30rpx" next-margin="30rpx" @change="swiperChange">
-				<swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
-					<view class="swiper-item">
-						<view @click="clickSearchParking(item)">{{ item.roadName }}</view>
-						<view>{{ item.areaName }}</view>
-						<view class="swiper-item-font">
-							<view>
-								<text>空闲车位</text>
-								<text class="yellow-font">{{ item.spaceIdle }}</text>
-							</view>
-							<view v-if="item.monthAmount">
-								<text>包月费用</text>
-								<text class="yellow-font">{{ item.monthAmount }}元</text>
-							</view>
-							<view>
-								<text>距离</text>
-								<text>{{ item.distance | kmUnit }}</text>
-							</view>
-						</view>
-						<view class="swiper-item-button">
-							<button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
-							<button type="default" :disabled="!item.monthAmount" :class="{ disabled: !item.monthAmount }" @click="createMonth(item)">办理包月</button>
-						</view>
-						<view @click="lookParkingRule(item)">
-							<text>点击查看停车规则</text>
-							<u-icon name="arrow-right"></u-icon>
-						</view>
-					</view>
-				</swiper-item>
-			</swiper>
-		</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)"></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>
+      <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 }}</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="createMonth(item)">办理包月</view>
+              </view>
+            </view>
+            <view class="abli-bottom">
+              <view class="abli-bottom-left">
+                <view class="abli-bottom-left-navigation" @click="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="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: {}
-		};
-	},
-	onLoad(page) {
-		this.getLocation();
-		// this.getNearRoadsl()
-		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.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) {
-			this.currentPositionHover = {
-				latitude: latitude,
-				longitude: longitude
-			};
-			this.mapSelect = true;
-			// 腾讯地图用webview
-			// uni.navigateTo({
-			//   url: '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:'+latitude+','+longitude+'&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
-			// })
-			/* 组件多地图调用 */
-			// this.nearParkingFlag = false
-			// var options = {
-			//     destination:{  // 导航终点点坐标和名称
-			//         latitude: latitude,
-			//         longitude: longitude,
-			//         name: "终点"
-			//     },
-			//     mapId: "map" // map 组件的 id (微信小程序端必传)
-			// }
-			// Map.navigation(options)
-		},
-		// 多地图选择
-		mapSelectConfirm(item) {
-			const name = item[0].label;
-			switch (name) {
-				case '腾讯地图':
-					uni.navigateTo({
-						url:
-							'/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
-							this.currentPositionHover.latitude +
-							',' +
-							this.currentPositionHover.longitude +
-							'&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
-					});
-					break;
-				case '百度地图':
-					const bdOriginPoint = qqMapTransBMap(this.currentPosition.longitude, this.currentPosition.latitude); // 起点坐标
-					const bdCurrPoint = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover.latitude); // 终点坐标
-					const baiduMap = 'https://map.baidu.com/mobile/webapp/index/index/foo=bar/vt=map';
-					const bdurl = `https://api.map.baidu.com/direction?origin=latlng:${bdOriginPoint.lat},${bdOriginPoint.lng}|name:起点&destination=latlng:${bdCurrPoint.lat},${
-						bdCurrPoint.lng
-					}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`;
-					console.log('百度地图theurl', bdurl);
-					window.location.href = baiduMap;
-					break;
-				case '高德地图':
-					const gdurl = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${
-						this.currentPositionHover.latitude
-					},终点&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
-					console.log('高德地图theurl', gdurl);
-					window.location.href = gdurl;
-					// window.open(url, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
-					// uni.navigateTo({
-					//   url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`//uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},终点&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 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)
-					}
-				});
-			}
-		},
-		/**
-		 * 跳转停车标准页面
-		 * @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) {
-			this.$u.route({
-				url: 'pages/handleMonthly/handleMonthly',
-				params: {
-					roadNo: item.roadNo
-				}
-			});
-		}
-	}
+  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: '70vh',
+        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 '腾讯地图':
+          // uni.navigateTo({
+          //   url:
+          //     '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:' +
+          //     this.currentPositionHover.latitude +
+          //     ',' +
+          //     this.currentPositionHover.longitude +
+          //     '&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
+          // });
+          location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.latitude},${this.longitude}&to=${this.currentPositionHover.areaName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
+          break;
+        case '百度地图':
+          location.href = `http://api.map.baidu.com/marker?location=
+			${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&title=目的地&content=${this.currentPositionHover.areaName}
+			&output=html&src=webapp.baidu.openAPIdemo`;
+          break;
+        case '高德地图':
+          // const gdurl = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},起点&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},终点&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+          // window.location.href = gdurl;
+          location.href = `https://uri.amap.com/navigation?from=${this.longitude},${this.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.longitude,
+            latitude: this.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 === '25vh') {
+        this.nearParkingObj.height = '70vh';
+        this.nearParkingObj.type = 'down';
+      } else {
+        this.nearParkingObj.height = '25vh';
+        this.nearParkingObj.type = 'up';
+      }
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .wrap {
-	margin-top: 20vh;
+  margin-top: 20vh;
 }
 
-@import url('./parkingLists.scss');
+@import './parkingLists.scss';
 </style>

static/img/down-icon.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="50px" viewBox="0 0 52 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 9</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页001备份" transform="translate(-349.000000, -622.000000)">
+            <g id="编组-9" transform="translate(350.000000, 622.000000)">
+                <g id="编组-8" transform="translate(1.762619, 4.583261)" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
+                    <polyline id="路径" stroke="#BEBEBE" points="46.4747617 20.9167389 23.2373808 40.8334778 0 20.9167389"></polyline>
+                    <polyline id="路径备份" stroke="#DEDEDE" points="46.4747617 6.19136618e-14 23.2373808 19.9167389 0 5.97024596e-14"></polyline>
+                </g>
+                <rect id="矩形" x="0" y="0" width="50" height="50"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

static/img/navigation-icon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 3备份</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页001备份" transform="translate(-100.000000, -923.000000)">
+            <g id="编组-14" transform="translate(60.000000, 702.000000)">
+                <g id="编组-3备份" transform="translate(40.000000, 221.000000)">
+                    <rect id="路径" x="0" y="0" width="32" height="32"></rect>
+                    <path d="M15.3989204,15.31 L15.1089204,27.66 C15.1089204,27.97 15.1989204,28.25 15.3989204,28.49 C15.5989204,28.73 15.8489204,28.89 16.1689204,28.96 C16.3189204,28.99 16.4289204,29 16.4989204,29 C17.0789204,29 17.4989204,28.76 17.7389204,28.27 L30.8389204,4.94 C30.9789204,4.68 31.0289204,4.4 30.9789204,4.12 C30.9289204,3.83 30.7889204,3.59 30.5789204,3.4 C30.3189204,3.13 29.9889204,3 29.5989204,3 C29.3589204,3 29.1489204,3.05 28.9589204,3.15 L1.75892037,9.33 C1.46892037,9.47 1.25892037,9.68 1.12892037,9.95 C0.998920372,10.23 0.968920372,10.52 1.03892037,10.83 C1.10892037,11.14 1.27892037,11.38 1.52892037,11.57 C1.77892037,11.76 2.06892037,11.85 2.38892037,11.85 L15.3989204,15.31 Z" id="路径" fill="#1686FF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>