373 lines
9.9 KiB
Vue
373 lines
9.9 KiB
Vue
<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>
|