fix 细节调整

hookehuyr
Commit b7852e51e14cc889f3b7ece2c544639393073e6d b7852e51 1 parent 1cb18ec3
Showing 5 changed files with 116 additions and 16 deletions
.env
components.d.ts
src/views/fxPark/audio.vue
src/views/fxPark/index.vue
src/views/fxPark/intro.vue
--- a/.env
View file @b7852e5
+++ b/.env
View file @b7852e5
@@ -2,7 +2,7 @@
 VITE_PORT = 8006
 # 反向代理服务器地址
-VITE_PROXY_TARGET = http://voice.onwall.cn
+VITE_PROXY_TARGET = http://oa.allforlove.org.cn
 # API请求前缀
 VITE_PROXY_PREFIX = /srv/
--- a/components.d.ts
View file @b7852e5
+++ b/components.d.ts
View file @b7852e5
@@ -11,10 +11,12 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
+    VanCol: typeof import('vant/es')['Col']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
     VanLoading: typeof import('vant/es')['Loading']
+    VanRow: typeof import('vant/es')['Row']
     VanUploader: typeof import('vant/es')['Uploader']
   }
 }
--- a/src/views/fxPark/audio.vue
View file @b7852e5
+++ b/src/views/fxPark/audio.vue
View file @b7852e5
 <!--
  * @Date: 2024-04-10 15:08:08
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-10 15:54:46
+ * @LastEditTime: 2024-04-11 16:56:42
  * @FilePath: /fxPark/src/views/fxPark/audio.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="audio-page">
     <div class="audio-player">
-      <div style="margin-right: 1rem;">
+      <van-row justify="center" align="center">
-        <van-icon name="circle" size="5rem" />
+        <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>
+        </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>
       </div>
-      <div>
+      <div style="flex: 3;">
-        <div style="margin-bottom: 1rem;">微风轻轻吹树叶的声音</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 name="arrow-left" size="1.5rem" />
+          <van-icon @click="audioPrev" name="arrow-left" size="1.5rem" />
-          <van-icon name="play" size="1.5rem" @click="audioPlayer.play()" />
+          <van-icon v-if="audioStatus === 'pause'" name="play" size="1.5rem" @click="handelPlay" />
-          <van-icon name="pause" size="1.5rem" @click="audioPlayer.pause()" />
+          <van-icon v-if="audioStatus === 'play'" name="pause" size="1.5rem" @click="handlePause" />
-          <van-icon name="arrow" size="1.5rem" />
+          <van-icon @click="audioNext" name="arrow" size="1.5rem" />
         </div>
-      </div>
+      </div> -->
       <div>
-        <audio ref="audioPlayer" loop="loop" id="audios" src="https://m10.music.126.net/20240410161841/940e4a035f48a82b1b4d4b01b2e7b1f1/ymusic/5353/0f0f/0358/d99739615f8e5153d77042092f07fd77.mp3" preoload></audio>
+        <audio ref="audioPlayer" loop="loop" id="audios" :src="audio_list[audioIndex]['audio_url']" preoload></audio>
       </div>
     </div>
   </div>
@@ -40,6 +62,60 @@ const $router = useRouter();
 useTitle($route.meta.title);
 const audioPlayer = ref(null);
+const audioStatus = ref('pause');
+const audioIndex = ref(0);
+
+const handelPlay = () => {
+  audioPlayer.value.play();
+  audioStatus.value = 'play';
+};
+
+const handlePause = () => {
+  audioPlayer.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 = () => {
+  audioPlayer.value.currentTime = 0;
+  audioPlayer.value.play();
+  audioStatus.value = 'play';
+}
+
+const audioPrev = () => {
+  if (audioIndex.value > 0) {
+    audioIndex.value--;
+  } else {
+    audioIndex.value = audio_list.value.length - 1;
+  }
+  // 重新播放
+  nextTick(() => {
+    replay()
+  });
+};
+
+const audioNext = () => {
+  if (audioIndex.value < audio_list.value.length - 1) {
+    audioIndex.value++;
+  } else {
+    audioIndex.value = 0;
+  }
+  // 重新播放
+  nextTick(() => {
+    replay()
+  });
+};
 </script>
@@ -51,14 +127,29 @@ const audioPlayer = ref(null);
   display: flex;
   justify-content: center;
   .audio-player {
+    width: 75vw;
     border: 1px solid #fff;
     border-radius: 10px;
-    padding: 1rem 2rem 1rem 1rem;
+    padding: 1rem 1rem 1rem 1rem;
     position: absolute;
     top: 5rem;
     display: flex;
     justify-content: center;
     align-items: center;
+    .play {
+      animation: rotate 8s linear infinite;
+    }
+    .pause {
+    }
+
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
   }
 }
 </style>
--- a/src/views/fxPark/index.vue
View file @b7852e5
+++ b/src/views/fxPark/index.vue
View file @b7852e5
 <!--
  * @Date: 2024-04-07 10:15:55
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-11 15:38:58
+ * @LastEditTime: 2024-04-11 15:45:54
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @Description: 文件描述
 -->
@@ -9,7 +9,7 @@
   <div class="fxPark-page">
     <danmaku :text="add_text" />
     <div class="quick-entrance-wrapper">
-      <div class="quick-entrance-item" style="">
+      <div class="quick-entrance-item" @click="goToAudio">
         <van-icon name="chat-o" />&nbsp;&nbsp;<span>植物之声</span>
       </div>
     </div>
@@ -133,6 +133,10 @@ const onCancel = () => {
 const onShare = () => {
   go('/finish')
 }
+
+const goToAudio = () => {
+  go('/audio')
+}
 </script>
 <style lang="less" scoped>
--- a/src/views/fxPark/intro.vue
View file @b7852e5
+++ b/src/views/fxPark/intro.vue
View file @b7852e5
 <!--
  * @Date: 2024-04-10 16:08:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-10 17:24:25
+ * @LastEditTime: 2024-04-11 17:10:21
  * @FilePath: /fxPark/src/views/fxPark/intro.vue
  * @Description: 文件描述
 -->
@@ -54,6 +54,9 @@ const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+const id = $route.query.id;
+console.log("🚀 ~ file: intro.vue:58 ~ id:", id);
+
 </script>
 <style lang="less" scoped>