feiniao-youwei-uniapp/pages/tabBar/home/home.vue

<template>
	<view class="home-wrap base-container">
		<view class="home-top">
			<view class="home-search">
				<view class="search-wrap">
					<up-search placeholder="搜索品种" v-model="typeSearch"></up-search>
				</view>
			</view>
			<map
			    id="mapId"
			    :latitude="latitude"
			    :longitude="longitude"
			    @markertap="onMarkerTap"
			    @callouttap="onCalloutTap"
			    @labeltap="onLabelTap"
			    :markers="markers"
			    :include-points="includePoints"
				:enable-poi="false"
				:enable-traffic="false"
				:enable-building="false"
			    show-location
			    style="width: 100%; height: 280rpx;"
			  ></map>
			<view class="map-tips" @click="toPage('allGardenMap')">
				飞鸟入驻管理果场详情，点击查看
			</view>
		</view>
		<view class="type-wrap">
			 <up-scroll-list indicatorColor="#F3C11D33" indicatorActiveColor="#F3C11D" :indicatorWidth="30" :indicatorBarWidth="13">
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
					<view class="type-text">
						全部
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
					<view class="type-text">
						龙眼
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
					<view class="type-text">
						葡萄
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
					<view class="type-text">
						水蜜桃
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
					<view class="type-text">
						龙眼
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
					<view class="type-text">
						葡萄
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
					<view class="type-text">
						葡萄1
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
					<view class="type-text">
						水蜜桃2
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
					<view class="type-text">
						葡萄
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
					<view class="type-text">
						水蜜桃
					</view>
				</view>
				<view class="item-type">
					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
					<view class="type-text">
						龙眼
					</view>
				</view>
			</up-scroll-list>
		</view>
		<!-- 好味热卖 -->
		<view class="home-hot">
			<hot-component-vue></hot-component-vue>
		</view>
		
		<!-- 有味果园 -->
		<view class="garden-wrap">
			<view class="garden-content">
				<view class="hot-title">
					<view class="title-l">
						有味果园
					</view>
					<view class="title-btn">
						查看全部<up-icon size="10" name="arrow-right"></up-icon>
					</view>
				</view>
				<view class="garden-list">
					<view class="garden-item" @click="toPage('gardenItem')">
						<view class="garden-l">
							<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
							<text class="img-text">无人机实拍视频</text>
						</view>
						<view class="garden-r">
							<view class="garden-title">
								从化荔枝博览园
							</view>
							<view class="garden-info">
								品种：荔枝（井岗红糯、巨美人）
							</view>
							<view class="garden-info">
								位置：广州市从化区
							</view>
							<view class="garden-btn-group">
								<view class="btn-second">
									有味指数
									<text>4.5分</text>
								</view>
								<view class="btn-primary">
									溯源报告
								</view>
							</view>
						</view>
					</view>
					<view class="garden-item">
						<view class="garden-l">
							<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
							<text class="img-text">无人机实拍视频</text>
						</view>
						<view class="garden-r">
							<view class="garden-title">
								从化荔枝博览园
							</view>
							<view class="garden-info">
								品种：荔枝（井岗红糯、巨美人）
							</view>
							<view class="garden-info">
								位置：广州市从化区
							</view>
							<view class="garden-btn-group">
								<view class="btn-second">
									有味指数
									<text>4.5分</text>
								</view>
								<view class="btn-primary">
									溯源报告
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import config from "@/api/config.js"
import hotComponentVue from './hotComponent.vue'


const typeSearch = ref(null)
 
 function toPage(path) {
	 uni.navigateTo({
	 	url: `/pages/tabBar/home/subPages/${path}`
	 });
 }
 
 
 const latitude = ref(23.099994)
 const longitude = ref(113.324520)
 const markers = ref([])
 const includePoints = ref([])
 const mapCtx = ref(null)
 const img = ref('../../../static/map/point.png')
 
 onMounted(async () => {
   // #ifdef MP-WEIXIN
   mapCtx.value = uni.createMapContext('mapId')
   
   mapCtx.value.on('markerClusterClick', res => {
     console.log('markerClusterClick', res)
   })
   
   bindEvent()
   // #endif
 })
 
 const bindEvent = () => {
   // #ifdef MP-WEIXIN
   mapCtx.value.initMarkerCluster({
     enableDefaultStyle: false,
     zoomOnClick: true,
     gridSize: 60,
     complete(res) {
       console.log('initMarkerCluster', res)
     }
   })
   
   addMarkers()
   
   mapCtx.value.on('markerClusterCreate', res => {
     console.log('clusterCreate', res)
     const clusters = res.clusters
     const newMarkers = clusters.map(cluster => {
       const { center, clusterId, markerIds } = cluster
       return {
         ...center,
         width: 0,
         height: 0,
         clusterId, // 必须
         label: {
           content: markerIds.length + '',
           fontSize: 20,
           width: 30,
           height: 30,
           bgColor: '#FFCB3C',
           borderRadius: 30,
           textAlign: 'center',
           anchorX: 0,
           anchorY: -30,
         }
       }
     })
     mapCtx.value.addMarkers({
       markers: newMarkers,
       clear: false,
       complete(res) {
         console.log('clusterCreate addMarkers', res)
       }
     })
   })
   // #endif
 }
 
 const addMarkers = () => {
   const marker = {
     id: 1,
     iconPath: img.value,
     width: 30,
     height: 30,
     joinCluster: true, // 指定了该参数才会参与聚合
     label: {
       width: 50,
       height: 30,
       borderWidth: 1,
       borderRadius: 4,
       bgColor: '#FFCB3C88',
       anchorX: -26,
       anchorY: -60,
       content: ''
     }
   }
 
   const positions = [
     { latitude: 23.099994, longitude: 113.324520 },
     { latitude: 23.099994, longitude: 113.322520 },
     { latitude: 23.099994, longitude: 113.326520 },
     { latitude: 23.096994, longitude: 113.329520 }
   ]
   
   const newMarkers = []
   positions.forEach((p, i) => {
     const newMarker = {...marker, ...p}
     newMarker.id = i + 1
     newMarker.label.content = `果园 ${i + 1}`
     newMarkers.push(newMarker)
   })
   
   // #ifdef MP-WEIXIN
   mapCtx.value.addMarkers({
     markers: newMarkers,
     clear: false,
     complete(res) {
       console.log('addMarkers', res)
     }
   })
   // #else
   // 非微信平台直接设置 markers
   markers.value = markers.value.concat(newMarkers)
   // 更新包含的点
   includePoints.value = markers.value.map(marker => ({
     latitude: marker.latitude,
     longitude: marker.longitude
   }))
   // #endif
 }
 
const removeMarkers = () => {
  // #ifdef MP-WEIXIN
  mapCtx.value.addMarkers({
    clear: true,
    markers: []
  })
  // #else
  markers.value = []
  // #endif
}

const onMarkerTap = (e) => {
  console.log('@@ markertap', e)
}

const onCalloutTap = (e) => {
  console.log('@@ onCalloutTap', e)
}

const onLabelTap = (e) => {
  console.log('@@ labletap', e)
}
</script>

<style lang="scss" scoped>
	.home-wrap {
		background-color: #F2F3F5;
		padding: 0;
		.home-top {
			padding: 20rpx 24rpx;
			background: linear-gradient(#FFFFFF, rgba(242, 243, 245, 0));
			position: relative;
		}
		.map-tips {
			position: absolute;
			bottom: 0%;
			left: 24rpx;
			height: 70rpx;
			width: calc(100% - 48rpx);
			background: linear-gradient(rgba(102, 102, 102, 0), rgba(0, 0, 0, 0.55));
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #FFFFFF;
			padding-left: 20rpx;
			box-sizing: border-box;
			border-radius: 0 0 16rpx 16rpx;
		}
		.home-search {
			display: flex;
			align-items: center;
			width: 100%;
			border: 2rpx solid #FFD95E;
			border-radius: 40rpx;
			margin-bottom: 40rpx;
			.search-wrap {
				flex: 1;
				// padding-left: 22rpx;
				::v-deep {
					.u-search {
						.u-search__content {
							background-color: transparent !important;
							.u-search__content__input {
								background-color: transparent !important;
								
							}
						}
						.u-search__action {
							text-align: center;
							line-height: 52rpx;
							border-radius: 40rpx;
							font-size: 28rpx;
							background-color: #FFD95E;
							margin: 6rpx 8rpx;
							width: 112rpx;
							height: 52rpx;
						}
					}
				}
			}
			.search-btn {
				text-align: center;
				line-height: 52rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				background-color: #FFD95E;
				margin: 6rpx 8rpx;
				width: 112rpx;
				height: 52rpx;
			}
		}
		.type-wrap {
			margin: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			height: 200rpx;
			box-sizing: border-box;
			
			.item-type {
				text-align: center;
				font-size: 24rpx;
				.type-img {
					width: 92rpx;
					height: 92rpx;
				}
			}
			.item-type + .item-type {
				padding-left: 22rpx;
			}
		}
		.home-hot {
			padding: 0 20rpx 20rpx;
		}
		
		.garden-wrap {
			margin: 0 20rpx 20rpx;
			background: linear-gradient(#FFFFFF, rgba(255, 255, 255, 0));
			padding: 2rpx;
			border-radius: 16rpx;
			.garden-content{
				background: linear-gradient(#fff6d8 4%,  #FFFFFF 28%);
				border-radius: 16rpx;
				padding: 20rpx;
				box-sizing: border-box;
				.garden-list {
					.garden-item {
						display: flex;
						.garden-l {
							position: relative;
							.garden-img {
								width: 254rpx;
								height: 200rpx;
								object-fit: cover;
								border-radius: 10rpx;
							}
							.img-text {
								position: absolute;
								left: 0%;
								top: 0%;
								background: rgba(0, 0, 0, 0.3);
								backdrop-filter: 8rpx;
								border-radius: 10rpx 0 10rpx 0;
								font-size: 20rpx;
								color: #FFFFFF;
								padding: 6rpx 14rpx;
							}
						}
						.garden-r {
							padding-left: 20rpx;
							.garden-title {
								font-size: 28rpx;
								line-height: 42rpx;
								color: #000000;
								font-weight: 600;
								padding-bottom: 10rpx;
							}
							.garden-info {
								color: rgba(0, 0, 0, 0.5);
								font-size: 24rpx;
								line-height: 36rpx;
							}
							.garden-btn-group {
								padding-top: 20rpx;
								display: flex;
								align-items: center;
								.btn-second {
									padding: 0 20rpx;
									border-radius: 40rpx;
									font-size: 24rpx;
									color: #C49600;
									background: rgba(255, 217, 94, 0.2);
									height: 56rpx;
									line-height: 56rpx;
								}
								.btn-primary {
									padding: 0 20rpx;
									border-radius: 40rpx;
									font-size: 24rpx;
									color: #000000;
									background: #FFD95E;
									font-weight: bold;
									height: 56rpx;
									line-height: 56rpx;
								}
							}
						}
					}
					.garden-item + .garden-item {
						margin-top: 20rpx;
					}
				}
			}
			
		}
		
		
		.hot-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			.title-l {
				font-family: 'PangMenZhengDao';
				font-size: 32rpx;
				.title-color {
					color: #F3C11D ;
				}
			}
			.title-btn {
				color: rgba(0, 0, 0, 0.6);
				font-size: 24rpx;
				display: inline-flex;
				align-items: center;
			}
		}
	
		
		::v-deep {
			.u-scroll-list__indicator {
				margin-top: 20rpx;
			}
		}
	}
</style>