jp-floorlock-phone/pages/index/index.vue

<template>
	<view class="jpmain body">
		<componentLogin ref="refLogin" @findByOpenId="findByOpenId"></componentLogin>

		<view class="Area Area1">
			<view class="top">
				<view class="name">附近停车场</view>
				<view class="value" @click="getUserLocation()">
					<img class="img" src="@/assets/img/homepage/riLine-restart-line.png" alt="">
					重新定位
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,i) in nearList"
					@click="gotoUrl('pages/index/main/parkingDetails?id='+item.id)">
					<view class="name">
						<img class="img" src="@/assets/img/homepage/stLine-location-l.svg" alt="">

						{{item.name}}
					</view>
					<view class="value">小于50米</view>
				</view>
			</view>
			
			<u-empty text="列表为空" mode="list" margin-top="80" v-if="!nearList.length">
				<view slot="bottom">
					<view class="value-slot" @click="getUserLocation()">
						<img class="img" src="@/assets/img/homepage/riLine-restart-line.png" alt="">
						重新定位
					</view>
				</view>
			</u-empty>

		</view>

		<view class="Area Area2" v-if="otherList.length">
			<view class="top">
				<view class="name">全部停车场</view>

			</view>
			<view class="list">
				<view class="item" v-for="(item,i) in otherList" :key="i"
					@click="gotoUrl('pages/index/main/parkingDetails?id='+item.id)">
					<view class="name"> <img class="img" src="@/assets/img/homepage/stLine-location-l.svg" alt="">

						{{item.name}}
					</view>
					<view class="value">{{distanceN(item.distance)}}</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import componentLogin from '@/components/componentLogin.vue';

	export default {
		components: {
			componentLogin,
		},
		data() {
			return {
				latitude: 30.337053,

				longitude: 112.240222,
			
				allList: [],

				point: false, //是否获取了定位
			}
		},
		onLoad() {
			this.userInfo = this.jphelp.getPersonInfo()
			this.getParkingList()
		},
		onReady() {
			this.$refs.refLogin.findByOpenId()
		},
		computed: {
			otherList() {
				var sz = []


				for (var i in this.allList) {
					var item = this.allList[i]
					if (this.point) {

						if (item.distance > 1) {
							sz.push(item)
						}
					} else {
						sz.push(item)
					}
				}

				return sz
			},
			nearList() {
				var sz = []
				for (var i in this.allList) {
					var item = this.allList[i]
					if (this.point) {

						if (item.distance < 1) {
							sz.push(item)
						}
					} else {

					}

				}

				return sz
			}
		},
		methods: {
			getParkingList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					pageIndex: 1,
					pageSize: 20,
					radius: 50,
				}
				if (this.point) {
					obj.longitude = this.longitude
					obj.latitude = this.latitude
				}
				API.parkingList(obj).then((res) => {

					this.allList = res.data.data
					console.log(this.nearList)
					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})

				})
			},
			findByOpenId(res) {

			},
			getUserLocation() {
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.getLocation({
							type: 'wgs84',
							success: function(res) {
								console.log('当前位置的经度：' + res.longitude);
								console.log('当前位置的纬度：' + res.latitude);
							}
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.body {
		padding: 32rpx;
	}
	
	.value-slot {
		color: rgba(22, 119, 255, 1);
		font-size: 24rpx;
		display: flex;
		align-items: center;
	
		.img {
			width: 28rpx;
			height: 28rpx;
		}
	}
	.Area {
		.img {
			margin: 0 8rpx;
		}

		margin-bottom: 32rpx;

		.top {
			margin-bottom: 8rpx;
			display: flex;
			justify-content: space-between;

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-weight: bold;
			}

			.value {
				color: rgba(22, 119, 255, 1);
				font-size: 24rpx;
				display: flex;
				align-items: center;

				.img {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.list {
			.item {
				display: flex;
				justify-content: space-between;
				padding: 16rpx 0;

				.name {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					display: flex;
					align-items: center;

					.img {
						width: 32rpx;
						height: 32rpx;
					}

				}

				.value {
					color: rgba(119, 119, 119, 1);

					font-size: 28rpx;
				}
			}
		}
	}

	.Area2 {
		.list {
			.item {
				border-bottom: 1px solid rgba(232, 232, 232, 1);
				;

			}
		}
	}
</style>