parking_h5/pages/parkingLists/parkingLists.vue

<template>
	<view class="parking">
		<view class="loading" v-show="loading">
			<u-loading size="36" mode="flower"></u-loading>
		</view>
		<view class="parking-header">
			<u-search placeholder="搜索停车场" v-model="searchContent" :show-action="false" @change="searchInputChange"></u-search>
			<u-icon v-if="!searchContent" class="icon" name="list" size="44" color="#ffffff"
			placeholder-color="#B5B5B5" search-icon-color="#B3B3B3"></u-icon>
			<u-icon v-if="searchContent" class="icon" name="close" size="36" color="#ffffff"
			placeholder-color="#B5B5B5" search-icon-color="#B3B3B3"></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"
				:markers="covers"></map>
		</view>
		
		<!-- <u-empty src="/static/img/empty.png" icon-size="335" text="正在建设中" color="#878787" mode="search"></u-empty> -->
		<view class="parking-current-address" v-if="searchParkingList.length === 0">
			<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>{{item.roadName}}</view>
						<view>{{item.areaName}}</view>
						<view class="swiper-item-font">
							<view>
								<text>余位</text>
								<text class="yellow-font">{{item.spaceIdle}}</text>
							</view>
							<view>
								<text>包月费用</text>
								<text class="yellow-font">300元</text>
							</view>
							<view>
								<text>距离</text>
								<text>{{item.distance}}m</text>
							</view>
						</view>
						<view class="swiper-item-button">
							<button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
							<button type="default">办理包月</button>
						</view>
						<view @click="$u.route({url: 'pages/chargeStandard/chargeStandard'})">
							<text>点击查看停车规则</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="parking-address-list" v-if="searchParkingList.length > 0 && 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="navigation(item.latitude, item.longitude)"></image>
					<view>路线</view>
				</view>
			</view>
		</view>
		<view class="parking-address-details" v-if="isShowParkingDetail">
			<view class="parking-address-details-title">
				<view class="padt-header">
					<view class="padt-header-title">
						<view>{{parkingDetailData.roleName}}</view>
						<view>贵阳市云岩区北京东路与贵阳绕城高速交叉…</view>
					</view>
					<view class="padt-header-icon">
						<image src="../../static/img/distance-icon.png" mode=""></image>
						<view>{{parkingDetailData.distance}}m</view>
					</view>
				</view>
				<view class="padt-timeline">服务时间<text>7:00-21:00</text></view>
			</view>
			<view class="parking-address-details-numer">
				<view>
					<view>120</view>
					<view>共有车位</view>
				</view>
				<view>
					<view>30</view>
					<view>空闲车位</view>
				</view>
			</view>
			<view class="parking-address-details-price">
				<view>
					<text>10</text>
					<text>元/小时  包月费用：300元</text>
				</view>
				<view @click="$u.route({url: 'pages/chargeStandard/chargeStandard'})">点击查看停车规则</view>
			</view>
			<view class="parking-address-details-button">办理包月</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				searchContent: '',
				page_map:'',
				loading: false,
				id: 0, //使用 marker点击事件 需要填写id
				latitude: 26.64969,
				longitude: 106.636453,
				currentPosition: {
					latitude: 26.64969,
					longitude: 106.636453,
				},
				covers: [
					{
						latitude: 26.597864,
						longitude: 106.72947,
						id: '0',
						iconPath: require('./../../static/img/parking-icon.png')
					},
					{
						latitude: 26.497864,
						longitude: 106.72947,
						id: '1',
						iconPath: require('./../../static/img/parking-icon.png')
					}
				],
				// 轮播选中
				swiperCurrent: 0,
				// 附近停车列表
				nearParkingList: [],
				// 是否显示停车场列表
				isShowSearchParking: false,
				// 搜索停车场列表
				searchParkingList: [],
				// 显示单个停车场数据
				isShowParkingDetail: false,
				// 单个停车场数据
				parkingDetailData: {}
			}
		},
		onLoad(){
			// this.page_map = uni.createMapContext("pagemap", this);
			// console.log('page_map',this.page_map);
			// this.getNearRoadsl();
		},
		onShow() {
			this.getLocation();
		},
		methods:{
			/* 
			 * 查询输入框发生变化
			 * 
			 * */
			searchInputChange (value) {
				console.log(value)
				if (value === '') {
					this.isShowParkingDetail = false
					this.isShowSearchParking = false
				}
				this.getNearRoadsl()
			},
			getLocation(){
				let that = this;
				// console.log("请求定位")
				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
						console.log(that.currentPosition)
						// that.getNearRoadsl()
					},
					fail: function(res){
						console.log("请求错误:", res)
					}
				})
			},
			navigation (lat, lon) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude:parseFloat(lon),
					scale: 18
				})
			},
			async getNearRoadsl(){
				// await this.getLocation();
				console.log(this.currentPosition)
				this.$u.api.nearRoadsl({
					latitude: this.currentPosition.latitude,
					longitude:this.currentPosition.longitude,
					roadName: this.searchContent
				})
				.then(res=>{
					const nearParkingList = []
					res.data.forEach((item, index)=>{
						if(item.latitude&&item.longitude){
							nearParkingList.push(item)
							let marker = {
								latitude: item.latitude,
								longitude:item.longitude,
								id: '1',
								iconPath: require('./../../static/img/parking-icon.png')
							}
							this.covers.push(marker);
						}
					})
					this.nearParkingList = nearParkingList
					this.latitude = nearParkingList[0].latitude
					this.longitude = nearParkingList[0].longitude
					this.loading = false
					if (this.searchContent) {
						this.searchParkingList = nearParkingList
						this.isShowSearchParking = true
					}
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('getNearRoadsl ',err)
				});
			},
			/**
			 * 点击地图上的标记点触发
			 * */
			markertap(e){
				console.log(e)
				for (let i = 0; i < this.nearParkingList.length; i++) {
					let item = this.nearParkingList[i]
					if (item.latitude === e.latitude && item.longitude === e.longitude) {
						this.swiperCurrent = i
					}
				}
			},
			/* 
			 *地址发生变化
			 * 
			 * */
			swiperChange (item) {
				console.log(item.detail)
				this.latitude = this.nearParkingList[item.detail.current].latitude
				this.longitude = this.nearParkingList[item.detail.current].longitude
			},
			/**
			  * 点击单个停车场看详情
			  * item 为选中项参数
			  * */
			clickSearchParking (item) {
				this.parkingDetailData = item
				this.isShowParkingDetail = true
				this.isShowSearchParking = false
				this.latitude = item.latitude
				this.longitude = item.longitude
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{margin-top: 20vh;}
	@import url("./parkingLists.scss");
</style>