mdapp/pages/shop/map.vue

<template>
	<view class="scoped-box">
		<view class="scoped-select">
			<view :class="curStoreBrand === item.val ? 'ss-op cur' : 'ss-op'" v-for="(item, index) in sbArr" @click="brandHandle(item)" :key="index">{{ item.key }}</view>
		</view>
		<map
			class="sb-map"
			longitude="115.822386"
			latitude="28.624076"
			scale="12"
			:markers="dataList"
			@callouttap="callouttapHandle"
		></map>
		<view class="scoped-bottom" v-if="curObj.manager_phone">
			<view class="p1">门店：{{ curObj.store_name }}[{{curObj.clerk_num}}]</view>
			<view class="p1">店长：{{ curObj.store_manager }}{{ curObj.manager_phone }}[{{curObj.signing == 1 ? '已签约' : '未签约'}}]
				<view class="m" @click="callHandle">[打电话]</view>
			</view>
			<view class="p1">地址：{{ curObj.address }}</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			dataList: [],
			sbArr: [],
			curStoreBrand: '',
			storeBrandObj: {},
			curObj: {},
			oldList: [],
		};
	},
	onLoad(params) {
		const dictObj = uni.getStorageSync('MD_dict')
		let sbArr = dictObj.store_brand || []
		let storeBrandObj = {}
		let nArr = []
		uni.api.estate.apideptstorecount().then(res => {
			const brandCount = res.brand_count || []
			brandCount.forEach(bc => {
			sbArr.forEach(item => {
				if (bc.store_brand === item.val) {
				nArr.push({
					total: bc.total,
					val: bc.store_brand,
					key: `${bc.store_brand}(${bc.total})`,
				})
				storeBrandObj[item.val] = item.option1 || '#673ab7'
				}
			})
			})
			nArr.sort( (a, b)=> {
				return b.total - a.total
			})
			this.sbArr = [{key: '全部', val: ''},...nArr]
			this.storeBrandObj = {...storeBrandObj}
		})


		this.getData()
	},
	onReachBottom() {},
	onPullDownRefresh() {
		// 防止频繁刷新
	},
	methods: {
		callHandle () {			
			uni.makePhoneCall({
				phoneNumber: this.curObj.manager_phone
			})
		},
		callouttapHandle (e) {
			const detail = e.detail
			const index = detail.markerId - 10000
			this.curObj = this.oldList[index]
		},
		getData () {
			uni.api.estate.apideptstorelist({
				store_brand: this.curStoreBrand
			}).then(res => {
			let dataList = []
			const arr = res || []
			this.oldList = [...arr]
			dataList = arr.map((item, index) => {
				return {
					id: index + 10000,
					latitude: item.latitude,
					longitude: item.longitude,
					iconPath: 'https://icon.honglouplus.com/icon_1px.png',
					width: 0,
					height: 0,
					zIndex: 99,
					callout: {
						content: `${item.signing == 1 ? 'Y' : 'N'}${item.store_name}[${item.clerk_num}]`,
						color: '#fff',
						bgColor: this.storeBrandObj[item.store_brand],
						display: 'ALWAYS',
						padding: '6px 10px',
						textAlign: 'center',
						borderRadius: '10',
					}
				}
			})
			this.dataList = [...dataList]
		})
		},
		brandHandle (item) {
			this.curStoreBrand = item.val
			this.getData()
		},
		linkList (v) {
			uni.navigateTo({
				url: `/pages/estate/lib?v=${v}`
			})
		}
	}
};
</script>
<style lang="scss">
.scoped-box {
  height: calc(100vh);
  position: relative;
  .sb-map {
	position: absolute;
	z-index: 9;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
  }
  .scoped-bottom {
	position: fixed;
	background: #fff;
	z-index: 10;
	left: 0;
	bottom: 0;
	height: 150rpx;
	width: 100%;
	padding: 20rpx;
	.p1 {
		color: #666;
		font-size: 26rpx;
		.m {
			display: inline-block;
			color: #2d8cf0;
			font-weight: bold;
		}
	}
  }
}

.scoped-select {
  position: relative;
  z-index: 10;
  padding-top: 20rpx;
  padding-left: 20rpx;
  background: #fff;
  .ss-op {
    color: #666;
    background: #e1e1e1;
    border-radius: 10rpx;
    padding: 3rpx 10rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    &.cur {
      color: #fff;
      background: #2d8cf0;
    }
  }
}

</style>