feats

src/components/CoverMap.vue

@@ -14,37 +14,21 @@
         <i class="iconfont icon-cc-pointer-right"></i>
       </div>
     </CoverBtn>
-    
-    <AudioVue :audio="scenicSpots.audio" ref="audioRef" @play="playing = true" @stop="playing = false" />
-
-    <div v-if="show" class="map-info-box" :class="{ show }" @click.stop="show = false">
-      <div class="map-info-container" @click.stop="">
-        <img class="thumb" :src="scenicSpots.thumb2" alt="">
-        <div class="head">
-          <div>{{ scenicSpots.name }}</div>
-          <div>
-            <span @click="onClickAudio">
-              <i class="iconfont icon-playcircle" v-if="!playing"></i>
-              <i class="iconfont icon-pausecircle" v-else></i>
-            </span>
-            <span @click="onClickLoc"><i class="iconfont icon-map"></i></span>            
-          </div>
-        </div>
-        <div class="body">{{ scenicSpots.desc }}</div>  
-      </div>      
-      <div class="action" @click.stop="show = false">
-        <i class="iconfont icon-roundclose"></i>
-      </div>
-    </div>
-  </div>
 
+    <InfoBox
+      :visible="show"
+      :resource="scenicSpots"
+      :thumb="scenicSpots.thumb2"
+      @close="show = false"
+    />
+  </div>
 </template>
 
 <script setup>
   import { ref } from 'vue';
   import { resources } from '@/utils/resources';
   import CoverBtn from './CoverBtn.vue';
-  import AudioVue from './Audio.vue';
+  import InfoBox from './InfoBox.vue';
 
   const posList = resources.filter(x => x.mapBtnPos);
   
@@ -55,8 +39,6 @@
   const show = ref(false);  
   const gestureHide = ref(false);
   const scenicSpots = ref({});
-  const audioRef = ref();
-  const playing = ref(false);
   const btnCenters = ref([]);
 
   const getGestureStyle = (width, height) => {
@@ -70,26 +52,6 @@
     scenicSpots.value = it;
     show.value = true;
     gestureHide.value = true;
-    stopAudio();
-  }
-  const onClickAudio = () => audioRef.value.toggle();
-  const stopAudio = () => {
-    if (playing.value) {
-      audioRef.value.toggle();
-      playing.value = false;
-    }
-  }
-  const onClickLoc = () => {
-    if (wx) {
-      wx.openLocation({
-        latitude: scenicSpots.value.mapPos[1], // 纬度，浮点数，范围为90 ~ -90
-        longitude: scenicSpots.value.mapPos[0], // 经度，浮点数，范围为180 ~ -180。
-        name: scenicSpots.value.name, // 位置名
-        address: '', // 地址详情说明
-        scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
-        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
-      });
-    }
   }
 
   const onLoad = e => {

src/components/InfoBox.vue

@@ -1,17 +1,104 @@
 <template>
   <OverLay :visible="visible" @close="emit('close')">
-    1234
+    <div class="info-container" @click.stop="">
+      <img class="thumb" :src="thumb" alt="">
+      <div class="head">
+        <div>{{ resource.name }}</div>
+        <div>
+          <span @click="onClickAudio">
+            <i class="iconfont icon-playcircle" v-if="!playing"></i>
+            <i class="iconfont icon-pausecircle" v-else></i>
+          </span>
+          <span @click="onClickLoc"><i class="iconfont icon-map"></i></span>            
+        </div>
+      </div>
+      <div class="body">{{ resource.desc }}</div>  
+    </div>
+    <AudioVue :audio="resource.audio" ref="audioRef" @play="playing = true" @stop="playing = false" />
   </OverLay>
 </template>
 
 <script setup>
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import OverLay from './OverLay.vue';
+  import AudioVue from './Audio.vue';
+
   
   const props = defineProps({
     visible: Boolean,
+    thumb: String,
+    resource: {
+      type: Object,
+      default: () => ({}),
+    }
   });
   
   const emit = defineEmits(['close']);
+
+  const audioRef = ref();
+  const playing = ref(false);
+
+  const onClickAudio = () => audioRef.value.toggle();
+  const stopAudio = () => {
+    if (playing.value) {
+      audioRef.value.toggle();
+      playing.value = false;
+    }
+  }
+  const onClickLoc = () => {
+    if (wx) {
+      wx.openLocation({
+        latitude: props.resource.mapPos[1], // 纬度，浮点数，范围为90 ~ -90
+        longitude: props.resource.mapPos[0], // 经度，浮点数，范围为180 ~ -180。
+        name: props.resource.name, // 位置名
+        address: '', // 地址详情说明
+        scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
+        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
+      });
+    }
+  }
+
+  watch(() => props.visible, (val) => {
+    if (val) {
+      stopAudio();
+    }
+  })
   
 </script>
+
+<style lang="less" scoped>
+  .info-container {
+    width: 60vw;
+    max-height: 60vh;
+    overflow-y: auto;
+
+    .thumb {
+          width: 100%;
+        }
+
+    .head {
+      box-sizing: border-box;
+      padding: 1em 0;
+      border-bottom: 1px solid #f5f5f5;
+      display: flex;
+      justify-content: space-between;
+
+      .iconfont {
+        display: inline-block;
+        font-size: 24px;
+        padding: 0 4px;
+      }
+
+      & > div {
+        flex: none;
+      }
+    }
+
+    .body {
+      box-sizing: border-box;
+      padding: 1em 0;
+      line-height: 1.6em;
+      text-indent: 2em;
+    }
+  }
+</style>

src/components/OverLay.vue

@@ -65,6 +65,7 @@
 
     &.hidden {
       opacity: 0;
+      visibility: hidden;
     }
 
     .mask {
@@ -94,8 +95,6 @@
         box-shadow:2px 2px 3px #aaaaaa;
         box-sizing: border-box;
         background: #fff;
-        overflow-y: auto;
-        overflow-x: hidden;
       }
 
       .close {

src/components/ScenicDetail.vue

@@ -5,7 +5,7 @@
     :height="height"
     @click="onShowInfoBtn"
   />
-  <PopUpVue :show="showInfo" :info="resource" :onClose="onCloseInfoBtn" />
+  <InfoBox :visible="showInfo" :resource="resource" :thumb="resource.thumb1" @close="showInfo = false" />
   <div v-if="resource.showGesture" class="gesture2" :class="{ hidden: gestureHide }" :style="gestureStyle">
     <i class="iconfont icon-cc-pointer-right"></i>
   </div>
@@ -14,7 +14,7 @@
 <script setup>  
   import { computed, ref, watch } from "vue";
   import CoverBtn from "./CoverBtn.vue";
-  import PopUpVue from "./PopUp.vue";
+  import InfoBox from './InfoBox.vue';
 
   const props = defineProps({
     center: Array,
@@ -45,9 +45,6 @@
     showInfo.value = true
   };
 
-  const onCloseInfoBtn = () => {
-    showInfo.value=false
-  };
 </script>
 
 <style lang="less" scoped>