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) {
    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>
@import './parkingInformation';
</style>