You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
264 lines
9.3 KiB
264 lines
9.3 KiB
<template>
|
|
<view class="wanl-live-message">
|
|
<view class="wanl-live-comment">
|
|
<view class="wanl-live-comment-item">
|
|
<scroll-view scroll-y="true" :show-scrollbar="false" :scroll-into-view="scrollToView" :scroll-with-animation="true" class="wanl-live-comment-item-scroll">
|
|
<!-- #ifdef APP -->
|
|
<view class="wanl-live-comment-item-scroll-app" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
|
|
<view class="wanl-live-comment-item-scroll-app-item">
|
|
<text :class="[iscolor(item.form.id)]" class="app-text">{{item.form.nickname}}：</text>
|
|
<text class="app-context">{{item.text}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<div class="wanl-live-comment-item-scroll-h5" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
|
|
<div class="wanl-live-comment-item-tag">
|
|
<text :class="[iscolor(item.form.id)]" class="mph5-text">{{item.form.nickname}}：</text>
|
|
<text class="mph5-context">{{item.text}}</text>
|
|
</div>
|
|
</div>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP -->
|
|
<div class="wanl-live-comment-item-scroll-mp" v-for="(item, index) in msgList" :key="index" :id="'msg' + index">
|
|
<div class="wanl-live-comment-item-tag">
|
|
<text :class="[iscolor(item.form.id)]" class="mph5-text">{{item.form.nickname}}：</text>
|
|
<text class="mph5-context">{{item.text}}</text>
|
|
</div>
|
|
</div>
|
|
<!-- #endif -->
|
|
</scroll-view>
|
|
</view>
|
|
<view class="wanl-live-like">
|
|
<!-- #ifndef APP -->
|
|
<view v-for="(item,index) in likeList" :data-t="index" :key="index" :class="item.class"></view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<uni-transition
|
|
:mode-class="['slide-left']"
|
|
:styles="{ 'position':'absolute', 'left':'0', 'top':'-60rpx', }"
|
|
:show="comingShow">
|
|
<view class="wanl-live-coming">
|
|
<text class="wanl-live-coming-text">{{comingName}} 他来了他来了~</text>
|
|
</view>
|
|
</uni-transition>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "wanlLiveMessage",
|
|
data() {
|
|
return {
|
|
scrollToView: 'msg1',
|
|
comingShow: false,
|
|
comingName: '',
|
|
watchTimer: null,
|
|
msgList: [],
|
|
likeList: []
|
|
};
|
|
},
|
|
created() {
|
|
setTimeout(() => {
|
|
this.msgList.push({
|
|
form: {
|
|
id: 0,
|
|
nickname: '平台提醒'
|
|
},
|
|
text: '谨防上当受骗！'
|
|
});
|
|
}, 500);
|
|
// #ifndef APP
|
|
setInterval(() => {
|
|
this.likeStart();
|
|
}, 300);
|
|
// #endif
|
|
},
|
|
methods: {
|
|
// 测试使用
|
|
likeStart() {
|
|
var b = Math.floor(Math.random() * 6) + 1,
|
|
bl = Math.floor(Math.random() * 11) + 1;
|
|
this.likeList.push({class: `bubble b${b} bl${bl}`});
|
|
},
|
|
onMessage(msg) {
|
|
var message = msg.message;
|
|
var form = msg.form;
|
|
if (message.type == 'msg' || message.type == 'seek' || message.type == 'follow' || message.type =='like' || message.type == 'review') {
|
|
if(message.type =='like'){
|
|
this.likeStart();
|
|
}
|
|
this.msgList.push({
|
|
form: form,
|
|
text: message.text
|
|
});
|
|
this.$nextTick(() => {
|
|
this.scrollToView = `msg${this.msgList.length - 1}`;
|
|
});
|
|
}else if (message.type == 'coming') {
|
|
if (this.comingShow) {
|
|
clearTimeout(this.watchTimer);
|
|
this.comingShow = false;
|
|
}
|
|
this.comingName = form.nickname;
|
|
this.openComing();
|
|
}
|
|
},
|
|
openComing() {
|
|
this.comingShow = true;
|
|
this.watchTimer = setTimeout(() => {
|
|
this.comingShow = false;
|
|
}, 1000);
|
|
},
|
|
iscolor(id) {
|
|
return ['text-orange', 'text-white', 'text-orange', 'text-yellow', 'text-green', 'text-olive', 'text-green','text-purple', 'text-pink', 'text-pink', 'text-purple'][parseInt(id % 10)]
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@import '@/static/style/wanlnvue.css';
|
|
/* 群组消息 */
|
|
.wanl-live-comment{
|
|
/* #ifndef APP */
|
|
-webkit-mask: -webkit-gradient(linear,left 30%,left top,from(#000),to(transparent));
|
|
/* #endif */
|
|
margin-left: 25rpx;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
position: relative;
|
|
}
|
|
.wanl-live-comment-item{
|
|
overflow: hidden;
|
|
color: #FFFFFF;
|
|
flex: 1;
|
|
}
|
|
.wanl-live-comment-item-scroll{
|
|
/* #ifdef H5 || MP */
|
|
max-height: 500rpx;
|
|
min-height: 60rpx;
|
|
/* #endif */
|
|
/* #ifdef APP */
|
|
height: 500rpx;
|
|
/* #endif */
|
|
}
|
|
/* #ifdef H5 || MP */
|
|
.wanl-live-comment-item-scroll-h5{
|
|
margin-top: 6rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
.wanl-live-comment-item-scroll-mp{
|
|
margin-bottom: 6rpx;
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
.wanl-live-comment-item-tag{
|
|
background-color: rgba(0,0,0,.2);
|
|
padding-top: 8rpx;
|
|
padding-right: 16rpx;
|
|
padding-bottom: 8rpx;
|
|
padding-left: 16rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
}
|
|
/* #endif */
|
|
.wanl-live-comment-item-scroll-app{
|
|
flex-direction: row;
|
|
margin-top: 6rpx;
|
|
}
|
|
.wanl-live-comment-item-scroll-app-item{
|
|
background-color: rgba(0,0,0,.2);
|
|
padding-top: 8rpx;
|
|
padding-right: 16rpx;
|
|
padding-bottom: 8rpx;
|
|
padding-left: 16rpx;
|
|
border-radius: 10rpx;
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* 点赞特效 */
|
|
.wanl-live-like{
|
|
position: relative;
|
|
/* #ifndef APP */
|
|
flex: 0 0 120rpx;
|
|
/* #endif */
|
|
width: 120rpx;
|
|
height: 500rpx;
|
|
}
|
|
/* #ifndef APP */
|
|
.bubble {
|
|
position: absolute;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
bottom: 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
transform-origin: bottom;
|
|
}
|
|
.b1 {background-image: url(/static/images/live/1.png);}
|
|
.b2 {background-image: url(/static/images/live/2.png);}
|
|
.b3 {background-image: url(/static/images/live/3.png);}
|
|
.b4 {background-image: url(/static/images/live/4.png);}
|
|
.b5 {background-image: url(/static/images/live/5.png);}
|
|
.b6 {background-image: url(/static/images/live/6.png);}
|
|
.bl1 {animation: bubble_1 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl2 {animation: bubble_2 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl3 {animation: bubble_3 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl4 {animation: bubble_4 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl5 {animation: bubble_5 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl6 {animation: bubble_6 3s linear 1 forwards,bubble_big_3 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl7 {animation: bubble_7 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl8 {animation: bubble_8 3s linear 1 forwards,bubble_big_3 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl9 {animation: bubble_9 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl10 {animation: bubble_10 3s linear 1 forwards,bubble_big_1 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
.bl11 {animation: bubble_11 3s linear 1 forwards,bubble_big_2 0.8s linear 1 forwards,bubble_y 3s linear 1 forwards;}
|
|
@keyframes bubble_11 {0% {}25% {margin-left: -20rpx;}50% {margin-left: -20rpx;}100% {margin-left: -36rpx;}}
|
|
@keyframes bubble_10 {0% {}25% {margin-left: -40rpx;}50% {margin-left: -40rpx;}100% {margin-left: -40rpx;}}
|
|
@keyframes bubble_9 {0% {}25% {margin-left: 20rpx;}50% {margin-left: 20rpx;}100% {margin-left: 20rpx;}}
|
|
@keyframes bubble_8 {0% {}25% {margin-left: 40rpx;}50% {margin-left: 40rpx;}100% {margin-left: 40rpx;}}
|
|
@keyframes bubble_7 {0% {}25% {margin-left: 6rpx;}50% {margin-left: 2rpx;}75% {margin-left: 4rpx;}100% {margin-left: 6rpx;}}
|
|
@keyframes bubble_6 {0% {}25% {margin-left: -6rpx;}50% {margin-left: -2rpx;}75% {margin-left: -4rpx;}100% {margin-left: -6rpx;}}
|
|
@keyframes bubble_5 {0% {}25% {margin-left: 10rpx;}50% {margin-left: -10rpx;}75% {margin-left: -20rpx;}100% {margin-left: -40rpx;}}
|
|
@keyframes bubble_4 {0% {}25% {margin-left: -10rpx;}50% {margin-left: -10rpx;}75% {margin-left: 40rpx;}100% {margin-left: 20rpx;}}
|
|
@keyframes bubble_3 {0% {}25% {margin-left: -40rpx;}50% {margin-left: 20rpx;}75% {margin-left: 40rpx;}100% {margin-left: -20rpx;}}
|
|
@keyframes bubble_2 {0% {}25% {margin-left: 40rpx;}50% {margin-left: 50rpx;}75% {margin-left: 20rpx;}100% {margin-left: 10rpx;}}
|
|
@keyframes bubble_1 {0% {}25% {margin-left: -16rpx;}50% {margin-left: 16rpx;}75% {margin-left: -30rpx;}100% {margin-left: 30rpx;}}
|
|
@keyframes bubble_big_1 {0% {transform: scale(0.3);}100% {transform: scale(1.2);}}
|
|
@keyframes bubble_big_2 {0% {transform: scale(0.3);}100% {transform: scale(0.9);}}
|
|
@keyframes bubble_big_3 {0% {transform: scale(0.3);}100% {transform: scale(0.6);}}
|
|
@keyframes bubble_y {0% {margin-bottom: 0;}10% {margin-bottom: 0;}75% {opacity: 1;}100% {margin-bottom: 400rpx;opacity: 0;}}
|
|
/* #endif */
|
|
/* 欢迎信息 */
|
|
.wanl-live-coming {
|
|
margin-left: 25rpx;
|
|
background-color: rgba(255, 86, 136, .7);
|
|
padding-top: 8rpx;
|
|
padding-right: 16rpx;
|
|
padding-bottom: 8rpx;
|
|
padding-left: 16rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.wanl-live-coming-text {
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
}
|
|
.app-text{
|
|
font-size: 29rpx;
|
|
}
|
|
.app-context{
|
|
font-size: 29rpx;
|
|
color: #ffffff;
|
|
}
|
|
.mph5-text{
|
|
font-size: 26rpx;
|
|
}
|
|
.mph5-context{
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
|