1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
    <div class="fade">
        <a-col v-bind="colMain">
            <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>
 
    </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,
                    md: 1,
                    lg: 1,
                    xl: 1,
                    xxl: 1
                },
                autoplay: false,
                preload: "none",
                audio: {
                    name: 'Moonwisher',
                    artist: 'Kan R. Gao',
                    url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
                    // url: '/moon.mp3',
                    cover: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130',
                },
            };
 
        },
        methods: {
            startPlay() {
                this.showMyHeart = true;
                setTimeout(() => {
                    this.$refs.myAplayer.play()
                }, 500);
            },
            getPopupContainer(triggerNode) {
                return triggerNode.parentNode
            }
        },
    };
    // var ap = new APlayer({
    //                    element: document.getElementById('player1'),
    //                    narrow: false,
    //                    autoplay: false,
    //                    listFolded:true,
    //                    audio:[
 
    //                            {
    //                             title: 'Wish My Life Away',
    //                             author: 'Kan R. Gao / Laura Shigihara',
    //                             url: 'http://music.163.com/song/media/outer/url?id=529668945.mp3',
    //                             pic: 'http://p1.music.126.net/2VSSz_JLHtggZqmquFO_tw==/109951163106305809.jpg?param=130y130'
    //                            }, 
    //                            {
    //                                title: 'Moonwisher',
    //                                author: 'Kan R. Gao',
    //                                url: 'http://music.163.com/song/media/outer/url?id=1645104.mp3',
    //                                pic: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130'
    //                            },
    //                            {
    //                             title: 'For River - Piano (Johnny\'s Version)',
    //                             author: 'Kan R. Gao',
    //                             url: 'http://music.163.com/song/media/outer/url?id=1645112.mp3',
    //                             pic: 'http://p2.music.126.net/0AYWra9rCzgeprGp6OUyUw==/868614185993997.jpg?param=130y130'
    //                            },
    //                             {
    //                                title: '花火が瞬く夜に',
    //                                author: '羽肿',
    //                                url: 'http://music.163.com/song/media/outer/url?id=434902428.mp3',
    //                                pic: 'http://p1.music.126.net/f7Nd9FSzVZMkTPWDW_rnOg==/736672800839982.jpg?param=130y130'
    //                            }
    //                        ]
    //                     });
</script>
 
<style>
</style>