Initial commit: GamePortrait 竖屏版 - 深色豪华主题

src/components/aPlayer.vue

@@ -0,0 +1,181 @@
+<template>
+  <div id="aPlayer"></div>
+</template>
+<script>
+/* eslint-disable */
+import APlayer from "aplayer"
+import { nextTick, onMounted, computed, watch } from "vue"
+import { getAppMusic } from "@/utils/api"
+import { useStore } from "vuex"
+export default {
+  name: "confirmBet",
+  components: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => ({
+        show: false
+      })
+    }
+  },
+  setup() {
+    const store = useStore()
+    const musicVolume = computed(() => store.state.config.musicVolume)
+    const volume = computed(() => store.state.config.volume)
+    let player = null
+    onMounted(() => {
+      nextTick(() => {
+        // const list = [
+        //   {
+        //     name: "We Can’t Stop", //歌名
+        //     artist: "Miley Cyrus - Berlin Tag Und Nacht Vol.4", //歌手
+        //     url: require("../assets/mp3/2023520.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/2023520.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Peter Pan Was Right", //歌名
+        //     artist: "Anson Seabra - Peter Pan Was Right", //歌手
+        //     url: require("../assets/mp3/4138042894.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/4138042894.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Shape of You", //歌名
+        //     artist: "Ed Sheeran - Shape of You", //歌手
+        //     url: require("../assets/mp3/3197545262.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/3197545262.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Unstoppable", //歌名
+        //     artist: "Sia - This Is Acting (Deluxe Version)", //歌手
+        //     url: require("../assets/mp3/6005971CUY6.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/6005971CUY6.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Bones", //歌名
+        //     artist: "Imagine Dragons - Bones", //歌手
+        //     url: require("../assets/mp3/680637476.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/680637476.webp"), //音乐封面地址
+        //     lrc: ""
+        //   },
+        //   {
+        //     name: "Someone Like You", //歌名
+        //     artist: "Adele - 21 (Explicit)", //歌手
+        //     url: require("../assets/mp3/2591806824.mp3"), //音频文件地址
+        //     cover: require("../assets/mp3/cover/2591806824.webp"), //音乐封面地址
+        //     lrc: ""
+        //   }
+        // ]
+
+        // 音乐文件
+        getAppMusic("/music.json")
+          .then((res) => {
+            if (res.list && res.list.length > 0) {
+              init(res.list)
+            } else {
+              console.warn("音乐列表文件不存在")
+            }
+          })
+          .catch((err) => {
+            console.log(err)
+          })
+      })
+    })
+    const init = (list) => {
+      player = new APlayer({
+        container: document.getElementById("aPlayer"),
+        mini: false,
+        audio: list,
+        listFolded: false,
+        listMaxHeight: "8rem"
+      })
+      store.commit("app/musicPlayer", player)
+      player.on("play", function () {
+        if (musicVolume.value == false) {
+          store.commit("config/setValue", {
+            name: "musicVolume",
+            type: true
+          })
+        }
+      })
+      player.on("pause", function () {
+        if (musicVolume.value == true) {
+          // console.log("pause")
+          store.commit("config/setValue", {
+            name: "musicVolume",
+            type: false
+          })
+        }
+      })
+      player.pause()
+      player.play()
+    }
+    watch(
+      () => [musicVolume.value],
+      ([type]) => {
+        if (player) {
+          nextTick(() => {
+            if (type) {
+              player.volume(volume.value.music / 100, true)
+              player.play()
+            } else {
+              player.volume(volume.value.music / 100, false)
+              player.pause()
+            }
+          })
+        }
+      },
+      { deep: true }
+    )
+    watch(
+      () => [volume.value.music],
+      ([value]) => {
+        if (player) {
+          nextTick(() => {
+            player.volume(value / 100, true)
+          })
+        }
+      },
+      { immediate: true, deep: true }
+    )
+  }
+}
+</script>
+<style lang="scss">
+@import "APlayer/dist/APlayer.min";
+.aplayer {
+  transform: rotateX(0deg);
+}
+.aplayer .aplayer-icon {
+  width: 22px;
+  height: 22px;
+  margin: 0 4px;
+}
+.aplayer-controller {
+  align-items: center;
+}
+.aplayer.aplayer-arrow .aplayer-icon-loop,
+.aplayer.aplayer-arrow .aplayer-icon-order {
+  display: inline-block;
+}
+.aplayer .aplayer-icon-volume-down {
+  display: none;
+}
+.aplayer .aplayer-info .aplayer-music {
+  line-height: 20px;
+  display: flex;
+  margin-bottom: 10px;
+  width: calc(100% - 40px);
+  span:last-child {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .aplayer-title {
+    padding-right: 10px;
+  }
+}
+</style>