From afab3a98a65f7fb4f342251238ab3c329e4242dd Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 30 Aug 2022 18:44:23 +0800
Subject: [PATCH] 调整统计脚本渲染逻辑 新增自定义表情组件
---
src/components/mini/Aplayer.vue | 70 +++++++++++++++++++++++-----------
1 files changed, 47 insertions(+), 23 deletions(-)
diff --git a/src/components/mini/Aplayer.vue b/src/components/mini/Aplayer.vue
index 9421d4d..0f6688c 100644
--- a/src/components/mini/Aplayer.vue
+++ b/src/components/mini/Aplayer.vue
@@ -1,29 +1,60 @@
<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,
@@ -33,8 +64,6 @@
xxl: 1
},
autoplay: false,
- modal1Visible: true,
- secondsToGo: 5,
preload: "none",
audio: {
name: 'Moonwisher',
@@ -46,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({
--
Gitblit v1.9.1