Skip to content

H
h5-watch
Commit 43a3557a by liuliufashi
Options

添加跑马灯

parent b69c1c89
Showing with 456 additions and 242 deletions
components/live/live.vue
<template>
<view class="plays">
<text class="absolute" :style="{animation}">{{marquee_list.customContent}}</text>
<view id="playerWapper" v-show="show_play"></view>
<view id="playerback" v-show="!show_play"></view>
</view>
......@@ -14,12 +15,17 @@
export default {
name: "live",
created() {
this.getusertoken()
this.getusertoken();
this.getmarquee();
this.getRandom()
},
data() {
return {
show_play: false,
roomconfig: {},
marquee_list:{},
animation:{},
margintop:0
};
},
methods: {
......@@ -100,13 +106,55 @@
})
},
//获取跑马灯数据
getmarquee(){
let that = this;
this.$api.getroommarquee().then(res => {
console.log('res',res)
if(res.data.code == 200){
let data = res.data.data;
that.marquee_list = data;
let length = data.fontSize * data.customContent.length;
that.length = length;
that.animation = {
right: `-${length+20}rpx`,
animation: 'identifier 5s infinite',
marginTop:0
}
console.log(that.animation,'ani')
}
})
},
// 获取随机数
getRandom(){
let that = this;
let timer = setTimeout(() => {
that.margintop = Math.floor(Math.random()*420)
clearTimeout(timer);
},5000);
}
},
}
</script>
<style>
<style lang="scss" scoped>
.plays {
width: 100%;
height: 420rpx;
}
// 公用样式
.absolute{
position:absolute;
z-index: 2;
color: white;
}
// .animation{
// right: -160rpx;
// animation: identifier 5s infinite linear;
// }
/* 跑马灯 */
@keyframes identifier {
0%{ right: -160rpx;display: none; }
100%{ right:750rpx;display: inline; }
}
</style>
components/tabs/courseware/courseware.vue
<template>
<view class="flex a-center j-center box">
<u-empty v-if="showFalg" mode="data" text="内容为空">
<view class="box">
<!-- 视频 -->
<view class="video-box" v-if="tabType == 3 && videoList.length != 0">
<view class="video-single w-50" v-for="item in videoList" :key="item.videold">
<video class="w-100" src="" :poster="item.recFirstFrameUrl" object-fit="fill"></video>
<view class="video-name">
{{item.name}}
</view>
</view>
</view>
<!-- 内容为空时 -->
<u-empty v-else mode="data" :text="text" class="empty">
</u-empty>
</view>
</template>
......@@ -19,8 +29,8 @@
},
data() {
return {
showFalg:true,
videoList:[]
videoList: [],
text:""
};
},
methods: {
......@@ -28,29 +38,30 @@
tabsif(value) {
switch (value) {
case 2:
this.text = "课件页面"
this.text = "课件内容为空"
break;
case 3:
this.$api.getroombindvideos().then(res => {
if(res.data.code == 200){
this.videoList = this.data.data
if (res.data.code == 200) {
this.videoList = res.data.data
console.log(res.data.data)
}
})
break;
case 4:
this.text = "问答页面"
this.text = "问答内容为空"
break;
case 5:
this.text = "讲师评价"
this.text = "讲师评价为空"
break;
case 7:
this.text = "外部链接"
this.text = "外部链接为空"
break;
case 9:
this.text = "图文编辑"
this.text = "图文编辑为空"
break;
default:
this.text = "自定义页面"
this.text = "自定义页面为空"
break;
}
}
......@@ -59,7 +70,41 @@
</script>
<style lang="scss" scoped>
.box{
// 公用区
.box {
height: calc(100vh - 500rpx);
.empty{
height: 100%;
}
}
.w-50 {
width: 50%;
}
.w-100{
width: 100%;
}
// 视频区
.video-box{
overflow-y: auto;
height: 100%;
box-sizing: border-box;
padding: 40rpx;
.video-single{
display: inline-block;
box-sizing: border-box;
padding: 10rpx;
video{
height: 200rpx;
border-radius: 20rpx;
}
.video-name{
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-bottom: 20rpx;
}
}
}
</style>
components/tabs/index.vue 0 → 100644
<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>
components/tabs/sinaTv/sinaTv.vue
......@@ -3,13 +3,13 @@
<!-- 直播详情 -->
<view class="sinaTvTitle flex a-center p-32">
<view class="mr-18">
<u-avatar :src="sinaTv.url" size="80"></u-avatar>
<u-avatar :src="sinaTv.url" size="80" shape="square"></u-avatar>
</view>
<view class="flex-1">
<h4>{{sinaTv.title}}</h4>
<view class="flex j-between a-center font-color font-24">
<text>开始时间：{{sinaTv.time}}</text>
<text>{{sinaTv.number}}人观看</text>
<text>{{number}}人观看</text>
</view>
</view>
</view>
......@@ -18,7 +18,7 @@
<scroll-view class="parse" scroll-y="true">
<view class="teacher flex a-center p-32">
<view class="mr-18">
<u-avatar :src="sinaTv.url" size="80" shape="square"></u-avatar>
<u-avatar :src="sinaTv.url" size="80"></u-avatar>
</view>
<view class="flex-1 flex flex-col">
<h4 class="flex-1">{{teacher.name}}</h4>
......@@ -39,8 +39,10 @@
<u-gap height="8" bgColor="#F5F5F5" textIndent="28"></u-gap>
<!-- 富文本编辑器 -->
<view class="p-32">
<u-parse :content="content"></u-parse>
<u-empty class="empty" mode="data" text="暂无详情" v-if="content !== ''"></u-empty>
<u-parse v-else :content="content"></u-parse>
</view>
</scroll-view>
</view>
</template>
......@@ -51,26 +53,35 @@
data() {
return {
falg: false,
sinaTv: {
title: "欧畅云特别功能讲解直播内容",
time: "2022-09-18 15:00",
number: 1534,
url: "/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png"
},
teacher: {
url: "/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png",
name: "李老师",
text: "本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省,本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省"
},
content: `
<p>直播营销：最直观的方式，打造商品品牌，给更多粉丝用户传递品牌形象。大数据覆盖，挖掘潜在用户，增进商家和其私域用户感情，提高私域用户感情，提高私域流量活跃度，提升</p>
<img src="/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png" />
<p>直播营销：最直观的方式，打造商品品牌，给更多粉丝用户传递品牌形象。大数据覆盖，挖掘潜在用户，增进商家和其私域用户感情，提高私域用户感情，提高私域流量活跃度，提升</p>
<img src="/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png" />
<p>直播营销：最直观的方式，打造商品品牌，给更多粉丝用户传递品牌形象。大数据覆盖，挖掘潜在用户，增进商家和其私域用户感情，提高私域用户感情，提高私域流量活跃度，提升</p>
<img src="/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png" />
`
};
number: 1534,
sinaTv: {},
teacher: {},
content: "",
}
},
created() {
this.getdetails();
},
methods: {
// 获取直播详情
getdetails(){
this.$api.getwatchroombasevo().then(res => {
if (res.data.code == 200) {
let data = res.data.data;
this.sinaTv = {
title: data.roomName,
time: data.startPlayTime,
url: data.coverImage
};
this.teacher = {
url: data.lecturerIntro,
name: data.lecturerName,
text: data.lecturerIntro
};
this.content = data.content;
}
})
},
}
}
</script>
......@@ -108,4 +119,7 @@
.parse {
height: calc(100vh - 700rpx);
}
.empty{
transform: translate(0,50%);
}
</style>
pages/index/index.vue
......@@ -7,10 +7,10 @@
</view>
<tabs @skipComponent="skip"></tabs>
<!-- 聊天 -->
<component :is="currentTabComponent" :specialUrl="special" :msgList="msgList" :tabType="type"></component>
<component :is="currentTabComponent" :specialUrl="special" :tabType="type"></component>
<!-- 底部 -->
<view class="footer" >
<foot @specialShow="specialShow" @sendmsg="sendmsg" v-show="currentTabComponent == 'chat'"></foot>
<view class="footer" v-show="currentTabComponent == 'chat'">
<foot @specialShow="specialShow"></foot>
</view>
</view>
</template>
......@@ -23,9 +23,7 @@
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,
......@@ -42,24 +40,16 @@
value: '',
currentTabComponent: 'chat',
special: "",
msgList: [],
scrollTop: 0,
type: ""
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
},
......@@ -70,193 +60,6 @@
_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>
......@@ -285,15 +88,17 @@
}
.footer {
height: 88rpx;
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
background-color: white;
box-shadow: 0 -2rpx 30rpx #dadada;
;
}
#playerback {
#playerback{
width: 100%;
height: 420rpx;
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