parking_h5_all/pages/parkingInformation/parkingInformation.vue

<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, 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: [],
      latitude: '',
      longitude: '',
      mapSelect: false,
      mapSelectList: [
        {
          value: '1',
          label: '腾讯地图'
        },
        {
          value: '2',
          label: '百度地图'
        },
        {
          value: '3',
          label: '高德地图'
        }
      ],
      // 选中位置经纬度
      currentPositionHover: {}
    };
  },
  onLoad(page) {
    const { current, id, longitude, latitude } = page;
    if (id) {
      const obj = {
        0: 'getNearRoadsl',
        1: 'getParkingLotList'
      };
      this[obj[current]](id, longitude, latitude);
      this.latitude = latitude;
      this.longitude = longitude;
    }
  },
  methods: {
    /**
     *获取路段列表
     * @date 2021-08-10
     * @param {String} longitude
     * @param {String} latitude
     * @param {String} id
     * @returns {any}
     */
    async getNearRoadsl(id, longitude, latitude) {
      try {
        const { code, data } = await this.$u.api.nearRoadsl({ latitude, longitude });
        if (code === 200) {
          this.roadInfo = data.find((item) => item.id === id);
        }
      } catch (error) {}
    },
    /**
     * @description: 获取停车场列表
     * @param {*} id
     * @param {*} longitude
     * @param {*} latitude
     * @return {*}
     */
    async getParkingLotList(id, longitude, latitude) {
      try {
        const { code, data } = await this.$u.api.nearParkingLot({ status: 1, latitude, longitude });
        if (code === 200) {
          this.roadInfo = data?.rows.find((item) => item.id === id);
          console.log(this.roadInfo);
        }
      } catch (error) {}
    },
    /**
     * 跳转停车标准页面
     * {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 '腾讯地图':
          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 '高德地图':
          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>
@import './parkingInformation';
</style>