| | |
| | | <template> |
| | | <div class="fade"> |
| | | <a-col v-bind="colMain"> |
| | | <aplayer ref="myAplayer" :audio="audio" :autoplay="autoplay" fixed style="z-index: 10;" :volume="0.1" |
| | | <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("http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130"); 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 { |
| | | created() { |
| | | mounted() { |
| | | this.$nextTick(function() { |
| | | this.$message.info("stop..") |
| | | this.$refs.myAplayer.pause(); |
| | | 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, |
| | |
| | | xxl: 1 |
| | | }, |
| | | autoplay: false, |
| | | modal1Visible: true, |
| | | secondsToGo: 5, |
| | | preload: "none", |
| | | audio: { |
| | | name: 'Moonwisher', |
| | | artist: 'Kan R. Gao', |
| | | url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3', |
| | | url: 'http://t.inleft.com/share/mp3/moonwisher.mp3', |
| | | // url: '/moon.mp3', |
| | | cover: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130', |
| | | }, |
| | | }; |
| | | |
| | | }, |
| | | 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({ |