地图主题色修改，地图打点

pages/6170/deviceControl/index.vue

@@ -158,7 +158,7 @@
 				</view>
 			</view>
 			<!-- 弹框 -->
-			<view class="agreement-mask" v-if="lightModeA">
+			<view class="agreement-mask" v-if="lightModeA" @click="closePopup">
 				<!-- 灯光模式弹窗 -->
 				<view class="agreement-popup" @click.stop>
 					<!-- 标题 -->
@@ -178,7 +178,7 @@
 				</view>
 			</view>
 			<!-- 上传开机画面弹框 -->
-			<view class="agreement-mask" v-if="lightModeB">
+			<view class="agreement-mask" v-if="lightModeB" @click="closePopup">
 				<!-- 上传画面弹窗 -->
 				<view class="agreement-popupB">
 					<!-- 标题 -->
@@ -204,7 +204,7 @@
 				</view>
 			</view>
 			<!--===================== 激光提示框================== -->
-			<view class="agreement-mask" v-if="lightModeC">
+			<view class="agreement-mask" v-if="lightModeC" @click="closePopup">
 				<!-- 上传画面弹窗 -->
 				<view class="agreement-popupC">
 					<!-- 标题 -->
@@ -297,6 +297,12 @@
 			}
 		},
 		methods: {
+			// 点击弹框外的区域关闭
+			closePopup() {
+				this.lightModeA = false;
+				this.lightModeB = false;
+				this.lightModeC = false;
+			},
 			// *******定位******
 			gpsPosition() {
 				uni.navigateTo({
@@ -410,6 +416,13 @@
 			},
 			// 上传开机画面确认按键
 			handleupload() {
+				if (!this.selectedImage) {
+					uni.showToast({
+						title: '请上传一张图片',
+						icon: 'none'
+					});
+					return;
+				}
 				uni.uploadFile({
 					url: baseURL + '/app/device/uploadLogo',
 					filePath: this.selectedImage,
@@ -430,7 +443,8 @@
 									title: responseData.msg,
 									icon: 'success'
 								});
-								this.selectedImage=''
+								this.selectedImage = '';
+								this.file = null;
 								this.lightModeB = false
 							} else {
 								uni.showToast({

pages/common/index/index.vue

@@ -17,7 +17,7 @@
 				</view>
 			</scroll-view>
 			<view class="sendFlex" v-if="activeTab && activeTab.id !== ''&& activeTabInfo.communicationMode==0">
-				<view class="callpolice">报警</view>
+				<!-- <view class="callpolice">报警</view> -->
 				<view class="Sendmessage" @click="location">位置</view>
 				<view class="Sendmessage" @click="handleSend">发送信息</view>
 			</view>

pages/common/map/index.vue

@@ -1,7 +1,12 @@
 <template>
-	<view class="page-section page-section-gap">
+  <view class="map-container">
-		<map class="map" :latitude="latitude" :longitude="longitude":show-location="true">
+    <!-- 背景保护层 -->
-		</map>
+    <view class="map-background"></view>
+    <view id="mapWrapper" ref="mapRef" class="map-wrapper"></view>
+    <!-- 加载提示 -->
+    <view v-if="loading" class="loading-mask">
+      <view class="loading-content">地图加载中...</view>
+    </view>
   </view>
 </template>
 
@@ -9,28 +14,223 @@
 export default {
   data() {
     return {
-				id: 0, // 使用 marker点击事件 需要填写id
+      loading: true
-				title: 'map',
-				latitude: 39.909,
-				longitude: 116.39742,
-				covers: [{
-					latitude: 39.909,
-					longitude: 116.39742,
-
-				}],
-			
     }
   },
   methods: {
-
+    hideLoading() {
+      this.loading = false
+    }
   }
 }
 </script>
 
+<script module="amap" lang="renderjs">
+export default {
+  data() {
+    return {
+      markers: [],
+      customPopup: null
+    }
+  },
+  mounted() {
+    // 初始设置背景色
+    const container = document.getElementById('mapWrapper')
+    container.style.backgroundColor = '#121212'
+    container.style.transition = 'background 0.5s'
+    
+    this.initMap()
+  },
+  methods: {
+    async loadScript(url) {
+      return new Promise((resolve) => {
+        const script = document.createElement('script')
+        script.src = url
+        script.onload = resolve
+        document.head.appendChild(script)
+      })
+    },
+
+    async initMap() {
+      try {
+        // 动态加载SDK
+        if (!window.AMap) {
+          await this.loadScript(
+            'https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307'
+          )
+        }
+
+        const container = document.getElementById('mapWrapper')
+        container.innerHTML = `
+          <div id="amapContainer" style="
+            width:100%;
+            height:100%;
+            opacity:0;
+            transition:opacity 0.8s ease-out;
+            background:#121212;
+          "></div>
+        `
+
+        // 初始化地图
+        this.map = new AMap.Map('amapContainer', {
+          viewMode: '3D',
+          zoom: 13,
+          center: [114.305, 30.592],
+          mapStyle: 'amap://styles/grey'
+        })
+
+        // 地图加载完成后淡入
+        this.map.on('complete', () => {
+          document.getElementById('amapContainer').style.opacity = 1
+          this.$ownerInstance.callMethod('hideLoading')
+          
+          // 添加标记点
+          const wuhanPoints = [
+            { lnglat: [114.404, 30.507], name: "华中科技大学" },
+            { lnglat: [114.428, 30.476], name: "光谷金融港" },
+            { lnglat: [114.433, 30.504], name: "武汉东站" }
+          ]
+          wuhanPoints.forEach(point => {
+            this.addMarker(point.lnglat, point.name)
+          })
+        })
+
+        // 创建自定义弹窗
+        this.createCustomPopup()
+
+      } catch (e) {
+        console.error('初始化失败:', e)
+        this.$ownerInstance.callMethod('hideLoading')
+      }
+    },
+
+    createCustomPopup() {
+      this.customPopup = document.createElement('div')
+      this.customPopup.className = 'custom-map-popup'
+      this.customPopup.innerHTML = `
+        <div class="popup-content">
+          <div class="popup-title"></div>
+        </div>
+      `
+      this.customPopup.style.display = 'none'
+      document.getElementById('amapContainer').appendChild(this.customPopup)
+    },
+
+    addMarker(position, title) {
+      const marker = new AMap.Marker({
+        position: new AMap.LngLat(...position),
+        map: this.map,
+        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+      })
+      
+      marker.on('click', () => {
+        this.showCustomPopup(position, title)
+      })
+      
+      this.markers.push(marker)
+      return marker
+    },
+
+    showCustomPopup(position, title) {
+      const pixel = this.map.lngLatToContainer(position)
+      this.customPopup.querySelector('.popup-title').textContent = title
+      this.customPopup.style.display = 'block'
+      this.customPopup.style.left = `${pixel.x}px`
+      this.customPopup.style.top = `${pixel.y}px`
+      
+      this.map.on('click', this.hideCustomPopup)
+    },
+
+    hideCustomPopup() {
+      if (this.customPopup) {
+        this.customPopup.style.display = 'none'
+      }
+      this.map.off('click', this.hideCustomPopup)
+    }
+  }
+}
+</script>
 
 <style>
-	.map {
+/* 基础样式 */
+.map-container {
   width: 100%;
   height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.map-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #121212;
+  z-index: 1;
+}
+
+.map-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 2;
+}
+
+/* 加载提示 */
+.loading-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #121212;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.loading-content {
+  color: rgba(255,255,255,0.9);
+  font-size: 16px;
+  padding: 12px 24px;
+  background: rgba(0,0,0,0.7);
+  border-radius: 8px;
+}
+
+/* 弹窗样式 */
+.custom-map-popup {
+  position: absolute;
+  z-index: 9999;
+  transform: translate(-50%, -100%);
+  min-width: 200rpx;
+  pointer-events: none;
+  animation: popupFadeIn 0.3s ease-out;
+}
+
+.popup-content {
+  background: rgba(18,45,74,0.95);
+  border-radius: 16rpx;
+  padding: 12rpx 24rpx;
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+
+.popup-content:after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 8px 8px 0;
+  border-style: solid;
+  border-color: rgba(18,45,74,0.95) transparent transparent;
+}
+
+@keyframes popupFadeIn {
+  from { opacity: 0; transform: translate(-50%, -90%); }
+  to { opacity: 1; transform: translate(-50%, -100%); }
 }
 </style>