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="parking-current-address" v-if="nearParkingFlag">
			<swiper class="swiper" :current="swiperCurrent" :indicator-dots="false" :vertical="true" :autoplay="false" previous-margin="30rpx" next-margin="30rpx" @change="swiperChange">
				<swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
					<view class="swiper-item">
						<view @click="clickSearchParking(item)">{{ item.roadName }}</view>
						<view>{{ item.areaName }}</view>
						<view class="swiper-item-font">
							<view>
								<text>空闲车位</text>
								<text class="yellow-font">{{ item.spaceIdle }}</text>
							</view>
							<view v-if="item.monthAmount">
								<text>包月费用</text>
								<text class="yellow-font">{{ item.monthAmount }}元</text>
							</view>
							<view>
								<text>距离</text>
								<text>{{ item.distance | kmUnit }}</text>
							</view>
						</view>
						<view class="swiper-item-button">
							<button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
							<button type="default" :disabled="!item.monthAmount" :class="{ disabled: !item.monthAmount }" @click="createMonth(item)">办理包月</button>
						</view>
						<view @click="lookParkingRule(item)">
							<text>点击查看停车规则</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</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)"></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>
import { qqMapTransBMap } from '../../utils/mapTrans.js';
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: {}
		};
	},
	onLoad(page) {
		this.getLocation();
		// this.getNearRoadsl()
		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.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) {
			this.currentPositionHover = {
				latitude: latitude,
				longitude: longitude
			};
			this.mapSelect = true;
			// 腾讯地图用webview
			// uni.navigateTo({
			//   url: '/pages/parkingLists/map_web_view/map_web_view?url=https://3gimg.qq.com/lightmap/v1/marker/?marker=coord:'+latitude+','+longitude+'&referer=myApp&key=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL'
			// })
			/* 组件多地图调用 */
			// this.nearParkingFlag = false
			// var options = {
			//     destination:{  // 导航终点点坐标和名称
			//         latitude: latitude,
			//         longitude: longitude,
			//         name: "终点"
			//     },
			//     mapId: "map" // map 组件的 id (微信小程序端必传)
			// }
			// Map.navigation(options)
		},
		// 多地图选择
		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'
					});
					break;
				case '百度地图':
					const bdOriginPoint = qqMapTransBMap(this.currentPosition.longitude, this.currentPosition.latitude); // 起点坐标
					const bdCurrPoint = qqMapTransBMap(this.currentPositionHover.longitude, this.currentPositionHover.latitude); // 终点坐标
					const baiduMap = 'https://map.baidu.com/mobile/webapp/index/index/foo=bar/vt=map';
					const bdurl = `https://api.map.baidu.com/direction?origin=latlng:${bdOriginPoint.lat},${bdOriginPoint.lng}|name:起点&destination=latlng:${bdCurrPoint.lat},${
						bdCurrPoint.lng
					}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`;
					console.log('百度地图theurl', bdurl);
					window.location.href = baiduMap;
					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`;
					console.log('高德地图theurl', gdurl);
					window.location.href = gdurl;
					// window.open(url, "_blank", "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes");
					// uni.navigateTo({
					//   url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`//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`)}`
					// })
					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 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)
					}
				});
			}
		},
		/**
		 * 跳转停车标准页面
		 * @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) {
			this.$u.route({
				url: 'pages/handleMonthly/handleMonthly',
				params: {
					roadNo: item.roadNo
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	margin-top: 20vh;
}

@import url('./parkingLists.scss');
</style>