zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aliyun

Browse Source
This commit is contained in:
始于初见
2024-07-24 14:24:20 +08:00
parent 4387fba497
commit bd8ff7071b
46 changed files with 2297 additions and 1446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

870
pages/component/commonComponents/video/index.vue
View File

@@ -26,7 +26,6 @@
:videoData="videoData"
:winWidth="winWidth"
:winHeight="winHeight"
:currentVideoList="currentVideoList"
:firstTime="firstTime"
:isfresh="isfresh"
:platform="platform"
@@ -40,7 +39,6 @@
:change:isfresh="renderScript.receiveIsfresh"
:change:platform="renderScript.receiveplatform"
:change:isChange="renderScript.receiveIsChange"
:change:currentVideoList="renderScript.receiveVideoList"
></div>
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
直接调用renderjs中的emitData的方法,传递当前播放时长
@@ -58,12 +56,10 @@
<div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
监听第一次初始播放时长,开始进行接口存储时间
</div>
<div @tap="renderScript.emitopenShow" ref="videoContent5" v-show="false">
在ios端打开视频提示（不能播放私有加密）
</div>
<!-- 全屏按钮 start -->
<!-- 注意：主要用于安卓端，因为ios手机会被劫持 -->
<div class="fullScreenButton-container">
<div class="fullScreenButton-container" v-if="platform != 'ios'">
<div
:class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
@tap="renderScript.changeVideoScreen"
@@ -78,10 +74,12 @@ import store from "@/store/index.js";
import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex";
export default {
props: [
"currentVideo", //当前播放视频信息 （type 0 老视频 1 私有加密/标准加密 2音频）
"currentVideoList", //当前文章下所有视频/音频列表
],
props: {
currentVideoId: {
type: Number,
default: null,
},
},
data() {
return {
show: false, //视频提示显示
@@ -91,23 +89,44 @@ export default {
isfresh: false, //是否刷新
isChange: false, //是否切换播放源
videoList: [], //视频列表
firstTime: 0, //初始播放时间
videoOssList: [], //本地视频列表
options: {}, //父组件传参
currentTime: "", //当前播放时间
videoData: {}, //获取当前的播放信息，playAuth，m3u8url
isSetFirstTime: false, //是否获取到初始播放时间
firstTime: 0, //初始播放时间
urlList: {
checkVideo: "sociology/course/checkVideo",
},
};
},
computed: {
...mapState(["videoOssList"]),
// ...mapState(["videoOssList"]),
},
watch: {
timer(newValue) {
this.$emit("child-event", newValue);
},
videoOssList: {
immediate: true,
handler(newValue) {
if (this.videoOssList.length > 0) {
uni.setStorageSync("videoOssList", JSON.stringify(this.videoOssList));
}
},
},
},
//
created() {
this.platform = this.$platform;
this.show = false;
if (uni.getStorageSync("videoOssList")) {
this.videoOssList = JSON.parse(uni.getStorageSync("videoOssList"));
}
this.checkVideo();
},
//子组件销毁前
beforeDestroy() {
this.handleEnd();
@@ -139,137 +158,102 @@ export default {
this.$emit("changeScreen", this.isFullScreen);
},
//获取 video 初始化信息
async init(data, isChange) {
this.show = false; //清楚提示信息
this.platform = this.$platform;
this.isfresh = true;
if (uni.getStorageSync("videoOssList")) {
this.videoList = JSON.parse(uni.getStorageSync("videoOssList"));
}
this.options = data.currentVideo;
this.videoId = this.options.video;
await this.checkVideo(isChange);
},
// 获取数据 checkVideo
async checkVideo(isChange) {
var that = this;
this.isfresh = false;
var data = {
...this.options,
};
//获取 video 初始化信息 (播放凭证 + m3u8)
async checkVideo() {
this.videoData = {};
this.firstTime = 0;
await $http
.request({
url: `sociology/course/checkVideo`,
url: this.urlList.checkVideo,
method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
data: { id: this.currentVideoId, loadAnimate: "none" },
header: {
"Content-Type": "application/json",
},
})
.then(async (res) => {
var data = {
...res.video,
};
if (this.currentVideo.type == 1) {
var playAuth = res.video.playAuth.replace(/=/g, "");
data = {
...data,
videoId: res.video.video,
playAuth: playAuth,
};
await that.getData(data, isChange);
var that = this;
that.videoData.vid = res.video.video;
if (res.video.type == 1) {
if (res.video.m3u8Url == null || res.video.m3u8Url == "") {
//私有加密
if (that.$platform == "ios") {
that.show = true;
return false;
}
that.videoData.playAuth = res.video.playAuth.replace(/=/g, "");
that.videoData.encryptType = "1";
} else {
//标准加密
that.videoData.source = res.video.m3u8Url;
}
} else {
data = {
...data,
playAuth: new Date().getTime(),
};
await that.getData(data, isChange);
//mp4 mp3
that.videoData.source = res.video.videoUrl;
}
that.$forceUpdate();
});
},
//获取并设置初始播放信息 并同步到本地
async getData(data, isChange) {
if (!this.isSetFirstTime) {
var netWork = data.userCourseVideoPositionEntity
? data.userCourseVideoPositionEntity.position
: 0;
var list = [];
if (uni.getStorageSync("videoOssList")) {
list = JSON.parse(uni.getStorageSync("videoOssList"));
var index = list.findIndex((e) => e.id == data.id);
if (netWork) {
if (index >= 0) {
this.firstTime =
list[index].time > netWork ? list[index].time : netWork;
var netWork = res.video.userCourseVideoPositionEntity
? res.video.userCourseVideoPositionEntity.position
: 0;
var list = [...that.videoOssList];
if (list.length > 0) {
list = [];
var index = list.findIndex((e) => e.id == res.video.id);
if (netWork) {
if (index >= 0) {
that.firstTime =
list[index].time > netWork ? list[index].time : netWork;
} else {
that.firstTime = netWork ? netWork : 0;
}
} else {
this.firstTime = netWork ? netWork : 0;
}
} else {
if (index >= 0) {
this.firstTime = list[index].time ? list[index].time : 0;
} else {
this.firstTime = 0;
if (index >= 0) {
that.firstTime = list[index].time ? list[index].time : 0;
}
}
that.videoOssList = [...list];
}
} else {
this.firstTime = 0;
}
this.videoData = {
...data,
};
console.log("这是 getData this.videoData at line 220:", this.videoData);
this.isChange = isChange ? isChange : false;
uni.setStorageSync("videoOssList", JSON.stringify(list));
}
this.isSetFirstTime = true;
that.isfresh = true;
});
},
//当前播放时间 存本地
recordTime(data) {
this.currentTime = data.time;
var list = [];
if (uni.getStorageSync("videoOssList")) {
list = JSON.parse(uni.getStorageSync("videoOssList"));
}
var index = list.findIndex((e) => e.id == this.videoData.id);
recordTime(time) {
this.currentTime = time;
var list = [...this.videoOssList];
var index = list.findIndex((e) => e.id == this.currentVideoId);
var setData = {
id: this.currentVideoId,
vid: this.videoData.vid,
time: time,
};
if (list.length > 0 && index >= 0) {
list[index] = {
...this.videoData,
time: data.time,
};
list[index] = setData;
} else {
list.push({
...this.videoData,
time: data.time,
});
list.push(setData);
}
this.videoOssList = list;
if (this.currentTime % 60 == 0) {
console.log("这是60秒调一次存储接口", this.currentTime);
this.setVideoTime();
}
console.log("当前播放时间 存本地:", 11);
uni.setStorageSync("videoOssList", JSON.stringify(list));
},
//播放结束
async handleEnd() {
console.log("走了结束", 11);
var list = JSON.parse(uni.getStorageSync("videoOssList"));
console.log("list at line 253:", list);
var data = list.find((e) => e.id == this.videoData.id);
this.currentTime = data.time;
clearInterval(this.$store.state.videoTimer);
this.timer = null;
await this.setVideoTime();
console.log("是否调了播放结束");
this.setVideoTime();
},
//存播放进度
setVideoTime() {
var data = {
videoId: this.videoData.id,
videoId: this.currentVideoId,
position: this.currentTime, //秒数
loadAnimate: none,
loadAnimate: "none",
};
console.log("是否走了存储视频时长data at line 264:", data);
console.log("data at line 251:", data);
$http
.request({
url: `sociology/course/saveCoursePosition`,
@@ -279,352 +263,394 @@ export default {
"Content-Type": "application/json",
},
})
.then((res) => {});
.then((res) => {
console.log("res at line 为啥265:", res);
});
},
//定时器 存播放进度
async setVideoFirtsetTime() {
this.currentTime = this.firstTime;
store.commit(
"setVideoTimer",
setInterval(async () => {
await this.setVideoTime();
}, 60000)
);
this.setVideoTime();
},
},
created() {},
};
</script>
<script module="renderScript" lang="renderjs">
import $ from "jquery";
export default {
data() {
return {
player: null, //播放器
videoTimer: null, //定时器
curTime: null, //播放器当前播放进度
curStatus: null, //播放器当前播放状态
playerConfig: {
id: "url-player-test",
width: "100%", //容器的大小
height: "100%", //容器的大小
qualitySort: "asc",
cover: "",
autoplay: true,
isLive: false,
rePlay: false,
playsinline: 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,
},
data() {
return {
player: null, //播放器
videoTimer: null, //定时器
curTime: null, //播放器当前播放进度
curStatus: null, //播放器当前播放状态
playerConfig: {
id: "url-player-test",
width: "100%", //容器的大小
height: "100%", //容器的大小
qualitySort: "asc",
cover: "",
autoplay: true,
isLive: false,
rePlay: false,
playsinline: true,
controlBarVisibility: "hover",
useH5Prism: true,
skinLayout: [],
},
{
name: "prism-speed-selector",
align: "tr",
x: 15,
y: 12,
},
{
name: "volume",
align: "tr",
x: 5,
y: 10,
},
],
},
],
},
};
},
skinLayoutIos:[{
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: "prism-speed-selector",
align: "tr",
x: 15,
y: 12,
},
{
name: "volume",
align: "tr",
x: 5,
y: 10,
},
],
},
],
skinLayoutAndroid:[{
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,
},
watch: {
//播放器当前播放进度
curTime(val) {
if (this.curTime !== null && this.curStatus !== null) {
this.$refs.videoContent1.click();
{
name: "prism-speed-selector",
align: "tr",
x: 15,
y: 12,
},
{
name: "volume",
align: "tr",
x: 5,
y: 10,
},
],
},
]
};
},
watch: {
//播放器当前播放进度
curTime(val) {
if (this.curTime !== null) {
this.$refs.videoContent1.click();
}
},
},
mounted() {
this.loadWebPlayerSDK(); //引入播放器sdk、css
},
methods: {
//检验视频 获取加密权限
checkValue() {
if (!this.videoData.vid&&!this.isfresh) {
setTimeout(() => {
this.checkValue();
}, 1000);
} else {
this.initAliyunPlayer();
}
},
//引入播放器sdk、css
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 = () => {
const s_tag1 = document.createElement("script"); // 引入播放器js
s_tag1.type = "text/javascript";
s_tag1.src =
"https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js";
s_tag1.charset = "utf-8";
s_tag1.onload = () => {
this.checkValue();
resolve();
};
document.body.appendChild(s_tag1);
};
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);
});
},
// if (this.player) {
// this.player.dispose();
// this.player = null;
// }
//初始化播放器
initAliyunPlayer() {
var components=[{
name: "RateComponent", //倍速组件
type: AliPlayerComponent.RateComponent,
}]
if(this.platform!='ios'){
var fullScreenButtonComponent = Aliplayer.Component({
init: function(status, toAddress) {
this.fullScreenStatus = status;
this.$html = $(".fullScreenButton-container");
},
createEl: function(el) {
this.$html.find(".ad").attr("src", this.adAddress);
var $adWrapper = this.$html.find(".ad-wrapper");
$adWrapper.attr("href", this.toAddress);
$adWrapper.click(function() {});
$(el).find(".prism-time-display").after(this.$html);
},
});
components=[...components, {
name: "adComponent", //自定义全屏组件
type: fullScreenButtonComponent,
},]
}
},
},
mounted() {
this.loadWebPlayerSDK(); //引入播放器sdk、css
},
methods: {
//检验视频 获取加密权限
checkValue() {
if (!this.videoData.playAuth || !this.currentVideoList) {
setTimeout(() => {
this.checkValue();
}, 1000);
} else {
this.initAliyunPlayer();
}
},
//引入播放器sdk、css
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 = () => {
const s_tag1 = document.createElement("script"); // 引入播放器js
s_tag1.type = "text/javascript";
s_tag1.src =
"https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js";
s_tag1.charset = "utf-8";
s_tag1.onload = () => {
this.checkValue();
resolve();
};
document.body.appendChild(s_tag1);
};
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);
});
},
//初始化播放器
initAliyunPlayer() {
if (this.player) {
this.player.dispose();
$("#url-player-test").empty();
this.player = null;
}
var fullScreenButtonComponent = Aliplayer.Component({
init: function (status, toAddress) {
this.fullScreenStatus = status;
this.$html = $(".fullScreenButton-container");
},
createEl: function (el) {
this.$html.find(".ad").attr("src", this.adAddress);
var $adWrapper = this.$html.find(".ad-wrapper");
$adWrapper.attr("href", this.toAddress);
$adWrapper.click(function () {});
$(el).find(".prism-time-display").after(this.$html);
},
});
//设置播放基本配置
var playerOptions = {
...this.playerConfig,
components: [
{
name: "adComponent", //自定义全屏组件
type: fullScreenButtonComponent,
},
{
name: "RateComponent", //倍速组件
type: AliPlayerComponent.RateComponent,
},
],
};
console.log("playerOptions at line 468:", playerOptions);
if (this.videoData.type == 1) {
if (this.videoData.m3u8Url == null || this.videoData.m3u8Url == "") {
//这是私有加密的视频
if (this.$platform == "ios") {
//ios 不能播放提示信息
this.$refs.videoContent5.click();
} else {
playerOptions = {
...playerOptions,
vid: this.videoData.videoId,
playauth: this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
playConfig: {
EncryptType: "AliyunVoDEncryption",
},
};
}
} else if (
this.videoData.m3u8Url != null ||
this.videoData.m3u8Url != ""
) {
//这是标准加密的视频
playerOptions = {
...playerOptions,
source: this.videoData.m3u8Url,
};
}
} else {
//这是没有加密的视频
//设置播放基本配置
var playerOptions = {
...this.playerConfig,
components: components,
skinLayout:this.platform=='ios'?this.skinLayoutIos:this.skinLayoutAndroid
};
console.log("playerOptions at line 468:", playerOptions);
if(this.videoData.encryptType==1){
playerOptions = {
...playerOptions,
source: this.videoData.videoUrl,
vid: this.videoData.vid,
playauth: this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
playConfig: {
EncryptType: "AliyunVoDEncryption",
},
};
}else{
playerOptions = {
...playerOptions,
source: this.videoData.source,
};
}
var player = new Aliplayer(playerOptions, (player) => {
player.on("ready", () => {
this.player = player;
var lastTime=this.firstTime
if (this.platform == "ios") {
var player = new Aliplayer(playerOptions, (player)=> {
player.on("ready", () => {
this.player = player;
if (this.platform == "ios") {
this.player.one("timeupdate", () => {
this.player.seek(this.firstTime);
this.player.one("canplay", () => {
this.player.seek(this.firstTime);
});
} else {
this.player.seek(this.firstTime);
}
this.player.one('timeupdate', () => {
if (!this.player.tag.seeking) {
// 更新最近一次的播放位置
lastTime= parseInt(this.player.getCurrentTime())
this.curTime=lastTime;
}
});
this.player.one("canplay", () => {
this.player.seek(this.firstTime);
this.player.on('timeupdate', () => {
if (!this.player.tag.seeking) {
// 更新最近一次的播放位置
lastTime= parseInt(this.player.getCurrentTime())
this.curTime=lastTime;
}
});
} else {
this.player.seek(this.firstTime);
}
this.$refs.videoContent4.click();
clearInterval(this.videoTimer);
this.videoTimer = null;
this.videoTimer = setInterval(() => {
var that = this;
that.curTime = parseInt(that.player.getCurrentTime());
that.curStatus = that.player.getStatus();
}, 1000);
});
this.player.on("ended", () => {
lastTime= parseInt(this.player.getCurrentTime())
this.curTime=lastTime;
this.$refs.videoContent2.click();
});
});
});
},
player.on("ended", () => {
this.$refs.videoContent2.click();
});
});
//调用 recordTime 方法 存本地播放时长
emitData(event, ownerInstance) {
ownerInstance.callMethod("recordTime", this.curTime);
},
//调用 setVideoFirtsetTime 设置初始播放
emitSetData(event, ownerInstance) {
ownerInstance.callMethod("setVideoFirtsetTime");
},
//调用 openShow 设置ios 不能播放私用加密 提示信息
emitopenShow(event, ownerInstance) {
ownerInstance.callMethod("openShow");
},
//调用 handleEnd 存储视频播放信息
endEmitData(event, ownerInstance) {
ownerInstance.callMethod("handleEnd");
},
},
//调用 screenChange + 设置全屏
changeVideoScreen(event, ownerInstance) {
var status = this.player.fullscreenService.getIsFullScreen();
ownerInstance.callMethod("screenChange", {
status: status,
primary: status ? "portrait" : "landscape",
});
//调用 recordTime 方法 存本地播放时长
emitData(event, ownerInstance) {
ownerInstance.callMethod("recordTime", {
time: this.curTime,
status: this.curStatus,
});
},
if (status) {
setTimeout(() => {
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
this.player.fullscreenService.cancelFullScreen();
}, 100);
} else {
this.player.fullscreenService.requestFullScreen();
setTimeout(() => {
plus.screen.lockOrientation("landscape-primary");
}, 100);
}
},
//调用 setVideoFirtsetTime 设置初始播放
emitSetData(event, ownerInstance) {
console.log("调用 setVideoFirtsetTime 设置初始播放");
ownerInstance.callMethod("setVideoFirtsetTime");
},
//调用 changeVideoData 切换播放源
changeVideoData(event, ownerInstance) {
ownerInstance.callMethod("changeVideoData");
},
//调用 openShow 设置ios 不能播放私用加密 提示信息
emitopenShow(event, ownerInstance) {
ownerInstance.callMethod("openShow");
},
//切换播放源
async receiveIsChange(newValue) {
if (this.isChange) {
this.checkValue();
}
},
//调用 handleEnd 存储视频播放信息
endEmitData(event, ownerInstance) {
ownerInstance.callMethod("handleEnd");
},
handleClick(event, ownerInstance) {}, //点击播放器
//调用 screenChange + 设置全屏
changeVideoScreen(event, ownerInstance) {
var status = this.player.fullscreenService.getIsFullScreen();
ownerInstance.callMethod("screenChange", {
status: status,
primary: status ? "portrait" : "landscape",
});
receiveFirstTime(newValue, oldValue, ownerVm, vm) {}, //播放时间
if (status) {
setTimeout(() => {
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
this.player.fullscreenService.cancelFullScreen();
}, 100);
} else {
this.player.fullscreenService.requestFullScreen();
setTimeout(() => {
plus.screen.lockOrientation("landscape-primary");
}, 100);
}
},
receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {}, //是否刚开始设置播放时间
//调用 changeVideoData 切换播放源
changeVideoData(event, ownerInstance) {
ownerInstance.callMethod("changeVideoData");
},
receiveplatform(newValue) {}, //获取设备型号
//切换播放源
async receiveIsChange(newValue) {
if (this.isChange) {
this.checkValue();
}
},
receiveVideoList(newValue, oldValue, ownerVm, vm) {}, //获取视频列表
handleClick(event, ownerInstance) {}, //点击播放器
receiveVideoData(newValue, oldValue, ownerVm, vm) {}, //获取视频信息
receiveFirstTime(newValue, oldValue, ownerVm, vm) {}, //播放时间
receiveWinWidth(newValue, oldValue, ownerVm, vm) {}, //获取视频宽度
receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {}, //是否刚开始设置播放时间
receiveplatform(newValue) {}, //获取设备型号
receiveVideoList(newValue, oldValue, ownerVm, vm) {}, //获取视频列表
receiveVideoData(newValue, oldValue, ownerVm, vm) {}, //获取视频信息
receiveWinWidth(newValue, oldValue, ownerVm, vm) {}, //获取视频宽度
receiveWinHeight(newValue, oldValue, ownerVm, vm) {}, //获取视频高度
},
receiveWinHeight(newValue, oldValue, ownerVm, vm) {}, //获取视频高度
},
};
</script>

471
pages/curriculum/order/curriculum/detail.vue
View File

@@ -13,36 +13,16 @@
>
<view :style="`background:#000`">
<common-video
:videoTitle="curriculumData.title"
v-if="isfresh"
@changeScreen="changeScreen"
@changeScreenLoading="changeScreenLoading"
ref="commonVideo"
:currentVideo="currentVideo"
:currentVideoList="videoArray"
:currentVideoId="currentVideoId"
>
</common-video>
<!-- <common-video
v-else
@changeScreen="changeScreen"
@changeScreenLoading="changeScreenLoading"
ref="commonVideo"
:currentVideo="currentVideo"
:currentVideoList="videoArray"
>
</common-video> -->
<!-- <view style="height: 200px" v-else></view> -->
<view v-else style="height: 200px"> </view>
</view>
<!-- <common-sticky
style=""
itemStyle="width:auto; height: 80rpx;font-size:20rpx;color:#fff"
:list="ordersTabs"
label="name"
:currentCateIndex="currentCateIndex"
@handleselectCate="ordersTabCLi"
></common-sticky> -->
<scroll-view
:style="`height:calc(100% - 200px - 40rpx) ;`"
scroll-y="true"
@@ -241,14 +221,6 @@
v-show="screenLoading"
>
</view>
<!-- <u-modal
:show="show"
:title="modalInfo.title"
:content="modalInfo.content"
showCancelButton
@confirm="hancleModalConfirm"
@cancel="hancleModalCancel"
></u-modal> -->
</view>
</template>
@@ -256,7 +228,6 @@
import courseDescription from "@/pages/component/commonComponents/list";
import curriculumMp3 from "./mp3Detail.vue";
import price from "../price/index.vue";
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
@@ -326,35 +297,27 @@ export default {
userMes: {}, // 用户信息
searchDisable: false, // 搜索不可用
limitShow: false,
limitTitle: "提示",
limitContent: "",
scrollViewHeight: 0,
urlList: {
detail: "sociology/course/getCourseCatalogueChapterDetail",
checkVideo: "sociology/course/checkVideo",
curriculumInfo: "app/phone.do?getCourseInfo",
},
currentVideoId: null,
};
},
onLoad(options) {
this.options = options;
this.getCourseDescriptionData();
// plus.screen.lockOrientation("default");
this.screenLoading = false;
this.currentCateIndex = 0;
// #ifdef APP-PLUS
// plus.screen.unlockOrientation(); //解除锁定屏幕方向
// plus.screen.lockOrientation("portrait-primary");
// this.getUserInfo()
// this.getCateList()
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
onShow() {
// #endif
},
onHide() {},
onShow() {},
computed: {
...mapState(["userInfo"]),
},
@@ -370,71 +333,16 @@ export default {
this.currentCateIndex = data.index;
this.$forceUpdate();
},
initVideo() {
this.screenLoading = false;
this.isfresh = false;
this.$nextTick(() => {
this.isfresh = true;
setTimeout(() => {
this.$refs.commonVideo.init({
currentVideo: this.currentVideo,
currentVideoList: this.videoArray,
});
}, 200);
});
},
changeVideo(data) {
if (data.id != this.currentVideo.id) {
clearInterval(this.$store.state.videoTimer);
console.log(
"父页面是否触发了切换视屏呀:",
data.id,
this.currentVideo.id
);
this.currentVideo = data;
// setTimeout(() => {
this.$refs.commonVideo.changeVideo({
currentVideo: data,
currentVideoList: this.videoArray,
this.isfresh = false;
this.$nextTick(() => {
this.currentVideoId = data.id;
this.currentVideo = data;
this.isfresh = true;
});
// }, 200);
// // handleEnd
// this.$refs.commonVideo.handleEnd();
// this.currentVideo = data;
// this.initVideo();
// this.isOpenMp3 = false;
}
console.log("data at line 380111111111111111111:", data.type);
// var mynavData = JSON.stringify(data); // 这里转换成 字符串
// if (data.type == 0 || data.type == 2) {
// //0 mp4 2 mp3
// 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}`,
// });
// }
// else if (data.type == 2) {
// //mp3
// this.isOpenMp3 = true;
// this.$nextTick(() => {
// this.$refs.mp3Detail.init({ 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;
@@ -442,7 +350,6 @@ export default {
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 = {
@@ -453,19 +360,12 @@ export default {
...this.taiHuClassInfo,
},
};
// $mars.progressBegin('申请中...');
// $mars.post(customerType, 'applyRelearn', data, function (ret) {
// api.hideProgress();
// fnLoadDataGrid();
// });
},
//课程详情
gotoDetail(v) {
console.log(v);
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
});
},
@@ -473,117 +373,34 @@ export default {
goCourseDescription(v) {
console.log(v);
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
});
},
getCourseDescriptionData() {
async getCourseDescriptionData() {
this.isfresh = false;
var data = {
id: this.options.id,
load: false,
// id: "16457",
};
var that = this;
$http
.request({
// url: "book/buyOrder/buySave",
url: "sociology/course/getCourseCatalogueChapterDetail",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: {
//默认 无 说明：请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
console.log(this.$store.state, "11111111111");
console.log("res at line 491:", res);
console.log("res at line 395:", res);
that.curriculumData = res.data.detail;
that.videoArray = res.data.videos;
if (that.videoArray.length > 0) {
this.currentVideo = that.videoArray[0];
this.initVideo();
that.currentVideoId = that.videoArray[0].id;
that.currentVideo = that.videoArray[0];
that.isfresh = true;
}
// if (res.obj.correlatedList && res.obj.correlatedList.length > 0) {
// this.relatedCoursesList =
// res.obj.correlatedList && res.obj.correlatedList.length > 0
// ? res.obj.correlatedList
// : [];
// this.medicalCasesList =
// res.obj.dataList && res.obj.dataList.length > 0
// ? res.obj.dataList
// : [];
// this.commentLst =
// res.obj.commentLst && res.obj.commentLst.length > 0
// ? res.obj.commentLst
// : [];
// this.praise = res.obj.praise
// ? res.obj.praise
// .split("，")
// .filter((e) => e != "")
// .join("，")
// : "";
// this.reward = res.obj.reward
// ? res.obj.reward
// .split("，")
// .filter((e) => e != "")
// .join("，")
// : "";
// correlatedListEl.innerHTML = courseDot(ret.correlatedList);
// }
var videoArray = [];
var videoArrayHW = [];
// break;
// switch (that.curriculumData.videoType) {
// case "01":
// // allDataList
// // voices
// that.videoArray = res.obj.videos.split(",");
// that.videoArrayHW = res.obj.videos.split(",");
// if (res.obj.dataLst && res.obj.dataLst.length > 0) {
// // dataGrid.innerHTML = dot(ret.dataLst);
// }
// break;
// case "02":
// that.videoArray = res.obj.videoId.split(",");
// if (res.obj.dataLst && res.obj.dataLst.length > 0) {
// // res.obj.dataLst
// console.log("res.obj.dataLst at line 436:", res.obj.dataLst);
// }
// break;
// // console.log(this.dataList.length, 6666666)
// break;
// }
// if (res.obj.w_videoIds != "") {
// // 海外视频
// // $mars.initAVDataHW(ret.oid,'1', 'videoHW', ret.w_videoIds, 'taiHuClass/');
// that.videoArrayHW = res.obj.w_videoIds.split(",");
// // if (ret.dataLst && ret.dataLst.length > 0) {
// // dataGrid.innerHTML = dot(ret.dataLst);
// // }
// // if (ret.correlatedList && ret.correlatedList.length > 0) {
// // correlatedListEl.innerHTML = courseDot(ret.correlatedList);
// // }
// }
// that.cateList = res.obj.courseTabs
// that.relatedCoursesList = res.obj.correlatedList
// await that.handleselectCate({ ...this.cateList[0], index: 0 })
// socket.init();
});
},
getPriceData() {
@@ -598,21 +415,7 @@ export default {
checkDisable() {
console.log("点击了");
},
// 显示无权限弹窗
// showNoRights() {
// let that = this
// uni.showModal({
// content: "",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// that.clear()
// }
// }
// })
// },
// 获取用户详情
getUserInfo() {
// 用户详情
@@ -630,9 +433,6 @@ export default {
var data = [];
console.log(item, index, 99999);
var that = this;
// curriculumInfo
this.$http
.post(this.urlList.curriculumInfo, {
customerType: "D",
@@ -647,69 +447,11 @@ export default {
// socket.init();
});
// this.$nextTick(() => {
// switch (item.type) {
// case 1:
// // allDataList
// this.dataList = that.allDataList.result1Lst
// break;
// case 2:
// this.dataList = that.allDataList.result2Lst
// break;
// case 3:
// this.dataList = that.allDataList.result3Lst
// break;
// case 4:
// this.dataList = that.allDataList.result4Lst.filter(e =>
// e.oid != '5fcf991c027b11e7ae62008cfae40c18' && e.oid != 'b3d8a938b8e147bc877613bb712a9cb3' && e.oid != '4d4730163135420ea962bfac4805e026' && e.oid != '49fb76ca3d6b43718d78c6aa9a3003c2' && e.oid != 'c7b047ed9246469b9ae2b1013fc3df9c'
// )
// console.log(this.dataList.length, 6666666)
// break;
// }
// this.currentCateIndex = item.index
// })
console.log(this.allDataList, this.dataList, "1688");
// if(this.userMes.tgdzPower == 0){
// let that = this
// uni.showModal({
// content: "购买 针灸六经法要上册和下册 后方可使用此功能",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// }
// }
// })
// return
// }
// if(item.title == "时辰取穴"){
// uni.navigateTo({
// url: "../timeAcupoint/timeAcupoint"
// })
// return
// }
// this.currentStatusIndex = index
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
// if (index != 2) {
// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
// var height = rect.height
// console.log('元素高度：',);
// }).exec();
// } else {
// this.getJFList(dictType)
// }
return data;
},
@@ -718,51 +460,14 @@ export default {
console.log(index, 99999);
var that = this;
// if(this.userMes.tgdzPower == 0){
// let that = this
// uni.showModal({
// content: "购买 针灸六经法要上册和下册 后方可使用此功能",
// confirmText: '好的',
// showCancel: false,
// success: function(res) {
// if (res.confirm) {
// // console.log('用户点击确定');
// }
// }
// })
// return
// }
// if(item.title == "时辰取穴"){
// uni.navigateTo({
// url: "../timeAcupoint/timeAcupoint"
// })
// return
// }
this.currentStatusIndex = index;
// this.currentCateIndex = 0
this.searchValue = "";
this.searchList = [];
this.showSearchList = false;
this.$nextTick(async () => {
await that.getCourseDescriptionData();
this.$forceUpdate();
});
// this.handleselectCate(this.cateList[this.currentCateIndex])
// if (index != 2) {
// uni.createSelectorQuery().select('.statusList').boundingClientRect(function (rect) {
// var height = rect.height
// console.log('元素高度：',);
// }).exec();
// } else {
// this.getJFList(dictType)
// }
},
transformData(inputData) {
@@ -777,59 +482,11 @@ export default {
// const finalResult = Object.keys(result).map(key => ({ [key]: result[key] }));
return result;
},
// getJFList(id) {
// $http.request({
// url: "book/prescript/prescriptListForJF",
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'categoryId': id
// },
// header: { //默认 无 说明：请求头
// 'Content-Type': 'application/json'
// },
// }).then(res => {
// if (res.code == 0 && res.list.length > 0) {
// this.twoCateList = []
// this.dataList = this.transformData(res.list)
// console.log('JF经方', this.dataList)
// } else {
// this.twoCateList = []
// this.dataList = []
// }
// }).catch(e => {
// this.twoCateList = []
// this.dataList = []
// console.log(e)
// })
// },
getCateList(id) {
id ? "" : (id = 0);
this.twoCateList = [];
this.curTwoCateIndex = 0;
// 0为获取顶级分类，其他为搜索下级分类，目前的逻辑，顶级是写死的，所以可能只会涉及到搜索第二级
// $http.request({
// url: "book/prescript/prescriptCategoryList",
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'categoryId': id
// },
// header: { //默认 无 说明：请求头
// 'Content-Type': 'application/json'
// },
// }).then(res => {
// console.log(res, '脉穴分类获取成功')
// if (res.code == 0 && res.list.length > 0) {
// this.statusList = res.list
// this.getTowCateList(this.statusList[0].type)
// } else {
// this.statusList = []
// }
// }).catch(e => {
// this.statusList = []
// console.log(e)
// })
},
// 放大图片
@@ -845,88 +502,6 @@ export default {
},
});
},
// getSearch() {
// $http.request({
// url: "book/prescript/searchPrescript",
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'keywords': this.searchValue,
// type: this.currentStatusIndex + 1
// },
// header: { //默认 无 说明：请求头
// 'Content-Type': 'application/json'
// },
// }).then(res => {
// console.log(res, '搜索结果')
// if (res.code == 0 && res.list.length >= 0) {
// this.showSearchList = true
// this.searchList = res.list
// } else {
// this.searchList = []
// }
// }).catch(e => {
// // this.dataList = []
// this.searchList = []
// console.log(e)
// })
// },
// search(res) {
// console.log(res, 'res')
// // uni.showToast({
// // title: '搜索：' + res,
// // icon: 'none'
// // })
// if (res == '') {
// this.showSearchList = false
// this.searchList = []
// } else {
// this.getSearch()
// }
// },
// input(res) {
// console.log('----input:', res)
// if (res == '') {
// this.searchList = []
// } else {
// this.getSearch()
// }
// },
// clear(res) {
// console.log('----clear:', res)
// // uni.showToast({
// // title: 'clear事件，清除值为：',
// // icon: 'none'
// // })
// this.searchValue = ''
// this.showSearchList = false
// },
// blur(res) {
// // console.log('----blur:', res)
// // if (res == '') {
// // this.showSearchList = false
// // this.searchList = []
// // } else {
// // this.getSearch()
// // }
// },
// focus(e) {
// console.log('----focus:')
// // uni.showToast({
// // title: 'focus事件，输出值为：' + e.value,
// // icon: 'none'
// // })
// // 等于1 就是有权限
// // this.showSearchList = true
// },
// cancel(res) {
// uni.showToast({
// title: '点击取消，输入值为：' + res.value,
// icon: 'none'
// })
// }
},
onBackPress() {
// #ifdef APP-PLUS