<template>
<view class="contents">
<login></login>
<!-- 视频区 -->
<view class="banner">
<lives></lives>
</view>
<tabs @skipComponent="skip"></tabs>
<!-- 聊天 -->
<component :is="currentTabComponent" :specialUrl="special" :msgList="msgList" :tabType="type"></component>
<!-- 底部 -->
<view class="footer" >
<foot @specialShow="specialShow" @sendmsg="sendmsg" v-show="currentTabComponent == 'chat'"></foot>
</view>
</view>
</template>
<script>
import login from "@/components/login/login.vue"
import tabs from "@/components/tabs/tabs.vue"
import foot from "@/components/footer/footer.vue"
import chat from "@/components/chat/chat.vue"
import sinatv from "@/components/tabs/sinaTv/sinaTv.vue"
import lives from "@/components/live/live.vue"
import courseware from "@/components/tabs/courseware/courseware.vue"
import face from "@/until/face.js"
var Live
export default {
components: {
foot,
chat,
login,
tabs,
sinatv,
courseware,
lives
},
data() {
return {
loading: true,
value: '',
currentTabComponent: 'chat',
special: "",
msgList: [],
scrollTop: 0,
type: ""
}
},
created() {
this.getusertoken()
},
onshow() {
},
methods: {
//触发消息
sendmsg(val) {
this.send(val)
},
skip(value) {
console.log(value, 3)
this.currentTabComponent = value.id
this.type = value.type
},
specialShow(url) {
this.special = url
let _this = this
let timer = setTimeout(() => {
_this.special = ''
}, 1000)
},
gsnickname(val) {
var msgname = val
msgname = msgname.replace(/\d{8,}/g, "*")
msgname = msgname.length > 8 ? msgname.substring(0, 8) + "..." : msgname
return msgname
},
//获取房间token
getusertoken() {
this.$nextTick(() => {
if (uni.getStorageSync("login_ok") == 'success') {
this.$api.getusertoken().then(res => {
var that = this
var roomdid = res.data.data
if (uni.getStorageSync('room_token')) {
roomdid = uni.getStorageSync('room_token')
}
Live = new Finezb.Live(roomdid)
Live.login(function() {
console.log('登录成功', JSON.stringify(Live.getLoginUser()))
uni.setStorageSync("user_account", Live.getLoginUser().account)
Live.onMsg(function(msg) {
console.log(msg);
if (msg.type == 1) {
if (msg.extra) {
msg.extra = JSON.parse(msg.extra);
if (msg.extra) {
// role发送者角色 2-主播 3-助理 4-观众
if (msg.extra.role == undefined) {
msg.extra.role = 4
}
//观众头像
// if (!msg.extra.headUrl) {
// msg.extra.headUrl = '';
// }
}
}
msg.msgType = 1;
//解析欧畅云网页观看端发送的表情
msg.text = face.replaceEm(msg.text);
if (msg.text.indexOf('<img') != -1) {
msg.msgType = 3;
}
try {
console.log(JSON.parse(msg.text));
//解析欧畅云主播端发送的图片
var text = JSON.parse(msg.text);
if (text.notifyType == 11) {
msg.msgType = 2;
msg.original = text.original;
msg.thumb = text.thumb;
}
} catch (e) {}
if (msg.extra.isDirty != 1) {
msg.sendName = msg.sendName.replace(/\d{8,}/g,
"*")
msg.sendName = msg.sendName.length > 8 ? msg
.sendName.substring(0, 8) + "..." : msg
.sendName
that.msgList.push(msg)
}
} else if (msg.type == 3) {
//通知消息
if (msg.text == 'enter') {
msg.sendName = msg.sendName.replace(/\d{8,}/g,
"*")
msg.sendName = msg.sendName.length > 8 ? msg
.sendName.substring(0, 8) + "..." : msg
.sendName
that.msgList.push(msg)
} else {
var notify = JSON.parse(decodeURIComponent(msg
.text));
//签到
if (notify.notifyType == 12) {
console.log(notify);
that.qd_info = notify
that.show_qd = true
that.qd_type = 0
that.qd_count = notify.timer
that.qd_time = setInterval(() => {
if (that.qd_count == 0) {
that.show_qd = false
clearInterval(that.qd_time)
}
--that.qd_count;
}, 1000);
}
//礼物
if (notify.notifyType == 5) {
that.tx_list.push(notify.giftPicUrl)
var msg1 = {
type: 3,
sendTime: new Date().getTime(),
extra: {
headUrl: that.headUrl,
},
sendName: that.name_type == 0 ?
localStorage.getItem(
'user_name') : localStorage
.getItem('user_name1'),
text: notify
}
that.msgList.push(msg1)
}
//打赏
if (notify.notifyType == 2) {
var msg2 = {
type: 3,
sendTime: new Date().getTime(),
extra: {
headUrl: that.headUrl,
},
sendName: that.name_type == 0 ?
localStorage.getItem(
'user_name') : localStorage
.getItem('user_name1'),
text: notify
}
that.msgList.push(msg2)
}
}
}
})
})
})
}
})
},
//发送消息
send(val) {
if (!val.sendText) {
return;
}
let data = {
text: val.sendText,
type: val.type,
nickName: uni.getStorageSync("user_name"),
};
if (uni.getStorageSync("watch_type") == 4 && uni.getStorageSync("wxnick") == 0) {
data.nickName = uni.getStorageSync("user_name1")
}
data.extra = {
headUrl: uni.getStorageSync("user_headimg"),
role: 4,
isDirty: 0
};
// var sendlist = this.chatsetinfo.sensitiveWord
// if (this.chatsetinfo.sensitive && sendlist.length > 0) {
// for (var index in sendlist) {
// if (sendlist[index] != "" && sendlist[index].trim() != "" && this.sendText.includes(sendlist[
// index])) {
// data.extra.isDirty = 1
// break;
// }
// }
// }
data.extra = JSON.stringify(data.extra);
let msg = {
type: val.type,
sendTime: new Date().getTime(),
extra: {
headUrl: uni.getStorageSync("user_headimg"),
role: 4
},
sendName: uni.getStorageSync("user_name"),
text: face.replaceEm(val.sendText)
}
if (uni.getStorageSync("watch_type") == 4 && uni.getStorageSync("wxnick") == 0) {
msg.sendName = uni.getStorageSync("user_name1")
}
msg.sendName = msg.sendName.replace(/\d{8,}/g, "*")
msg.sendName = msg.sendName.length > 8 ? msg.sendName.substring(0, 8) + "..." : msg.sendName
this.msgList.push(msg)
this.scrollTop = 9999999999
// console.log(that.datalist)
// let id = 'msg' + msg.sendTime;
// this.msgBoxToBottom(id);
Live.sendMsg(data, function(ack) {
console.log(ack);
if (ack.code === 200) {
this.scrollTop = 500
}
})
},
}
}
</script>
<style lang="scss">
.contents {
width: 750rpx;
display: flex;
flex-direction: column;
.banner {
width: 100%;
height: 420rpx;
background-image: url("../../static/images/banner.png");
background-repeat: no-repeat;
background-size: contain;
}
.title {
height: 72rpx;
background-color: #5E6DF0;
color: white;
display: flex;
align-items: center;
padding-left: 20rpx;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: white;
box-shadow: 0 -2rpx 30rpx #dadada;
}
#playerback {
width: 100%;
height: 420rpx;
z-index: 0;
}
}
</style>