335 lines
9.7 KiB
Vue
335 lines
9.7 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="baseImgPath + 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: {
|
||
CORPINFO_ID: corpinfoId,
|
||
USER_ID: loginUser.USER_ID,
|
||
COURSEWARETYPE: _this.COURSEWARETYPE,
|
||
POSTTYPE: _this.POSTTYPE,
|
||
STATE: '0',
|
||
tm: new Date().getTime()
|
||
},
|
||
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: {
|
||
CORPINFO_ID: corpinfoId,
|
||
COURSEWARETYPE: _this.COURSEWARETYPE,
|
||
DICTIONARIES_ID: 'f6a7c4f5602f46e291d06b1390a3f820'
|
||
},
|
||
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) {
|
||
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>
|