音频页面新增列表测试

 <!--
  * @Date: 2024-04-10 15:08:08
  * @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
  * @Description: 文件描述
 -->
 <template>
   <div class="audio-page">
-    <div class="audio-player">
-      <van-row justify="center" align="center">
-        <van-col span="8">
-          <div>
-            <div style="width: 5rem; height: 5rem; border-radius: 50%;">
-              <img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50"  style="width: 5rem; height: 5rem; border-radius: 50%;">
+    <div style="position: absolute; top: 5rem;">
+      <div class="audio-player">
+        <van-row align="center">
+          <van-col span="8">
+            <div>
+              <div style="width: 5rem; height: 5rem; border-radius: 50%;">
+                <img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50"  style="width: 5rem; height: 5rem; border-radius: 50%;">
+              </div>
             </div>
-          </div>
-        </van-col>
-        <van-col span="16">
-          <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;">
-              <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 === 'play'" name="pause" size="1.5rem" @click="handlePause" />
-              <van-icon @click="audioNext" name="arrow" size="1.5rem" />
+          </van-col>
+          <van-col span="16">
+            <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;">
+                <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 === 'play'" name="pause" size="1.5rem" @click="handlePause" />
+                <van-icon @click="audioNext" name="arrow" size="1.5rem" />
+              </div>
             </div>
+          </van-col>
+        </van-row>
+        <!-- <div style="margin-right: 1rem; flex: 1;">
+          <div style="width: 5rem; height: 5rem; border-radius: 50%;">
+            <img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50"  style="width: 5rem; height: 5rem; border-radius: 50%;">
           </div>
-        </van-col>
-      </van-row>
-      <!-- <div style="margin-right: 1rem; flex: 1;">
-        <div style="width: 5rem; height: 5rem; border-radius: 50%;">
-          <img :class="[audioStatus === 'play' ? 'play' : 'pause']" src="https://picsum.photos/50/50"  style="width: 5rem; height: 5rem; border-radius: 50%;">
         </div>
-      </div>
-      <div style="flex: 3;">
-        <div class="van-ellipsis" style="margin-bottom: 1rem; color: #fff;">{{ audio_list[audioIndex]['audio_name'] }}</div>
-        <div style="display: flex; justify-content: space-between;">
-          <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 === 'play'" name="pause" size="1.5rem" @click="handlePause" />
-          <van-icon @click="audioNext" name="arrow" size="1.5rem" />
+        <div style="flex: 3;">
+          <div class="van-ellipsis" style="margin-bottom: 1rem; color: #fff;">{{ audio_list[audioIndex]['audio_name'] }}</div>
+          <div style="display: flex; justify-content: space-between;">
+            <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 === 'play'" name="pause" size="1.5rem" @click="handlePause" />
+            <van-icon @click="audioNext" name="arrow" size="1.5rem" />
+          </div>
+        </div> -->
+        <div>
+          <audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]?.audio_url" preoload></audio>
         </div>
-      </div> -->
-      <div>
-        <audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]['audio_url']" preoload></audio>
+      </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>
@@ -57,10 +62,36 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
+import { getTreeAPI } from '@/api/carbon.js';
+
 const $route = useRoute();
 const $router = useRouter();
 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 audioStatus = ref('pause');
 const audioIndex = ref(0);
@@ -75,24 +106,19 @@ const handlePause = () => {
   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 = () => {
   audioPlayer.value.currentTime = 0;
   audioPlayer.value.play();
   audioStatus.value = 'play';
 }
 
+const audioPlay = (index) => {
+  audioIndex.value = index;
+  nextTick(() => {
+    replay()
+  });
+}
+
 const audioPrev = () => {
   if (audioIndex.value > 0) {
     audioIndex.value--;
@@ -126,16 +152,15 @@ const audioNext = () => {
   background-color: #47A3E4;
   display: flex;
   justify-content: center;
+  align-items: center;
   .audio-player {
     width: 75vw;
     border: 1px solid #fff;
     border-radius: 10px;
     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 {
       animation: rotate 8s linear infinite;
     }