Skip to content

L
learn-online-pc
提交 a5b61453 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

live手机端合并

上级 bbc3f2bb
隐藏空白字符变更
内嵌 并排
正在显示 包含 348 行增加 和 234 行删除
client/src/assets/languages/en.json
浏览文件 @ a5b61453
......@@ -226,5 +226,21 @@
"failed": "Fail"
}
}
},
"live": {
"start": "About to start",
"notStarted": "Not started",
"liveStreaming": "Live broacasting",
"liveEnd": "Preparing playback",
"liveEndNotVideo": "Live broadcast has ended, Video is editing",
"watchReplay": "Watch playback",
"noPlayback": "This live has no playback",
"startInMinutes": "Start after {minutes} minutes",
"startInHours": "Starts after {h}h and {min}min",
"startInDay": "Start in {day} day",
"liveReminder": "Live reminder",
"goLive": "Go live",
"startTime": "will start at {time}",
"replayTips": "Tip: Please watch the playback of the courses you have attended at the computer-side learning system"
}
}
client/src/assets/languages/zh-CN.json
浏览文件 @ a5b61453
......@@ -226,5 +226,21 @@
"failed": "未通过"
}
}
},
"live": {
"start": "即将开始",
"notStarted": "直播未开始",
"liveStreaming": "正在直播",
"liveEnd": "直播结束",
"liveEndNotVideo": "直播结束，视频剪辑中",
"watchReplay": "观看回放",
"noPlayback": "该直播没有回放",
"startInMinutes": "{minutes}分钟后开始",
"startInHours": "{h}小时{min}分钟后开始",
"startInDay": "{day}天后开始",
"liveReminder": "直播提醒",
"goLive": "进入直播",
"startTime": "将于{time}开始",
"replayTips": "提示语：已参加的课程请到电脑端学习系统观看回放"
}
}
client/src/pages/mobileLive/list.vue
浏览文件 @ a5b61453
<template>
<div class="pages">
<div class="head">
<img class="logo5" alt="logo" src="@/assets/images/logo-header.png">
<div class="userinfo">
<div class="login-out" @click="goOutLogin()">退出</div>
<div class="name">{{ name }}</div>
<img class="logo" src="../../assets/images/logo-header.png" />
<div class="user">
<div class="nickname">{{ nickName }}</div>
<div class="logout" @click="logout">{{$t('components.learnSysLayout.sideBar.outLogin')}}</div>
</div>
</div>
<div class="hint" v-show="latest && latest.live" @click="opencc(latest)" >
<div class="hint" v-if="latest" @click="onClick(latest.live)">
<div class="left">
<div class="left-1">直播提醒</div>
<div class="left-2">《{{latest.course_name}}》将于 {{latest.live && latest.live.start_time.slice(5)}} 开始</div>
<div class="left-1">{{$t('live.liveReminder')}}：</div>
<div
class="left-2"
>《{{latest.course_name}}》{{$t('live.startTime', { time: latest.live.start_time })}}</div>
</div>
<div class="right">进入直播 ></div>
<div class="right">{{$t('live.goLive')}}</div>
</div>
<div class="tips">提示语：已参加的课程请到电脑端学习系统观看回放</div>
<div class="list-box">
<div class="curriculum" v-for="(item, index) in obj" v-bind:key="index" >
<h4 class="curriculum-name">{{item.course_name}}</h4>
<div class="curriculum-box" @click="opencc(item)" >
<img class="curriculum-picture" :src="item.curriculum.curriculum_picture" />
<div class="curriculum-introduce">
<div class="title">{{item.curriculum.curriculum_name}}</div>
<div class="time">{{item.live ? item.live.time : ''}}</div>
<div class="tips">{{$t('live.replayTips')}}</div>
<div class="live-list">
<template v-for="item in dataList">
<div
class="live-item"
:key="subitem.id"
v-for="subitem in item.live"
@click="onClick(subitem)"
>
<h4 class="live-item-name">{{item.course_name}}</h4>
<div class="live-item-main">
<img class="live-item-pic" :src="item.curriculum.curriculum_picture" />
<div class="live-item-content">
<div class="live-item-content__title">{{subitem.chapter_name}}</div>
<div
class="live-item-content__time"
>{{calcTimeText(subitem.start_time,subitem.live_status)}}</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
import cAction from '@action'
export default {
data () {
metaInfo() {
return {
name: (window.G.UserInfo && window.G.UserInfo.student_info && window.G.UserInfo.student_info.personal_name) || '匿名',
latest: '',
obj: [],
loading: null
title: this.$t('pages.common.title')
}
},
metaInfo () {
data() {
return {
title: '清华大学五道口金融学院',
meta: [
// { vmid: 'description', name: 'description', content: this.description }
]
latest: null,
dataList: [],
loading: null,
message: null,
timer: null
}
},
mounted () {
const _this = this
this.loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
this.dealRender()
_this.getNewLiveMsg()
_this.getLiveLis()
setInterval(function () {
_this.getNewLiveMsg()
_this.getLiveLis()
}, 3000)
computed: {
user() {
return window.G.UserInfo ? window.G.UserInfo.student_info : {}
},
nickName() {
return this.user.personal_name || '匿名'
}
},
methods: {
/* 退出登录 - 跳转方法 */
goOutLogin () {
// cAction.Ohter.outLogin().then(str => {
// if (/^login/gi.test(str)) {
// window.G.UserInfo = {}
// // this.$router.push({ path: '/login/index' })
// // this.$router.push({ path: '/' })
// window.location.href = 'https://pbcsf.ezijing.com/login/index'
// } else {
// /* 出错 */
// }
// }).catch(e => {
// this.$message.error(e.message)
// })
/* 清空一下记录，然后调整到登录页 */
this.$router.push({ path: '/login/index' })
logout() {
cAction.Others
.outLogin()
.then(str => {
window.G.UserInfo = {}
this.$router.push({ path: '/login/index' })
})
.catch(e => {
this.$message.error(e.message)
})
},
getNewLiveMsg: function () {
getNewLiveMsg() {
// 获取最新直播提醒
const _this = this
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.Player.getNewLiveMsg().then(json => {
if (json.status === 200) {
_this.latest = json.data
window.console.log(_this.latest)
}
if (_this.loading) {
_this.loading.close()
_this.loading = null
}
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
cAction.Player
.getNewLiveMsg()
.then(response => {
if (response.status === 200) {
this.latest = response.data
}
})
.finally(() => {
this.loading && this.loading.close()
})
},
getLiveLis: function () {
getLiveList() {
// 获取最新直播列表
const _this = this
cAction.Player.getLiveList().then(json => {
if (json.status === 200) {
json.data.map(function (item, index, arr) {
if (item.live && (item.live.length || item.live.user_id)) {
let _time = item.live.start_time
const _status = item.live.live_status
const enableRecord = item.live.enable_record // 0: 不启用回放 1: 开启回放
let str = ''
switch (_status) {
case 0: str = '直播未开始'; break
case 1: str = '正在直播'; break
case 2: str = '直播结束'; break
case 101: str = '直播结束，视频剪辑中'; break // 录制开始
case 102: str = '直播结束，视频剪辑中'; break // 录制结束
case 103: str = '观看回放'; break
default: str = '直播未开始'
}
if (_status === 103 && !enableRecord) str = ''
if (_status === 0 && _time) {
_time = _time.replace(/-/g, '/')
const time = (new Date(_time).getTime() - new Date().getTime()) / 1000
if (time <= 5 * 60) {
str = '即将开始'
} else if (time <= 1 * 60 * 60) {
str = parseInt(time / 60) + '分钟后开始'
} else if (time <= 24 * 60 * 60) {
str = parseInt(time / (60 * 60)) + '小时' + parseInt(time / 60 % 60) + '分钟后开始'
} else {
str = parseInt(time / (24 * 60 * 60)) + '天后开始'
}
}
item.live.time = str
}
return item
})
_this.obj = json.data
}
if (_this.loading) {
_this.loading.close()
_this.loading = null
}
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
cAction.Player
.getLiveList()
.then(response => {
if (response.status === 200) {
this.dataList = response.data
}
})
.catch(e => {
this.$message.error(e.message)
})
.finally(() => {
if (this.loading) {
this.loading.close()
this.loading = null
}
})
},
dealRender: () => {
(function (win, doc) {
let wWidth = (win.screen.width > 0) ? (win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth : win.innerWidth // eslint-disable-line
const wFsize = (wWidth > 640 ? 640 : wWidth) / 375 * 100
;(function(win, doc) {
const wWidth =
win.screen.width > 0
? win.innerWidth >= win.screen.width || win.innerWidth === 0
? win.screen.width
: win.innerWidth
: win.innerWidth
const wFsize = ((wWidth > 640 ? 640 : wWidth) / 375) * 100
// wFsize = wFsize > 32 ? wFsize : 32;
doc.documentElement.style.fontSize = wFsize + 'px'
})(window, document)
},
opencc: function (obj) {
const _live = obj.live
if (!_live || !_live.user_id) {
this.$message.error('网络错误，刷新重试')
onClick(data) {
const {
live_status: liveStatus,
live_type: liveType,
start_time: liveTime
} = data
const message = this.calcTimeText(liveTime, liveStatus)
if (liveType === 'cloud') {
// 打开云课堂
this.openCloudClass(data, message)
return
}
const userid = _live.user_id
const roomid = _live.room_id
const viewertoken = _live.viewer_token
const recordid = _live.record_id
const liveStatus = _live.live_status
const enableRecord = _live.enable_record // 0: 不启用回放 1: 开启回放
const viewername = this.name
let _url = 'https://view.csslcloud.net/api/view'
if (recordid && liveStatus === 103) {
if (!enableRecord) {
this.$message.warning('该直播没有回放')
return
}
// 可以回放
// https://view.csslcloud.net/api/view/callback?recordid=xxx&roomid=xxx&userid=xxx&autoLogin=true&viewername=xxx&viewertoken=xxx&groupid=xxx
_url = _url + '/callback?autoLogin=true&roomid=' + roomid + '&userid=' + userid + '&recordid=' + recordid + '&viewername=' + viewername + '&viewertoken=' + viewertoken
if (liveType === 'live') {
// 打开云直播
this.openCloudLive(data, message)
return
}
if (liveType === 'meeting') {
// 打开腾讯会议
this.openMeeting(data, message)
return
}
// 其他直播类型直接打开
if (liveStatus === 1) {
// 进行中
this.openNewWindow(data.join_url)
} else if (liveStatus === 103) {
// 查看回放
this.openNewWindow(data.record_url)
} else {
// 可以直播
// https://view.csslcloud.net/api/view/index?roomid=xxx&userid=xxx&autoLogin=true&viewername=xxx&viewertoken=xxx&groupid=xxx
_url = _url + '/index?autoLogin=true&roomid=' + roomid + '&userid=' + userid + '&viewername=' + viewername + '&viewertoken=' + viewertoken
this.message && this.message.close()
this.message = this.$message({ type: 'warning', offset: 0, message })
}
window.console.log(_url)
window.open(_url, '_blank')
},
// 打开云课堂
openCloudClass(data, message) {
// https://doc.bokecc.com/class/developer/api/login.html
const liveStatus = data.live_status
if (liveStatus === 1) {
// 进行中
const url = `http://view.csslcloud.net/api/view/index?roomid=${data.room_id}&userid=${data.user_id}&autoLogin=true&viewername=${data.username}&viewertoken=${data.password}`
this.openNewWindow(url)
} else if (liveStatus === 2 || liveStatus === 103) {
// 查看回放
const replayUrl = data.record_url.replayUrl
const url = replayUrl
? `${replayUrl}&autoLogin=true&viewername=${data.username}&viewertoken=${data.password}`
: ''
this.openNewWindow(url)
} else {
this.message && this.message.close()
this.message = this.$message({ type: 'warning', offset: 0, message })
}
},
// 打开云直播
openCloudLive(data, message) {
// https://doc.bokecc.com/live/Appendix_1.html
const liveStatus = data.live_status
if (liveStatus === 1) {
// 进行中
const url = `https://view.csslcloud.net/api/view/index?roomid=${data.room_id}&userid=${data.user_id}&autoLogin=true&viewername=${data.viewer_name}&viewertoken=${data.viewer_token}`
this.openNewWindow(url)
} else if (
(liveStatus === 2 || liveStatus === 103) &&
data.enable_record === 1
) {
// enable_record 0:不启用回放 1:开启回放
// 查看回放
const url = `https://view.csslcloud.net/api/view/callback?recordid=${data.record_id}&roomid=${data.room_id}&userid=${data.user_id}&autoLogin=true&viewername=${data.viewer_name}&viewertoken=${data.viewer_token}`
this.openNewWindow(url)
} else {
this.message && this.message.close()
this.message = this.$message({ type: 'warning', offset: 0, message })
}
},
// 打开腾讯会议
openMeeting(data, message) {
if (data.join_url) {
this.openNewWindow(data.join_url)
} else {
this.message && this.message.close()
this.message = this.$message({ type: 'warning', offset: 0, message })
}
},
// 新窗口打开
openNewWindow(url) {
url && window.open(url, '_blank')
},
// 计算日期
calcTimeText(liveTime, liveStatus) {
const map = {
0: this.$t('live.notStarted'),
1: this.$t('live.liveStreaming'),
2: this.$t('live.liveEnd'),
101: this.$t('live.liveEndNotVideo'),
102: this.$t('live.liveEndNotVideo'),
103: this.$t('live.watchReplay')
}
let result = map[liveStatus] || liveTime
if (liveStatus === 0 && liveTime) {
liveTime = liveTime.replace(/-/g, '/')
const time =
(new Date(liveTime).getTime() - new Date().getTime()) / 1000 || 0
if (time <= 5 * 60) {
result = this.$t('live.start')
} else if (time <= 1 * 60 * 60) {
result = this.$t('live.startInMinutes', {
minutes: parseInt(time / 60)
})
} else if (time <= 24 * 60 * 60) {
result = this.$t('live.startInHours', {
h: parseInt(time / (60 * 60)),
min: parseInt((time / 60) % 60)
})
} else {
result = this.$t('live.startInDay', {
day: parseInt(time / (24 * 60 * 60))
})
}
}
return result
}
},
mounted() {
this.loading = this.$loading({
lock: true,
text: '',
spinner: '',
background: 'rgba(255, 255, 255, 0.9)'
})
this.dealRender()
this.getNewLiveMsg()
this.getLiveList()
this.timer = setInterval(() => {
this.getNewLiveMsg()
}, 3000)
},
beforeDestroy() {
this.timer && clearInterval(this.timer)
}
}
</script>
<style>
html{
font-size: 100px;
html {
font-size: 100px;
}
body{
padding: 0;
margin: 0;
body {
padding: 0;
margin: 0;
}
.float-left{
float: left;
.float-left {
float: left;
}
.float-right{
float: right;
.float-right {
float: right;
}
</style>
<style scoped >
.pages{
font-size: .14rem;
padding-top: .2rem;
<style scoped>
.pages {
min-height: 100vh;
font-size: 0.14rem;
background-color: #fff;
}
.head{
height: 0.48rem;
padding: 0 0.2rem;
}
.head .logo5{
width: 1.18rem;
height: .3rem;
float: left;
}
.name{
padding: 0 0.1rem;
width: 1.1rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.head {
display: flex;
align-items: center;
padding: 0.2rem 0.2rem 0.16rem;
}
.login-out{
color: #999;
.head .logo {
height: 0.3rem;
}
.userinfo{
height: 0.68rem;
.head .user {
display: flex;
flex: 1;
}
.userinfo > div {
float: right;
.nickname {
flex: 1;
padding: 0 0.1rem;
color: #587fff;
text-align: right;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hint{
min-height: 0.7rem;
display: flex;
background: rgba(176,28,61,.1) ;
padding: 0 0.2rem .1rem;
justify-content: space-between;
font-size: .14rem;
.logout {
color: #999;
}
.hint .left{
flex-grow: 1;
.hint {
display: flex;
flex-direction: column;
padding-right: .08rem;
padding: 0.1rem 0.2rem;
background: rgba(176, 28, 61, 0.1);
justify-content: space-between;
font-size: 0.14rem;
cursor: pointer;
}
.hint .left {
flex: 1;
padding-right: 0.08rem;
}
.hint .left .left-1{
height: .4rem;
line-height: .4rem;
.hint .left .left-1 {
line-height: 0.2rem;
}
.hint .left .left-2{
margin-left: - 0.08rem;
.hint .left .left-2 {
margin-left: -0.08rem;
margin-top: 0.05rem;
}
.hint .right{
width: .78rem;
flex-shrink:0;
color: #b01c3d;
align-self:center;
.hint .right {
color: #b01c3d;
align-self: center;
}
.tips{
height: .4rem;
line-height: .4rem;
padding: 0 .2rem;
color: #999;
font-size: .14rem;
overflow: hidden;
.tips {
height: 0.4rem;
line-height: 0.4rem;
padding: 0 0.2rem;
color: #999;
font-size: 0.14rem;
overflow: hidden;
}
.list-box{
padding: 0 .2rem;
.live-list {
padding: 0 0.2rem;
}
.curriculum{
width: 100%;
padding-top: .05rem;
height: 1.2rem;
border-bottom: 1px solid #ccc ;
.live-item {
width: 100%;
padding-top: 0.05rem;
height: 1.2rem;
border-bottom: 1px solid #ccc;
}
.curriculum-name{
padding: 0;
margin: 0;
height: .4rem;
line-height: .4rem;
color: #333;
.live-item-name {
padding: 0;
margin: 0;
font-size: 0.14rem;
line-height: 0.4rem;
color: #333;
}
.curriculum-box{
display: flex;
width: 100%;
height: .6rem;
cursor: pointer;
.live-item-main {
display: flex;
width: 100%;
height: 0.6rem;
cursor: pointer;
}
.live-item-pic {
width: 0.86rem;
height: 0.6rem;
}
.curriculum-picture{
width: .86rem;
height: .6rem;
.live-item-content {
padding-left: 10px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.curriculum-introduce{
padding-left: 10px;
flex-grow:1;
display: flex;
flex-direction:column;
justify-content:space-between;
.live-item-content__title {
font-size: 0.12rem;
color: #333;
}
.curriculum-introduce .time{
color: #b01c3d;
text-align: right;
.live-item-content__time {
color: #b01c3d;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论