音频页面新增列表测试

 <!--
 <!--
  * @Date: 2024-04-10 15:08:08
  * @Date: 2024-04-10 15:08:08
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-11 16:56:42
+ * @LastEditTime: 2024-04-12 13:13:50
  * @FilePath: /fxPark/src/views/fxPark/audio.vue
  * @FilePath: /fxPark/src/views/fxPark/audio.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
   <div class="audio-page">
   <div class="audio-page">
+    <div style="position: absolute; top: 5rem;">
       <div class="audio-player">
       <div class="audio-player">
-      <van-row justify="center" align="center">
+        <van-row align="center">
           <van-col span="8">
           <van-col span="8">
             <div>
             <div>
               <div style="width: 5rem; height: 5rem; border-radius: 50%;">
               <div style="width: 5rem; height: 5rem; border-radius: 50%;">
@@ -18,7 +19,7 @@
           </van-col>
           </van-col>
           <van-col span="16">
           <van-col span="16">
             <div>
             <div>
-            <div class="van-ellipsis" style="margin-bottom: 1rem; color: #fff;">{{ audio_list[audioIndex]['audio_name'] }}</div>
+              <div class="van-ellipsis" style="margin-bottom: 1rem; color: #fff;">{{ audio_list[audioIndex]?.audio_name }}</div>
               <div style="display: flex; justify-content: space-between;">
               <div style="display: flex; justify-content: space-between;">
                 <van-icon @click="audioPrev" name="arrow-left" size="1.5rem" />
                 <van-icon @click="audioPrev" name="arrow-left" size="1.5rem" />
                 <van-icon v-if="audioStatus === 'pause'" name="play" size="1.5rem" @click="handelPlay" />
                 <van-icon v-if="audioStatus === 'pause'" name="play" size="1.5rem" @click="handelPlay" />
@@ -43,7 +44,11 @@
           </div>
           </div>
         </div> -->
         </div> -->
         <div>
         <div>
-        <audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]['audio_url']" preoload></audio>
+          <audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preoload></audio>
+        </div>
+      </div>
+      <div style="width: 75vw; height: 15rem; border: 1px solid #fff;">
+        <div @click="audioPlay(index)" v-for="(item, index) in audio_list" :key="index">{{ item.audio_name }}</div>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -57,10 +62,36 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
 //import { } from '@/composables'
+import { getTreeAPI } from '@/api/carbon.js';
+
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 useTitle($route.meta.title);
 useTitle($route.meta.title);
 
 
+const audio_list = ref([]);
+
+onMounted(async () => {
+  const { code, data } = await getTreeAPI();
+  if (code) {
+    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,
+        });
+      }
+    })
+  }
+});
+
 const audioPlayer = ref(null);
 const audioPlayer = ref(null);
 const audioStatus = ref('pause');
 const audioStatus = ref('pause');
 const audioIndex = ref(0);
 const audioIndex = ref(0);
@@ -75,24 +106,19 @@ const handlePause = () => {
   audioStatus.value = 'pause';
   audioStatus.value = 'pause';
 };
 };
 
 
-const audio_list = ref([{
-  audio_url: 'http://downsc.chinaz.net/files/download/sound1/201206/1638.mp3',
-  audio_cover: '',
-  audio_name: '微风轻轻吹树叶的声音123467890',
-  audio_note: '',
-}, {
-  audio_url: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3',
-  audio_cover: '',
-  audio_name: '微风轻轻吹树叶的声音',
-  audio_note: '',
-}]);
-
 const replay = () => {
 const replay = () => {
   audioPlayer.value.currentTime = 0;
   audioPlayer.value.currentTime = 0;
   audioPlayer.value.play();
   audioPlayer.value.play();
   audioStatus.value = 'play';
   audioStatus.value = 'play';
 }
 }
 
 
+const audioPlay = (index) => {
+  audioIndex.value = index;
+  nextTick(() => {
+    replay()
+  });
+}
+
 const audioPrev = () => {
 const audioPrev = () => {
   if (audioIndex.value > 0) {
   if (audioIndex.value > 0) {
     audioIndex.value--;
     audioIndex.value--;
@@ -126,16 +152,15 @@ const audioNext = () => {
   background-color: #47A3E4;
   background-color: #47A3E4;
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
+  align-items: center;
   .audio-player {
   .audio-player {
     width: 75vw;
     width: 75vw;
     border: 1px solid #fff;
     border: 1px solid #fff;
     border-radius: 10px;
     border-radius: 10px;
     padding: 1rem 1rem 1rem 1rem;
     padding: 1rem 1rem 1rem 1rem;
-    position: absolute;
-    top: 5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
     .play {
     .play {
       animation: rotate 8s linear infinite;
       animation: rotate 8s linear infinite;
     }
     }