Skip to content

H
h5-watch
Commit a8b7d2d0 by liuliufashi
Options

测试拉取

parent 43a3557a
Showing with 218 additions and 327 deletions
components/live/live.vue
<template> <template>
<view class="plays"> <view class="plays">
<text class="absolute" :style="{animation}">{{marquee_list.customContent}}</text> <text class="absolute animation" :style="animation">{{marquee.customContent}}</text>
<view id="playerWapper" v-show="show_play"></view> <view id="playerWapper" v-show="show_play"></view>
<view id="playerback" v-show="!show_play"></view> <view id="playerback" v-show="!show_play"></view>
</view> </view>
...@@ -14,16 +14,15 @@ ...@@ -14,16 +14,15 @@
var hlsJsPlayer var hlsJsPlayer
export default { export default {
name: "live", name: "live",
created() { mounted() {
this.getusertoken(); this.getusertoken();
this.getmarquee(); this.getmarquee();
this.getRandom()
}, },
data() { data() {
return { return {
show_play: false, show_play: false,
roomconfig: {}, roomconfig: {},
marquee_list:{}, marquee:{},
animation:{}, animation:{},
margintop:0 margintop:0
}; };
...@@ -113,24 +112,24 @@ ...@@ -113,24 +112,24 @@
console.log('res',res) console.log('res',res)
if(res.data.code == 200){ if(res.data.code == 200){
let data = res.data.data; let data = res.data.data;
that.marquee_list = data; that.marquee = data;
let length = data.fontSize * data.customContent.length; length = data.fontSize * data.customContent.length;
that.length = length;
that.animation = { that.animation = {
right: `-${length+20}rpx`, right: `-${length+50}rpx`,
animation: 'identifier 5s infinite', marginTop:"0"
marginTop:0
} }
console.log(that.animation,'ani') that.getRandom()
} }
}) })
}, },
// 获取随机数 // 获取随机数
getRandom(){ getRandom(){
let that = this; let that = this;
let timer = setTimeout(() => { let timer = setTimeout(() => {
that.margintop = Math.floor(Math.random()*420) let num = Math.floor(Math.random()*400)
that.animation.marginTop = `${num}rpx`
clearTimeout(timer); clearTimeout(timer);
getRandom()
},5000); },5000);
} }
}, },
...@@ -148,10 +147,9 @@ ...@@ -148,10 +147,9 @@
z-index: 2; z-index: 2;
color: white; color: white;
} }
// .animation{ .animation{
// right: -160rpx; animation: identifier 5s infinite linear;
// animation: identifier 5s infinite linear; }
// }
/* 跑马灯 */ /* 跑马灯 */
@keyframes identifier { @keyframes identifier {
0%{ right: -160rpx;display: none; } 0%{ right: -160rpx;display: none; }
......
components/tabs/index.vue deleted 100644 → 0
<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>
pages/index/index.vue
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
</view> </view>
<tabs @skipComponent="skip"></tabs> <tabs @skipComponent="skip"></tabs>
<!-- 聊天 --> <!-- 聊天 -->
<component :is="currentTabComponent" :specialUrl="special" :tabType="type"></component> <component :is="currentTabComponent" :specialUrl="special" :msgList="msgList" :tabType="type"></component>
<!-- 底部 --> <!-- 底部 -->
<view class="footer" v-show="currentTabComponent == 'chat'"> <view class="footer" >
<foot @specialShow="specialShow"></foot> <foot @specialShow="specialShow" @sendmsg="sendmsg" v-show="currentTabComponent == 'chat'"></foot>
</view> </view>
</view> </view>
</template> </template>
...@@ -23,7 +23,9 @@ ...@@ -23,7 +23,9 @@
import sinatv from "@/components/tabs/sinaTv/sinaTv.vue" import sinatv from "@/components/tabs/sinaTv/sinaTv.vue"
import lives from "@/components/live/live.vue" import lives from "@/components/live/live.vue"
import courseware from "@/components/tabs/courseware/courseware.vue" import courseware from "@/components/tabs/courseware/courseware.vue"
import face from "@/until/face.js"
var Live
export default { export default {
components: { components: {
foot, foot,
...@@ -40,16 +42,24 @@ ...@@ -40,16 +42,24 @@
value: '', value: '',
currentTabComponent: 'chat', currentTabComponent: 'chat',
special: "", special: "",
type:"" msgList: [],
scrollTop: 0,
type: ""
} }
}, },
created() { created() {
this.getusertoken()
}, },
onshow() { onshow() {
}, },
methods: { methods: {
//触发消息
sendmsg(val) {
this.send(val)
},
skip(value) { skip(value) {
console.log(value, 3)
this.currentTabComponent = value.id this.currentTabComponent = value.id
this.type = value.type this.type = value.type
}, },
...@@ -60,6 +70,193 @@ ...@@ -60,6 +70,193 @@
_this.special = '' _this.special = ''
}, 1000) }, 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> </script>
...@@ -88,17 +285,15 @@ ...@@ -88,17 +285,15 @@
} }
.footer { .footer {
height: 88rpx;
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
display: flex;
background-color: white; background-color: white;
box-shadow: 0 -2rpx 30rpx #dadada; box-shadow: 0 -2rpx 30rpx #dadada;
;
} }
#playerback{
#playerback {
width: 100%; width: 100%;
height: 420rpx; height: 420rpx;
z-index: 0; z-index: 0;
......
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 to comment