src/components/mini/Aplayer.vue

@@ -1,23 +1,60 @@
<template>
   <div class="fade">
      <a-col v-bind="colMain">
         <aplayer :audio="audio" :autoplay="autoplay" fixed style="z-index: 10;" :volume="0.1" :preload="preload" />
         <div ref="myAplayerDiv" class="aplayer aplayer-narrow aplayer-fixed aplayer-arrow"
            style="z-index: 10;width: 300px;" @click="startPlay" v-if="!showMyHeart">
            <a-tooltip :title="tipContent" :visible="showTip" placement="right"
               :getPopupContainer="getPopupContainer">
               <div class="aplayer-body">
                  <div class="aplayer-pic"
                     style="background-image: url(&quot;http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130&quot;); background-color: rgb(183, 218, 255);">
                     <div class="aplayer-button aplayer-play"><svg xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 16 31" class="">
                           <path
                              d="M15.552 15.168q.448.32.448.832 0 .448-.448.768L1.856 25.28q-.768.512-1.312.192T0 24.192V7.744q0-.96.544-1.28t1.312.192z">
                           </path>
                        </svg></div>
                  </div>
               </div>
            </a-tooltip>
         </div>
         <aplayer v-else ref="myAplayer" :audio="audio" :autoplay="autoplay" fixed style="z-index: 10;" :volume="0.1"
            :preload="preload" />
      </a-col>

      <!-- <a-modal ref="musicModal" title="" :dialog-style="{ top: '10px' }" :mask="false"
      :maskClosable="false"   :visible="modal1Visible" @ok="() => setModal1Visible(false)" @cancel="() => setModal1Visible(false)">
         <p>{{secondsToGo}}秒后关闭</p>
      </a-modal> -->
   </div>
</template>

<script>
   import APlayer from '@moefe/vue-aplayer';
   import myConstant from "../../config/myConstant.js"

   export default {
      mounted() {
         this.$nextTick(function() {
            if (localStorage.getItem(myConstant.visitorFirstKey) == null &&
               localStorage.getItem(myConstant.visitorDataKey) == null) {
               this.showTip = true;
               setTimeout(() => {
                  this.showTip = false;
               }, 7000);

               var today = new Date();
               var year = today.getFullYear() + "";
               var month = today.getMonth() + 1 + "";
               var date = today.getDate() + "";
               localStorage.setItem(myConstant.visitorFirstKey,
                  year + (month > 10 ? month : '0' + month) + date)
            }

         })
      },
      data() {
         return {
            tipContent: "我有一首歌想送给你听..",
            showTip: false,
            showMyHeart: false,

            colMain: {
               xs: 0,
               sm: 0,
@@ -27,8 +64,6 @@
               xxl: 1
            },
            autoplay: false,
            modal1Visible: true,
            secondsToGo: 5,
            preload: "none",
            audio: {
               name: 'Moonwisher',
@@ -40,21 +75,16 @@
         };

      },
      created() {
         // const interval = setInterval(() => {
         //    this.secondsToGo -= 1;
         // }, 1000);

         // setTimeout(() => {
         //    clearInterval(interval);
         //    this.modal1Visible = false
         // }, 5000);
      },
      methods: {
         setModal1Visible(modal1Visible) {

            this.modal1Visible = modal1Visible;
         startPlay() {
            this.showMyHeart = true;
            setTimeout(() => {
               this.$refs.myAplayer.play()
            }, 500);
         },
         getPopupContainer(triggerNode) {
            return triggerNode.parentNode
         }
      },
   };
   // var ap = new APlayer({