fix: 地图，逛一逛

pages.json

@@ -49,6 +49,13 @@
 			{
 				"navigationBarTitleText" : "有味地图"
 			}
+		},
+		{
+			"path" : "pages/tabBar/home/subPages/gardenMap",
+			"style" : 
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	],
 	"globalStyle": {

pages/tabBar/discover/discover.vue

@@ -6,11 +6,9 @@
 					<up-search placeholder="搜索品种" v-model="typeSearch"></up-search>
 				</view>
 			</view>
-			
-			<all-garden-map-vue></all-garden-map-vue>
 
 			<view class="type-wrap">
-				<up-scroll-list indicatorColor="#fae6a4" indicatorActiveColor="#F3C11D" :indicatorWidth="30"
+				<up-scroll-list indicatorColor="#FF770033" indicatorActiveColor="#FF7700" :indicatorWidth="30"
 					:indicatorBarWidth="13">
 					<view class="item-type" :class="{'active': activeType === 0}">
 						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
@@ -119,7 +117,6 @@
 		ref
 	} from "vue";
 	import config from "@/api/config.js"
-	import allGardenMapVue from "../home/subPages/allGardenMap.vue";
 
 	const typeSearch = ref(null)
 
@@ -279,7 +276,7 @@
 					.list-item {
 						background-color: #FFFFFF;
 						border-radius: 10rpx;
-						width: calc(50% - 10rpx);
+						width: calc(50% - 16rpx);
 						margin-bottom: 20rpx;
 						.item-img {
 							width: 100%;
@@ -292,6 +289,7 @@
 							.item-text {
 								width: calc(100% - 22rpx);
 								overflow: hidden;
+								text-overflow: ellipsis;
 								color: #000000;
 								font-size: 28rpx;
 								line-height: 42rpx;

pages/tabBar/home/home.vue

@@ -15,6 +15,9 @@
 			    @labeltap="onLabelTap"
 			    :markers="markers"
 			    :include-points="includePoints"
+				:enable-poi="false"
+				:enable-traffic="false"
+				:enable-building="false"
 			    show-location
 			    style="width: 100%; height: 280rpx;"
 			  ></map>
@@ -23,7 +26,7 @@
 			</view>
 		</view>
 		<view class="type-wrap">
-			 <up-scroll-list indicatorColor="#fae6a4" indicatorActiveColor="#F3C11D" :indicatorWidth="30" :indicatorBarWidth="13">
+			 <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">
@@ -93,7 +96,9 @@
 			</up-scroll-list>
 		</view>
 		<!-- 好味热卖 -->
-		<hot-component-vue></hot-component-vue>
+		<view class="home-hot">
+			<hot-component-vue></hot-component-vue>
+		</view>
 		
 		<!-- 有味果园 -->
 		<view class="garden-wrap">
@@ -410,6 +415,9 @@ const onLabelTap = (e) => {
 				padding-left: 22rpx;
 			}
 		}
+		.home-hot {
+			padding: 0 20rpx 20rpx;
+		}
 		
 		.garden-wrap {
 			margin: 0 20rpx 20rpx;

pages/tabBar/home/hotComponent.vue

@@ -1,16 +1,19 @@
 <template>
 	<view class="hot-wrap">
-		<view class="hot-content">
+		<view class="hot-content" :class="{'hot-border': isGardeItem}">
 			<view class="hot-title">
-				<view class="title-l">
+				<view class="title-l" v-show="!isGardeItem">
 					好味<text class="title-color">热卖</text>
 				</view>
+				<view class="title-l" v-show="isGardeItem">
+					果园热卖
+				</view>
 				<view class="title-btn">
 					限时抢购中<up-icon size="10" name="arrow-right"></up-icon>
 				</view>
 			</view>
 			<view class="hot-list">
-				<up-scroll-list indicatorColor="#fae6a4" indicatorActiveColor="#F3C11D" :indicatorWidth="30"
+				<up-scroll-list indicatorColor="#FF770033" indicatorActiveColor="#FF7700" :indicatorWidth="30"
 					:indicatorBarWidth="13">
 					<view class="hot-panel">
 						<view class="hot-item">
@@ -95,6 +98,12 @@
 
 <script setup>
 	import config from "@/api/config.js"
+	const props = defineProps({
+		isGardeItem: {
+			type: Boolean,
+			default: false
+		}
+	})
 </script>
 
 <style lang="scss" scoped>
@@ -122,7 +131,6 @@
 	}
 
 	.hot-wrap {
-		margin: 0 20rpx 20rpx;
 		background: linear-gradient(#FFFFFF, rgba(255, 255, 255, 0));
 		padding: 2rpx;
 		border-radius: 16rpx;
@@ -134,6 +142,10 @@
 			height: 240rpx;
 			box-sizing: border-box;
 
+			&.hot-border {
+				background: none;
+				border: 2rpx solid #F3F3F3;
+			}
 			.hot-list {
 				.hot-panel {
 					width: 100%;
@@ -168,10 +180,10 @@
 
 								.price-text {
 									color: #FF7700;
-									font-size: 36rpx;
+									font-size: 32rpx;
 
 									.price-unit {
-										font-size: 23rpx;
+										font-size: 20rpx;
 									}
 								}
 
@@ -187,6 +199,12 @@
 						margin-left: 20rpx;
 					}
 				}
+				
+				::v-deep {
+					.u-scroll-list__indicator {
+						margin-top: 20rpx;
+					}
+				}
 			}
 		}
 	}

pages/tabBar/home/subPages/allGardenMap.vue

@@ -10,45 +10,69 @@
       @labeltap="onLabelTap"
       :markers="markers"
       :include-points="includePoints"
-	  :enable-satellite="true"
-	  theme="satellite"
       show-location
       style="width: 100%; height: 100vh;"
-    ></map>
+    >
+	 <custom-layer
+	      id="tdtLayer"
+	      width="350"
+	      height="800"
+	      is-transparent
+	      type="raster"
+	      :src="getTileUrl"
+	    ></custom-layer>
+	</map>
   </view>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
 
-const latitude = ref(26.870355)
-const longitude = ref(100.239704)
-// const latitude = ref(23.584863449735067)
-// const longitude = ref(113.61702297075017)
+const latitude = ref(23.584863449735067)
+const longitude = ref(113.61702297075017)
 
 const markers = ref([])
 const includePoints = ref([])
 const mapCtx = ref(null)
 const img = ref('../../../../static/map/point.png')
-const layers = [
-        {
-          // 添加腾讯地图默认底图（可选）
-          type: 'vector',
-          subdomains: ['0', '1', '2'],
-          url: 'https://{s}.map.qq.com/tile/{z}/{x}/{y}',
-          zIndex: 0,
-        },
-        {
-          // 叠加天地图影像（WMTS）
-          type: 'wmts',
-          layer: 'img',
-		  url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840&service=wmts&request=GetTile&version=1.0.0&layer=img&style=default&tilematrixset=c&format=tiles',
-          // url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840',
-          tileMatrixSet: 'c',
-          subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
-          zIndex: 1,
-        }
-      ]
+
+const TDT_KEY = 'e95115c454a663cd052d96019fd83840'
+
+const getTileUrl = ({ x, y, z }) => {
+  const s = Math.floor(Math.random() * 8) // 0-7
+  return `https://t1.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX=${z}&TILEROW=${y}&TILECOL=${x}&tk=${TDT_KEY}`
+}
+// const layers = [
+//         {
+//           // 添加腾讯地图默认底图（可选）
+//           type: 'vector',
+//           subdomains: ['0', '1', '2'],
+//           url: 'https://{s}.map.qq.com/tile/{z}/{x}/{y}',
+//           zIndex: 0,
+//         },
+//         {
+//           // 叠加天地图影像（WMTS）
+//           type: 'wmts',
+//           layer: 'img',
+// 		  url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840&service=wmts&request=GetTile&version=1.0.0&layer=img&style=default&tilematrixset=c&format=tiles',
+//           // url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840',
+//           tileMatrixSet: 'c',
+//           subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+//           zIndex: 1,
+//         }
+//       ]
+	  
+// 或者使用WMTS方式
+const layers = ref([
+  {
+    type: 'wmts',
+    layer: 'img',
+    url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840',
+    tileMatrixSet: 'c',
+    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+    zIndex: 99
+  }
+])
 
 onMounted(() => {
   // #ifdef MP-WEIXIN
@@ -63,6 +87,12 @@ onMounted(() => {
   
 })
 
+ function toPage(path) {
+	 uni.navigateTo({
+	 	url: `/pages/tabBar/home/subPages/${path}`
+	 });
+ }
+
 const bindEvent = () => {
   // #ifdef MP-WEIXIN
   mapCtx.value.initMarkerCluster({
@@ -107,56 +137,6 @@ const bindEvent = () => {
       }
     })
   })
-  // let xyz = "https://birdseye-img.sysuimars.com/map/lby/{z}/{x}/{y}.png";
-  //    mapCtx.value.addCustomLayer({
-  //      id: 'custom-tile-layer',
-  //      type: 'raster',
-  //      source: {
-  //        type: 'raster',
-  //        tiles: [xyz],  // 替换为你的瓦片 URL
-  //        tileSize: 256,
-  //      },
-  //      paint: {},
-	 //   zIndex: 99
-  //    });
-	 
-	 // const mapCtx2 = uni.createMapContext('mapId', this);
-	     const xyz = "https://birdseye-img.sysuimars.com/map/lby/z/x/y.png";
-		 const demoLayer = 'https://3gimg.qq.com/visual/lbs_gl_demo/image_tiles_layers/z/x_y.png'
-	     
-	   //   mapCtx.value.addCustomLayer({
-			 // layerId: 'cunstom',
-	   //     id: 'custom-tile-layer',
-	   //     type: 'raster',
-	   //     source: {
-	   //       type: 'raster',
-	   //       tiles: [demoLayer],
-	   //       tileSize: 256,
-	   //     },
-	   //     paint: {},
-	   //     success: (res) => console.log("图层添加成功", res),
-	   //     fail: (err) => console.error("图层添加失败", err)
-	   //   });
-		 
-		 
-		   mapCtx.value.addGroundOverlay({
-		     id: 'gaode-tiles',
-		     type: 'raster',
-		     source: {
-		       type: 'raster',
-		       tiles: [
-		         'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
-		       ],
-		       tileSize: 256,
-		     },
-		     paint: {},
-		     success: (res) => {
-		       console.log("高德瓦片加载成功");
-		     },
-		     fail: (err) => {
-		       console.error("加载失败", err);
-		     }
-		   });
   // #endif
 }
 
@@ -172,7 +152,7 @@ const addMarkers = () => {
       height: 30,
       borderWidth: 1,
       borderRadius: 4,
-      bgColor: '#FFCB3C88',
+      bgColor: '#FFCB3C',
 	  anchorX: -26,
 	  anchorY: -60,
       content: ''
@@ -227,6 +207,8 @@ const removeMarkers = () => {
 
 const onMarkerTap = (e) => {
   console.log('@@ markertap', e)
+  
+  toPage('gardenMap')
 }
 
 const onCalloutTap = (e) => {

pages/tabBar/home/subPages/gardenItem.vue

@@ -6,72 +6,228 @@
 					<up-search placeholder="搜索品种" v-model="typeSearch"></up-search>
 				</view>
 			</view>
-			<view class="tips">
-				下拉查看溯源报告
+			<view class="tips" v-show="panelHeight!==50">
+				<view class="tips-content">
+					<view class="line-l"></view>
+					<image class="down-icon" src="/static/home/down-icon.png" mode=""></image>
+					下拉查看溯源报告
+					<view class="line-r"></view>
+				</view>
 			</view>
 			<view class="swipe-item">
 				<video class="video-wrap" src="https://birdseye-img.sysuimars.com/temp/5-25lby.mp4" controls></video>
 			</view>
 		</view>
-		<l-floating-panel v-model:height="panelHeight" :anchors="anchors" :defaultAnchor="2">
-		  <view class="panel-content">
-			  <view class="panel-title">
-			  	<view class="title-l">
-			  		<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
-					<view class="title-info">
-						<view class="title-garden">
-							从化荔枝博览园
+		<l-floating-panel v-model:height="panelHeight" :anchors="anchors" :defaultAnchor="2" :content-draggable="false">
+			<view class="panel-content" ref="scrollViewRef">
+				<view class="panel-title">
+					<view class="title-l">
+						<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
+						<view class="title-info">
+							<view class="title-garden">
+								从化荔枝博览园
+							</view>
+							<view class="btn-second">
+								有味指数
+								<text>4.5分</text>
+							</view>
+						</view>
+					</view>
+					<view class="title-r">
+						+
+						<text class="add-text">关注</text>
+					</view>
+				</view>
+				<view class="garden-home" v-show="activeMenu === 0">
+					<view class="panel-video">
+						<video class="video-dom" src="https://birdseye-img.sysuimars.com/temp/5-25lby.mp4" controls></video>
+					</view>
+					<!-- 果园热卖 -->
+					<hot-component-vue :isGardeItem="true"></hot-component-vue>
+					<view class="garden-detail">
+						<view class="detial-item">
+							<view class="sub-title">
+								<view class="line-l"></view>
+								<view class="title-text">
+									果园生态
+								</view>
+								<view class="line-r"></view>
+							</view>
+							<view class="detail-img">
+								<up-image class="img-dom" radius="8" src="/static/home/fruit-3.png"  mode="widthFix"></up-image>
+							</view>
+						</view>
+						<view class="detial-item">
+							<view class="sub-title">
+								<view class="line-l"></view>
+								<view class="title-text">
+									果园生态
+								</view>
+								<view class="line-r"></view>
+							</view>
+							<view class="detail-img">
+								<up-image class="img-dom" radius="8" src="/static/home/fruit.png"  mode="widthFix"></up-image>
+							</view>
+						</view>
+						<view class="detial-item">
+							<view class="sub-title">
+								<view class="line-l"></view>
+								<view class="title-text">
+									果园生态
+								</view>
+								<view class="line-r"></view>
+							</view>
+							<view class="detail-img">
+								<up-image class="img-dom" radius="8" src="/static/home/fruit-2.png"  mode="widthFix"></up-image>
+							</view>
 						</view>
-						<view class="btn-second">
-							有味指数
-							<text>4.5分</text>
+					</view>
+				</view>
+				
+				<!-- 好味 -->
+				<!-- 列表 -->
+				<view class="discover-content" v-show="activeMenu === 1">
+					<view class="discover-filter">
+						<view class="filter-item" :class="{'active': filterIndex === 0}" @click="selectFilter(0)">
+							综合
+						</view>
+						<view class="filter-item" :class="{'active': filterIndex === 1}" @click="selectFilter(1)">
+							价格
+						</view>
+						<view class="filter-item" :class="{'active': filterIndex === 2}" @click="selectFilter(2)">
+							销量
+						</view>
+					</view>
+				
+					<view class="discover-list">
+						<view class="list-line">
+							<view class="list-item" v-for="(item, index) in discoverData" :key="index">
+								<image class="item-img" :src="item.img" mode=""></image>
+								<view class="item-desc">
+									<view class="item-text">
+										{{item.name}}
+									</view>
+									<view class="item-subtext">
+										<text class="subtext-text">坏单包退</text>
+										<text class="subtext-text">包邮</text>
+									</view>
+									
+									<view class="info-price">
+										<view class="price-text">
+											<text class="price-unit">￥</text>{{item.price}}
+										</view>
+										<view class="info-sold">
+											已售{{item.sold}}
+										</view>
+									</view>
+								</view>
+							</view>
 						</view>
 					</view>
-			  	</view>
-				<view class="title-r">
-					+
-					<text class="add-text">关注</text>
 				</view>
-			  </view>
-			  <view class="panel-video">
-			  	<video class="video-dom" src="https://birdseye-img.sysuimars.com/temp/5-25lby.mp4" controls></video>
-			  </view>
-			  <hot-component-vue></hot-component-vue>
-		  </view>
+			</view>
+
+			<view class="bottom-menu">
+				<view class="menu-item" :class="{'active': activeMenu === 0}" @click="changeMenu(0)">
+					首页
+				</view>
+				<view class="menu-item" :class="{'active': activeMenu === 1}" @click="changeMenu(1)">
+					好味
+				</view>
+			</view>
 		</l-floating-panel>
 	</view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import config from "@/api/config.js"
-import hotComponentVue from '../hotComponent.vue'
+	import {
+		nextTick,
+		ref
+	} from 'vue'
+	import config from "@/api/config.js"
+	import hotComponentVue from '../hotComponent.vue'
+
+
+	const typeSearch = ref(null)
 
+	const {
+		windowHeight
+	} = uni.getSystemInfoSync()
+	const anchors = [
+		50,
+		Math.round(0.5 * windowHeight),
+		Math.round(0.86 * windowHeight),
+	];
+	const panelHeight = ref(anchors[2]);
 
-const typeSearch = ref(null)
+	const myVideo = ref(null);
+	const onVideoReady = () => {
+		myVideo.value.play();
+	};
 	
-	 const {windowHeight} = uni.getSystemInfoSync()
-	    const anchors = [
-	            50,
-	            Math.round(0.5 * windowHeight),
-	            Math.round(0.95 * windowHeight),
-	    ];
-	    const panelHeight = ref(anchors[2]);
-		
-		const myVideo = ref(null);
-		const onVideoReady = () => {
-		    myVideo.value.play();
-		};
+	const activeMenu = ref(0)
+	const scrollViewRef = ref(null)
+	function changeMenu(i) {
+		activeMenu.value = i
+		nextTick(() => { 
+		     scrollViewRef.value.scrollTo({
+		          top: 0,
+		          duration: 300 // 动画时间（ms）
+		        });
+		});
+	}
+	
+	// 好味
+	
+	const filterIndex = ref(0)
+	const activeType = ref(0)
+	
+	const discoverData = ref([
+		{
+			name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
+			img: "/static/home/fruit.png",
+			text: "",
+			price: '107',
+			sold: "1250"
+		},
+		{
+			name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
+			img: "/static/home/fruit.png",
+			text: "",
+			price: '107',
+			sold: "1250"
+		},
+		{
+			name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
+			img: "/static/home/fruit.png",
+			text: "",
+			price: '107',
+			sold: "1250"
+		},
+		{
+			name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
+			img: "/static/home/fruit.png",
+			text: "",
+			price: '107',
+			sold: "1250"
+		}
+	])
+	
+	function selectFilter(i) {
+		filterIndex.value = i
+	}
 </script>
 
 <style lang="scss" scoped>
 	.garden-item-page {
 		width: 100%;
 		height: 100vh;
+
 		.report-content {
 			width: 100%;
 			height: calc(100% - 140rpx);
 			position: relative;
+
 			.home-search {
 				position: absolute;
 				z-index: 2;
@@ -84,21 +240,26 @@ const typeSearch = ref(null)
 				border-radius: 40rpx;
 				margin-bottom: 40rpx;
 				background-color: rgba(0, 0, 0, 0.31);
+
 				.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;
-									
+
 								}
 							}
+
 							.uni-input-input {
 								color: rgba(255, 255, 255, 0.8);
 							}
+
 							.u-search__action {
 								text-align: center;
 								line-height: 52rpx;
@@ -114,6 +275,7 @@ const typeSearch = ref(null)
 					}
 				}
 			}
+
 			.tips {
 				position: absolute;
 				z-index: 2;
@@ -123,42 +285,85 @@ const typeSearch = ref(null)
 				font-size: 24rpx;
 				width: 100%;
 				text-align: center;
+
+				.tips-content {
+					position: relative;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					.down-icon {
+						width: 14rpx;
+						height: 14rpx;
+						padding-right: 20rpx;
+					}
+
+					.line-l {
+						width: 208rpx;
+						height: 2rpx;
+						background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
+						margin-right: 20rpx;
+					}
+
+					.line-r {
+						margin-left: 20rpx;
+						width: 208rpx;
+						height: 2rpx;
+						background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
+					}
+				}
 			}
+
 			.swipe-item {
 				width: 100%;
 				height: 100%;
+
 				.video-wrap {
 					width: 100%;
 					height: 100%;
-					object-fit: contain;
+					object-fit: cover;
+				}
+
+				::v-deep {
+					.uni-video-video {
+						object-fit: cover !important;
+					}
 				}
 			}
 		}
 	}
-	
+
 	.panel-content {
-		padding: 24rpx;
+		padding: 0 24rpx 24rpx;
+		height: calc(100vh - 420rpx);
+		overflow: auto;
+
 		.panel-title {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
+
 			.title-l {
 				flex: 1;
 				display: flex;
 				align-items: center;
+
 				.garden-img {
 					width: 100rpx;
 					height: 100rpx;
 					border-radius: 10rpx;
 				}
+
 				.title-info {
 					padding-left: 20rpx;
+
 					.title-garden {
 						color: #000000;
 						font-size: 28rpx;
 						font-weight: 600;
 						padding-bottom: 10rpx;
 					}
+
 					.btn-second {
 						padding: 0 30rpx;
 						border-radius: 40rpx;
@@ -170,23 +375,26 @@ const typeSearch = ref(null)
 					}
 				}
 			}
+
 			.title-r {
 				display: flex;
 				font-size: 24rpx;
 				padding: 8rpx 22rpx;
 				background: #FFD95E;
 				border-radius: 30rpx;
+
 				.add-text {
 					padding-left: 6rpx;
 					font-weight: 600;
 				}
 			}
 		}
-		
+
 		.panel-video {
 			padding: 20rpx 0;
 			height: 300rpx;
 			width: 100%;
+
 			.video-dom {
 				width: 100%;
 				height: 100%;
@@ -194,6 +402,161 @@ const typeSearch = ref(null)
 				border-radius: 10rpx;
 			}
 		}
+
+		.discover-content {
+		
+			.discover-filter {
+				color: #A6A6A6;
+				font-size: 28rpx;
+				display: flex;
+				align-items: center;
+		
+				.filter-item {
+					padding: 12rpx 20rpx;
+		
+					&.active {
+						color: #000000;
+					}
+				}
+			}
+			.discover-list {
+				padding-top: 20rpx;
+				.list-line {
+					padding-bottom: 20rpx;
+					display: flex;
+					flex-wrap: wrap;
+					.list-item {
+						background-color: #FFFFFF;
+						border-radius: 10rpx;
+						width: calc(50% - 16rpx);
+						margin-bottom: 20rpx;
+						border: 2rpx solid rgba(0, 0, 0, 0.1);
+						.item-img {
+							width: 100%;
+							height: 340rpx;
+							object-fit: cover;
+							border-radius: 10rpx 10rpx 0 0;
+						}
+						.item-desc {
+							padding: 0 10rpx 10rpx;
+							.item-text {
+								width: calc(100% - 22rpx);
+								overflow: hidden;
+								text-overflow: ellipsis;
+								color: #000000;
+								font-size: 28rpx;
+								line-height: 42rpx;
+								font-weight: 600;
+								white-space: nowrap;
+							}
+							.item-subtext {
+								color: #AFAFAF;
+								font-size: 24rpx;
+								line-height: 36rpx;
+								.subtext-text + .subtext-text {
+									padding-left: 10rpx;
+								}
+							}
+							
+							.info-price {
+								display: flex;
+								align-items: baseline;
+								justify-content: space-between;
+								.price-text {
+									color: #FF7700;
+									font-size: 36rpx;
+									.price-unit {
+										font-size: 23rpx;
+									}
+								}
+								.info-sold {
+									font-size: 20rpx;
+									color: #C4C4C4;
+								}
+							}
+						}
+					}
+					.list-item:nth-child(2n) {
+						margin-left: 20rpx;
+					}
+				}
+			}
+		}
+
+		.garden-detail {
+			padding: 20rpx 0;
+
+			.detial-item {
+				padding-bottom: 20rpx;
+
+				.sub-title {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					padding-bottom: 20rpx;
+
+					.line-l {
+						width: 120rpx;
+						height: 2rpx;
+						background: linear-gradient(90deg, rgba(102, 102, 102, 0), rgba(0, 0, 0, 0.5));
+						margin-right: 20rpx;
+					}
+
+					.line-r {
+						width: 120rpx;
+						height: 2rpx;
+						background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(102, 102, 102, 0));
+						margin-left: 20rpx;
+					}
+
+					.title-text {
+						font-size: 32rpx;
+						font-family: "PangMenZhengDao";
+						color: #000;
+					}
+				}
+
+				.detail-img {
+					padding: 0 20rpx;
+					text-align: center;
+
+					.img-dom {
+						margin: 0 auto;
+					}
+				}
+			}
+		}
+	}
+	
+	.bottom-menu {
+		position: fixed;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #FFFFFF;
+		width: 100%;
+		height: 100rpx;
+		.menu-item {
+			padding: 0 72rpx;
+			position: relative;
+			color: #898989;
+			font-size: 32rpx;
+			&.active {
+				color: #000000;
+				font-weight: 600;
+			}
+		}
+		.menu-item + .menu-item {
+			&::before {
+				content: "";
+				position: absolute;
+				left: 0%;
+				top: 16rpx;
+				background-color: rgba(0, 0, 0, 0.42);
+				width: 2rpx;
+				height: 20rpx;
+			}
+		}
 	}
-	       
-</style>
+</style>

pages/tabBar/home/subPages/gardenMap.vue

@@ -0,0 +1,325 @@
+<template>
+  <view class="garden-page">
+    <map
+      id="mapId"
+      :latitude="latitude"
+      :longitude="longitude"
+	  :layers="layers"
+      @markertap="onMarkerTap"
+      @callouttap="onCalloutTap"
+      @labeltap="onLabelTap"
+      :markers="markers"
+      :include-points="includePoints"
+	  :enable-satellite="true"
+      show-location
+      style="width: 100%; height: 100vh;"
+    ></map>
+	
+	<view class="top-mask"></view>
+	
+	<view class="garden-info">
+		<view class="panel-title">
+			<view class="title-l">
+				<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
+				<view class="title-info">
+					<view class="title-garden">
+						从化荔枝博览园
+					</view>
+					<view class="btn-second">
+						有味指数
+						<text>4.5分</text>
+					</view>
+				</view>
+			</view>
+			<view class="title-r">
+				<text class="add-text">进店</text>
+			</view>
+		</view>
+	</view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+	import config from "@/api/config.js"
+
+const latitude = ref(23.584863449735067)
+const longitude = ref(113.61702297075017)
+
+const markers = ref([])
+const includePoints = ref([])
+const mapCtx = ref(null)
+const img = ref('../../../../static/map/tree.png')
+// const layers = [
+//         {
+//           // 添加腾讯地图默认底图（可选）
+//           type: 'vector',
+//           subdomains: ['0', '1', '2'],
+//           url: 'https://{s}.map.qq.com/tile/{z}/{x}/{y}',
+//           zIndex: 0,
+//         },
+//         {
+//           // 叠加天地图影像（WMTS）
+//           type: 'wmts',
+//           layer: 'img',
+// 		  url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840&service=wmts&request=GetTile&version=1.0.0&layer=img&style=default&tilematrixset=c&format=tiles',
+//           // url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840',
+//           tileMatrixSet: 'c',
+//           subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+//           zIndex: 1,
+//         }
+//       ]
+	  
+	  const tiandituKey = 'e95115c454a663cd052d96019fd83840'
+const layers = ref([
+  {
+    // 腾讯地图矢量底图
+    type: 'vector',
+    subdomains: ['0', '1', '2'],
+    url: 'https://{s}.map.qq.com/tile/{z}/{x}/{y}',
+    zIndex: 0
+  },
+  {
+    // 天地图影像底图
+    type: 'raster',
+    tileSize: 256,
+    tiles: [
+      `https://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+      `https://t1.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+      `https://t2.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+      `https://t3.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+      `https://t4.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+      `https://t5.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+      `https://t6.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+      `https://t7.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`
+    ],
+    zIndex: 1
+  }
+])
+
+onMounted(() => {
+  // #ifdef MP-WEIXIN
+  mapCtx.value = uni.createMapContext('mapId')
+  mapCtx.value.on('markerClusterClick', res => {
+    console.log('markerClusterClick', res)
+  })
+  
+  setTimeout(() => {
+      mapCtx.value.getMapProperties({
+        success: (res) => {
+          console.log('地图属性:', res)
+        }
+      })
+    }, 1000)
+  
+  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,
+		  color: "#fff",
+          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: 40,
+    height: 40,
+    joinCluster: true, // 指定了该参数才会参与聚合
+    label: {
+      // width: 50,
+      height: 30,
+	  color: "#fff",
+      // borderWidth: 1,
+      // borderRadius: 4,
+      // bgColor: '#FFCB3C',
+	  anchorX: -26,
+	  anchorY: -60,
+      content: ''
+    }
+  }
+
+  const positions = [
+    { latitude: 23.584863449735067, longitude: 113.61702297075017},
+    { 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>
+	.garden-page {
+		height: 100vh;
+		width: 100%;
+		position: relative;
+		
+		.top-mask {
+			position: absolute;
+			z-index: 1;
+			top: 0%;
+			left: 0%;
+			width: 100%;
+			height: 464rpx;
+			pointer-events: none;
+			background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
+		}
+		.garden-info {
+			position: absolute;
+			z-index: 2;
+			top: 0%;
+			left: 0%;
+			width: 100%;
+			.panel-title {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 24rpx;
+			
+				.title-l {
+					flex: 1;
+					display: flex;
+					align-items: center;
+			
+					.garden-img {
+						width: 100rpx;
+						height: 100rpx;
+						border-radius: 10rpx;
+					}
+			
+					.title-info {
+						padding-left: 20rpx;
+			
+						.title-garden {
+							color: #fff;
+							font-size: 28rpx;
+							font-weight: 600;
+							padding-bottom: 10rpx;
+						}
+			
+						.btn-second {
+							padding: 0 30rpx;
+							border-radius: 40rpx;
+							font-size: 24rpx;
+							color: #F3C11D;
+							border: 2rpx solid #F3C11D;
+							background: rgba(255, 217, 94, 0.28);
+							height: 42rpx;
+							line-height: 40rpx;
+						}
+					}
+				}
+			
+				.title-r {
+					display: flex;
+					font-size: 24rpx;
+					padding: 8rpx 22rpx;
+					background: #FFFFFF;
+					border-radius: 30rpx;
+			
+					.add-text {
+						padding-left: 6rpx;
+						font-weight: 600;
+					}
+				}
+			}
+		}
+	}
+</style>