parking_h5/pages/parkingLists/parkingLists.vue

<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>
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 '腾讯地图':
          // 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.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 '百度地图':
          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.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>