Skip to content

broadcast_cloud / web-live

Go to a project
Commit 6a44b674 by MichaelJier
Options

feature 

1. 升级svgaplayer-for-live
2. 重置礼物倒计时
3. 美化
parent fdbb074f
Showing with 64 additions and 72 deletions
components/modules-vertical/chatBox/chat/chatItem/chatRewardGift.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
赠送的 赠送的
<img :src="giftImg" /> <img :src="giftImg" />
{{ gift.name }} {{ gift.name }}
<em>* {{ gift.num }}</em> <em>x {{ gift.num }}</em>
</div> </div>
</div> </div>
</template> </template>
......
components/modules-vertical/chatBox/index.vue
...@@ -40,7 +40,9 @@ export default { ...@@ -40,7 +40,9 @@ export default {
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
const player = require('@gdyfe/svgaplayer-for-live') const player = require('@gdyfe/svgaplayer-for-live')
this.SVGAPlayer = new player.default('#svgaBox'); this.SVGAPlayer = player.default({
target: '#svgaBox'
});
this.$Bus.$on('bus-playsvga', this.playsvga); this.$Bus.$on('bus-playsvga', this.playsvga);
// setTimeout(() => { // setTimeout(() => {
// this.playsvga([{ // this.playsvga([{
...@@ -60,15 +62,15 @@ export default { ...@@ -60,15 +62,15 @@ export default {
playsvga(url){ playsvga(url){
if (!this.SVGAPlayer) return if (!this.SVGAPlayer) return
this.showSVAG = true this.showSVAG = true
this.SVGAPlayer.enqueue([url]) this.SVGAPlayer.enqueue(url)
this.SVGAPlayer.endCallback = () => { this.SVGAPlayer.$on('end',(info) => {
this.$Bus.$emit('bus-setGiftBannerInfo', null); this.$Bus.$emit('bus-setGiftBannerInfo', null);
this.showSVAG = false this.showSVAG = false
} })
this.SVGAPlayer.startCallback = (info) => { this.SVGAPlayer.$on('start',(info) => {
this.$Bus.$emit('bus-setGiftBannerInfo', info); this.$Bus.$emit('bus-setGiftBannerInfo', info);
this.showSVAG = true this.showSVAG = true
} })
}, },
}, },
watch: { watch: {
...@@ -76,7 +78,9 @@ export default { ...@@ -76,7 +78,9 @@ export default {
if (newVal) { if (newVal) {
console.log('初始化svgaplayer') console.log('初始化svgaplayer')
const player = require('@gdyfe/svgaplayer-for-live') const player = require('@gdyfe/svgaplayer-for-live')
this.SVGAPlayer = new player.default('#svgaBox'); this.SVGAPlayer = player.default({
target: '#svgaBox'
});
} else { } else {
this.SVGAPlayer.destroyed() this.SVGAPlayer.destroyed()
this.SVGAPlayer = null this.SVGAPlayer = null
......
components/modules-vertical/giftRollBox/index.vue
...@@ -86,8 +86,8 @@ export default { ...@@ -86,8 +86,8 @@ export default {
align-items: center; align-items: center;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
padding: 0.01rem; padding: 0.01rem;
height: 0.32rem; height: 0.35rem;
border-radius: 0.32rem; border-radius: 0.35rem;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
&.gift { &.gift {
.head { .head {
...@@ -95,6 +95,7 @@ export default { ...@@ -95,6 +95,7 @@ export default {
height: 0.3rem; height: 0.3rem;
border-radius: 100%; border-radius: 100%;
overflow: hidden; overflow: hidden;
margin-left: 0.02rem;
img { img {
display: block; display: block;
width: 100%; width: 100%;
...@@ -102,7 +103,7 @@ export default { ...@@ -102,7 +103,7 @@ export default {
} }
} }
.info { .info {
margin: 0 0.08rem; margin: 0 0.08rem 0.02rem 0.08rem;
.name { .name {
line-height: 0.2rem; line-height: 0.2rem;
font-size: 0.11rem; font-size: 0.11rem;
......
components/modules/menuBox/list.vue
...@@ -105,7 +105,9 @@ export default { ...@@ -105,7 +105,9 @@ export default {
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
const player = require('@gdyfe/svgaplayer-for-live') const player = require('@gdyfe/svgaplayer-for-live')
this.SVGAPlayer = new player.default('#svgaBox'); this.SVGAPlayer = player.default({
target: '#svgaBox'
});
this.$Bus.$on('bus-playsvga', this.playsvga); this.$Bus.$on('bus-playsvga', this.playsvga);
this._initSwiper(); this._initSwiper();
// setTimeout(() => { // setTimeout(() => {
...@@ -126,15 +128,15 @@ export default { ...@@ -126,15 +128,15 @@ export default {
playsvga(url){ playsvga(url){
if (!this.SVGAPlayer) return if (!this.SVGAPlayer) return
this.showSVAG = true this.showSVAG = true
this.SVGAPlayer.enqueue([url]) this.SVGAPlayer.enqueue(url)
this.SVGAPlayer.endCallback = () => { this.SVGAPlayer.$on('end',(info) => {
this.$Bus.$emit('bus-setGiftBannerInfo', null); this.$Bus.$emit('bus-setGiftBannerInfo', null);
this.showSVAG = false this.showSVAG = false
} })
this.SVGAPlayer.startCallback = (info) => { this.SVGAPlayer.$on('start',(info) => {
this.$Bus.$emit('bus-setGiftBannerInfo', info); this.$Bus.$emit('bus-setGiftBannerInfo', info);
this.showSVAG = true this.showSVAG = true
} })
}, },
_initSwiper() { _initSwiper() {
const self = this; const self = this;
...@@ -187,7 +189,9 @@ export default { ...@@ -187,7 +189,9 @@ export default {
if (newVal) { if (newVal) {
console.log('初始化svgaplayer') console.log('初始化svgaplayer')
const player = require('@gdyfe/svgaplayer-for-live') const player = require('@gdyfe/svgaplayer-for-live')
this.SVGAPlayer = new player.default('#svgaBox'); this.SVGAPlayer = player.default({
target: '#svgaBox'
});
} else { } else {
this.SVGAPlayer.destroyed() this.SVGAPlayer.destroyed()
this.SVGAPlayer = null this.SVGAPlayer = null
......
components/modules/menuBox/menuClass/chat/chat.vue
...@@ -25,12 +25,12 @@ ...@@ -25,12 +25,12 @@
</transition> </transition>
<transition name="fade"> <transition name="fade">
<div class="chat-gift" v-show="giftBannerInfo !== null"> <!-- v-show="giftBannerInfo !== null" --> <div class="chat-gift" v-show="giftBannerInfo !== null"> <!-- v-show="giftBannerInfo !== null" -->
<div class="chat-gift__header"><img :src="giftBannerInfo && giftBannerInfo.userHeadImg" alt=""></div> <div class="chat-gift__header" v-show="giftBannerInfo && giftBannerInfo.userHeadImg"><img :src="giftBannerInfo && giftBannerInfo.userHeadImg" alt=""></div>
<div class="chat-gift__senderName">{{ giftBannerInfo && giftBannerInfo.userNick || '未知' }}</div> <div class="chat-gift__senderName" v-show="giftBannerInfo && giftBannerInfo.userNick">{{ giftBannerInfo && giftBannerInfo.userNick || '未知' }}</div>
<strong>送给</strong> <strong>送给</strong>
<div class="chat-gift__receiver">浙江卫视</div> <div class="chat-gift__receiver">{{ channelInfo.chatAdminName || '管理员' }}</div>
<div class="chat-gift__giftPic"><img :src="giftBannerInfo && giftBannerInfo.filterContent.img" alt=""></div> <div class="chat-gift__giftPic" v-show="giftBannerInfo && giftBannerInfo.filterContent.img"><img :src="giftBannerInfo && giftBannerInfo.filterContent.img" alt=""></div>
<div class="chat-gift__num"> <div class="chat-gift__num" v-show="giftBannerInfo && giftBannerInfo.filterContent.num">
{{ giftBannerInfo && giftBannerInfo.filterContent.name || '未知' }} x {{ giftBannerInfo && giftBannerInfo.filterContent.num || '未知' }} {{ giftBannerInfo && giftBannerInfo.filterContent.name || '未知' }} x {{ giftBannerInfo && giftBannerInfo.filterContent.num || '未知' }}
</div> </div>
</div> </div>
......
components/suspension/reward/rewardGiftNew.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<img :src="giftImg(item)" /> <img :src="giftImg(item)" />
</div> </div>
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="price">{{ item.price == 0 ? 免费 : `${item.price}币` }}</div> <div class="price">{{ item.price == 0 ? `免费` : `${item.price}币` }}</div>
<div class="bg"></div> <div class="bg"></div>
<div class="progress"> <div class="progress">
<div class="container right"> <div class="container right">
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<div class="right"> <div class="right">
<div class="num">{{giftNum}}</div> <div class="num">{{giftNum}}</div>
<div class="icon" @click.stop="changePicker"></div> <div class="icon" @click.stop="changePicker"></div>
<div class="send" :class="giftInfo.id&&sendable ? 'send-active' : ''" @click.stop="giftInfo.id&&sendable&&_giftReward"> <div class="send" :class="giftInfo.id&&sendable ? 'send-active' : ''" @click.stop="giftInfo.id&&sendable&&_giftReward()">
发送 发送
<div class="picker" @click.stop v-if="showPicker"> <div class="picker" @click.stop v-if="showPicker">
<scroll-picker :options="options" v-model="giftNum" @click.stop></scroll-picker> <scroll-picker :options="options" v-model="giftNum" @click.stop></scroll-picker>
...@@ -76,11 +76,10 @@ export default { ...@@ -76,11 +76,10 @@ export default {
}), }),
remainingTime() { remainingTime() {
return (item) => { return (item) => {
if (!item.time && !item.sendTime) return false if (!item.time && !item.sendTime) return 0
// eslint-disable-next-line radix if (item.time && !item.sendTime) return 0
if (item.time && !item.sendTime) return parseInt(item.time) * 1000 const remain = item.time * 1000 - (new Date().getTime() - item.sendTime * 1000)
const remain = item.sendTime * 1000 - new Date().getTime() return remain > 0 ? remain : 0
return item.time * 1000 - (remain > 0 ? remain : 0)
} }
}, },
options() { options() {
...@@ -101,6 +100,7 @@ export default { ...@@ -101,6 +100,7 @@ export default {
} }
}, },
mounted() { mounted() {
// this.$Bus.$on('bus-getRewardGiftList', this._getRewardGiftList);
this._getRewardGiftList(); this._getRewardGiftList();
}, },
methods: { methods: {
...@@ -155,13 +155,13 @@ export default { ...@@ -155,13 +155,13 @@ export default {
} else { } else {
clearTimeout(this.timer) clearTimeout(this.timer)
const change = this.list[page][index] // change.sendTime * const change = this.list[page][index] // change.sendTime *
const remain = change.sendTime * 1000 - new Date().getTime() const remainTime = change.time * 1000 - new Date().getTime() + change.sendTime * 1000
const remainTime = change.sendTime * 1000 - (remain > 0 ? remain : 0)
this.changeIndex = index; this.changeIndex = index;
this.pageIndex = page; this.pageIndex = page;
if (remainTime > 0){ if (remainTime > 0){
setTimeout(() => { setTimeout(() => {
this.sendable = true; this.sendable = true;
change.sendTime = null
}, remainTime) }, remainTime)
return return
} }
...@@ -182,6 +182,12 @@ export default { ...@@ -182,6 +182,12 @@ export default {
payType: 1 payType: 1
}); });
if (res.code === 200 && res.errorCode === 0) { if (res.code === 200 && res.errorCode === 0) {
this.pageIndex = null
this.changeIndex = null
if (res.data === 'success') {
this._getRewardGiftList();
return
}
const { tradeType, prepayInfo } = res.data; const { tradeType, prepayInfo } = res.data;
const { uin } = this.channelInfo; const { uin } = this.channelInfo;
const DEF_SITE = process.client const DEF_SITE = process.client
...@@ -257,6 +263,7 @@ export default { ...@@ -257,6 +263,7 @@ export default {
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.05rem 0; padding: 0.05rem 0;
background: linear-gradient(180deg, rgba(90,93,135,.3) 0%, rgba(90, 93, 135, 0) 100%); background: linear-gradient(180deg, rgba(90,93,135,.3) 0%, rgba(90, 93, 135, 0) 100%);
background-repeat: no-repeat;
border-radius: .1rem; border-radius: .1rem;
overflow: hidden; overflow: hidden;
.bg { .bg {
...@@ -288,19 +295,24 @@ export default { ...@@ -288,19 +295,24 @@ export default {
.name { .name {
margin: .02rem 0; margin: .02rem 0;
line-height: 0.2rem; line-height: 0.2rem;
font-size: 0.1rem; font-size: 0.12rem;
color: #FFF; color: #FFF;
} }
.price { .price {
margin: .02rem 0; margin: .02rem 0;
line-height: 0.08rem; line-height: 0.08rem;
font-size: 0.08rem; font-size: 0.12rem;
color: #AAA; color: #AAA;
transform: scale(0.9); transform: scale(0.85);
padding-bottom: 0.06rem; padding-bottom: 0.06rem;
} }
&.z-active { &.z-active {
border: 0.01rem solid #80d0f9; border: 0.01rem solid #80d0f9;
.img {
img {
transform: scale(1.1);
}
}
} }
&.z-active-progress { &.z-active-progress {
.progress { .progress {
......
components/suspension/reward/rewardNew.vue
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
<div class="icon"></div> <div class="icon"></div>
</div> </div>
</div> </div>
<div class="swiper-container" ref="swiper"> <div class="swiper-container" ref="swiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in list" :key="item.index"> <div class="swiper-slide" v-for="item in list" :key="item.index">
...@@ -145,6 +144,7 @@ export default { ...@@ -145,6 +144,7 @@ export default {
width: 50%; width: 50%;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: flex-end;
div { div {
display: inline-block; display: inline-block;
margin-right: 0.1rem; margin-right: 0.1rem;
......
package.json
{ {
"name": "ssr-program-live", "name": "ssr-program-live",
"version": "1.4.0", "version": "1.5.0",
"description": "My superb Nuxt.js project", "description": "My superb Nuxt.js project",
"author": "1006903445@qq.com", "author": "1006903445@qq.com",
"private": true, "private": true,
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
}, },
"dependencies": { "dependencies": {
"@gdyfe/ink-marks": "^1.1.4", "@gdyfe/ink-marks": "^1.1.4",
"@gdyfe/svgaplayer-for-live": "^1.0.0", "@gdyfe/svgaplayer-for-live": "^1.0.3",
"@gdyfe/uploader": "^2.3.6", "@gdyfe/uploader": "^2.3.6",
"@nuxtjs/axios": "^5.3.6", "@nuxtjs/axios": "^5.3.6",
"@nuxtjs/component-cache": "^1.1.5", "@nuxtjs/component-cache": "^1.1.5",
......
yarn.lock
...@@ -2135,13 +2135,11 @@ ...@@ -2135,13 +2135,11 @@
dayjs "^1.8.34" dayjs "^1.8.34"
pako "^1.0.11" pako "^1.0.11"
"@gdyfe/svgaplayer-for-live@^1.0.0": "@gdyfe/svgaplayer-for-live@^1.0.3":
version "1.0.0" version "1.0.3"
resolved "https://registry.yarnpkg.com/@gdyfe/svgaplayer-for-live/-/svgaplayer-for-live-1.0.0.tgz#2ff345077d26ad1dd5f2b48fc7be13f361a805a6" resolved "https://registry.yarnpkg.com/@gdyfe/svgaplayer-for-live/-/svgaplayer-for-live-1.0.3.tgz#1f3b14b30ce754ace7147a4aa15b99a55c45edb9"
integrity sha512-luNIL4TobTzdYGjB/pKKGqU1XCluNfoFgRe5fAkEkYbzLLlcfb7QJA+0g6APpGLZN+mUfO91KEQsNyopfGnoRQ== integrity sha512-nXpwOha6XyqF5V11hX3w1Vr3xggDq+zPncGjFTvbakuhrVJptyXKJqlRwAj5P2Ky+MK9qKOhNSddGHeq1xmsFA==
dependencies: dependencies:
jszip "^3.6.0"
jszip-utils "^0.1.0"
svga.lite "^1.5.0" svga.lite "^1.5.0"
"@gdyfe/uploader@^2.3.6": "@gdyfe/uploader@^2.3.6":
...@@ -7075,21 +7073,6 @@ jstoxml@^0.2.3: ...@@ -7075,21 +7073,6 @@ jstoxml@^0.2.3:
resolved "https://registry.yarnpkg.com/jstoxml/-/jstoxml-0.2.4.tgz#ff3fb67856883a032953c7ce8ce7486210f48447" resolved "https://registry.yarnpkg.com/jstoxml/-/jstoxml-0.2.4.tgz#ff3fb67856883a032953c7ce8ce7486210f48447"
integrity sha1-/z+2eFaIOgMpU8fOjOdIYhD0hEc= integrity sha1-/z+2eFaIOgMpU8fOjOdIYhD0hEc=
jszip-utils@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/jszip-utils/-/jszip-utils-0.1.0.tgz#8c04cdedcdb291e83f055f5b261b3a3188ceca0b"
integrity sha512-tBNe0o3HAf8vo0BrOYnLPnXNo5A3KsRMnkBFYjh20Y3GPYGfgyoclEMgvVchx0nnL+mherPi74yLPIusHUQpZg==
jszip@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.6.0.tgz#839b72812e3f97819cc13ac4134ffced95dd6af9"
integrity sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==
dependencies:
lie "~3.3.0"
pako "~1.0.2"
readable-stream "~2.3.6"
set-immediate-shim "~1.0.1"
just-extend@^4.0.2: just-extend@^4.0.2:
version "4.1.1" version "4.1.1"
resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.1.1.tgz#158f1fdb01f128c411dc8b286a7b4837b3545282" resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.1.1.tgz#158f1fdb01f128c411dc8b286a7b4837b3545282"
...@@ -7200,13 +7183,6 @@ lie@3.1.1: ...@@ -7200,13 +7183,6 @@ lie@3.1.1:
dependencies: dependencies:
immediate "~3.0.5" immediate "~3.0.5"
lie@~3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
dependencies:
immediate "~3.0.5"
load-json-file@^2.0.0: load-json-file@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
...@@ -8179,7 +8155,7 @@ paho-mqtt@^1.1.0: ...@@ -8179,7 +8155,7 @@ paho-mqtt@^1.1.0:
resolved "https://registry.yarnpkg.com/paho-mqtt/-/paho-mqtt-1.1.0.tgz#8c10e29eb162e966fb15188d965c3dce505de9d9" resolved "https://registry.yarnpkg.com/paho-mqtt/-/paho-mqtt-1.1.0.tgz#8c10e29eb162e966fb15188d965c3dce505de9d9"
integrity sha512-KPbL9KAB0ASvhSDbOrZBaccXS+/s7/LIofbPyERww8hM5Ko71GUJQ6Nmg0BWqj8phAIT8zdf/Sd/RftHU9i2HA== integrity sha512-KPbL9KAB0ASvhSDbOrZBaccXS+/s7/LIofbPyERww8hM5Ko71GUJQ6Nmg0BWqj8phAIT8zdf/Sd/RftHU9i2HA==
pako@^1.0.11, pako@~1.0.2, pako@~1.0.5: pako@^1.0.11, pako@~1.0.5:
version "1.0.11" version "1.0.11"
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf" resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw== integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
...@@ -9857,11 +9833,6 @@ set-blocking@^2.0.0: ...@@ -9857,11 +9833,6 @@ set-blocking@^2.0.0:
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
set-immediate-shim@~1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=
set-value@^2.0.0, set-value@^2.0.1: set-value@^2.0.0, set-value@^2.0.1:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b" resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment