Skip to content

broadcast_cloud / web-live

Go to a project
Commit 0bf82859 by MichaelJier
Options

feature 

1. 新版礼物面板
2. 礼物特效关闭按钮
3. 接入svgaplayer-for-live
parent 8f06e553
Showing with 765 additions and 62 deletions
components/modules-vertical/suspensionBox/index.vue
...@@ -50,7 +50,7 @@ import drawBox from '@/components/suspension/draw/index'; ...@@ -50,7 +50,7 @@ import drawBox from '@/components/suspension/draw/index';
import voteBox from '@/components/suspension/vote/index'; import voteBox from '@/components/suspension/vote/index';
import inviteBox from '@/components/suspension/invite/index'; import inviteBox from '@/components/suspension/invite/index';
import walletBox from '@/components/suspension/wallet/index'; import walletBox from '@/components/suspension/wallet/index';
import rewardBox from '@/components/suspension/reward/index'; import rewardBox from '@/components/suspension/reward/indexNew';
import toggleBtn from '@/components/suspension/toggle/index'; import toggleBtn from '@/components/suspension/toggle/index';
import praiseBox from '@/components/suspension/praise/index'; import praiseBox from '@/components/suspension/praise/index';
......
components/modules/menuBox/list.vue
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="svgaPage"> <div class="svgaPage" v-show="showSVAG">
<div class="btn" @click="playSvga">点击播放</div> <canvas id="svgaBox"></canvas>
<div id="svgaBox"></div>
</div> </div>
<div class="shop-hot-box" v-if="menuList.every(item => item.menuInfo !== 'shop' ) && caseInfo.status"> <div class="shop-hot-box" v-if="menuList.every(item => item.menuInfo !== 'shop' ) && caseInfo.status">
<shop-box :showHot="!!caseInfo.status" :isMarket="true"></shop-box> <shop-box :showHot="!!caseInfo.status" :isMarket="true"></shop-box>
...@@ -81,7 +80,8 @@ export default { ...@@ -81,7 +80,8 @@ export default {
return { return {
swiper: null, swiper: null,
active: this.value, active: this.value,
deferMenuList: [] deferMenuList: [],
showSVAG: false
}; };
}, },
computed: { computed: {
...@@ -89,6 +89,7 @@ export default { ...@@ -89,6 +89,7 @@ export default {
menuList: 'menuList', menuList: 'menuList',
drainage: 'drainage', drainage: 'drainage',
caseInfo: 'caseInfo', caseInfo: 'caseInfo',
giftAni: 'giftAni'
}), }),
isShowChat() { isShowChat() {
let index = -1; let index = -1;
...@@ -103,52 +104,26 @@ export default { ...@@ -103,52 +104,26 @@ export default {
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.SVGA = require('svgaplayerweb') const player = require('@gdyfe/svgaplayer-for-live')
this.SVGAPlayer = new player.default('#svgaBox');
this.$Bus.$on('bus-playsvga', this.playsvga);
this._initSwiper(); this._initSwiper();
}); });
}, },
methods: { methods: {
playSvga(){ playsvga(url){
const oss = '//static-pro.guangdianyun.tv/static/svga' if (!this.SVGAPlayer) return
const svgaArr = [ this.showSVAG = true
`${oss}/666/666·.svga`, this.SVGAPlayer.enqueue(url)
`${oss}/么么哒/MMD.svga`, this.SVGAPlayer.endCallback = () => {
`${oss}/加油鸭/JYY.svga`, this.$Bus.$emit('bus-setGiftBannerInfo', null);
`${oss}/吃瓜/CG.svga`, this.showSVAG = false
`${oss}/干杯/ganbeisvga.svga`, }
`${oss}/我要上麦/WYSM.svga`, this.SVGAPlayer.startCallback = (info) => {
`${oss}/打call/Dcall.svga`, this.$Bus.$emit('bus-setGiftBannerInfo', info);
`${oss}/棒棒糖/BBT.svga`, this.showSVAG = true
`${oss}/比心/BX.svga`, }
`${oss}/点赞/DZ.svga`, },
`${oss}/热气球/RQQ.svga`,
`${oss}/爱心/AX.svga`,
`${oss}/直升机/fj.svga`,
`${oss}/礼花/LH.svga`,
`${oss}/红包/HB.svga`,
`${oss}/纸鹤/ZH.svga`,
`${oss}/荧光棒/YGB.svga`,
`${oss}/跑车/跑车2.svga`,
// `${oss}/鼓掌/gz.svga`,
]
const player = new this.SVGA.Player('#svgaBox');
const parser = new this.SVGA.Parser('#svgaBox');
// parser.load('//static-pro.guangdianyun.tv/static/svga/666/666·.svga', function(videoItem) {
// player.loops = 1;
// player.setVideoItem(videoItem);
// player.startAnimation();
// });
svgaArr.forEach((item, index) => {
setTimeout(() => {
parser.load(item, function(videoItem) {
player.loops = 1;
player.setVideoItem(videoItem);
player.startAnimation();
});
}, (index + 1) * 5000)
})
},
_initSwiper() { _initSwiper() {
const self = this; const self = this;
const option = { const option = {
...@@ -195,6 +170,16 @@ export default { ...@@ -195,6 +170,16 @@ export default {
}, },
active(nVal) { active(nVal) {
this.$emit('input', nVal); this.$emit('input', nVal);
},
giftAni(newVal) {
if (newVal) {
console.log('初始化svgaplayer')
const player = require('@gdyfe/svgaplayer-for-live')
this.SVGAPlayer = new player.default('#svgaBox');
} else {
this.SVGAPlayer.destroyed()
this.SVGAPlayer = null
}
} }
} }
}; };
......
components/modules/menuBox/menuClass/chat/chat.vue
...@@ -23,6 +23,18 @@ ...@@ -23,6 +23,18 @@
<span class="close" @click="_closeReply">x</span> <span class="close" @click="_closeReply">x</span>
</div> </div>
</transition> </transition>
<transition name="fade">
<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__senderName">{{ giftBannerInfo && giftBannerInfo.userNick || '未知' }}</div>
<strong>送给</strong>
<div class="chat-gift__receiver">浙江卫视</div>
<div class="chat-gift__giftPic"><img :src="giftBannerInfo && giftBannerInfo.giftPic" alt=""></div>
<div class="chat-gift__num">
{{ giftBannerInfo && giftBannerInfo.filterContent.name || '未知' }} x {{ giftBannerInfo && giftBannerInfo.filterContent.num || '未知' }}
</div>
</div>
</transition >
</div> </div>
<div class="wrapper" v-else> <div class="wrapper" v-else>
<div class="list-box" ref="chatListBox"> <div class="list-box" ref="chatListBox">
...@@ -54,7 +66,8 @@ export default { ...@@ -54,7 +66,8 @@ export default {
list: [], list: [],
redList: [], redList: [],
unreadChatNum: 0, unreadChatNum: 0,
replyChatId: '' replyChatId: '',
giftBannerInfo: null
}; };
}, },
computed: { computed: {
...@@ -67,9 +80,13 @@ export default { ...@@ -67,9 +80,13 @@ export default {
mounted() { mounted() {
this.$Bus.$on('bus-addChat', this.addChat); this.$Bus.$on('bus-addChat', this.addChat);
this.$Bus.$on('bus-delChat', this.delChat); this.$Bus.$on('bus-delChat', this.delChat);
this.$Bus.$on('bus-setGiftBannerInfo', this.setGiftBannerInfo);
this.getChatList(); this.getChatList();
}, },
methods: { methods: {
setGiftBannerInfo(info) {
this.giftBannerInfo = info
},
getMore() { getMore() {
const chatListBoxDom = this.$refs.chatListBox; const chatListBoxDom = this.$refs.chatListBox;
const chatListDom = this.$refs.chatList; const chatListDom = this.$refs.chatList;
...@@ -290,6 +307,52 @@ export default { ...@@ -290,6 +307,52 @@ export default {
color: #fff; color: #fff;
} }
} }
.chat-gift {
position: absolute;
bottom: 0.1rem;
left: 0.1rem;
z-index: 111111;
font-size: 0.13rem;
padding: 0 0.05rem;
height: 0.2rem;
display: flex;
align-items: center;
background: linear-gradient(90deg, #f37d48, rgba(0,0,0,0));
border-radius: 0.2rem;
color: #fff;
&__header {
width: 0.12rem;
height: 0.12rem;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
&__senderName {
padding: 0 .03rem;
}
&__receiver {
padding: 0 .03rem;
}
&__giftPic {
width: 0.24rem;
height: 0.18rem;
overflow: hidden;
margin: .03rem 0;
img {
width: 100%;
height: 100%;
}
}
&__num {
}
strong {
font-size: 0.14rem;
}
}
.chat-reply { .chat-reply {
position: absolute; position: absolute;
bottom: 0.1rem; bottom: 0.1rem;
......
components/modules/sendBox/more.vue
...@@ -32,6 +32,12 @@ ...@@ -32,6 +32,12 @@
<div class="title">问卷报表</div> <div class="title">问卷报表</div>
</div> </div>
</div> </div>
<div class="item" >
<div class="box" @click="set_giftAni">
<div :class="`icon ${giftAni ? 'gift' : 'gift-close'}`"></div>
<div class="title">礼物特效</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -39,7 +45,7 @@ ...@@ -39,7 +45,7 @@
const Uploader = process.client ? require('@gdyfe/uploader') : {}; const Uploader = process.client ? require('@gdyfe/uploader') : {};
import { sendPhoto, sendPhotoByWeixin } from '@/plugins/API/apiAll'; import { sendPhoto, sendPhotoByWeixin } from '@/plugins/API/apiAll';
import UserAgent from '@/plugins/UserAgent/index'; import UserAgent from '@/plugins/UserAgent/index';
import { mapGetters } from 'vuex'; import { mapGetters, mapMutations } from 'vuex';
export default { export default {
name: 'send-more', name: 'send-more',
data() { data() {
...@@ -55,7 +61,8 @@ export default { ...@@ -55,7 +61,8 @@ export default {
channelConfig: 'channelConfig', channelConfig: 'channelConfig',
userInfo: 'userInfo', userInfo: 'userInfo',
jumpUrls: 'jumpUrls', jumpUrls: 'jumpUrls',
uuid: 'uuid' uuid: 'uuid',
giftAni: 'giftAni'
}), }),
isQuestionnaire() { isQuestionnaire() {
const info = this.channelConfig.questionnaire || {}; const info = this.channelConfig.questionnaire || {};
...@@ -66,6 +73,9 @@ export default { ...@@ -66,6 +73,9 @@ export default {
}, },
}, },
methods: { methods: {
...mapMutations({
set_giftAni: 'set_giftAni'
}),
_sendRed() { _sendRed() {
if (!this.userInfo.id) { if (!this.userInfo.id) {
this.$layer.msg('请登录'); this.$layer.msg('请登录');
...@@ -195,7 +205,6 @@ export default { ...@@ -195,7 +205,6 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.more { .more {
padding: 0.05rem; padding: 0.05rem;
height: 0.9rem;
background: #fff; background: #fff;
.list { .list {
display: flex; display: flex;
...@@ -205,6 +214,7 @@ export default { ...@@ -205,6 +214,7 @@ export default {
.item { .item {
flex: 0 0 auto; flex: 0 0 auto;
width: 25%; width: 25%;
padding: 0.1rem 0;
.box { .box {
text-align: center; text-align: center;
.icon { .icon {
...@@ -231,6 +241,13 @@ export default { ...@@ -231,6 +241,13 @@ export default {
&.questionnaire { &.questionnaire {
background-image: url(./img/icon-questionnaire.png); background-image: url(./img/icon-questionnaire.png);
} }
&.gift {
background-image: url(./img/icon-gift.png);
}
&.gift-close {
background-image: url(./img/icon-giftclose.png);
background-size: auto 65%;
}
} }
.title { .title {
line-height: 0.2rem; line-height: 0.2rem;
......
components/modules/suspensionBox/index.vue
...@@ -60,7 +60,7 @@ import drawBox from '@/components/suspension/draw/index'; ...@@ -60,7 +60,7 @@ import drawBox from '@/components/suspension/draw/index';
import voteBox from '@/components/suspension/vote/index'; import voteBox from '@/components/suspension/vote/index';
import inviteBox from '@/components/suspension/invite/index'; import inviteBox from '@/components/suspension/invite/index';
import walletBox from '@/components/suspension/wallet/index'; import walletBox from '@/components/suspension/wallet/index';
import rewardBox from '@/components/suspension/reward/index'; import rewardBox from '@/components/suspension/reward/indexNew';
import toggleBtn from '@/components/suspension/toggle/index'; import toggleBtn from '@/components/suspension/toggle/index';
import praiseBox from '@/components/suspension/praise/index'; import praiseBox from '@/components/suspension/praise/index';
import seeRed from './seeRed/index'; import seeRed from './seeRed/index';
......
components/suspension/reward/index.vue
...@@ -6,11 +6,11 @@ ...@@ -6,11 +6,11 @@
<div class="title">打赏</div> <div class="title">打赏</div>
<transition name="fade"> <transition name="fade">
<div class="reward-box" v-transfer-dom v-show="isShow" @click.stop="close"> <div class="reward-box" v-transfer-dom v-show="isShow" @click.stop="close">
<div style="background: #fff; width:100%;height: auto;border-radius: 15px 15px 0 0;overflow: hidden;"> <div style="width:100%;height: auto;border-radius: 15px 15px 0 0;overflow: hidden;">
<div style="background: linear-gradient(to bottom left, rgba(243, 207, 106, 0.2) 0%, #fff 100%); width:100%;height: auto"> <div style="background: rgba(255, 255, 255, 0.9); width:100%;height: auto"> <!-- linear-gradient(to bottom left, rgba(243, 207, 106, 0.2) 0%, #fff 100%) -->
<div class="tab-box" v-show="showTab"> <div class="tab-box" v-show="showTab">
<div :class="{ 'z-active': tabIndex == 0 }" @click.stop="_tabIndex(0)"> <div :class="{ 'z-active': tabIndex == 0 }" @click.stop="_tabIndex(0)">
礼物打赏 礼物
</div> </div>
<div :class="{ 'z-active': tabIndex == 1 }" @click.stop="_tabIndex(1)"> <div :class="{ 'z-active': tabIndex == 1 }" @click.stop="_tabIndex(1)">
现金打赏 现金打赏
......
components/suspension/reward/indexNew.vue 0 → 100644
<template>
<div class="reward" @click="_toggleReward(true)">
<div class="btn">
<div class="icon" :style="{background: channelInfo && channelInfo.screenDirection === 'vertical' ? `url(${defaultIcon}) no-repeat center center` : ''}"></div>
</div>
<div class="title">打赏</div>
<reward v-model="isShow"></reward>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
const reward = resolve => require(['./rewardNew'], resolve);
export default {
name: 'suspension-reward',
components: {
reward
},
data() {
return {
isShow: false,
defaultIcon: require('./img/icon-reward.png')
};
},
computed: {
...mapGetters({
channelInfo: 'channelInfo',
userInfo: 'userInfo'
}),
},
mounted() {
this.$Bus.$on('bus-showReward', this._toggleReward);
},
beforeDestroy() {
this.$Bus.$off('bus-showReward', this._toggleReward);
},
methods: {
_toggleReward(bol) {
if (!this.userInfo.id && bol) {
this.$layer.msg('请先登录');
this.$Bus.$emit('bus-showLogin', true);
return false;
}
this.isShow = bol
},
}
};
</script>
<style lang="less" scoped>
.reward {
width: 0.8rem;
height: 0.8rem;
.btn {
position: relative;
padding: 0 0.1rem;
width: 0.8rem;
height: 0.6rem;
background: var(--suspension-reward-bg) no-repeat center center;
background-size: contain;
.icon {
width: 100%;
height: 100%;
background: var(--suspension-reward-icon) no-repeat center center;
background-size: auto 50%;
}
}
.title {
margin-top: 0.04rem;
line-height: 0.18rem;
text-align: center;
white-space: nowrap;
font-size: 0.16rem;
}
}
</style>
components/suspension/reward/reward.vue 0 → 100644
<template>
<transition name="fade">
<div class="reward-box" v-transfer-dom v-show="value" @click.stop="close">
<div style="width:100%;height: auto;border-radius: 15px 15px 0 0;overflow: hidden;">
<div style="background: rgba(255, 255, 255, 0.9); width:100%;height: auto"> <!-- linear-gradient(to bottom left, rgba(243, 207, 106, 0.2) 0%, #fff 100%) -->
<div class="tab-box" v-show="showTab">
<div :class="{ 'z-active': tabIndex == 0 }" @click.stop="_tabIndex(0)">
礼物
</div>
<div :class="{ 'z-active': tabIndex == 1 }" @click.stop="_tabIndex(1)">
现金打赏
</div>
</div>
<div class="type-box">
<transition-group :name="showAni ? 'fadeMaxHeight' : 'hideAni'">
<rewardGift v-show="value && showRewardGift" :key="1"/>
<rewardCash v-show="value && showReward" :key="2"/>
</transition-group>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
import { mapGetters } from 'vuex';
const rewardCash = resolve => require(['./rewardCash'], resolve);
const rewardGift = resolve => require(['./rewardGift'], resolve);
export default {
name: 'suspension-reward',
components: {
rewardCash,
rewardGift
},
data() {
return {
showAni: true,
tabIndex: 0,
defaultIcon: require('./img/icon-reward.png')
};
},
props: {
value: {
type: Boolean,
default: false,
},
},
model: {
prop: 'value',
},
computed: {
...mapGetters({
channelInfo: 'channelInfo',
userInfo: 'userInfo'
}),
switchShow() {
return this.value ? (this.showRewardGift * 2 + this.showReward) : 0
},
showTab() {
return this.channelInfo.rewardGiftStatus === 1 && this.channelInfo.rewardStatus === 1;
},
showRewardGift() {
if (this.showTab && this.channelInfo.rewardGiftStatus === 1 && this.tabIndex === 0) {
return true;
} else if (!this.showTab && this.channelInfo.rewardGiftStatus === 1) {
return true;
} else {
return false;
}
},
showReward() {
if (this.showTab && this.channelInfo.rewardStatus === 1 && this.tabIndex === 1) {
return true;
} else if (!this.showTab && this.channelInfo.rewardStatus === 1) {
return true;
} else {
return false;
}
}
},
methods: {
close() {
this.$emit('input', false)
},
_tabIndex(index) {
this.tabIndex = index;
},
},
watch: {
switchShow(newVal, oldVal) {
this.showAni = (newVal === 0 || oldVal === 0)
}
}
};
</script>
<style lang="less" scoped>
.hideAni-enter,.hideAni-leave-to{
position: fixed;
z-index: -1;
bottom: 0;
}
.fadeMaxHeight-enter,.fadeMaxHeight-leave-to{
max-height: 0;
}
.fadeMaxHeight-enter-to,.fadeMaxHeight-leave{
max-height: 60vh;
}
.fadeMaxHeight-enter-active,.fadeMaxHeight-leave-active{
transition: max-height .6s cubic-bezier(0,0,0.58,1);
}
.reward-box {
position: absolute;
bottom: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
display: flex;
flex-direction: column-reverse;
background-color: rgba(0, 0, 0, 0.4);
.type-box {
}
.tab-box {
padding: 0.12rem 0.1rem;
display: flex;
justify-content: space-around;
div {
display: inline-block;
margin-right: 0.1rem;
vertical-align: top;
font-size: 0.12rem;
&.z-active {
color: var(--main-color);
font-weight: 800;
position: relative;
&:after {
content: '';
position: absolute;
left: calc(50% - 0.15rem);
margin: 0.05rem auto 0;
display: block;
height: 0.02rem;
width: 0.3rem;
background-color: var(--main-color);
}
}
}
}
}
</style>
components/suspension/reward/rewardCashNew.vue 0 → 100644
<template>
<div class="reward-cash" @click.stop>
<ul class="reward-cash__list">
<li
:class="`item ${activeIndex === index ? 'active' : ''}`"
v-for="(item, index) in channelInfo.rewardConfig"
:key="index"
@click="activeIndex === index ? (activeIndex = null) : (activeIndex = index)"
>
<div class="item__icon"></div>
<div class="item__price">
{{ item }}
<span class="item__price--yuan">元</span>
</div>
</li>
</ul>
<div :class="`reward-cash__btn ${activeIndex !== null ? 'btn-active' : ''}`" @click.stop="_cashReward(channelInfo.rewardConfig[activeIndex])">发红包</div>
</div>
</template>
<script>
import { reward } from '@/plugins/API/apiReward';
import { mapGetters } from 'vuex';
export default {
name: 'suspension-reward-cash',
data() {
return {
activeIndex: null
};
},
computed: {
...mapGetters({
channelInfo: 'channelInfo'
})
},
methods: {
async _cashReward(cash) {
const res = await reward({
uin: this.channelInfo.uin,
channelId: this.channelInfo.id,
money: cash,
backUrl: window.location.href,
payType: 1
});
if (res.code === 200 && res.errorCode === 0) {
const { tradeType, prepayInfo } = res.data;
const { uin } = this.channelInfo;
const DEF_SITE = process.client
? process.env.DEF_SITE + (window.location.protocol.split(':')[0] === 'https' ? process.env.HTTPS_PORT : process.env.HTTP_PORT)
: `http:${process.env.DEF_SITE + process.env.HTTP_PORT}`;
if (res.data.url) {
window.location.href = res.data.url;
} else if (tradeType === 'MWEB') {
const wxh5pay = `https:${process.env.DEF_SITE + process.env.HTTPS_PORT}/pay/wxh5pay?uin=${uin}`;
const backUrl = encodeURIComponent(window.location.href);
const transferUrl = encodeURIComponent(`${wxh5pay}&url=${backUrl}`);
const payUrl = encodeURIComponent(`${prepayInfo.mweb_url}&redirect_url=${transferUrl}`);
const url = `${wxh5pay}&url=${payUrl}`;
window.location.href = url;
} else if (tradeType === 'JSAPI') {
const data = encodeURIComponent(JSON.stringify(res.data));
const url = `${DEF_SITE}/pay/wxpay?uin=${uin}&payconfig=${data}`;
window.location.href = url;
} else {
this.$layer.msg('网络错误，请稍后重试！');
}
}
}
}
};
</script>
<style lang="less" scoped>
.reward-cash {
&__list {
padding: 0.25rem 0.1rem;
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
.active {
border: 1px solid #FE5D5D !important;
}
.item {
margin: 0 0.07rem 0.15rem 0.07rem;
padding: 0.1rem;
width: 1rem;
line-height: 0.3rem;
vertical-align: top;
background: rgba(90,93,135,.3);
color: #FE5D5D;
border-radius: 0.1rem;
// font-style: italic;
font-size: 0.13rem;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
div {
display: inline-block;
}
&__icon {
flex: 1;
width: .38rem;
height: .4rem;
background: url('./img/icon-redPacket.png') no-repeat center 55%;
background-size: auto 100%;
margin-left: .03rem;
}
&__price {
flex: 1;
white-space: nowrap;
&--yuan {
margin-left: .01rem;
}
}
}
}
&__btn {
width: calc(100% - .9rem);
margin-left: .45rem;
height: .4rem;
background: #aaa;
color: #d4d4d4;
border-radius: .45rem;;
text-align: center;
line-height: .4rem;
transition: all .3s;
}
.btn-active {
background: linear-gradient(180deg, #FF6868 0%, #F43D3D 100%);
color: #fff;
}
}
</style>
components/suspension/reward/rewardNew.vue 0 → 100644
<template>
<transition name="fadeMaxHeight">
<div class="reward-box" v-transfer-dom v-show="value" @click.stop="close">
<div style="width:100%;height: auto;border-radius: 15px 15px 0 0;overflow: hidden;">
<div style="background: rgba(0, 0, 0, 0.9); width:100%;height: auto" @click.stop>
<div class="top-box">
<div class="tab-box">
<div :class="{ 'z-active': tabIndex == 0 }" @click.stop="_tabSwitch(0)">
礼物
</div>
<div :class="{ 'z-active': tabIndex == 1 }" @click.stop="_tabSwitch(1)">
现金打赏
</div>
</div>
<div class="sendName-box">
<div class="text">送给</div>
<div class="header"><img :src="channelInfo.chatAdminAvaUrl"/></div>
<div class="name">{{ channelInfo.chatAdminName || '管理员' }}</div>
<div class="icon"></div>
</div>
</div>
<div class="swiper-container" ref="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in list" :key="item.index">
<template v-if="item.index === 0" @click.stop>
<reward-gift :show="value"/>
</template>
<template v-if="item.index === 1" @click.stop>
<reward-cash />
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
import { mapGetters } from 'vuex';
const rewardCash = resolve => require(['./rewardCashNew'], resolve);
const rewardGift = resolve => require(['./rewardGiftNew'], resolve);
export default {
name: 'suspension-reward',
components: {
rewardCash,
rewardGift
},
data() {
return {
showAni: true,
tabIndex: 0,
defaultIcon: require('./img/icon-reward.png'),
list: [
{name:'礼物', index: 0},
{name:'现金打赏', index: 1}
],
swiper: null
};
},
props: {
value: {
type: Boolean,
default: false,
},
},
model: {
prop: 'value',
},
computed: {
...mapGetters({
channelInfo: 'channelInfo',
userInfo: 'userInfo'
}),
},
methods: {
close() {
this.$emit('input', false)
},
_tabSwitch(index) {
this.swiper && this.swiper.slideTo(index + '' || this.tabIndex + '');
},
_initSwiper() {
const self = this;
const option = {
touchRatio: 0.5,
on: {
slideChange() {
self.tabIndex = this.activeIndex;
}
}
};
this.swiper = new this.$swiper(this.$refs.swiper, option);
},
},
watch: {
value(newVal) {
if (newVal){
this.tabIndex = 0
this.$nextTick(() => {
this._initSwiper();
});
}
}
}
};
</script>
<style lang="less" scoped>
.hideAni-enter,.hideAni-leave-to{
position: fixed;
z-index: -1;
bottom: 0;
}
.fadeMaxHeight-enter,.fadeMaxHeight-leave-to{
max-height: 0;
}
.fadeMaxHeight-enter-to,.fadeMaxHeight-leave{
max-height: 60vh;
}
.fadeMaxHeight-enter-active,.fadeMaxHeight-leave-active{
transition: max-height .6s cubic-bezier(0,0,0.58,1);
}
.reward-box {
position: absolute;
bottom: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
display: flex;
color: #fff;
flex-direction: column-reverse;
.top-box {
padding: 0 .1rem;
display: flex;
height: .54rem;
justify-content: space-between;
align-items: center;
.tab-box {
width: 50%;
display: flex;
justify-content: space-around;
div {
display: inline-block;
margin-right: 0.1rem;
vertical-align: top;
font-size: 0.14rem;
color: #7D7C8D;
&.z-active {
font-size: 0.15rem;
color: #FFF;
font-weight: 800;
position: relative;
&:after {
content: '';
position: absolute;
left: calc(50% - 0.05rem);
margin: 0.05rem auto 0;
display: block;
height: 0.03rem;
width: 0.1rem;
background-color: #3185F7;
border-radius: 1px;
}
}
}
}
.sendName-box {
background: rgba(90,93,135,.3);
border-radius: .32rem;
height: .32rem;
display: flex;
align-items: center;
padding: 0 .1rem;
font-size: .13rem;
div {
display: inline-block;
padding: 0 .01rem;
}
.text {
}
.icon {
width: .12rem;
height: .12rem;
background: url('./img/icon-right.png') no-repeat center 55%;
background-size: auto 80%;
margin-left: .03rem;
opacity: .5;
}
.header {
width: .19rem;
height: .19rem;
border-radius: 50%;
background: #fff;
overflow: hidden;
margin: 0 .07rem;
img {
width: 100%;
height: 100%;
}
}
.name {
font-size: .12rem;
color: #FFEC79;
padding-top: 2px;
}
}
}
}
</style>
package.json
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
}, },
"dependencies": { "dependencies": {
"@gdyfe/ink-marks": "^1.1.4", "@gdyfe/ink-marks": "^1.1.4",
"@gdyfe/svgaplayer-for-live": "^1.0.0",
"@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",
...@@ -62,11 +63,11 @@ ...@@ -62,11 +63,11 @@
"nuxt": "^2.10.2", "nuxt": "^2.10.2",
"qrcode": "^1.4.4", "qrcode": "^1.4.4",
"quicklink": "^2.1.0", "quicklink": "^2.1.0",
"svgaplayerweb": "^2.3.2",
"swiper": "4.5.1", "swiper": "4.5.1",
"vue-lazyload": "^1.3.3", "vue-lazyload": "^1.3.3",
"vue-photoswipe.js": "^2.0.16", "vue-photoswipe.js": "^2.0.16",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-scroll-picker": "^0.7.1",
"xss": "^1.0.8" "xss": "^1.0.8"
}, },
"devDependencies": { "devDependencies": {
......
plugins/Mixin/dms.js
...@@ -193,6 +193,7 @@ const mixin = { ...@@ -193,6 +193,7 @@ const mixin = {
} }
if (Number(data.msgType) === 2 || Number(data.msgType) === 14) { if (Number(data.msgType) === 2 || Number(data.msgType) === 14) {
this.$Bus.$emit('bus-giftRoll', data); this.$Bus.$emit('bus-giftRoll', data);
this.$Bus.$emit('bus-playsvga', data);
} }
if (data.isTop) { if (data.isTop) {
this.$Bus.$emit('bus-addTopChat', data); this.$Bus.$emit('bus-addTopChat', data);
......
plugins/main.js
...@@ -48,6 +48,9 @@ if (process.client) { ...@@ -48,6 +48,9 @@ if (process.client) {
const quicklink = require('quicklink/dist/quicklink.umd') const quicklink = require('quicklink/dist/quicklink.umd')
quicklink.listen() quicklink.listen()
const ScrollPicker = require('vue-scroll-picker')
Vue.use(ScrollPicker)
if (!process.env.private) { if (!process.env.private) {
require('@/plugins/arms'); require('@/plugins/arms');
const Inkmarks = require('@gdyfe/ink-marks'); const Inkmarks = require('@gdyfe/ink-marks');
......
store/getters.js
...@@ -6,6 +6,9 @@ const defaultHead = ...@@ -6,6 +6,9 @@ const defaultHead =
const phoneHead = require(`@/assets/img/phone-head.png`); const phoneHead = require(`@/assets/img/phone-head.png`);
const getters = { const getters = {
giftAni(state) {
return state.giftAni
},
nowDate(state) { nowDate(state) {
return state.nowDate; return state.nowDate;
}, },
......
store/mutations.js
...@@ -14,6 +14,9 @@ const mutations = { ...@@ -14,6 +14,9 @@ const mutations = {
set_caseInfo(state, info) { set_caseInfo(state, info) {
state.caseInfo = info; state.caseInfo = info;
}, },
set_giftAni(state) {
state.giftAni = !state.giftAni;
},
set_drainage_state(state, info) { set_drainage_state(state, info) {
state.drainage['drainage_status'] = info; state.drainage['drainage_status'] = info;
}, },
......
store/state.js
...@@ -18,6 +18,7 @@ const state = () => ({ ...@@ -18,6 +18,7 @@ const state = () => ({
showRed: false, showRed: false,
showRedInfo: { type: '', id: '' }, showRedInfo: { type: '', id: '' },
onlySeeRed: false, onlySeeRed: false,
uuid: '' uuid: '',
giftAni: true
}); });
export default state; export default state;
yarn.lock
...@@ -2135,6 +2135,15 @@ ...@@ -2135,6 +2135,15 @@
dayjs "^1.8.34" dayjs "^1.8.34"
pako "^1.0.11" pako "^1.0.11"
"@gdyfe/svgaplayer-for-live@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@gdyfe/svgaplayer-for-live/-/svgaplayer-for-live-1.0.0.tgz#2ff345077d26ad1dd5f2b48fc7be13f361a805a6"
integrity sha512-luNIL4TobTzdYGjB/pKKGqU1XCluNfoFgRe5fAkEkYbzLLlcfb7QJA+0g6APpGLZN+mUfO91KEQsNyopfGnoRQ==
dependencies:
jszip "^3.6.0"
jszip-utils "^0.1.0"
svga.lite "^1.5.0"
"@gdyfe/uploader@^2.3.6": "@gdyfe/uploader@^2.3.6":
version "2.3.6" version "2.3.6"
resolved "https://registry.yarnpkg.com/@gdyfe/uploader/-/uploader-2.3.6.tgz#0117dcaa1c8bde3b08c82b8a5abf37d28a87772c" resolved "https://registry.yarnpkg.com/@gdyfe/uploader/-/uploader-2.3.6.tgz#0117dcaa1c8bde3b08c82b8a5abf37d28a87772c"
...@@ -7066,6 +7075,21 @@ jstoxml@^0.2.3: ...@@ -7066,6 +7075,21 @@ 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"
...@@ -7176,6 +7200,13 @@ lie@3.1.1: ...@@ -7176,6 +7200,13 @@ 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"
...@@ -8148,7 +8179,7 @@ paho-mqtt@^1.1.0: ...@@ -8148,7 +8179,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.5: pako@^1.0.11, pako@~1.0.2, 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==
...@@ -9826,6 +9857,11 @@ set-blocking@^2.0.0: ...@@ -9826,6 +9857,11 @@ 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"
...@@ -10350,10 +10386,10 @@ svg-tags@^1.0.0: ...@@ -10350,10 +10386,10 @@ svg-tags@^1.0.0:
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q= integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
svgaplayerweb@^2.3.2: svga.lite@^1.5.0:
version "2.3.2" version "1.5.0"
resolved "https://registry.yarnpkg.com/svgaplayerweb/-/svgaplayerweb-2.3.2.tgz#15595b8dcc20cf4de4adc3103970b7cf5ae19a84" resolved "https://registry.yarnpkg.com/svga.lite/-/svga.lite-1.5.0.tgz#ac1baa029b961e437f753ca70cc2a1af56fb3664"
integrity sha512-QuTvNIgy3W6Mi4h74SczEHUtAwb8m3ax7Ai7xRLUuN6hjJh49RGtWOWq1IuF2I7ECcl0HAYn8FcTn99UDz9UiQ== integrity sha512-VBPWrDMy83L3Qqv8pzmVfecVaaTK469XMtshciebRVrxBIVDN6FoK5QCNQkHW8BVe897QJAoSRhyLQqb8RBYPQ==
svgo@^1.0.0: svgo@^1.0.0:
version "1.3.2" version "1.3.2"
...@@ -11038,6 +11074,11 @@ vue-router@^3.4.3: ...@@ -11038,6 +11074,11 @@ vue-router@^3.4.3:
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.3.tgz#fa93768616ee338aa174f160ac965167fa572ffa" resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.3.tgz#fa93768616ee338aa174f160ac965167fa572ffa"
integrity sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A== integrity sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A==
vue-scroll-picker@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/vue-scroll-picker/-/vue-scroll-picker-0.7.1.tgz#31a5e73d92ea2524c14e8dc24ac80b52e2269bdf"
integrity sha512-G0TCHd3qdwmFGh+ScUpsCxHjeNPzY45bvZFHRP6xDnT66tKkuM6+QaXm4M4vO5dxyFNyzXqX9PPnH9opC+a/FA==
vue-server-renderer@^2.6.12: vue-server-renderer@^2.6.12:
version "2.6.12" version "2.6.12"
resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.12.tgz#a8cb9c49439ef205293cb41c35d0d2b0541653a5" resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.12.tgz#a8cb9c49439ef205293cb41c35d0d2b0541653a5"
......
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