<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>
<template v-if="projectFlag !== 'zhenning'">
<view class="tab-fixed">
<u-tabs-swiper
activeColor="#008CFF"
ref="tabs"
:list="tabList"
:current="tabCurrent"
@change="tabChange"
:is-scroll="false"
swiperWidth="100%"
/>
</view>
</template>
<mescroll-body
ref="mescrollRef"
@init="mescrollInit"
@down="downCallback"
@up="upCallback"
height="calc(100vh - 84px)"
:top="projectFlag === 'zhenning' ? 0 : '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 || item.parkingNo || '-' }}</view>
<view class="space-name">{{ item.spaceName || item.parkingName || '-' }}</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: ''
},
currentPositionHover: {
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) {
// this.currentPositionHover = { longitude: lon, latitude: lat }
if (lat && lon) {
uni.openLocation({
latitude: parseFloat(lat),
longitude: parseFloat(lon),
scale: 18
});
} else {
this.$refs.uToast.show({
title: '该停车点未设置经纬度!',
type: 'warning'
});
}
},
// 多地图选择
/**
* 描述
* @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;
}
});
},
/**
* 获取停车场我的停车
*/
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;
}
});
}
}
};
</script>
<style lang="scss">
@import './searchparking.scss';
</style>