<template>
|
<view class="page_bg">
|
<z-paging ref="paging" class="z-paging page_bg" :hide-loading-more-when-no-more-by-limit="5"
|
v-model="courseList" @query="getMyCourseList">
|
<view slot="top">
|
<u-tabs-swiper style="margin-bottom: 10rpx;" ref="tabs" :list="list" :current="current"
|
@change="tabsChange" :is-scroll="false"></u-tabs-swiper>
|
</view>
|
|
<view class="course-item" v-for="item in courseList" :key="item._id">
|
<view class="top">
|
<u-image :src="item.courseInfo.thumb" :lazy-load="true" mode="aspectFill"></u-image>
|
<view class="flex-col group_3">
|
<text class="text_1">{{item.courseInfo.title}}</text>
|
</view>
|
</view>
|
<view class="justify-between section_2">
|
<text class="total_num">共{{item.courseInfo.videos.length}}节课</text>
|
<view class="flex-row" style="margin-right: 20rpx;" @click="changeShow(item.goods_id)">
|
<block v-if="item.goods_id != nowShow">
|
<text>展开</text>
|
<image src="/static/remote/e59904ec4b1be1027d00c791c7c24b50.png" class="image_4" />
|
</block>
|
<block v-else>
|
<text>收起</text>
|
<image src="/static/remote/3fa21f52b56700718e98d311799e7873.png" class="image_4" />
|
</block>
|
</view>
|
<view class="loading" v-if="loadState && item.goods_id == nowShow">
|
<u-loading mode="circle"></u-loading>
|
</view>
|
<u-collapse event-type="close" :arrow="true" class="collapse"
|
v-if="!loadState && item.goods_id == nowShow&&list[current].type=='course'">
|
<u-collapse-item :index="index" :title="chapter.title" v-for="(chapter, index) in nowList"
|
:key="chapter._id">
|
<view class="collapse-item" v-if="chapter.videos.length > 0">
|
<u-time-line>
|
<u-time-line-item v-for="(video,index) in chapter.videos" :key="video._id">
|
<template v-slot:node>
|
<view class="u-node"></view>
|
</template>
|
<template v-slot:content style="position: relative;">
|
<view @click="goVideo(item.goods_id,video._id)">
|
<view>{{video.title}}</view>
|
<view>{{timeFormat(video.duration)}}</view>
|
<view class="study_status" v-if="vk.pubfn.isNull(video.watch_info)">
|
未学习
|
</view>
|
</view>
|
</template>
|
</u-time-line-item>
|
</u-time-line>
|
</view>
|
<view class="collapse-item" v-else>
|
暂无视频
|
</view>
|
</u-collapse-item>
|
</u-collapse>
|
|
<u-collapse v-else event-type="close" :arrow="true" class="collapse">
|
<u-collapse-item :index="index" :title="chapter.title" v-for="(chapter, index) in nowList"
|
:key="chapter._id">
|
<view class="collapse-item" v-if="chapter.videos.length > 0">
|
<u-time-line>
|
<u-time-line-item v-for="(video,index) in chapter.videos" :key="video._id">
|
<template v-slot:node>
|
<view class="u-node"></view>
|
</template>
|
<template v-slot:content style="position: relative;">
|
<view @click="goVideo2(video)">
|
<view>{{video.title}}</view>
|
<view>
|
直播时间:{{vk.pubfn.timeFormat(new Date(video.start_time),"yyyy-MM-dd hh:mm")}}
|
</view>
|
<view class="study_status" v-if="video.end_time<=Date.now()">
|
回看
|
</view>
|
<view class="study_status" v-if="video.start_time>Date.now()">
|
等待直播
|
</view>
|
<view class="study_status"
|
v-if="video.start_time<=Date.now()&&video.end_time>=Date.now()">
|
直播中
|
</view>
|
</view>
|
</template>
|
</u-time-line-item>
|
</u-time-line>
|
</view>
|
<view class="collapse-item" v-else>
|
暂无视频
|
</view>
|
</u-collapse-item>
|
</u-collapse>
|
<view class="no_class" v-if="!loadState && item.goods_id == nowShow && nowList.length < 1">
|
- 暂无课程 -
|
</view>
|
</view>
|
</view>
|
</z-paging>
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
// 学习课程列表
|
courseList: [],
|
// 当前展示课程id
|
nowShow: '',
|
// 当前展示课程数据
|
nowChapters: [], // 章节列表
|
nowVideos: {}, // 音频列表
|
nowList: [],
|
list: [{
|
name: '直播课程',
|
type: 'live-course'
|
}, {
|
name: '点播课程',
|
type: 'course'
|
}],
|
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
|
// 加载数据中
|
loadState: false
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
computed: {
|
showIcon() {
|
return (chapter) => {
|
if (chapter.videos.length == 0) return false
|
for (let key in chapter.videos) {
|
if (vk.pubfn.isNotNull(chapter.videos[key].watch_info)) return false
|
}
|
return true
|
}
|
}
|
},
|
methods: {
|
// 时间转换
|
tabsChange(index) {
|
this.current = index;
|
this.$refs.paging.reload();
|
},
|
timeFormat(s) {
|
let day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
|
let hour = Math.floor((s - day * 24 * 3600) / 3600);
|
let minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
|
let second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
|
if (hour) {
|
return hour + ":" + minute + ":" + second;
|
} else {
|
if (second < 10) {
|
if (minute < 10) {
|
return "0:0" + minute + ":" + second;
|
} else {
|
return "0:" + minute + ":" + second;
|
}
|
} else {
|
return "0:" + minute + ":" + second;
|
}
|
}
|
},
|
// 页面数据初始化函数
|
init(options) {},
|
// 我的课程列表
|
getMyCourseList(pageNo, pageSize) {
|
vk.callFunction({
|
url: 'client/learn/pub/myCourseList',
|
data: {
|
pageIndex: pageNo,
|
pageSize: pageSize,
|
need_user_info: true,
|
type: this.list[this.current].type
|
},
|
success(data) {
|
that.$refs.paging.complete(data.rows);
|
}
|
});
|
},
|
changeShow(id) {
|
if (id == this.nowShow) {
|
this.nowShow = ''
|
this.nowChapters = []
|
this.nowVideos = {}
|
return
|
}
|
// 显示加载请求数据
|
this.loadState = true
|
this.nowShow = id
|
uni.vk.callFunction({
|
url: 'client/course/pub/only_course_detail',
|
data: {
|
_id: id,
|
need_user_info: true,
|
type: this.list[this.current].type
|
},
|
success(res) {
|
that.nowChapters = res.data.chapters
|
that.nowList = res.data.test
|
that.loadState = false
|
}
|
})
|
},
|
|
|
// 视频跳转
|
goVideo(cId, vId) {
|
uni.vk.navigateTo(
|
`/uni_modules/uce-course/pages/video/startWatchVideo?course_id=${cId}&video_id=${vId}`)
|
},
|
|
goVideo2(video) {
|
console.log(video)
|
if (video.end_time <= Date.now()) {
|
vk.callFunction({
|
url: 'client/liveCourse/kh/getHfRoomSign',
|
title: '请求中...',
|
data: {
|
room_id: video.room_id
|
},
|
success: function(data) {
|
vk.navigateTo('/pages/webview/webview?url=' + data.data + '&type=2');
|
}
|
});
|
} else {
|
vk.callFunction({
|
url: 'client/liveCourse/kh/getGoRoomSign',
|
title: '加载中...',
|
data: {
|
room_id: video.room_id,
|
user_number: vk.getVuex('$user.userInfo').username,
|
user_role: 2,
|
user_name: vk.getVuex('$user.userInfo').nickname,
|
user_avatar: vk.getVuex('$user.userInfo').avatar || ''
|
},
|
success(data) {
|
let {
|
room_id,
|
user_number,
|
user_name,
|
user_role,
|
user_avatar,
|
sign
|
} = data.data
|
console.log(JSON.stringify(data))
|
vk.navigateTo(
|
`/pages/webview/webview?room_id=${room_id}&user_number=${user_number}&user_name=${user_name}&user_role=${user_role}&user_avatar=${user_avatar}&sign=${sign}` +
|
'&type=3');
|
|
}
|
})
|
|
}
|
}
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page_bg {
|
padding: 32rpx 0 0;
|
}
|
|
.course-item {
|
border-bottom: 1px solid #F0F0F0;
|
padding: 0 20rpx 30rpx;
|
margin-bottom: 30rpx;
|
|
.top {
|
display: flex;
|
|
.u-image {
|
width: 284rpx !important;
|
height: 182rpx !important;
|
}
|
|
.group_3 {
|
margin-left: 26rpx;
|
margin-right: 7rpx;
|
flex: 1 1 auto;
|
|
.text_1 {
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 35rpx;
|
word-break: break-all;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
}
|
}
|
|
.section_2 {
|
margin-right: 3rpx;
|
padding: 28rpx 0 24rpx;
|
color: rgb(51, 51, 51);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
background-color: rgb(245, 245, 245);
|
border-radius: 12rpx;
|
margin-top: 20rpx;
|
flex-wrap: wrap;
|
overflow: hidden;
|
|
.total_num {
|
font-weight: bold;
|
font-size: 28rpx;
|
margin-left: 20rpx;
|
}
|
|
.image_4 {
|
margin: 8rpx 0 0 8rpx;
|
width: 22rpx;
|
height: 22rpx;
|
}
|
|
.loading {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
margin-top: 24rpx;
|
border-top: 1px solid #FFFFFF;
|
padding-top: 24rpx;
|
}
|
|
.collapse {
|
width: 100%;
|
margin-top: 24rpx;
|
padding: 4rpx 0 0 20rpx;
|
border-top: 1px solid #FFFFFF;
|
|
.collapse-item {
|
padding: 16rpx 40rpx 0;
|
|
.u-node {
|
width: 20rpx;
|
height: 20rpx;
|
background: #FFFFFF;
|
border: 2rpx solid #FDD303;
|
border-radius: 50%;
|
}
|
|
.study_status {
|
width: 120rpx;
|
border: 2rpx solid #333333;
|
border-radius: 26rpx;
|
position: absolute;
|
text-align: center;
|
font-size: 24rpx;
|
font-weight: bold;
|
line-height: 38rpx;
|
color: #333333;
|
top: 14rpx;
|
right: 0;
|
background-color: #FFFFFF;
|
}
|
}
|
}
|
|
.no_class {
|
width: 100%;
|
padding: 20rpx 0 0;
|
text-align: center;
|
color: #999;
|
}
|
}
|
}
|
|
/deep/ .study_status_all .u-collapse-head {
|
position: relative;
|
}
|
|
/deep/ .study_status_all .u-collapse-head::after {
|
content: '未学习';
|
position: absolute;
|
top: 18rpx;
|
right: 90rpx;
|
width: 120rpx;
|
border: 2rpx solid #333333;
|
border-radius: 26rpx;
|
position: absolute;
|
text-align: center;
|
font-size: 24rpx;
|
font-weight: bold;
|
line-height: 38rpx;
|
background-color: #FFFFFF;
|
}
|
</style>
|
