| commit | author | age | ||
| 019990 | 1 | <template> |
| f9c38e | 2 | <div class="fade"> |
| 146176 | 3 | <a-col v-bind="colMain"> |
| afab3a | 4 | <div ref="myAplayerDiv" class="aplayer aplayer-narrow aplayer-fixed aplayer-arrow" |
| I | 5 | style="z-index: 10;width: 300px;" @click="startPlay" v-if="!showMyHeart"> |
| 6 | <a-tooltip :title="tipContent" :visible="showTip" placement="right" | |
| 7 | :getPopupContainer="getPopupContainer"> | |
| 8 | <div class="aplayer-body"> | |
| 9 | <div class="aplayer-pic" | |
| 10 | style="background-image: url("http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130"); background-color: rgb(183, 218, 255);"> | |
| 11 | <div class="aplayer-button aplayer-play"><svg xmlns="http://www.w3.org/2000/svg" | |
| 12 | viewBox="0 0 16 31" class=""> | |
| 13 | <path | |
| 14 | 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"> | |
| 15 | </path> | |
| 16 | </svg></div> | |
| 17 | </div> | |
| 18 | </div> | |
| 19 | </a-tooltip> | |
| 20 | </div> | |
| 21 | <aplayer v-else ref="myAplayer" :audio="audio" :autoplay="autoplay" fixed style="z-index: 10;" :volume="0.1" | |
| 6461f5 | 22 | :preload="preload" /> |
| 146176 | 23 | </a-col> |
| 7b98c8 | 24 | |
| 019990 | 25 | </div> |
| I | 26 | </template> |
| 27 | ||
| 28 | <script> | |
| 29 | import APlayer from '@moefe/vue-aplayer'; | |
| afab3a | 30 | import myConstant from "../../config/myConstant.js" |
| 7b98c8 | 31 | |
| 019990 | 32 | export default { |
| afab3a | 33 | mounted() { |
| 6461f5 | 34 | this.$nextTick(function() { |
| afab3a | 35 | if (localStorage.getItem(myConstant.visitorFirstKey) == null && |
| I | 36 | localStorage.getItem(myConstant.visitorDataKey) == null) { |
| 37 | this.showTip = true; | |
| 38 | setTimeout(() => { | |
| 39 | this.showTip = false; | |
| 40 | }, 7000); | |
| 41 | ||
| 42 | var today = new Date(); | |
| 43 | var year = today.getFullYear() + ""; | |
| 44 | var month = today.getMonth() + 1 + ""; | |
| 45 | var date = today.getDate() + ""; | |
| 46 | localStorage.setItem(myConstant.visitorFirstKey, | |
| 47 | year + (month > 10 ? month : '0' + month) + date) | |
| 48 | } | |
| 49 | ||
| 6461f5 | 50 | }) |
| I | 51 | }, |
| 019990 | 52 | data() { |
| I | 53 | return { |
| afab3a | 54 | tipContent: "我有一首歌想送给你听..", |
| I | 55 | showTip: false, |
| 56 | showMyHeart: false, | |
| 57 | ||
| ec97e0 | 58 | colMain: { |
| I | 59 | xs: 0, |
| 60 | sm: 0, | |
| 61 | md: 1, | |
| 62 | lg: 1, | |
| 63 | xl: 1, | |
| 64 | xxl: 1 | |
| 65 | }, | |
| 146176 | 66 | autoplay: false, |
| 7b98c8 | 67 | preload: "none", |
| 019990 | 68 | audio: { |
| I | 69 | name: 'Moonwisher', |
| 70 | artist: 'Kan R. Gao', | |
| 7b98c8 | 71 | url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3', |
| I | 72 | // url: '/moon.mp3', |
| 019990 | 73 | cover: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130', |
| I | 74 | }, |
| 75 | }; | |
| 7b98c8 | 76 | |
| I | 77 | }, |
| 78 | methods: { | |
| afab3a | 79 | startPlay() { |
| I | 80 | this.showMyHeart = true; |
| 81 | setTimeout(() => { | |
| 82 | this.$refs.myAplayer.play() | |
| 83 | }, 500); | |
| 7b98c8 | 84 | }, |
| afab3a | 85 | getPopupContainer(triggerNode) { |
| I | 86 | return triggerNode.parentNode |
| 87 | } | |
| 019990 | 88 | }, |
| I | 89 | }; |
| 90 | // var ap = new APlayer({ | |
| 91 | // element: document.getElementById('player1'), | |
| 92 | // narrow: false, | |
| 93 | // autoplay: false, | |
| 94 | // listFolded:true, | |
| 95 | // audio:[ | |
| 96 | ||
| 97 | // { | |
| 98 | // title: 'Wish My Life Away', | |
| 99 | // author: 'Kan R. Gao / Laura Shigihara', | |
| 100 | // url: 'http://music.163.com/song/media/outer/url?id=529668945.mp3', | |
| 101 | // pic: 'http://p1.music.126.net/2VSSz_JLHtggZqmquFO_tw==/109951163106305809.jpg?param=130y130' | |
| 102 | // }, | |
| 103 | // { | |
| 104 | // title: 'Moonwisher', | |
| 105 | // author: 'Kan R. Gao', | |
| 106 | // url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3', | |
| 107 | // pic: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130' | |
| 108 | // }, | |
| 109 | // { | |
| 110 | // title: 'For River - Piano (Johnny\'s Version)', | |
| 111 | // author: 'Kan R. Gao', | |
| 112 | // url: 'http://music.163.com/song/media/outer/url?id=1645112.mp3', | |
| 113 | // pic: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130' | |
| 114 | // }, | |
| 115 | // { | |
| 116 | // title: '花火が瞬く夜に', | |
| 117 | // author: '羽肿', | |
| 118 | // url: 'http://music.163.com/song/media/outer/url?id=434902428.mp3', | |
| 119 | // pic: 'http://p1.music.126.net/f7Nd9FSzVZMkTPWDW_rnOg==/736672800839982.jpg?param=130y130' | |
| 120 | // } | |
| 121 | // ] | |
| 122 | // }); | |
| 123 | </script> | |
| 124 | ||
| 125 | <style> | |
| 126 | </style> | |
