523 lines
14 KiB
Vue
523 lines
14 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<unitv-page
|
||
|
|
id="curriculumDetailsPage"
|
||
|
|
ref="curriculumDetailsPage"
|
||
|
|
class="curriculumDetailsPage"
|
||
|
|
:show="true"
|
||
|
|
>
|
||
|
|
<app-header down="curriculum_details_first_zone" />
|
||
|
|
<view class="curriculumInfo">
|
||
|
|
<view class="info">
|
||
|
|
<view class="curriculumName">
|
||
|
|
{{ curriculumInfo.curriculumName }}
|
||
|
|
</view>
|
||
|
|
<view class="introduction line-3">
|
||
|
|
{{ curriculumInfo.introduction }}
|
||
|
|
</view>
|
||
|
|
<unitv-zone
|
||
|
|
id="curriculum_details_first_zone"
|
||
|
|
class="curriculum_details_first_zone"
|
||
|
|
up="header_zone"
|
||
|
|
down="curriculum_details_second_zone"
|
||
|
|
:values="[0, 1]"
|
||
|
|
:column="2"
|
||
|
|
>
|
||
|
|
<unitv-item :item="0" class="item trySee" @click="fnFullScreen">
|
||
|
|
<view class="icon">
|
||
|
|
<image src="/static/bofang.png" />
|
||
|
|
</view>
|
||
|
|
<view class="text">全屏试看</view>
|
||
|
|
</unitv-item>
|
||
|
|
<unitv-item :item="1" class="item buy" @click="fnBuy">
|
||
|
|
<view class="price">￥{{ curriculumInfo.price }}</view>
|
||
|
|
<view class="text">购买课程</view>
|
||
|
|
</unitv-item>
|
||
|
|
</unitv-zone>
|
||
|
|
</view>
|
||
|
|
<view v-if="!video.url" class="cover">
|
||
|
|
<image :src="curriculumInfo.cover" mode="widthFix" />
|
||
|
|
</view>
|
||
|
|
<view v-if="video.url && !isFullScreen" class="cover">
|
||
|
|
<unitv-video
|
||
|
|
id="player"
|
||
|
|
:src="video.url"
|
||
|
|
:title="video.title"
|
||
|
|
:initial-time="video.time"
|
||
|
|
@timeupdate="fnTimeupdate"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="chapter">
|
||
|
|
<view class="main_title">
|
||
|
|
<text>章节</text>
|
||
|
|
<text class="current">{{ currentChapterInfo.name }}</text>
|
||
|
|
</view>
|
||
|
|
<unitv-zone
|
||
|
|
id="curriculum_details_second_zone"
|
||
|
|
:key="currentChapterIndex"
|
||
|
|
class="curriculum_details_second_zone"
|
||
|
|
up="curriculum_details_first_zone"
|
||
|
|
down="curriculum_details_third_zone"
|
||
|
|
:values="currentChapterInfo.nodes"
|
||
|
|
:column="currentChapterInfo.nodes.length"
|
||
|
|
>
|
||
|
|
<unitv-scroll>
|
||
|
|
<view class="scroll">
|
||
|
|
<unitv-item
|
||
|
|
v-for="(item, index) in currentChapterInfo.nodes"
|
||
|
|
:key="index"
|
||
|
|
:item="index"
|
||
|
|
class="item"
|
||
|
|
@click="fnPlayVideo(item)"
|
||
|
|
>
|
||
|
|
<view class="text">{{ item.coursewareName }}</view>
|
||
|
|
</unitv-item>
|
||
|
|
</view>
|
||
|
|
</unitv-scroll>
|
||
|
|
</unitv-zone>
|
||
|
|
<unitv-zone
|
||
|
|
id="curriculum_details_third_zone"
|
||
|
|
class="curriculum_details_third_zone"
|
||
|
|
up="curriculum_details_second_zone"
|
||
|
|
down="curriculum_details_fourth_zone"
|
||
|
|
:values="chapterList"
|
||
|
|
:column="chapterList.length"
|
||
|
|
auto-fous
|
||
|
|
:item="0"
|
||
|
|
>
|
||
|
|
<unitv-scroll>
|
||
|
|
<view class="scroll">
|
||
|
|
<unitv-item
|
||
|
|
v-for="(item, index) in chapterList"
|
||
|
|
:key="index"
|
||
|
|
:item="index"
|
||
|
|
class="item"
|
||
|
|
@click="fnClickChapterItem"
|
||
|
|
>
|
||
|
|
<view class="text">{{ item.name }}</view>
|
||
|
|
<view
|
||
|
|
v-if="index !== chapterList.length - 1"
|
||
|
|
class="border_right"
|
||
|
|
/>
|
||
|
|
<view class="border_bottom" />
|
||
|
|
</unitv-item>
|
||
|
|
</view>
|
||
|
|
</unitv-scroll>
|
||
|
|
</unitv-zone>
|
||
|
|
</view>
|
||
|
|
<view class="recommend_curriculum">
|
||
|
|
<view class="main_title">为你推荐</view>
|
||
|
|
<unitv-zone
|
||
|
|
id="curriculum_details_fourth_zone"
|
||
|
|
class="curriculum_details_fourth_zone"
|
||
|
|
up="curriculum_details_third_zone"
|
||
|
|
:values="recommendCurriculumList"
|
||
|
|
:column="recommendCurriculumList.length"
|
||
|
|
>
|
||
|
|
<unitv-scroll>
|
||
|
|
<view class="scroll">
|
||
|
|
<unitv-item
|
||
|
|
v-for="(item, index) in recommendCurriculumList"
|
||
|
|
:key="index"
|
||
|
|
:item="index"
|
||
|
|
class="item"
|
||
|
|
@click="fnSwitchCurriculum"
|
||
|
|
>
|
||
|
|
<image :src="item.img" mode="widthFix" />
|
||
|
|
<view class="title line-1">{{ item.title }}</view>
|
||
|
|
</unitv-item>
|
||
|
|
</view>
|
||
|
|
</unitv-scroll>
|
||
|
|
</unitv-zone>
|
||
|
|
</view>
|
||
|
|
</unitv-page>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import chapterList from "./chapterList";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
curriculumInfo: {
|
||
|
|
curriculumName: "气体基础知识",
|
||
|
|
introduction:
|
||
|
|
"气体是指无形状有体积的可压缩和膨胀的流体。气体是物质的一个态，气体与液体一样是流体：它可以流动，可变形。与液体不同的是气体气体分子间距离很大，可以被压缩膨胀。假如没有限制（容器或力场）的话，气体可以膨胀，其体积不受限制。气态物质的原子或分子相互之间可以自由运动。气态物质的原子或分子的动能比较高。 气体形态可通过其体积、温度和其压强所影响。这几项要素构成了多项气体定律，而三者之间又可以互相影响。",
|
||
|
|
cover: require("../../static/public_images/video_bg1.jpg"),
|
||
|
|
price: "123",
|
||
|
|
},
|
||
|
|
video: {
|
||
|
|
url: "",
|
||
|
|
title: "",
|
||
|
|
time: 0,
|
||
|
|
},
|
||
|
|
chapterList,
|
||
|
|
currentChapterIndex: 0,
|
||
|
|
currentChapterInfo: {},
|
||
|
|
recommendCurriculumList: [],
|
||
|
|
videoContext: null,
|
||
|
|
isFullScreen: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
if (this.$refs.curriculumDetailsPage) {
|
||
|
|
this.$refs.curriculumDetailsPage.showPage();
|
||
|
|
if (this.videoContext) {
|
||
|
|
this.videoContext.play();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onHide() {
|
||
|
|
this.videoContext && this.videoContext.pause();
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.fnInitCurrentChapter();
|
||
|
|
this.fnGetRecommendCurriculum();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fnInitCurrentChapter() {
|
||
|
|
this.currentChapterInfo = this.chapterList[this.currentChapterIndex];
|
||
|
|
},
|
||
|
|
fnClickChapterItem(event) {
|
||
|
|
this.currentChapterIndex = event;
|
||
|
|
this.fnInitCurrentChapter();
|
||
|
|
},
|
||
|
|
async fnGetRecommendCurriculum() {
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg1.jpg`),
|
||
|
|
title: "气体基础知识",
|
||
|
|
});
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg2.jpg`),
|
||
|
|
title: "现场一线员工全面安全培训",
|
||
|
|
});
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg3.jpg`),
|
||
|
|
title: "出差人员基础安全知识与应急处置",
|
||
|
|
});
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg4.jpg`),
|
||
|
|
title: "现场安全负责人全面安全培训",
|
||
|
|
});
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg5.jpg`),
|
||
|
|
title: "《四川省安全生产条例》特色解读",
|
||
|
|
});
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg6.jpg`),
|
||
|
|
title: "企业贯彻落实《四川省安全生产条例》精要",
|
||
|
|
});
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg7.jpg`),
|
||
|
|
title: "《四川省安全生产举报奖励办法》解读",
|
||
|
|
});
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg8.jpg`),
|
||
|
|
title: "应急管理部关于进一步加强安全生产举报工作的指导意见",
|
||
|
|
});
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg9.jpg`),
|
||
|
|
title: "危险货物运输包装-气瓶",
|
||
|
|
});
|
||
|
|
this.recommendCurriculumList.push({
|
||
|
|
img: require(`../../static/public_images/video_bg10.jpg`),
|
||
|
|
title: "职业病危害专项治理",
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async fnPlayVideo(item) {
|
||
|
|
this.video.url = "";
|
||
|
|
await this.$nextTick();
|
||
|
|
this.video.url = item.url;
|
||
|
|
this.video.title = item.coursewareName;
|
||
|
|
this.video.time = 0;
|
||
|
|
await this.$nextTick();
|
||
|
|
!this.videoContext &&
|
||
|
|
(this.videoContext = uni.createVideoContext("player"));
|
||
|
|
},
|
||
|
|
fnTimeupdate(time) {
|
||
|
|
this.video.time = time;
|
||
|
|
},
|
||
|
|
fnFullScreen() {
|
||
|
|
this.isFullScreen = true;
|
||
|
|
this.videoContext = null;
|
||
|
|
const { url, time, title } = this.video;
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/curriculum/play?url=${url}&title=${title}&time=${time}`,
|
||
|
|
animationType: "none",
|
||
|
|
events: {
|
||
|
|
timeupdate: async ({ time }) => {
|
||
|
|
this.isFullScreen = false;
|
||
|
|
this.video.time = time;
|
||
|
|
await this.$nextTick();
|
||
|
|
!this.videoContext &&
|
||
|
|
(this.videoContext = uni.createVideoContext("player"));
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
fnBuy() {
|
||
|
|
uni.navigateTo({ url: "/pages/curriculum/buy" });
|
||
|
|
},
|
||
|
|
fnSwitchCurriculum() {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: "/pages/curriculum/details",
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.container {
|
||
|
|
.curriculumInfo {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.info {
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
.curriculumName {
|
||
|
|
font-size: 18rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.introduction {
|
||
|
|
font-size: 12rpx;
|
||
|
|
padding-top: 5rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.curriculum_details_first_zone {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.trySee {
|
||
|
|
width: 53rpx;
|
||
|
|
height: 53rpx;
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
border-radius: 1rpx;
|
||
|
|
border: 1px solid rgba(207, 207, 247, 0.1);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
margin-bottom: 5rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 15rpx;
|
||
|
|
height: 18rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
font-size: 9rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.hover {
|
||
|
|
border: 1rpx solid rgba(0, 180, 255, 0.79);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.buy {
|
||
|
|
margin-left: 14rpx;
|
||
|
|
width: 53rpx;
|
||
|
|
height: 53rpx;
|
||
|
|
background-image: url("/static/buy_bg.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
border-radius: 1rpx;
|
||
|
|
text-align: center;
|
||
|
|
padding: 8rpx;
|
||
|
|
border: 1rpx solid transparent;
|
||
|
|
|
||
|
|
.price {
|
||
|
|
color: rgba(115, 62, 2, 1);
|
||
|
|
font-size: 14rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
margin-top: 8rpx;
|
||
|
|
font-size: 9rpx;
|
||
|
|
color: rgba(85, 45, 0, 1);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.hover {
|
||
|
|
border: 1rpx solid rgba(0, 180, 255, 0.79);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.cover {
|
||
|
|
margin-left: 13rpx;
|
||
|
|
width: 343rpx;
|
||
|
|
height: 150rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100% !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.chapter {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
|
||
|
|
.main_title {
|
||
|
|
font-size: 14rpx;
|
||
|
|
|
||
|
|
.current {
|
||
|
|
margin-left: 9rpx;
|
||
|
|
font-size: 9rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.curriculum_details_second_zone {
|
||
|
|
margin-top: 5rpx;
|
||
|
|
|
||
|
|
.scroll {
|
||
|
|
display: flex;
|
||
|
|
white-space: nowrap;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
margin-left: 10rpx;
|
||
|
|
padding: 5rpx 10rpx;
|
||
|
|
background-color: rgba(255, 255, 255, 0.2);
|
||
|
|
border-radius: 1rpx;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
font-size: 9rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.hover {
|
||
|
|
background-color: #254eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
background-color: rgba(37, 78, 255, 0.39);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.curriculum_details_third_zone {
|
||
|
|
margin-top: 5rpx;
|
||
|
|
|
||
|
|
.scroll {
|
||
|
|
display: flex;
|
||
|
|
white-space: nowrap;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.border_right {
|
||
|
|
width: 1rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
height: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.border_bottom {
|
||
|
|
width: 60%;
|
||
|
|
background-color: transparent;
|
||
|
|
height: 1rpx;
|
||
|
|
position: absolute;
|
||
|
|
left: 20%;
|
||
|
|
right: 20%;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
.text {
|
||
|
|
padding-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.border_bottom {
|
||
|
|
left: calc(20% - 5rpx);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
font-size: 9rpx;
|
||
|
|
border-bottom: 1rpx solid transparent;
|
||
|
|
padding: 5rpx 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.hover {
|
||
|
|
.border_bottom {
|
||
|
|
background-color: #254eff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
.border_bottom {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.recommend_curriculum {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
|
||
|
|
.main_title {
|
||
|
|
font-size: 14rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.curriculum_details_fourth_zone {
|
||
|
|
margin-top: 5rpx;
|
||
|
|
|
||
|
|
.scroll {
|
||
|
|
white-space: nowrap;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
display: inline-block;
|
||
|
|
width: calc(18% - 20rpx);
|
||
|
|
height: 100rpx;
|
||
|
|
position: relative;
|
||
|
|
border: 2px solid transparent;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
font-size: 0;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100% !important;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: 80%;
|
||
|
|
font-size: 9rpx;
|
||
|
|
color: #fff;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 9rpx;
|
||
|
|
left: 7rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.hover {
|
||
|
|
border: 2rpx solid rgba(0, 180, 255, 0.79);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|