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 @@ ...@@ -226,5 +226,21 @@
"failed": "Fail" "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 @@ ...@@ -226,5 +226,21 @@
"failed": "未通过" "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> <template>
<div class="pages"> <div class="pages">
<div class="head"> <div class="head">
<img class="logo5" alt="logo" src="@/assets/images/logo-header.png"> <img class="logo" src="../../assets/images/logo-header.png" />
<div class="userinfo"> <div class="user">
<div class="login-out" @click="goOutLogin()">退出</div> <div class="nickname">{{ nickName }}</div>
<div class="name">{{ name }}</div> <div class="logout" @click="logout">{{$t('components.learnSysLayout.sideBar.outLogin')}}</div>
</div> </div>
</div> </div>
<div class="hint" v-if="latest" @click="onClick(latest.live)">
<div class="hint" v-show="latest && latest.live" @click="opencc(latest)" >
<div class="left"> <div class="left">
<div class="left-1">直播提醒</div> <div class="left-1">{{$t('live.liveReminder')}}：</div>
<div class="left-2">《{{latest.course_name}}》将于 {{latest.live && latest.live.start_time.slice(5)}} 开始</div> <div
class="left-2"
>《{{latest.course_name}}》{{$t('live.startTime', { time: latest.live.start_time })}}</div>
</div> </div>
<div class="right">进入直播 ></div> <div class="right">{{$t('live.goLive')}}</div>
</div> </div>
<div class="tips">提示语：已参加的课程请到电脑端学习系统观看回放</div> <div class="tips">{{$t('live.replayTips')}}</div>
<div class="list-box"> <div class="live-list">
<div class="curriculum" v-for="(item, index) in obj" v-bind:key="index" > <template v-for="item in dataList">
<h4 class="curriculum-name">{{item.course_name}}</h4> <div
<div class="curriculum-box" @click="opencc(item)" > class="live-item"
<img class="curriculum-picture" :src="item.curriculum.curriculum_picture" /> :key="subitem.id"
<div class="curriculum-introduce"> v-for="subitem in item.live"
<div class="title">{{item.curriculum.curriculum_name}}</div> @click="onClick(subitem)"
<div class="time">{{item.live ? item.live.time : ''}}</div> >
<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> </div>
</div> </template>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import cAction from '@action' import cAction from '@action'
export default { export default {
data () { metaInfo() {
return { return {
name: (window.G.UserInfo && window.G.UserInfo.student_info && window.G.UserInfo.student_info.personal_name) || '匿名', title: this.$t('pages.common.title')
latest: '',
obj: [],
loading: null
} }
}, },
metaInfo () { data() {
return { return {
title: '清华大学五道口金融学院', latest: null,
meta: [ dataList: [],
// { vmid: 'description', name: 'description', content: this.description } loading: null,
] message: null,
timer: null
} }
}, },
mounted () { computed: {
const _this = this user() {
this.loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) return window.G.UserInfo ? window.G.UserInfo.student_info : {}
},
this.dealRender() nickName() {
_this.getNewLiveMsg() return this.user.personal_name || '匿名'
_this.getLiveLis() }
setInterval(function () {
_this.getNewLiveMsg()
_this.getLiveLis()
}, 3000)
}, },
methods: { methods: {
/* 退出登录 - 跳转方法 */ /* 退出登录 - 跳转方法 */
goOutLogin () { logout() {
// cAction.Ohter.outLogin().then(str => { cAction.Others
// if (/^login/gi.test(str)) { .outLogin()
// window.G.UserInfo = {} .then(str => {
// // this.$router.push({ path: '/login/index' }) window.G.UserInfo = {}
// // this.$router.push({ path: '/' }) this.$router.push({ path: '/login/index' })
// window.location.href = 'https://pbcsf.ezijing.com/login/index' })
// } else { .catch(e => {
// /* 出错 */ this.$message.error(e.message)
// } })
// }).catch(e => {
// this.$message.error(e.message)
// })
/* 清空一下记录，然后调整到登录页 */
this.$router.push({ path: '/login/index' })
}, },
getNewLiveMsg: function () { getNewLiveMsg() {
// 获取最新直播提醒 // 获取最新直播提醒
const _this = this cAction.Player
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) .getNewLiveMsg()
cAction.Player.getNewLiveMsg().then(json => { .then(response => {
if (json.status === 200) { if (response.status === 200) {
_this.latest = json.data this.latest = response.data
window.console.log(_this.latest) }
} })
if (_this.loading) { .finally(() => {
_this.loading.close() this.loading && this.loading.close()
_this.loading = null })
}
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
}, },
getLiveLis: function () { getLiveList() {
// 获取最新直播列表 // 获取最新直播列表
const _this = this cAction.Player
cAction.Player.getLiveList().then(json => { .getLiveList()
if (json.status === 200) { .then(response => {
json.data.map(function (item, index, arr) { if (response.status === 200) {
if (item.live && (item.live.length || item.live.user_id)) { this.dataList = response.data
let _time = item.live.start_time }
const _status = item.live.live_status })
const enableRecord = item.live.enable_record // 0: 不启用回放 1: 开启回放 .catch(e => {
let str = '' this.$message.error(e.message)
switch (_status) { })
case 0: str = '直播未开始'; break .finally(() => {
case 1: str = '正在直播'; break if (this.loading) {
case 2: str = '直播结束'; break this.loading.close()
case 101: str = '直播结束，视频剪辑中'; break // 录制开始 this.loading = null
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(() => { })
}, },
dealRender: () => { dealRender: () => {
(function (win, doc) { ;(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 wWidth =
const wFsize = (wWidth > 640 ? 640 : wWidth) / 375 * 100 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; // wFsize = wFsize > 32 ? wFsize : 32;
doc.documentElement.style.fontSize = wFsize + 'px' doc.documentElement.style.fontSize = wFsize + 'px'
})(window, document) })(window, document)
}, },
opencc: function (obj) { onClick(data) {
const _live = obj.live const {
if (!_live || !_live.user_id) { live_status: liveStatus,
this.$message.error('网络错误，刷新重试') live_type: liveType,
start_time: liveTime
} = data
const message = this.calcTimeText(liveTime, liveStatus)
if (liveType === 'cloud') {
// 打开云课堂
this.openCloudClass(data, message)
return return
} }
const userid = _live.user_id if (liveType === 'live') {
const roomid = _live.room_id // 打开云直播
const viewertoken = _live.viewer_token this.openCloudLive(data, message)
const recordid = _live.record_id return
const liveStatus = _live.live_status }
const enableRecord = _live.enable_record // 0: 不启用回放 1: 开启回放 if (liveType === 'meeting') {
const viewername = this.name // 打开腾讯会议
let _url = 'https://view.csslcloud.net/api/view' this.openMeeting(data, message)
if (recordid && liveStatus === 103) { return
if (!enableRecord) { }
this.$message.warning('该直播没有回放') // 其他直播类型直接打开
return if (liveStatus === 1) {
} // 进行中
// 可以回放 this.openNewWindow(data.join_url)
// https://view.csslcloud.net/api/view/callback?recordid=xxx&roomid=xxx&userid=xxx&autoLogin=true&viewername=xxx&viewertoken=xxx&groupid=xxx } else if (liveStatus === 103) {
_url = _url + '/callback?autoLogin=true&roomid=' + roomid + '&userid=' + userid + '&recordid=' + recordid + '&viewername=' + viewername + '&viewertoken=' + viewertoken // 查看回放
this.openNewWindow(data.record_url)
} else { } else {
// 可以直播 this.message && this.message.close()
// https://view.csslcloud.net/api/view/index?roomid=xxx&userid=xxx&autoLogin=true&viewername=xxx&viewertoken=xxx&groupid=xxx this.message = this.$message({ type: 'warning', offset: 0, message })
_url = _url + '/index?autoLogin=true&roomid=' + roomid + '&userid=' + userid + '&viewername=' + viewername + '&viewertoken=' + viewertoken
} }
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> </script>
<style> <style>
html{ html {
font-size: 100px; font-size: 100px;
} }
body{ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.float-left{ .float-left {
float: left; float: left;
} }
.float-right{ .float-right {
float: right; float: right;
} }
</style> </style>
<style scoped > <style scoped>
.pages {
.pages{ min-height: 100vh;
font-size: .14rem; font-size: 0.14rem;
padding-top: .2rem; background-color: #fff;
} }
.head{ .head {
height: 0.48rem; display: flex;
padding: 0 0.2rem; align-items: center;
} padding: 0.2rem 0.2rem 0.16rem;
.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;
} }
.login-out{ .head .logo {
color: #999; height: 0.3rem;
} }
.userinfo{ .head .user {
height: 0.68rem; display: flex;
flex: 1;
} }
.userinfo > div { .nickname {
float: right; flex: 1;
padding: 0 0.1rem;
color: #587fff;
text-align: right;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.hint{ .logout {
min-height: 0.7rem; color: #999;
display: flex;
background: rgba(176,28,61,.1) ;
padding: 0 0.2rem .1rem;
justify-content: space-between;
font-size: .14rem;
} }
.hint .left{ .hint {
flex-grow: 1;
display: flex; display: flex;
flex-direction: column; padding: 0.1rem 0.2rem;
padding-right: .08rem; 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{ .hint .left .left-1 {
height: .4rem; line-height: 0.2rem;
line-height: .4rem;
} }
.hint .left .left-2{ .hint .left .left-2 {
margin-left: - 0.08rem; margin-left: -0.08rem;
margin-top: 0.05rem;
} }
.hint .right{ .hint .right {
width: .78rem; color: #b01c3d;
flex-shrink:0; align-self: center;
color: #b01c3d;
align-self:center;
} }
.tips{ .tips {
height: .4rem; height: 0.4rem;
line-height: .4rem; line-height: 0.4rem;
padding: 0 .2rem; padding: 0 0.2rem;
color: #999; color: #999;
font-size: .14rem; font-size: 0.14rem;
overflow: hidden; overflow: hidden;
} }
.list-box{ .live-list {
padding: 0 .2rem; padding: 0 0.2rem;
} }
.curriculum{ .live-item {
width: 100%; width: 100%;
padding-top: .05rem; padding-top: 0.05rem;
height: 1.2rem; height: 1.2rem;
border-bottom: 1px solid #ccc ; border-bottom: 1px solid #ccc;
} }
.curriculum-name{ .live-item-name {
padding: 0; padding: 0;
margin: 0; margin: 0;
height: .4rem; font-size: 0.14rem;
line-height: .4rem; line-height: 0.4rem;
color: #333; color: #333;
} }
.curriculum-box{ .live-item-main {
display: flex; display: flex;
width: 100%; width: 100%;
height: .6rem; height: 0.6rem;
cursor: pointer; cursor: pointer;
}
.live-item-pic {
width: 0.86rem;
height: 0.6rem;
} }
.curriculum-picture{ .live-item-content {
width: .86rem; padding-left: 10px;
height: .6rem; flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.curriculum-introduce{ .live-item-content__title {
padding-left: 10px; font-size: 0.12rem;
flex-grow:1; color: #333;
display: flex;
flex-direction:column;
justify-content:space-between;
} }
.curriculum-introduce .time{ .live-item-content__time {
color: #b01c3d; color: #b01c3d;
text-align: right;
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论