373 lines
12 KiB
Vue
373 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :backUrl="backUrl">
|
|||
|
|
<block slot="backText">返回</block>
|
|||
|
|
<block slot="content">课件管理</block>
|
|||
|
|
</cu-custom>
|
|||
|
|
<view v-if="TabCur == 0" class="svideo">
|
|||
|
|
<video id="coursewareVideo" style="width: 100%;" :src="movie.url" :poster="movie.src" :show-progress="false"
|
|||
|
|
:enable-progress-gesture="false" direction="-90" autoplay @play="onPlayerPlay($event)"
|
|||
|
|
@pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadedmetadata="playerReadied($event)"
|
|||
|
|
@timeupdate="onPlayerTimeupdate($event)"></video>
|
|||
|
|
</view>
|
|||
|
|
<scroll-view scroll-x class="bg-white nav">
|
|||
|
|
<view class="flex text-center">
|
|||
|
|
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
|
|||
|
|
v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
|
|||
|
|
{{ item.name }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<scroll-view scroll-x class="slist-tabs" scroll-with-animation :scroll-left="scrollLeft">
|
|||
|
|
<view class="cu-item" :class="index==TabCurPostType?'text-white cur':''" v-for="(item,index) in postTypeList"
|
|||
|
|
:key="index" @tap="tabPostTypeSelect" :data-id="index">
|
|||
|
|
{{ item.NAME }}
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<block>
|
|||
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
|
|||
|
|
:up="upOption">
|
|||
|
|
<view v-if="TabCur==0" class="slist" v-for="(item,index) in list" :key="item.VIDEOCOURSEWARE_ID">
|
|||
|
|
<view class="slist-item" @click="$noMultipleClicks(studyVideo,item)">
|
|||
|
|
<view class="slist-img">
|
|||
|
|
<image v-if="item.VIDEOCAPTURE" :src="item.VIDEOCAPTURE" mode=""></image>
|
|||
|
|
<image v-else src="../../../static/null.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="slist-right">
|
|||
|
|
<view class="slist-title">
|
|||
|
|
{{ item.COURSEWARENAME }}
|
|||
|
|
</view>
|
|||
|
|
<view class="slist-p">
|
|||
|
|
{{ item.COURSEWAREINTRODUCE }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="TabCur==1" class="slist" v-for="(item,index) in list" :key="item.DATACOURSEWARE_ID">
|
|||
|
|
<view class="slist-item" @click="$noMultipleClicks(studyData,item)">
|
|||
|
|
<view class="slist-img">
|
|||
|
|
<image :src="baseImgPath + item.COURSEWARECAPTURE" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="slist-right">
|
|||
|
|
<view class="slist-title">
|
|||
|
|
{{ item.COURSEWARENAME }}
|
|||
|
|
</view>
|
|||
|
|
<view class="slist-p">
|
|||
|
|
{{ item.COURSEWAREINTRODUCE }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="list.length < 1 && dataFlag=='noData'" class="dy-null">
|
|||
|
|
<view class="dy-null-img">
|
|||
|
|
<image src="../../../static/null.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="dy-null-title">
|
|||
|
|
暂无数据
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cu-tabbar-height"></view>
|
|||
|
|
</mescroll-body>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
basePath, baseImgPath, corpinfoId, loginSession, formatDate, loginUser
|
|||
|
|
} from '@/common/tool.js';
|
|||
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
mixins: [MescrollMixin], // 使用mixin
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
baseImgPath: baseImgPath,
|
|||
|
|
backUrl: '/pages/application/onlinexxks/home',
|
|||
|
|
sTop: 0,
|
|||
|
|
totalHeight: 0,
|
|||
|
|
downOption: {
|
|||
|
|
use: true,
|
|||
|
|
auto: false
|
|||
|
|
},
|
|||
|
|
upOption: {
|
|||
|
|
use: true,
|
|||
|
|
auto: false,
|
|||
|
|
noMoreSize: 1,
|
|||
|
|
textNoMore: '--已经没有更多了--'
|
|||
|
|
},
|
|||
|
|
scrollLeft: 0,
|
|||
|
|
dataFlag: 'noData',
|
|||
|
|
list: [], //返回数据
|
|||
|
|
page: 1, //分页参数--页数
|
|||
|
|
rows: 10, //分页参数--每页数据条数
|
|||
|
|
totalCount: 0, //分页参数--初始化页数
|
|||
|
|
isEnd: false, //防止多次刷新
|
|||
|
|
totalPage: 0, //分页参数--分页数量
|
|||
|
|
noClick: true,
|
|||
|
|
movie: {
|
|||
|
|
'id': 0,
|
|||
|
|
'title': '课件名称',
|
|||
|
|
'src': '',
|
|||
|
|
'actors': '主讲人',
|
|||
|
|
'desc': '课件简介',
|
|||
|
|
'url': ''
|
|||
|
|
},
|
|||
|
|
listVal: [],
|
|||
|
|
TabCur: 0,
|
|||
|
|
tabList: [
|
|||
|
|
{id: '1', name: '视频课件'},
|
|||
|
|
{id: '2', name: '资料课件'}
|
|||
|
|
],
|
|||
|
|
COURSEWARETYPE: '1',
|
|||
|
|
TabCurPostType: 0,
|
|||
|
|
postTypeList: [],
|
|||
|
|
POSTTYPE: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
var _this = this
|
|||
|
|
_this.background = require('@/common/background.json')
|
|||
|
|
_this.showCount = -1
|
|||
|
|
_this.currentPage = 1
|
|||
|
|
_this.list = []
|
|||
|
|
_this.isEnd = false
|
|||
|
|
this.getDict()
|
|||
|
|
loginSession()
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//跳转事件
|
|||
|
|
getCoursewareInit() { //搜索按钮事件
|
|||
|
|
var _this = this;
|
|||
|
|
_this.showCount = -1;
|
|||
|
|
_this.currentPage = 1;
|
|||
|
|
_this.list = [];
|
|||
|
|
_this.isEnd = false;
|
|||
|
|
_this.getCoursewareData();
|
|||
|
|
},
|
|||
|
|
//跳转事件
|
|||
|
|
downCallback(page) { //搜索按钮事件
|
|||
|
|
var _this = this;
|
|||
|
|
_this.showCount = -1;
|
|||
|
|
_this.currentPage = 1;
|
|||
|
|
_this.list = [];
|
|||
|
|
_this.isEnd = false;
|
|||
|
|
_this.getCoursewareData();
|
|||
|
|
},
|
|||
|
|
// 滑动到底方法
|
|||
|
|
upCallback(page) {
|
|||
|
|
var _this = this;
|
|||
|
|
_this.showCount = -1;
|
|||
|
|
_this.currentPage = _this.currentPage + 1;
|
|||
|
|
_this.isEnd = false;
|
|||
|
|
if (_this.totalPage >= _this.currentPage) {
|
|||
|
|
_this.getCoursewareData(); //开始分页查询
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getCoursewareData() {
|
|||
|
|
var _this = this;
|
|||
|
|
if (_this.isEnd) {
|
|||
|
|
return
|
|||
|
|
} else {
|
|||
|
|
this.isEnd = true;
|
|||
|
|
}
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: "加载中..."
|
|||
|
|
}); //加载中动画
|
|||
|
|
uni.request({
|
|||
|
|
url: basePath + '/app/courseware/list?showCount=' + _this.showCount + '¤tPage=' + _this.currentPage,
|
|||
|
|
method: 'POST',
|
|||
|
|
dataType: 'json',
|
|||
|
|
header: {
|
|||
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
COURSEWARETYPE: _this.COURSEWARETYPE,
|
|||
|
|
POSTTYPE: _this.POSTTYPE,
|
|||
|
|
STATE: '0',
|
|||
|
|
tm: new Date().getTime(),
|
|||
|
|
CORPINFO_ID: loginUser.CORPINFO_ID,
|
|||
|
|
USER_ID: loginUser.USER_ID,
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
uni.hideLoading(); //结束加载中动画
|
|||
|
|
if (res.data != null) {
|
|||
|
|
_this.totalPage = res.data.page.totalPage
|
|||
|
|
// 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
|
|||
|
|
if (_this.list.length == 0) {
|
|||
|
|
_this.list = res.data.varList;
|
|||
|
|
} else {
|
|||
|
|
if (res.data.varList != null) {
|
|||
|
|
_this.list2 = res.data.varList;
|
|||
|
|
_this.list = _this.list.concat(_this.list2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
_this.mescroll.endSuccess(res.data.varList.length, (res.data.page.totalPage > res.data.page.currentPage))
|
|||
|
|
_this.mescroll.endUpScroll(res.data.page.totalPage == res.data.page.currentPage)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: () => {
|
|||
|
|
// 请求失败,隐藏加载状态
|
|||
|
|
_this.mescroll.endErr()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取数据字典数据
|
|||
|
|
getDict() {
|
|||
|
|
var _this = this;
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '请稍候'
|
|||
|
|
})
|
|||
|
|
uni.request({
|
|||
|
|
url: basePath + '/dictionaries/getLevelsByCourseware',
|
|||
|
|
method: 'POST',
|
|||
|
|
dataType: 'json',
|
|||
|
|
header: {
|
|||
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
COURSEWARETYPE: _this.COURSEWARETYPE,
|
|||
|
|
DICTIONARIES_ID: 'f6a7c4f5602f46e291d06b1390a3f820',
|
|||
|
|
CORPINFO_ID: loginUser.CORPINFO_ID,
|
|||
|
|
USER_ID: loginUser.USER_ID,
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
uni.hideLoading(); //结束加载中动画
|
|||
|
|
var result = res.data.result
|
|||
|
|
if ("success" == result) {
|
|||
|
|
_this.postTypeList = res.data.list
|
|||
|
|
_this.TabCurPostType = 0;
|
|||
|
|
_this.POSTTYPE = _this.postTypeList[0].DICTIONARIES_ID
|
|||
|
|
_this.getCoursewareInit()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
tabSelect(e) {
|
|||
|
|
this.TabCur = e.currentTarget.dataset.id;
|
|||
|
|
if (this.TabCur == 1) {
|
|||
|
|
this.movie.src = ''
|
|||
|
|
this.movie.url = ''
|
|||
|
|
}
|
|||
|
|
if (this.COURSEWARETYPE != this.tabList[this.TabCur].id) {
|
|||
|
|
this.COURSEWARETYPE = this.tabList[this.TabCur].id
|
|||
|
|
this.getDict()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tabPostTypeSelect(e) {
|
|||
|
|
this.TabCurPostType = e.currentTarget.dataset.id;
|
|||
|
|
if (this.COURSEWARETYPE != this.postTypeList[this.TabCurPostType].DICTIONARIES_ID) {
|
|||
|
|
this.POSTTYPE = this.postTypeList[this.TabCurPostType].DICTIONARIES_ID
|
|||
|
|
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
|||
|
|
this.getCoursewareInit()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
validStr(str) {
|
|||
|
|
if (str != null && str != '' && typeof (str) != "undefined" && str != 0)
|
|||
|
|
return true
|
|||
|
|
return false
|
|||
|
|
},
|
|||
|
|
studyVideo(item) {
|
|||
|
|
var _this = this;
|
|||
|
|
uni.request({
|
|||
|
|
url: basePath + '/app/audioOrVideo/getPlayInfo',
|
|||
|
|
method: 'POST',
|
|||
|
|
dataType: 'json',
|
|||
|
|
header: {
|
|||
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
videoId: item.VIDEOFILES,
|
|||
|
|
VIDEOCOURSEWARE_ID: item.VIDEOCOURSEWARE_ID,
|
|||
|
|
CORPINFO_ID: loginUser.CORPINFO_ID,
|
|||
|
|
USER_ID: loginUser.USER_ID,
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.data != '') {
|
|||
|
|
_this.movie.src = res.data.COVERURL
|
|||
|
|
_this.movie.url = res.data.PLAYURL
|
|||
|
|
console.info(_this.movie.url)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '课件视频资源已失效，请联系管理员',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
// if (this.validStr(item.VIDEOFILES)) {
|
|||
|
|
// this.movie.src = baseImgPath + item.VIDEOCAPTURE
|
|||
|
|
// this.movie.url = baseImgPath + item.VIDEOFILES
|
|||
|
|
// // var myvideo = uni.createVideoContext('coursewareVideo')
|
|||
|
|
// // // console.log('获取视频进度')
|
|||
|
|
// // // console.log('this.playTime：'+this.playTime)
|
|||
|
|
// // // console.log('this.playTime.toFixed：'+parseInt(this.playTime))
|
|||
|
|
// // myvideo.seek(parseInt(this.playTime));
|
|||
|
|
// } else {
|
|||
|
|
// uni.showToast({
|
|||
|
|
// icon: 'none',
|
|||
|
|
// title: '课件视频资源已失效，请联系管理员',
|
|||
|
|
// duration: 2000
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
// 监听播放
|
|||
|
|
onPlayerPlay(player) {
|
|||
|
|
this.isPaused = false
|
|||
|
|
},
|
|||
|
|
// 监听暂停
|
|||
|
|
onPlayerPause(player) {
|
|||
|
|
this.isPaused = true
|
|||
|
|
},
|
|||
|
|
// 当前播放位置发生变化时触发。
|
|||
|
|
onPlayerTimeupdate(player) {
|
|||
|
|
this.playTime = player.detail.currentTime
|
|||
|
|
},
|
|||
|
|
onPlayerEnded(player) {
|
|||
|
|
this.isPaused = true
|
|||
|
|
},
|
|||
|
|
studyData(item) {
|
|||
|
|
if (this.validStr(item.COURSEWAREFILES)) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: "加载中..."
|
|||
|
|
}); //加载中动画
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: baseImgPath + item.COURSEWAREFILES,
|
|||
|
|
success: (res) => {
|
|||
|
|
uni.hideLoading(); //结束加载中动画
|
|||
|
|
uni.openDocument({
|
|||
|
|
filePath: res.tempFilePath,
|
|||
|
|
success: function (res) {
|
|||
|
|
// console.log(res)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '课件文件资源已失效，请联系管理员',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.nav {
|
|||
|
|
margin-bottom: 4upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cu-tag + .cu-tag {
|
|||
|
|
margin-left: 30upx;
|
|||
|
|
}
|
|||
|
|
</style>
|