<template>
|
|
|
|
<z-paging ref="paging" class="z-paging page_bg" v-model="courseList" @query="getMyCourseList"
|
:hide-loading-more-when-no-more-by-limit="5">
|
|
<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="flex-row course_item" v-for="item in courseList" :key="item._id">
|
<u-image :src="item.courseInfo.thumb" :lazy-load="true" class="image_2" mode="aspectFill"
|
v-if="item.courseInfo!=null"></u-image>
|
<view class="flex-col group_3">
|
<text class="text_1">{{item.courseInfo.title}}</text>
|
<view class="justify-between group_4">
|
<text class="text_2" v-if="item.courseInfo.videos">共{{item.courseInfo.videos.length}}节课</text>
|
<view class="right-text-wrapper flex-col items-center view" @click="goToLearn(item.courseInfo)">
|
马上学习
|
</view>
|
</view>
|
</view>
|
</view>
|
<u-toast ref="uToast" />
|
</z-paging>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
courseList: [],
|
list: [{
|
name: '直播课程',
|
type: 'live-course'
|
}, {
|
name: '点播课程',
|
type: 'course'
|
}],
|
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
methods: {
|
// 页面数据初始化函数
|
init(options) {},
|
tabsChange(index) {
|
this.current = index;
|
this.$refs.paging.reload();
|
},
|
// 我的课程列表
|
getMyCourseList(pageNo, pageSize) {
|
vk.callFunction({
|
url: 'client/learn/pub/myCourseList',
|
title: '加载中',
|
data: {
|
pageIndex: pageNo,
|
pageSize: pageSize,
|
need_user_info: true,
|
type: this.list[this.current].type
|
},
|
success(data) {
|
that.$refs.paging.complete(data.rows);
|
}
|
});
|
},
|
// 前往学习
|
goToLearn(info) {
|
if (info.videos.length < 1) {
|
this.$refs.uToast.show({
|
title: '当前课程没有更多视频',
|
type: 'warning',
|
})
|
return
|
}
|
if (this.list[this.current].type == "course") {
|
let url =
|
`/uni_modules/uce-course/pages/video/startWatchVideo?course_id=${info._id}&video_id=${info.videos[0]._id}`
|
uni.vk.navigateTo(url)
|
} else {
|
uni.vk.navigateTo('/uni_modules/uce-course/pages/detail/live-class-detail?_id=' + info._id, false);
|
|
}
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page_bg {
|
padding: 0rpx 20rpx 0;
|
}
|
|
.course_item {
|
margin-bottom: 60rpx;
|
}
|
|
.image_2 {
|
border-radius: 8rpx;
|
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;
|
}
|
|
.group_4 {
|
margin-top: 57rpx;
|
|
.text_2 {
|
margin-top: 25rpx;
|
color: rgb(153, 153, 153);
|
font-size: 24rpx;
|
line-height: 29rpx;
|
white-space: nowrap;
|
}
|
|
.right-text-wrapper {
|
color: rgb(255, 255, 255);
|
font-size: 24rpx;
|
line-height: 29rpx;
|
white-space: nowrap;
|
padding: 14rpx 0 12rpx;
|
background-color: rgb(51, 51, 51);
|
border-radius: 27rpx;
|
width: 160rpx;
|
height: 54rpx;
|
margin-right: 6rpx;
|
}
|
}
|
}
|
</style>
|
