jje_uniapp/storePages/store/store-choose.vue

<template>
	<view class="container">

		<!-- 地图容器 -->
		<view class="map-wrap">
			<map style="width: 100%; height: 300px;"
				id="map"
				:latitude="latitude"
				:longitude="longitude"
				:scale="scale"
				:show-location="true"
				 @markertap="handleMarkerTap"
				>
			</map>
		</view>

		<!-- 地区 -->
		<!-- <view class="h-area-wrap">

			<view class="h-search">
			  <view class="h-time">
				  <view  class="time">{{areaName}}</view>
				  <u-icon name="arrow-down" color="#000" size="18"></u-icon>
			  </view>
			  <view class="h-name">
			  </view>
			</view>
		</view> -->

		<!-- 门店列表 -->
		<view class="h-store-wrap">
			<view v-for="(item,index) in storeList" class="h-store-content">
				<view @click="selectStore(item)" class="h-row">
					<view class="h-left-value">
						<text class="h-name">{{item.storeName}}</text>
					</view>
					<view class="h-right-value">
						<!-- <text class="h-text">4.2km</text> -->
					</view>
				</view>
				<view class="h-row" @click="selectStore(item)">
					<view   class="h-left-value">
						<view class="h-text">
							<image src="../../static/goods/dingwei.png" mode=""></image>
							<text>地址：{{item.address}}</text>
						</view>
						<view class="h-text">
							<image src="../../static/goods/time.png" mode=""></image>
							营业时间：<text>{{item.tradeTime}}~{{item.gooutTime}}</text>
						</view>
						<view class="h-text">
							<image src="../../static/goods/zixun.png" mode=""></image>
							咨询热线：<text>{{item.phone || ''}}</text>
						</view>
					</view>
<!--					<view class="h-right-value h-flex">-->
<!--						<view  class="phone">-->
<!--							<image src="../../static/goods/u291.png" mode=""></image>-->
<!--						</view>-->
<!--						<view  class="sure">-->
<!--							<image src="../../static/goods/u292.png" mode=""></image>-->
<!--						</view>-->
<!--					</view>-->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
	  areaName: '贵阳市',
	  latitude: 26.5737,
	  longitude: 106.7135,
	  scale: 12,
	  img: '/static/index/u55.png',
	  reqParm: {
		  auth: true,
		  longitude: 0,
		  latitude: 0
	  },
	  storeList: [
	    {
			latitude: 26.5737,
			longitude: 106.7135,
			abcname: '123',
			idx: 0
	    }, {
			latitude: 23.099994,
			longitude: 113.322520,
			abcname: '123',
			idx: 1
	    }, {
			latitude: 23.099994,
			longitude: 113.326520,
			abcname: '123',
			idx: 2
	    }, {
			latitude: 23.096994,
			longitude: 113.329520,
			abcname: '123',
			idx: 3
	    }
	  ],
	  type: '1'
	}
  },
  onReady() {
  	// 初始化地图
  	this.initMap();
  },
  onLoad(option) {

	// 获取商店数据
	this.getStoreListData();

	// 判断Openid是否为空
	if(option.type){
		this.type = option.type;
	}
  },
  methods: {
	// 选择门店
	selectStore(item){
		// 更新用户选择的门店信息
		uni.setStorageSync('storeInfo',  item);

		uni.switchTab({
			url: '/pages/index/index',
		})
	},
	// 获取门店列表数据
	getStoreListData(){
		let that = this;
		this.$api.storeList({data:this.reqParm}).then((res)=>{
			console.log(res)
				that.storeList = res.data.data
				// 添加坐标点
				// that.addMarkers();
		}).catch(() =>{
			console.log("获取用户门店列表报错")
			// uni.showToast({
			// 	title: "操作失败"
			// })
		})
	},
	initMap(){
		this._mapContext = uni.createMapContext("map", this);

		// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
		this._mapContext.initMarkerCluster({
			enableDefaultStyle: false,
			zoomOnClick: true,
			gridSize: 60,
			complete(res) {
			  console.log('initMarkerCluster', res)
			}
		});

		this._mapContext.on("markerClusterCreate", (e) => {
			console.log("markerClusterCreate", e);
		});

	},
	addMarkers() {
		const markers = []
		// 处理点的数据
		this.storeList.forEach((p, i) => {
		  console.log(i)
		  markers.push(
			Object.assign({},{
			  id: i,
			  iconPath: this.img,
			  width: 50,
			  height: 50,
			  // joinCluster: true, // 指定了该参数才会参与聚合
			  label: {
				  width: 150,
				  height: 30,
				  // borderWidth: 1,
				  // borderRadius: 10,
				  // bgColor: 'red',
				  textAlign: 'center',
				  // anchorX: -40,
				  // anchorY: -70,
				  content: p.storeName
			  }
			},p)
		  )
		})

		// 添加点
		this._mapContext.addMarkers({
			markers,
			clear: false,
			complete(res) {
			  console.log('addMarkers', res)
			}
		})
	},

	// 点击地图上的点
	handleMarkerTap(marker){
		console.log('Marker tapped:', marker);
		console.log(this.storeList[marker.markerId])
	},
	// 打电话
	makePhone(phoneNumber){
		uni.makePhoneCall({
			phoneNumber: phoneNumber
		});
	},
	// 去下单页面
	gotoOrder(item){
		this.type = '2';
		this.selectStore(item);
	},
  },
};
</script>

<style scoped lang="scss">
.h-store-wrap{
	margin-top: 12px;
	background: #fff;
	padding-top:4px;
	padding-left: 12px;
	padding-right: 12px;
	border-radius: 12px;
	.h-store-content{
		margin-top: 12px;
		margin-bottom: 12px;
		background: #fafafa;
		padding: 12px;
		border-radius: 6px;
		font-family: PingFangSC-Regular, PingFang SC;
		.h-row{
			display: flex;
			justify-content: space-between;
			.h-left-value{
				.h-name{
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
				.h-text{
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					image{
						margin-right: 12rpx;
						height: 24rpx;
						width: 24rpx;
					}
				}
			}
			.h-right-value{
				.h-text{
					font-size: 10px;
					font-weight: 400;
					color: #999999;
					line-height: 18px;
				}
			}
			.h-flex{
				display: flex;
				justify-content: space-between;
				image{
					height: 30px;
					width: 30px;
				}
			}
		}
	}
}


.h-area-wrap{
	margin-right: 12px;
	margin-left: 12px;
	margin-top: 12px;
}
.h-search{
	font-size: 14px;
	display: flex;
	padding-left: 12px;
	padding-top: 8px;
	padding-right: 12px;
	background: #fff;
	padding-bottom: 8px;
	border-radius: 6px;
	.h-time{
		width: 30%;
		display: flex;
		.time{
			padding-right: 2px;
		}
	}
	.h-name{
		width: 70%;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		.name{
			padding-right: 6px;
		}
	}
}
</style>