This commit is contained in:
2024-05-17 18:02:49 +08:00
parent 8407d51fb6
commit b5264dc222
4056 changed files with 308094 additions and 41932 deletions

View File

@@ -1,5 +1,8 @@
<template>
<view class="container commonPageBox">
<view
class="container commonPageBox"
style="background-color: #f5f5f5 !important"
>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar
@@ -8,12 +11,42 @@
fontColor="#fff"
></z-nav-bar>
<view class="contentBox commonPageContentBox">
<common-list @lower="onReachBottom1" :pagination="pagination" :dataList="dataList" @hancleClick="gotoDetail" label="title">
<view
class="contentBox commonPageContentBox"
:style="`height: calc(100% - ${
(50 + statusBarHeight) * 2
}rpx) !important;`"
>
<common-list
noDataIcon="data"
:isCondition="true" :isLoadingHide="isLoadingHide"
@lower="onReachBottom1"
:pagination="pagination"
:dataList="dataList"
@hancleClick="gotoDetail"
label="title"
>
<template slot="labelSlot" slot-scope="slotProps">
<image
v-if="slotProps.row.image"
:src="slotProps.row.image"
mode="aspectFil"
class="book_image"
></image>
<image
v-else
src="@/static/icon/videoIcon.png"
mode="aspectFil"
class="book_image"
></image>
<view class="related_courses_name hidden1">{{
slotProps.row.title
}}</view>
<!-- <text v-if="slotProps.row.conditions!='03'">试听</text> -->
</template>
</common-list>
</view>
<z-navigation></z-navigation>
</view>
</template>
@@ -26,14 +59,15 @@ export default {
list,
},
data() {
return {
return { isLoadingHide: false,
playData: {},
options: {},
searchValue: "",
pagination: {// 请求参数
page: 1,//页码
limit: 20,//每页显示
total: 0,//总条数
pagination: {
// 请求参数
page: 1, //页码
limit: 20, //每页显示
total: 0, //总条数
},
twoCateList: [], // 二级分类标题
titleList: [], // 方剂标题
@@ -66,13 +100,14 @@ export default {
computed: {
...mapState(["userInfo"]),
},
methods: { onReachBottom1() {// 上拉加载
methods: {
onReachBottom1() {
// 上拉加载
// 当列表数量不大于或等于总数量,则再次调用接口请求数据
if (this.dataList.length >= this.pagination.total) return;
this.pagination.page++;
this.getData();
},
// 检查是有权限使用搜索功能
checkDisable() {
@@ -109,18 +144,19 @@ export default {
console.log(v);
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
});
},
getData() {
this.isLoadingHide=false
this.$http
.request({
url: this.urlList.list,
method: "POST",
data: {
id: Number(this.options.id), //分类id
...this.pagination
...this.pagination,
},
header: {
//默认 无 说明:请求头
@@ -129,9 +165,11 @@ export default {
})
.then((res) => {
console.log("res at line 289:", res);
this.pagination.total=res.courses.total
this.dataList=[...this.dataList,...res.courses.records]
this.pagination.total = res.courses.total;
if( res.courses.total==0){
this.isLoadingHide=true
}
this.dataList = [...this.dataList, ...res.courses.records];
});
},
@@ -636,7 +674,29 @@ this.dataList=[...this.dataList,...res.courses.records]
.titleList2 {
height: calc(100% - 170rpx);
}
.commonPageContentBox{
// min-height: 100% !important;
.commonPageContentBox {
// min-height: 100% !important;
}
.related_courses_name {
display: inline-block;
float: left;
line-height: 60rpx;
width: calc(100% - 90rpx) !important;
padding-left: 20rpx;
font-weight: 700;
.aui-text-danger {
display: inline-block;
float: right;
}
}
.book_image {
width: 80rpx;
height: 60rpx;
float: left;
}
/deep/.list_item {
.rightArrow {
margin-top: 10rpx !important;
}
}
</style>

View File

@@ -0,0 +1,22 @@
<template>
<view style="background-color: #000;"></view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad(options) {
plus.screen.lockOrientation("portrait-primary");
uni.navigateBack({
delta:1
})
}
}
</script>
<style>
</style>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,215 @@
<template>
<div>
<div class="fb tc f20 linheight40">1111</div>
<!-- 视频形式的任务 -->
<div class="taskinfo">
<div id="player-con" style="height: 800px;"></div>
</div>
</div>
</template>
<script>
// importScripts('@/static/aliplayer/aliplayer-min.js')
export default {
data() {
return {
videoTitle: "",
authId:
"eyJTZWN1cml0eVRva2VuIjoiQ0FJUzFBTjFxNkZ0NUIyeWZTaklyNWVFRWNudzNPZEF3N0dUY1ZiVGluTWhiZGx1bzdicXB6ejJJSHBLZVhkdUFlQVhzL28wbW1oWjcvWVlsck1xRmNjWkdoQ2NOSkF2dnNVT29GditKcExGc3QySjZyOEpqc1VDbytjdWswZXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRXh6RVcrRmV2TC9wZ21RUGwvK0ZKTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpiVUJMZ3pLNUl2NWJMVmNTS3dJK1YreVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZHdKNFRXYnJna2VVdFB0a3BtbDlEUHd1MndOQ0o5K24zRzg5S0NnL1BlcnBGUVBjTkFVNXBYc1R6UDdrcHF2YUtLWHRjWXM4MFY0NVVndUtwQUgyS2poclprQ2ZxNk5sQnhQMmxNcTVQbzNPOGMwSWVHTWFnQUZZUjM0ZGY2aWdud3p2TTNaeUdxdWtxcmdmMXM4SHRiYnBvWldJSEhKd2t1OHJlMTg5dnlKMmdSQmRyWmJkd2NFVjhiUEZNYithWTVWTm5MOUZGSk85N0FrQitCZGk0ZktrN0VpNXdMVCs2Q29XUEZZOXZaajZJR3BIdERxY21scW1FS09FVHNlZkxnWXNzbDAzb0lzMFdvRlYzc2RPeDl3MDR2Q3Y3YlZQVFNBQSIsIkF1dGhJbmZvIjoie1wiQ0lcIjpcIkpVb25xR25CR242cU5YRjgyMzE1b25YRlRyUExoL0l3THVrSERNbEhBVEk2a0EyYmgyell1VENRa0VUVWNWZjhcIixcIkNhbGxlclwiOlwiNkxxRjRSdUk3S0Z1aDhVN3lQajBUNWZQMSs5d2FUdWNCT3Urd0ZHUEc5TT1cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjQtMDQtMjNUMTA6NDU6NTJaXCIsXCJNZWRpYUlkXCI6XCI2ZjhlYzhkMDhjZDM3MWVkYmZlNDA3NjRhMGZkMDEwMlwiLFwiUGxheURvbWFpblwiOlwidmlkZW8udGFpaHVtZWQuY29tXCIsXCJTaWduYXR1cmVcIjpcIndnSExCMytZNzEvSXZJQ1lOQmdPUm8xbUhVRT1cIn0iLCJWaWRlb01ldGEiOnsiU3RhdHVzIjoiTm9ybWFsIiwiVmlkZW9JZCI6IjZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyIiwiVGl0bGUiOiLnrKzkuInorrLvvJrkuInmsJTkuYvnuqoiLCJDb3ZlclVSTCI6Imh0dHBzOi8vdmlkZW8udGFpaHVtZWQuY29tLzZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyL3NuYXBzaG90cy9lNTM5ZmJjNzFhNzk0ZGFkYmI3MzUyZjBhMjU5YjNmYy0wMDAwNS5qcGciLCJEdXJhdGlvbiI6Nzk4LjM3Mn0sIkFjY2Vzc0tleUlkIjoiU1RTLk5UMVpzRDE4YXRzeHNwYm5zdGFWQkxzQUUiLCJQbGF5RG9tYWluIjoidmlkZW8udGFpaHVtZWQuY29tIiwiQWNjZXNzS2V5U2VjcmV0IjoiR3NVMUhiaXZiNEpaY3ZLREppNkdQWlRjUlQyWmhqR21ONnBNUFdSQmVGOUciLCJSZWdpb24iOiJjbi1zaGFuZ2hhaSIsIkN1c3RvbWVySWQiOjE2MDQ3NDAxMzc4OTE5MDd9",
videoId: "6f8ec8d08cd371edbfe40764a0fd0102"
};
},
// //页面显示
mounted() {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href =
"https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/skins/default/aliplayer-min.css";
document.head.appendChild(link);
const script = document.createElement("script");
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
script.src =
"https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/aliplayer-min.js";
document.head.appendChild(script);
// // setTimeout(() => {
this.getLive();
// // }, 3000)
},
//第一次加载
onLoad(options) {
// this.videoId = options.videoId
// this.videoTitle = options.videoTit
},
methods: {
// 获取数据
getLive() {
let player = new Aliplayer(
{
// "id": "player-con",
// "source": "//player.alicdn.com/video/aliyunmedia.mp4",
// "width": "100%",
// "height": "500px",
// "autoplay": true,
// "isLive": false,
// "rePlay": false,
// "playsinline": true,
// "preload": true,
// "controlBarVisibility": "hover",
// "useH5Prism": true,
id: "player-con",
vid: this.videoId, // 必选参数,可以通过点播控制台(路径:媒资库>音/视频查询。示例1e067a2831b641db90d570b6480f****。
playauth: this.authId, // 必选参数参数值可通过调用GetVideoPlayAuth接口获取。
encryptType: 1, // 必选参数当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
playConfig: {
EncryptType: "AliyunVoDEncryption"
}, // 当您输出的M3U8流中含有其他非私有加密流时需要指定此参数。
// // authTimeout: 7200, // 可选参数播放地址的有效时长单位秒。该时长会覆盖在视频点播控制台设置的URL鉴权的有效时长。如果不传则取默认值7200。如需设置此参数请确保该时间大于视频的实际时长防止播放地址在播放完成前过期。
// // "source": videoId,
width: "100%"
// // "height": "500px",
// "autoplay": true,
// "isLive": false,
// "cover": "",
// "rePlay": false,
// "playsinline": true,
// "preload": true,
// "controlBarVisibility": "hover",
// "useH5Prism": true,
// "skinLayout": [{
// "name": "bigPlayButton",
// "align": "blabs",
// "x": 30,
// "y": 80
// },
// {
// "name": "H5Loading",
// "align": "cc"
// },
// {
// "name": "errorDisplay",
// "align": "tlabs",
// "x": 0,
// "y": 0
// },
// {
// "name": "infoDisplay"
// },
// {
// "name": "tooltip",
// "align": "blabs",
// "x": 0,
// "y": 56
// },
// {
// "name": "thumbnail"
// },
// {
// "name": "controlBar",
// "align": "blabs",
// "x": 0,
// "y": 0,
// "children": [{
// "name": "progress",
// "align": "blabs",
// "x": 0,
// "y": 44
// },
// {
// "name": "playButton",
// "align": "tl",
// "x": 15,
// "y": 12
// },
// {
// "name": "timeDisplay",
// "align": "tl",
// "x": 10,
// "y": 7
// },
// {
// "name": "fullScreenButton",
// "align": "tr",
// "x": 10,
// "y": 12
// },
// {
// "name": "volume",
// "align": "tr",
// "x": 5,
// "y": 10
// }
// ]
// }
// ]
},
function(player) {
console.log("The player is created");
}
);
}
},
created() {
// 创建引入阿里云播放文件
// function loadScriptString(src) {
// var script = document.createElement('script') //创建一个script标签
// script.type = 'text/javascript'
// script.src = src
// document.getElementsByTagName('head')[0].appendChild(script)
// }
// function loadLinkString(src) {
// var link = document.createElement('link') //创建一个link标签
// link.rel = 'stylesheet'
// link.href = src
// document.getElementsByTagName('head')[0].appendChild(link)
// }
// 使用阿里云播放器
// loadLinkString('https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/skins/default/aliplayer-min.css')
// loadScriptString('https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/aliplayer-min.js')
}
};
</script>
<script>
export default {
//页面显示
mounted() {
// 动态引入较大类库避免影响页面展示
},
methods: {
receiveMsg(newValue, oldValue, ownerVm, vm) {
// //数据变化
// console.log('newValue', newValue)
// console.log('oldValue', oldValue)
// console.log('ownerVm', ownerVm)
// console.log('vm', vm)
},
checkValue() {
console.log(this.authId, "1111");
if (!this.authId) {
setTimeout(() => {
this.checkValue();
}, 1000);
} else {
this.getLive();
}
}
// 阿里云播放
}
};
</script>
<style scoped>
/* @import "@/static/aliplayer/aliplayer-min.css"; */
#myVideo {
width: 100%;
}
</style>

View File

@@ -0,0 +1,27 @@
<template>
<view></view>
</template>
<script>
export default {
data() {
return { };
},
onLoad(options) {
},
onHide() {
},
methods: {},
};
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,375 @@
<template>
<view class="container commonPageBox commonDetailPage" style="position: relative;">
<!-- <cover-view class="image_box">
<image
src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"
mode="aspectFit"
class="headImage"
style="background-color: #f5f5f5"
>
</image>
</cover-view> -->
<video
@fullscreenchange="fullscreenchange"
@timeupdate="videoTimeUpdateEvent($event)"
ref="videos"
style="width: 100%; height: 100%"
autoplay
id="videoId"
object-fit="contain"
class="video-box"
:src="videoUrl"
:poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
@play="playVideo"
>
<!-- <cover-image class="controls-play img" src="http://101.201.146.165:8088/curriculum/detailImg/curriculum_20170411123240222.png"></cover-image>
-->
</video>
</view>
</template>
<script>
import courseDescription from "@/pages/component/commonComponents/list";
import price from "../price/index.vue";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
components: {
courseDescription, //课程说明
price, //课程价格
},
data() {
return {
timer: null,
videoUrl: "",
currentTime: 0,
firstTime: 0,
options: {},
videoData: {},
isSetFirstTime: false,
currentVideoTime: "", //初始播放时长(秒)
urlList: {
detail: "sociology/course/getCourseCatalogueChapterDetail",
curriculumInfo: "app/phone.do?getCourseInfo",
},
};
},
async onUnload() {
this.timer = null;
// #ifdef APP-PLUS
uni.navigateTo({
url: "/pages/curriculum/order/curriculum/back",
});
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
// plus.screen.lockOrientation("portrait-primary");
// #endif
await this.setVideoTime();
// #ifdef APP-PLUS
// plus.screen.lockOrientation("portrait-primary");
// #endif
},
onLoad(options) {
// uni.navigateTo({
// url: "/pages/curriculum/order/curriculum/back",
// });
// #ifdef APP-PLUS
plus.screen.lockOrientation("landscape-primary");
// plus.screen.lockOrientation("portrait-primary");
// #endif
this.options = JSON.parse(options.data);
this.getLive();
this.timer = setInterval(() => {
var that = this;
if (this.currentTime) {
that.setVideoTime();
}
}, 60000 * 10);
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(["userInfo"]),
},
methods: {
// 播放进度改变
videoTimeUpdateEvent(e) {
console.log("e at line 78:", e);
this.playTime = parseInt(e.detail.currentTime);
this.allTime = parseInt(e.detail.duration);
console.log("视频播放时长", this.playTime, "视频总时长", this.allTime);
this.recordTime({
time: this.playTime,
});
},
recordTime(data) {
this.currentTime = data.time;
console.log("data at line 54:", data);
var list = [];
if (uni.getStorageSync("videoList")) {
list = JSON.parse(uni.getStorageSync("videoList"));
}
console.log("点击后设置播放时长的方法list at line 65:", list);
var index = list.findIndex((e) => e.id == this.videoData.id);
if (list.length > 0 && index >= 0) {
list[index] = {
...this.videoData,
time: data.time,
};
} else {
list.push({
...this.videoData,
time: data.time,
});
}
uni.setStorageSync("videoList", JSON.stringify(list));
console.log(list, "走接口的方法参数");
},
//是否全屏
fullscreenchange(e) {
if (!e.target.fullScreen) {
uni.navigateBack({
delta: 1,
});
// plus.screen.lockOrientation("default");
}
},
getData(data) {
console.log(
"data at line 这是接口拿回来的时长11111111111111111111:",
this.videoData.userCourseVideoPositionEntity.position
);
if (!this.isSetFirstTime) {
var netWork = this.videoData.userCourseVideoPositionEntity
? this.videoData.userCourseVideoPositionEntity.position
: 0;
var list = [];
if (uni.getStorageSync("videoList")) {
list = JSON.parse(uni.getStorageSync("videoList"));
}
console.log("这是获取接口 设置的起始时长", netWork);
var index = list.findIndex((e) => e.id == this.videoData.id);
if (netWork) {
if (index >= 0) {
this.firstTime =
list[index].time > netWork ? list[index].time : netWork;
} else {
this.firstTime = netWork ? netWork : 0;
}
} else {
if (index >= 0) {
this.firstTime = list[index].time ? list[index].time : 0;
} else {
this.firstTime = 0;
}
}
uni.setStorageSync("videoList", JSON.stringify(list));
console.log(
"list at line 这是设置完第一次初始值9777777777777777777770:",
list
);
console.log(this.firstTime, "1111111111111111111111");
this.playVideo();
this.isSetFirstTime = true;
}
},
setVideoTime(time) {
var data = {
videoId: this.videoData.id,
position: this.currentTime, //秒数
};
console.log("data at line =存储视频时长接口:", data);
$http
.request({
// url: "book/buyOrder/buySave",
url: `sociology/course/saveCoursePosition`,
method: "Post", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 185:", res);
// console.log("data at line 5911111:", this.videoData);
this.$forceUpdate();
});
},
playVideo(e) {
this.videoContext = uni.createVideoContext("videoId", this);
this.videoContext.seek(this.firstTime);
this.videoContext.requestFullScreen();
},
async getLive() {
var data = {
...this.options,
};
console.log("data at line 57:", data);
$http
.request({
// url: "book/buyOrder/buySave",
url: `sociology/course/checkVideo`,
method: "Post", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 252:", res);
this.videoData = res.video;
this.videoUrl =
// "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/video/taiHuClass/" +
res.video.videoUrl;
this.$nextTick(async () => {
await this.getData();
});
// var playAuth = res.video.playAuth.replace(/=/g, "");
// this.videoData = {
// ...res.video,
// videoId: res.video.video,
// playAuth: playAuth,
// };
// this.playAuth = playAuth;
console.log("data at line 5911111:", this.videoData);
this.$forceUpdate();
});
},
openVideo(data) {
console.log("data at line 380:", data.type);
var mynavData = JSON.stringify(data); // 这里转换成 字符串
if (data.type == 0) {
//视频云点播
uni.navigateTo({
url: `/pages/curriculum/order/curriculum/videoDetail?data=${mynavData}`,
});
} else if (data.type == 1) {
uni.navigateTo({
url: `/pages/curriculum/order/curriculum/videoDetailOss?data=${mynavData}`,
});
}
// uni.navigateTo({
// // url: '../bookShop/commodityDetail?id=' + item.id
// url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
// });
},
hancleModalCancel() {
this.show = false;
},
handleClickMore(v, i, status) {
console.log("i at line 357:", i);
this.$set(this.correlationiList[i], "isOpen", status);
// [i].=!this.correlationiList[i].isOpen;
},
hancleModalConfirm() {
var data = {
values: {
customerType: "D",
token: uni.getStorageSync("token"),
customerOid: uni.getStorageSync("customerOid"),
...this.taiHuClassInfo,
},
};
// $mars.progressBegin('申请中...');
// $mars.post(customerType, 'applyRelearn', data, function (ret) {
// api.hideProgress();
// fnLoadDataGrid();
// });
},
// 检查是有权限使用搜索功能
checkDisable() {
console.log("点击了");
},
// 显示无权限弹窗
// showNoRights() {
// let that = this
// uni.showModal({
// content: "",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// that.clear()
// }
// }
// })
// },
// 放大图片
previewImage(url) {
console.log(url);
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ["很抱歉,暂不支持保存图片到本地"],
success: function (res) {
// console.log(res,'+++++')
},
},
});
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
};
</script>
<style lang="scss" scoped>
.video-box{
position: relative;
}
.image_box{
background-color: red;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>

View File

@@ -0,0 +1,426 @@
<template>
<view class="container" style="background-color: #000; position: relative">
<u-icon
@click="goBack"
name="arrow-left"
color="#3ab3ae"
size="40"
:style="`display: inline-block; position: absolute; top: ${
statusBarHeight + 6
}px; left: ${10}px;z-index: 999;`"
></u-icon>
<div
style="background-color: #000"
ref="videoContent"
@tap="renderScript.handleClick"
id="url-player-test"
:videoData="videoData"
:firstTime="firstTime"
:change:videoData="renderScript.receiveMsg"
:change:firstTime="renderScript.receiveFirstTime"
></div>
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
直接调用renderjs中的emitData的方法,传递当前播放时长
</div>
<div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
监听结束方法记录播放时长
</div>
</view>
</template>
<script>
import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex";
// importScripts('@/static/aliplayer/aliplayer-min.js')
export default {
data() {
return {
timer: null,
videoTitle: "",
videoList: [],
firstTime: 0,
options: {},
playAuth: "",
currentTime: "",
videoId: "",
videoData: {},
isSetFirstTime: false,
screenType: null,
};
},
computed: {
...mapState(["videoOssList"]),
},
// //页面显示
mounted() {},
async onUnload() {
uni.navigateTo({
url: "/pages/curriculum/order/curriculum/back",
});
// #ifdef APP-PLUS
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
// plus.screen.lockOrientation("portrait-primary");
// #endif
this.timer = null;
await this.setVideoTime();
this.player.dispose();
},
//第一次加载
onLoad(options) {
console.log(options, "这是传参");
// #ifdef APP-PLUS
setTimeout(() => {
plus.screen.unlockOrientation();
plus.screen.lockOrientation("landscape-primary");
}, 10);
// #endif
// #ifdef APP-PLUS
// plus.screen.lockOrientation("portrait-primary");
// #endif
if (uni.getStorageSync("videoOssList")) {
this.videoList = JSON.parse(uni.getStorageSync("videoOssList"));
}
console.log("this.videoList at line 53:", this.videoList);
this.options = JSON.parse(options.data);
this.videoId = this.options.video;
this.timer = setInterval(() => {
var that = this;
if (this.currentTime) {
that.setVideoTime();
}
}, 60000 * 10);
},
methods: {
getData(data) {
console.log(
"data at line 这是接口拿回来的时长11111111111111111111:",
this.videoData.userCourseVideoPositionEntity
);
if (!this.isSetFirstTime) {
var netWork = this.videoData.userCourseVideoPositionEntity
? this.videoData.userCourseVideoPositionEntity.position
: 0;
var list = JSON.parse(uni.getStorageSync("videoOssList"));
console.log("这是获取接口 设置的起始时长", netWork);
var index = list.findIndex((e) => e.id == this.videoData.id);
if (netWork) {
if (index >= 0) {
this.firstTime =
list[index].time > netWork ? list[index].time : netWork;
} else {
this.firstTime = netWork ? netWork : 0;
}
} else {
if (index >= 0) {
this.firstTime = list[index].time ? list[index].time : 0;
} else {
this.firstTime = 0;
}
}
uni.setStorageSync("videoOssList", JSON.stringify(list));
console.log(
"list at line 这是设置完第一次初始值9777777777777777777770:",
list
);
console.log(this.firstTime, "1111111111111111111111");
this.isSetFirstTime = true;
}
},
recordTime(data) {
this.currentTime = data.time;
console.log("data at line 54:", data);
var list = [];
if (uni.getStorageSync("videoOssList")) {
list = JSON.parse(uni.getStorageSync("videoOssList"));
}
console.log("list at line 56:", list);
console.log("点击后设置播放时长的方法list at line 65:", list);
var index = list.findIndex((e) => e.id == this.videoData.id);
if (list.length > 0 && index >= 0) {
list[index] = {
...this.videoData,
time: data.time,
};
} else {
list.push({
...this.videoData,
time: data.time,
});
}
uni.setStorageSync("videoOssList", JSON.stringify(list));
console.log(list, "走接口的方法参数");
},
// 获取数据
getLive() {
var data = {
...this.options,
};
$http
.request({
url: `sociology/course/checkVideo`,
method: "Post", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 252111111111111111111111111111:", res);
var playAuth = res.video.playAuth.replace(/=/g, "");
this.videoData = {
...res.video,
videoId: res.video.video,
playAuth: playAuth,
};
this.playAuth = playAuth;
// console.log("data at line 5911111:", this.videoData);
this.$forceUpdate();
});
},
async handleEnd() {
var list = JSON.parse(JSON.stringify(uni.getStorageSync("videoOssList")));
var data = list.find((e) => e.id == this.videoData.id);
this.currentTime = data.time;
await this.setVideoTime();
this.timer = null;
},
setVideoTime(time) {
var data = {
videoId: this.videoData.id,
position: this.currentTime, //秒数
};
console.log("data at line =存储视频时长接口:", data);
$http
.request({
// url: "book/buyOrder/buySave",
url: `sociology/course/saveCoursePosition`,
method: "Post", // POST、GET、PUT、DELETE具体说明查看官方文档
data,
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 185:", res);
// console.log("data at line 5911111:", this.videoData);
this.$forceUpdate();
});
},
changePlayerTime(player) {
console.log("this.firstTime at line 106:", this.firstTime);
player.seek(this.firstTime);
},
goBack() {
uni.navigateBack({
delta: 1,
});
},
},
created() {
this.getLive();
},
};
</script>
<script module="renderScript" lang="renderjs">
export default {
mounted() {
// 在适合的生命周期通过script和link标签引入播放器sdk、css
console.log(this.options, '这是monted')
this.loadWebPlayerSDK()
},
data() {
return {
player: null,
curTime: null,
curStatus: null,
// currentTime:null,
}
},
watch: {
curTime(val) {
if (this.curTime !== null && this.curStatus !== null) {
this.$refs.videoContent1.click()
}
}
},
methods: {
handleClick(event, ownerInstance) {
console.log('event at line 165:', event)
console.log('触发点击事件')
ownerInstance.callMethod('getData')
},
emitData(event, ownerInstance) {
var that = this;
console.log('调用点击事件this.curTime at line 220:', this.curTime)
console.log('调用点击事件this.curStatus at line 222:', this.curStatus)
ownerInstance.callMethod('recordTime', {
time: that.curTime,
status: that.curStatus
})
},
endEmitData(event, ownerInstance) {
var that = this;
console.log('调用点击事件this.curTime at line 220:', this.curTime)
console.log('调用点击事件this.curStatus at line 222:', this.curStatus)
ownerInstance.callMethod('handleEnd', )
},
getLive() {
var player = new Aliplayer({
id: "url-player-test",
"vid": this.videoData
.videoId, // 必选参数,可以通过点播控制台(路径:媒资库>音/视频查询。示例1e067a2831b641db90d570b6480f****。
"playauth": this.videoData.playAuth, // 必选参数参数值可通过调用GetVideoPlayAuth接口获取。
"encryptType": 1, // 必选参数当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
"playConfig": {
"EncryptType": 'AliyunVoDEncryption'
},
width: '100%', //容器的大小
// videoWidth: '100vw', //容器的大小
// videoHeight: '100vh', //容器的大小
height: '100%', //容器的大小
}, function(player) {});
this.player = player;
// player.setRotate(90)
//全屏播放
player.one('canplay', function() {
// console.log('canplay', this.player.tag);
player.tag.play();
});
this.$refs.videoContent.click()
var timer = setInterval(() => {
var that = this;
that.curTime = parseInt(this.player.getCurrentTime());
that.curStatus = this.player.getStatus()
}, 1000);
// player.on('ready',function(){
// player.fullscreenService.requestFullScreen()
// })
this.player.on('ended', function() {
console.log('that.curTime at line 242:', this.curTime)
console.log('that.curStatus at line 210:', this.curStatus)
this.$refs.videoContent2.click()
})
},
receiveScreenType(newValue) {
console.log('newValue at line 427屏幕方向111111111111:', newValue)
},
receiveFirstTime(newValue, oldValue, ownerVm, vm) {
// //数据变化
console.log('newValue111', newValue)
console.log('vm4444', vm)
console.log('this.firstTime at line 215:', newValue)
if (this.player) {
this.player.seek(newValue);
}
},
receiveMsg(newValue, oldValue, ownerVm, vm) {
//数据变化
console.log('newValue', newValue)
console.log('oldValue', oldValue)
console.log('ownerVm', ownerVm)
console.log('vm', vm)
},
checkValue() {
console.log(this.videoId, this.authId, "1111888888")
if (!this.videoData.playAuth) {
setTimeout(() => {
this.checkValue();
}, 1000);
} else {
this.getLive();
}
},
loadWebPlayerSDK() {
return new Promise((resolve, reject) => {
const s_tag = document.createElement('script'); // 引入播放器js
s_tag.type = 'text/javascript';
s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
this.checkValue();
resolve();
}
document.body.appendChild(s_tag);
const l_tag = document.createElement('link'); // 引入播放器css
l_tag.rel = 'stylesheet';
l_tag.href =
'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
document.body.appendChild(l_tag);
});
},
loadComponent() {
return new Promise((resolve, reject) => {
const s_tag = document.createElement('script');
s_tag.type = 'text/javascript';
// 需要先下载组件 js 文件,放到项目 /static/ 目录下
// 下载地址https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
resolve();
}
document.body.appendChild(s_tag);
});
}
}
}
</script>
<style>
.container {
width: 100vw;
height: 100vh;
}
</style>

File diff suppressed because it is too large Load Diff