powerbank/pages/nearbystores/index.vue

<template>
	<view class="page">
		<u-navbar title="附近共享" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='38'></u-navbar>
			<view class="dtxs">
				<map class='map' :latitude="latitude" :longitude="longitude" @markertap="handleMarkerClick" :markers="covers" :show-location="true" />
			</view>
		<view class="listbox">
			<view class="list" v-for="(item,index) in gxlist" :key="index">
				<view class="pic">
					<image :src="item.picture" mode=""></image>
				</view>
				<view class="cen">
					<view class="cena" style="font-weight: 600;">
						{{item.name}}
					</view>
					<view class="cenb">
						{{item.address}}
					</view>
					<view class="cenc">
						营业时间：{{item.businessTimeStart}}-{{item.businessTimeEnd}}
				<view class="wz" style="color: #109F64;" v-if="item.availableDeviceCount > 0">可租借</view>
				<view class="wz" style="color: #109F64;" v-if="item.slotCount - item.deviceCount > 0">可归还</view>
				<view class="wz" style="background-color: #FFEFEF;color: #FF4444;" v-if="item.slotCount - item.deviceCount == 0">已还满</view>
					</view>
				</view>
				<view class="right">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uraUDWkEx5OvJB29kMnS" mode="" @click="mapFun(item)"></image>
					<text>{{String(item.distance).split('.')[0]}}m</text>
				</view>
			</view>
		</view>	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '', 
				longitude: '', 
				covers: [], 
				isMch:false,
				gxlist:[]
			}
		},
		onLoad() {

		},
		onShow() {
			this.getshanghu()
		},
		methods: {
			// 跳转导航
			mapFun(item) {
				uni.openLocation({
					latitude: item.lat,
					longitude: item.lng, 
					name: item.county,
					address: item.address
				});
			},
			getshanghu(){
				this.$u.get("/app/user/userInfo").then((res) => {
					if (res.code == 200) {
						this.isMch = res.data.isMch
					}
				})
			},
			getMyLocation() {  
			    uni.getLocation({    
			        type: 'wgs84',    
			        success: (res) => {    
			            this.latitude = res.latitude;    
			            this.longitude = res.longitude;    
			            this.jinweidu = this.longitude + ',' + this.latitude;    
			            // 请求附近的店铺    
			            this.$u.get("/app/store/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(response => {    
			                if (response.code == 200) {    
			                    this.gxlist = response.data;  
			                    this.gxlist.forEach(item => {    
			                        // 计算距离  
			                        const distance = this.getDistance(this.latitude, this.longitude, item.lat, item.lng);  
			                        // 将距离添加到店铺对象中  
			                        item.distance = distance;  
			                        // 创建店铺覆盖物对象  
			                        const shopCover = {    
			                            id: parseFloat(item.storeId),  
			                            latitude: item.lat,    
			                            longitude: item.lng,    
			                            width: 25,    
			                            height: 30,    
			                            iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uI3B6yPwtiUBD3vafLtw', 
			                            distance: distance // 可以在这里也添加距离到覆盖物对象中，但通常只需要在店铺对象中  
			                        };    
			                        // console.log(this.gxlist);
			                        this.covers.push(shopCover); // 将店铺覆盖物添加到数组中  
			                    });    
			                }    
			            }).catch(error => {  
			                console.error('请求店铺列表失败：', error);  
			            });  
			        },    
			        fail: (err) => {    
			            console.error('获取位置失败：', err);    
			        }    
			    });    
			},
			
			 getDistance(lat1, lon1, lat2, lon2) {  
			    const R = 6371000; // 地球半径，单位：米  
			    const phi1 = lat1 * Math.PI / 180; // φ, 纬度转为弧度  
			    const phi2 = lat2 * Math.PI / 180;  
			    const deltaPhi = (lat2 - lat1) * Math.PI / 180;  
			    const deltaLambda = (lon2 - lon1) * Math.PI / 180;  
			    const a = Math.sin(deltaPhi / 2) * Math.sin(deltaPhi / 2) +  Math.cos(phi1) * Math.cos(phi2) * Math.sin(deltaLambda / 2) * Math.sin(deltaLambda / 2);  
			    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));  
			    const distance = R * c;
			    return distance;  
			},
			
			handleMarkerClick(event) {
				const markerId = event.markerId;
				uni.navigateTo({
					url: '/page_user/mapditu/index?markerId=' + markerId
				})
			},
			
		},
		mounted() {
		   this.getMyLocation(); 
		}
	}
</script>

<style lang="scss">
	/deep/ .map{
		width: 100%;
		height: 100%;
	}
	page {
		background: linear-gradient(180deg, #25D088 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.page {
		width: 750rpx;
        position: fixed;
		top: 0;
		left: 0;
		.dtxs{
			width: 100%;
			height: 50vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.listbox{
			margin-top: 480rpx;
			background: #FFFFFF;
			border-radius: 64rpx 64rpx 0  0;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			padding-top: 40rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
			height: 70vh;
			overflow-y: scroll;
			padding-bottom: 400rpx;
			.moshi{
				position: fixed;
				top: 570rpx;
				left: 30rpx;
				z-index: 99;
				image{
					width: 210rpx;
					height: 62rpx;
				}
				.img{
					height: 50rpx;
					margin-bottom: 8rpx;
				}
			}
			.title{
				border-radius: 64rpx 64rpx 0  0;
				display: flex;
				justify-content: space-between;
				font-weight: 500;
				font-size: 36rpx;
				color: #3D3D3D;
				line-height: 160rpx;
				padding: 0 76rpx;
				width: 100%;
				background-color: #fff;
				position: fixed;
				height: 160rpx;
				top: 40vh;
				left: 0;
				padding-bottom: 20rpx;
			}
			.list{
				display: flex;
				// justify-content: space-between;
				margin-top: 44rpx;
				border-bottom: 1px solid #eee;
				padding-bottom: 16rpx;
				.pic{
					width: 134rpx;
					height: 134rpx;
					background-color: #D9D8FF;
					border-radius: 10rpx;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.cen{
					width: 488rpx;
					.cena{
						font-weight: 500;
						font-size: 28rpx;
						color: #3D3D3D;
						line-height: 38rpx;
					}
					.cenb{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
						line-height: 32rpx;
						margin-top: 14rpx;
					}
					.cenc{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
						line-height: 32rpx;
						margin-top: 14rpx;
						display: flex;
						.wz{
							margin-left: 5rpx;
							padding: 4rpx;
							box-sizing: border-box;
							width:100rpx;
							border-radius: 30rpx;
							text-align: center;
						}
						text{
							display: inline-block;
							padding: 4rpx 18rpx;
							box-sizing: border-box;
							border-radius: 20rpx;
						}
						.bu{
							margin-left: 10rpx;
							background:#D9D8FF;
							color: #4D48B5;
						}
					}
				}
				.right{
					padding-top: 40rpx;
					text-align: center;
					image{
						width: 40rpx;
						height: 40rpx;
					}
					text{
						display: block;
						font-weight: 400;
						font-size: 20rpx;
						color: #808080;
						line-height: 28rpx;
					}
				}
			}
		}
	}
	.active{
		border-bottom: 10rpx solid #D9D8FF;
		border-radius: 7rpx;
		padding-bottom: 10rpx;
		font-weight: 700;
	}
</style>