植被介绍页新增音乐播放功能

 <!--
 <!--
  * @Date: 2024-04-10 16:08:09
  * @Date: 2024-04-10 16:08:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-14 17:29:50
+ * @LastEditTime: 2024-04-14 21:42:38
  * @FilePath: /fxPark/src/views/fxPark/intro.vue
  * @FilePath: /fxPark/src/views/fxPark/intro.vue
  * @Description: 植被介绍页
  * @Description: 植被介绍页
 -->
 -->
 <template>
 <template>
   <div class="intro-page">
   <div class="intro-page">
+    <div @click="handleAudio" style="width: 3rem; height: 3rem; border-radius: 50%; position: absolute; right: 10px; top: 10px;">
+      <img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50"  style="width: 3rem; height: 3rem; border-radius: 50%;">
+    </div>
+    <audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preload></audio>
     <div>
     <div>
       <img :src="INTRO_IMG[revision]" style="width: 100%; pointer-events:none;">
       <img :src="INTRO_IMG[revision]" style="width: 100%; pointer-events:none;">
     </div>
     </div>
+    <div style="margin: 1rem 1rem 2rem 1rem; color: white; text-align: center; position: absolute;bottom: 1rem; left: 0; right: 0;">
+      <div @click="goToPoster" style="background-color: #F68015; display: inline-block; padding: 0.7rem 2rem; border-radius: 1.5rem;">完成“碳寻”任务</div>
+    </div>
     <!-- <div style="margin: 1rem;">
     <!-- <div style="margin: 1rem;">
       <div style="margin-bottom: 1rem;">
       <div style="margin-bottom: 1rem;">
         <span style="font-size: 1.25rem;">{{ tree_data?.name }}</span>
         <span style="font-size: 1.25rem;">{{ tree_data?.name }}</span>
@@ -67,9 +74,32 @@ const INTRO_IMG = { // 植被介绍七牛图片地址映射
   '6': 'https://cdn.ipadbiz.cn/xfPark/intro/intro-1.1713086546.jpg',
   '6': 'https://cdn.ipadbiz.cn/xfPark/intro/intro-1.1713086546.jpg',
 }
 }
 
 
+const audioPlayer = ref(null);
+const audioStatus = ref('play');
+const audio_list = ref([]);
+const audioIndex = ref(+revision);
+
+const handelPlay = () => {
+  audioPlayer.value.play();
+  audioStatus.value = 'play';
+};
+
+const handlePause = () => {
+  audioPlayer.value.pause();
+  audioStatus.value = 'pause';
+};
+
+const handleAudio = () => {
+  if (audioStatus.value === 'play') {
+    handlePause();
+  } else {
+    handelPlay();
+  }
+};
+
 onMounted(async () => {
 onMounted(async () => {
-  // const { code, data } = await getTreeAPI();
-  // if (code) {
+  const { code, data } = await getTreeAPI();
+  if (code) {
     // let index = data.findIndex(item => item.revision == revision); // 植被信息index
     // let index = data.findIndex(item => item.revision == revision); // 植被信息index
     // tree_data.value = data[index]; // 当前植被信息
     // tree_data.value = data[index]; // 当前植被信息
     // // 植被介绍样式
     // // 植被介绍样式
@@ -79,7 +109,26 @@ onMounted(async () => {
     //     'marginBottom': '0.5rem'
     //     'marginBottom': '0.5rem'
     //   });
     //   });
     // })
     // })
-  // }
+    data.forEach(item => {
+      if (item.is_tree === 1) {
+        // audio_list.value.push({
+        //   audio_url: item.audio_url,
+        //   audio_cover: item.audio_cover,
+        //   audio_name: item.audio_name,
+        //   audio_note: item.audio_note,
+        // });
+        audio_list.value.push({
+          audio_url: 'http://downsc.chinaz.net/files/download/sound1/201206/1638.mp3',
+          audio_cover: 'https://picsum.photos/50/50',
+          audio_name: item.name + '123456789',
+          audio_note: item.audio_note,
+        });
+      }
+    });
+    nextTick(() => {
+      handelPlay();
+    })
+  }
   // 进入页面激活
   // 进入页面激活
   const activeTree = await activeTreeAPI({ tree_revision: revision });
   const activeTree = await activeTreeAPI({ tree_revision: revision });
   // 埋点
   // 埋点
@@ -103,10 +152,12 @@ const goToPoster = () => { // 去海报页
   });
   });
 };
 };
 
 
+
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
 .intro-page {
 .intro-page {
+  position: relative;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   .task-tips {
   .task-tips {
@@ -148,5 +199,20 @@ const goToPoster = () => { // 去海报页
       1px  1px 0 #000;
       1px  1px 0 #000;
     margin: 1rem 0;
     margin: 1rem 0;
   }
   }
+
+  .play {
+    animation: rotate 8s linear infinite;
+  }
+  .pause {
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 }
 }
 </style>
 </style>