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"
			: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 Map from '@/js_sdk/ms-openMap/openMap.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()
			if (page.keyword) {
				this.searchContent = page.keyword
				this.searchInputChange(page.keyword)
			}
		},
		methods:{
			/* 
			 * 查询输入框发生变化
			 * 
			 * */
			searchInputChange (value) {
				// 为空时关闭搜索列表
				if (value === '') {
					this.isShowSearchParking = false
				}
				this.isShowParkingDetail = false
				this.getNearRoadsl()
			},
			getLocation(){
				let that = this;
				console.log("请求定位")
				that.loading = true
				uni.getLocation({
					type:"gcj02",
					success : function (res) {
						console.log("定位返回信息:", res);
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.currentPosition.latitude = res.latitude
						that.currentPosition.longitude = res.longitude
						that.loading = false
						that.getNearRoadsl()
					},
					fail: function(res){
						this.$refs.uToast.show({
							title: res,
							type: 'error',
						})
					}
				})
			},
			/**
			  * 导航 
			  * */
			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'
						// })
						// 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 '百度地图':
						uni.navigateTo({
						  url: `/pages/parkingLists/map_web_view/map_web_view?url=${encodeURIComponent(`http://api.map.baidu.com/direction?origin=latlng:${this.latitude},${this.longitude}|name:起点&destination=latlng:${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}|name:终点&mode=driving&output=html&src=webapp.baidu.openAPIdemo`)}`
						})
						break;
					case '高德地图':
						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;
					
				}
			},
			clearSearchInput () {
				this.searchContent = '';
				this.isShowSearchParking = false;
				this.getNearRoadsl()
			},
			/**
			 * lon,lat 为当前选中点的经纬度
			 * 默认首个点放大 如果有传入经纬度则对应的点放大
			 * */
			getNearRoadsl(lon, lat){
				// await this.getLocation();
				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)
							let 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)
			},
			/* 
			 *地址发生变化
			 * 
			 * */
			swiperChange (item) {
				let 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)
			},
			/**
			  * 点击单个停车场看详情
			  * item 为选中项参数
			  * */
			clickSearchParking (item) {
				console.log('clickSearchParking',item)
				// this.parkingDetailData = item
				// this.isShowParkingDetail = true
				// this.latitude = item.latitude
				// this.longitude = item.longitude
				// this.getNearRoadsl(item.longitude, item.latitude)
				// setTimeout(() => {
				// 	this.isShowSearchParking = false
				// }, 500)
				// this.scale = 18
				this.$u.route({
					url: 'pages/parkingInformation/parkingInformation',
					params:{
						roadInfo:JSON.stringify(item) 
					}
				})
			},
			/**
			 * 跳转停车标准页面
			 * {roadNo} 路段编码
			  * */
			lookParkingRule (item) {
				this.$u.route({
					url: 'pages/chargeStandard/chargeStandard',
					params: {
						roadNo: item.roadNo
					}
				})
			},
			/*搜索右侧按钮点击
			*/
		   listIconClick(){
			   this.isShowSearchParking = true;
			   this.nearParkingFlag = false;
			   this.searchParkingList = this.nearParkingList;
			   // this.getNearRoadsl();
		   },
			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>