This commit is contained in:
2024-06-24 17:36:32 +08:00
parent 6cc4a65a3a
commit d9991596d7
12 changed files with 6245 additions and 1578 deletions

View File

@@ -10,7 +10,7 @@
<view
v-for="(v, i) in dataList"
:class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
:class="`video_item ${currentVideo&&currentVideo.id == v.id ? 'hot' : ''}`"
@click="handleClick(v,i)"
>
@@ -203,9 +203,9 @@ export default {
margin-right: 10rpx;
margin-bottom: 20rpx;
float: left;
border: 2rpx solid #018f89;
border: 2rpx solid #2979ff;
background: #fff;
color: #018f89;
color: #2979ff;
text-align: center;
border-radius: 10rpx;
box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
@@ -216,7 +216,7 @@ export default {
}
}
.hot {
background-color: #018f89 !important;
background-color: #2979ff !important;
color: #fff !important;
}
</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

486
pages/course/mp3Detail.vue Normal file
View File

@@ -0,0 +1,486 @@
<template>
<view
class="container commonPageBox commonDetailPage"
style="position: relative; height: auto"
>
<!-- <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
@timeupdate="videoTimeUpdateEvent($event)"
ref="videos"
style="width: 100%; height: 60rpx"
autoplay
id="videoId"
controls
:show-progress="true"
:show-fullscreen-btn="false"
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 class="play-rate" @click="videoPlayRate" v-if="showRate">{{ playbackRate }}x</view>
<!-- 倍速菜单 -->
<ul class="play-rate-menu" :style="{ height: height }" v-if="showRateMenu">
<li
v-for="item in playbackRates"
:key="item"
:class="[{ activeRate: playbackRate === item }, 'play-rate-item']"
@click="changePlayRate(item)"
>
{{ item }}x
</li>
</ul>
</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 {
playbackRate: 1, // 初始播放速率
showRateMenu: false, //显示播放速率
speedState: 1,
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
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(["userInfo"]),
},
methods: {
// 显示倍速
videoPlayRate() {
this.showRateMenu = true
},
// 点击倍速
changePlayRate(rate) {
this.playbackRate = rate
this.videoPlayer.playbackRate(rate)
this.showRateMenu = false
this.hideControls()
},
// 创建倍速按钮
createPlayRateDOM() {
const playRateDom = document.createElement('div')
playRateDom.className = 'full-play-rate'
playRateDom.innerText = `${this.playbackRate}x`
playRateDom.onclick = () => {
const playRateMenuDom = document.querySelector('.full-play-rate-menu')
playRateMenuDom.style.display = 'block'
}
return playRateDom
},
// 创建倍速菜单
createPlayRateMenuDom() {
const playRateMenuDom = document.createElement('ul')
playRateMenuDom.className = `play-rate-menu full-play-rate-menu`
playRateMenuDom.style.height = this.windowWidth + 'px'
playRateMenuDom.style.display = 'none'
let liStr = ''
this.playbackRates.forEach((item) => {
liStr += `
<li class="${this.playbackRate === item ? 'activeRate' : ''} play-rate-item full-play-rate-item">
${item}x
</li>
`
})
playRateMenuDom.innerHTML = liStr
return playRateMenuDom
},
handleSetSpeedRate(rate) {
console.log("rate at line 125:", rate);
let videoContext = uni.createVideoContext("videoId");
videoContext.playbackRate(rate);
speedRate.value = rate;
},
init(options) {
this.options = JSON.parse(options.data);
this.getLive();
this.timer = setInterval(() => {
var that = this;
if (this.currentTime) {
that.setVideoTime();
}
}, 60000 * 10);
},
// 播放进度改变
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;
}
.speed {
position: absolute;
right: 20rpx;
top: 16rpx;
.doubleSpeed {
color: #fff;
font-size: 14rpx;
background-color: rgba(0, 0, 0, 0.6);
padding: 4rpx 6rpx;
}
}
// 倍速的蒙版
.speedModal {
background-color: rgba(0, 0, 0, 0.7);
}
.speedNumBox {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #2c2c2c;
width: 120rpx;
position: absolute;
right: 0rpx;
top: 0;
.number {
width: 120rpx;
font-weight: 700;
font-size: 14rpx;
padding: 18rpx 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.active {
color: red;
}
.noActive {
color: #fff;
}
}
</style>

View File

@@ -0,0 +1,254 @@
<template>
<view class="componentPage">
<!-- 公共组件-每个页面必须引入 -->
<richDetail :detailInfo="detailInfo">
<template #richHeadImg>
<image :src="detailInfo.imgUrl" v-if="detailInfo.imgUrl" mode="widthFix" class="headImage"></image>
</template>
</richDetail>
<!-- <view>{{ detailInfo.content }}</view> -->
</view>
</template>
<script>
import courseDescription from "@/pages/component/commonComponents/list";
import richDetail from "@/pages/component/commonComponents/richDetail.vue";
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
props:['type','oid'],
components: {
courseDescription,//课程说明
richDetail,
},
data() {
return {
options:{},
detailInfo:{},
playData: {},
searchValue: '',
twoCateList: [], // 二级分类标题
dataList: [{}, {}], // 方剂标题
currentCateIndex: 0, // 当前选中的一级分类
curTwoCateIndex: 0, // 当前选中的二级分类
searchList: [], // 搜索结果数组
showSearchList: false,
userMes: {}, // 用户信息
searchDisable: false, // 搜索不可用
limitShow: false,
limitTitle: '提示',
limitContent: '',
scrollViewHeight: 0,
}
},
onLoad(options) {
this.options=options
// this.getData()
// this.getUserInfo()
// this.getCateList()
},
onShow() {
// this.getData()
// this.getUserInfo()
// this.getCateList()
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(['userInfo']),
},
methods: {
goCourseDescription(v){
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/courseInformation/courseDescription/detail?title=${v.nameCN}&oid=${v.oid}`
})
},
getData() {
console.log(this.$store.state, '88888')
this.$http
.post('app/phoneDoctor.do?getTHTSDetail', {
customerType
:
"D",
token
:uni.getStorageSync("token")
,
customerOid
:uni.getStorageSync("customerOid"),
// oid: '8a9fb99809e4428888aad6b56a3096a6',
oid: this.oid,
step: 0,
limit: 100
})
.then(res => {
console.log(res.obj.dataLst
, '7777777777777777777')
this.detailInfo = res.obj
// socket.init();
});
},
// 放大图片
previewImage(url) {
console.log(url)
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ['很抱歉,暂不支持保存图片到本地'],
success: function (res) {
// console.log(res,'+++++')
}
}
});
},
// getSearch() {
// $http.request({
// url: "book/prescript/searchPrescript",
// method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'keywords': this.searchValue,
// type: this.currentCateIndex + 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
plus.key.hideSoftKeybord();
// #endif
},
}
</script>
<style lang="scss" scoped>
.commonPageBox{
padding:40rpx 0;
}
.contentBox{
.headImage{
width: 100%;
height: 100%;
margin-bottom: 20rpx;
}
.detail_title{
padding:0 20rpx !important;
}
.rich_box{
padding: 20rpx; box-sizing: border-box;
p{
display: block;text-indent: 2em;
letter-spacing: 2px !important;
line-height: 46rpx;
}
}
}
</style>

View File

@@ -1010,6 +1010,7 @@ uni-page-body {
justify-content: center;
}
.user_vip {
z-index:1;
font-size: 24rpx;
width: auto;
padding: 4rpx 10rpx;