parking_h5/pages/searchparking/searchparking.vue

<template>
  <view>
    <u-navbar
      title="我的停车"
      title-color="#fff"
      :custom-back="customBack"
      :border-bottom="false"
      back-icon-color="#CCE8FF"
      :background="{ background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }"
    >
    </u-navbar>
    <view class="tab-fixed">
      <u-tabs-swiper
        activeColor="#008CFF"
        ref="tabs"
        :list="tabList"
        :current="tabCurrent"
        @change="tabChange"
        :is-scroll="false"
        swiperWidth="100%"
      ></u-tabs-swiper>
    </view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" height="calc(100vh - 84px)" top="50rpx">
      <view class="parkinglist">
        <view class="parkinglist-item" v-for="(item, index) in parkinglist" :key="index" @click="navigation(item.latitude, item.longitude)">
          <view class="up u-flex u-row-between">
            <view class="vehicle-no">{{ item.vehicleNo || '-' }}</view>
            <view class="space-name">{{ item.spaceName || '-' }}</view>
          </view>
          <view class="down u-flex u-row-left">
            <u-icon name="map-fill" color="#008CFF" size="28"></u-icon>
            <view class="road-name" v-if="tabCurrentItem.value === 'park'">{{ item.parkingName || '-' }}</view>
            <view class="road-name" v-else>{{ item.roadName || '-' }}</view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      parkinglist: [],
      tabCurrent: 0,
      tabCurrentItem: {},
      tabList: [
        { name: '路段', value: 'road' },
        { name: '停车场', value: 'park' }
      ],
      // 当前位置信息
      currentPosition: {
        latitude: '',
        longitude: ''
      }
    };
  },
  onLoad() {
    this.tabCurrentItem = this.tabList[this.tabCurrent];
    // this.getLocation();
  },
  onShow() {},
  methods: {
    /**
     * 获取当前位置信息
     * @date 2022-10-09
     * @returns {any}
     */
    getLocation() {
      const that = this;
      if (navigator.geolocation) {
        // 判断是否有这个对象
        navigator.geolocation.getCurrentPosition(function (pos) {
          console.log('经度：' + pos.coords.longitude + '纬度：' + pos.coords.latitude);
          that.currentPosition.latitude = pos.coords.latitude;
          that.currentPosition.longitude = pos.coords.longitude;
        });
      } else {
        uni.getLocation({
          type: 'gcj02',
          success: function (res) {
            console.log('当前位置的经度：' + res.longitude);
            console.log('当前位置的纬度：' + res.latitude);
            that.currentPosition.latitude = res.latitude;
            that.currentPosition.longitude = res.longitude;
          }
        });
      }
    },
    customBack() {
      this.$u.route({
        type: 'switchTab',
        url: 'pages/index/index'
      });
    },
    tabChange(cur) {
      this.tabCurrent = cur;
      this.tabCurrentItem = this.tabList[cur];
      this.mescroll.resetUpScroll();
    },
    /**
     * 导航
     * */
    navigation(lat, lon) {
      uni.openLocation({
        latitude: parseFloat(lat),
        longitude: parseFloat(lon),
        scale: 18
      });
    },
    // 多地图选择
    /**
     * 描述
     * @date 2022-10-09
     * @param {any} item
     * @returns {any}
     */
    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 '百度地图':
          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.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;
      }
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      if (this.tabCurrentItem.value === 'park') {
        this.getParkingLotParkingList(page);
      } else {
        this.getRoadParkingList(page);
      }
    },
    /**
     * 获取路段我的停车
     */
    getRoadParkingList({ num, size }) {
      this.$u.api
        .getOrderList({
          orderStatus: 1,
          pageNum: num,
          pageSize: size
        })
        .then((res) => {
          //设置列表数据
          let curPageData = res.data.pageInfo.rows;
          // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
          let curPageLen = curPageData.length;
          let totalPage = res.data.pageInfo.pages;

          if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
          this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据

          // 请求成功,隐藏加载状态
          //后台接口有返回列表的总页数 totalPage
          this.mescroll.endByPage(curPageLen, totalPage);

          if (this.parkinglist.length <= 0) {
            this.listEmpty = true;
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
          console.log('vehicleList ', err);
        });
    },
    /**
     * 获取停车场我的停车
     */
    getParkingLotParkingList({ num, size }) {
      this.$u.api
        .getRoomParkingApi({
          orderStatus: 1,
          pageNum: num,
          pageSize: size
        })
        .then((res) => {
          //设置列表数据
          let curPageData = res.data.pageInfo.rows;
          // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
          let curPageLen = curPageData.length;
          let totalPage = res.data.pageInfo.pages;

          if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
          this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据
          // 请求成功,隐藏加载状态
          //后台接口有返回列表的总页数 totalPage
          this.mescroll.endByPage(curPageLen, totalPage);

          if (this.parkinglist.length <= 0) {
            this.listEmpty = true;
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
        });
    }
  }
};
</script>

<style lang="scss">
@import './searchparking.scss';
</style>