|
|
@@ -2,7 +2,23 @@
|
|
|
<view>
|
|
|
<view class="videoBox" >
|
|
|
<view >
|
|
|
- <image :src="$method.splitImgHost(detail.coverUrl)" style="height: 460rpx;width: 100%;"></image>
|
|
|
+ <view class="video_box" v-if="!startStatus">
|
|
|
+ <image :src="$method.splitImgHost(detail.coverUrl)" style="width: 100%;height: 460rpx;"></image>
|
|
|
+ <image v-if="false" class="video_play" src="/static/play.png" @click="startVideo"></image>
|
|
|
+ </view>
|
|
|
+ <view v-else class="video_box" style="width: 100%;height: 460rpx;">
|
|
|
+ <polyv-player
|
|
|
+ id="playerVideo"
|
|
|
+ playerId="playerVideo"
|
|
|
+ height="460rpx"
|
|
|
+ :vid="vid"
|
|
|
+ :showSettingBtn="true"
|
|
|
+ :enablePlayGesture="true"
|
|
|
+ :playbackRate="playbackRate"
|
|
|
+ :isAllowSeek="isAllowSeek"
|
|
|
+ :autoplay="autoplay"
|
|
|
+ ></polyv-player>
|
|
|
+ </view>
|
|
|
<view style="padding:20rpx;height: 120rpx;">
|
|
|
<view style="display: flex;">
|
|
|
<view class="yearTag">{{detail.year}}</view>
|
|
|
@@ -23,7 +39,7 @@
|
|
|
</view>
|
|
|
<view style="padding: 20rpx;position: relative;top: 680rpx;" v-show="current==0">
|
|
|
<view class="content">
|
|
|
- <view v-html="detail.mobileDetailHtml"></view>
|
|
|
+ <view v-html="detail.mobileDetailHtml" style="width: 100%;"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;top: 680rpx;" v-show="current==1">
|
|
|
@@ -40,8 +56,8 @@
|
|
|
<view v-show="!item.down">
|
|
|
<view v-for="(itemM,indexM) in menuList" >
|
|
|
<courseModule v-if="itemM.type==1" :menuItem="itemM"></courseModule>
|
|
|
- <courseChapter v-if="itemM.type==2" :menuItem="itemM"></courseChapter>
|
|
|
- <courseSection v-if="itemM.type==3" :menuItem="itemM"></courseSection>
|
|
|
+ <courseChapter v-if="itemM.type==2" :isBuy="false" :menuItem="itemM"></courseChapter>
|
|
|
+ <courseSection v-if="itemM.type==3" :isBuy="false" :menuItem="itemM"></courseSection>
|
|
|
<u-line></u-line>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -61,9 +77,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import courseModule from '@/pages2/components/course/courseModule.vue';
|
|
|
-import courseChapter from '@/pages2/components/course/courseChapter.vue';
|
|
|
-import courseSection from '@/pages2/components/course/courseSection.vue';
|
|
|
+import eventHub from '@/common/eventHub.js';
|
|
|
+import courseModule from '@/components/course/courseModule.vue';
|
|
|
+import courseChapter from '@/components/course/courseChapter.vue';
|
|
|
+import courseSection from '@/components/course/courseSection.vue';
|
|
|
import { mapGetters } from 'vuex';
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -85,22 +102,81 @@ export default {
|
|
|
current:0,
|
|
|
detail:{},
|
|
|
courseList:[],
|
|
|
- menuList:[]
|
|
|
+ menuList:[],
|
|
|
+ startStatus:false,
|
|
|
+ playbackRate: [1.0],
|
|
|
+ isAllowSeek:'no',
|
|
|
+ vid:'',
|
|
|
+ autoplay:true,
|
|
|
+ listenConfigList:[],
|
|
|
+ listenSecond:0,
|
|
|
+ timer:null
|
|
|
};
|
|
|
},
|
|
|
onUnload() {
|
|
|
|
|
|
},
|
|
|
- computed: { ...mapGetters(['userInfo','goodsAuditionConfigIdList']) },
|
|
|
+ computed: { ...mapGetters(['userInfo','goodsAuditionConfigIdList','playSectionId']) },
|
|
|
onLoad(option) {
|
|
|
this.id = option.id;
|
|
|
this.getDetail()
|
|
|
this.goodsCourseList()
|
|
|
},
|
|
|
- onShow() {
|
|
|
-
|
|
|
+ mounted() {
|
|
|
+ eventHub.$on('getSection', item => {
|
|
|
+ console.log('播放')
|
|
|
+ //播放试听
|
|
|
+ this.listenSecond = 0
|
|
|
+ for (var itemChild of this.listenConfigList) {
|
|
|
+ if(itemChild.sectionId==this.playSectionId){
|
|
|
+ if(itemChild.auditionMinute>0){
|
|
|
+ this.listenSecond = itemChild.auditionMinute *60 //试听秒数
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.listenSecond>0){
|
|
|
+ if(this.timer){
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ this.timer = setInterval(this.timeEvent, 2000);//定时器
|
|
|
+ this.vid = item.recordingUrl
|
|
|
+ this.startStatus = true
|
|
|
+ }else{
|
|
|
+ console.log(this.listenSecond,333)
|
|
|
+ this.$u.toast('试听配置错误');
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
+ closePlay(){
|
|
|
+ this.vid = ""
|
|
|
+ this.startStatus = false
|
|
|
+ },
|
|
|
+ timeEvent() {
|
|
|
+ let self = this
|
|
|
+ var polyvPlayerContext = this.selectComponent('#playerVideo');
|
|
|
+ if (polyvPlayerContext != null) {
|
|
|
+ let PlayCurrentTime = polyvPlayerContext.getCurrentTime();
|
|
|
+ if(PlayCurrentTime>=this.listenSecond){
|
|
|
+ polyvPlayerContext.stop();
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '试听结束',
|
|
|
+ showCancel:false,
|
|
|
+ success: function(resst) {
|
|
|
+ self.closePlay()
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
openCourse(item){
|
|
|
item.down = !item.down
|
|
|
if(!item.down&&this.menuList.length==0){
|
|
|
@@ -160,10 +236,14 @@ export default {
|
|
|
let sectionIdList = []
|
|
|
this.$api.goodsDetail(this.id).then(res => {
|
|
|
if(res.data.code==200){
|
|
|
+ if(res.data.data.mobileDetailHtml){
|
|
|
+ res.data.data.mobileDetailHtml = res.data.data.mobileDetailHtml.replace(/<img/gi,'<img style="max-width:100%;"')
|
|
|
+ }
|
|
|
+
|
|
|
self.detail = res.data.data
|
|
|
if(self.detail.goodsAuditionConfig){
|
|
|
- let configList = JSON.parse(self.detail.goodsAuditionConfig)
|
|
|
- for (var itemChild of configList) {
|
|
|
+ self.listenConfigList = JSON.parse(self.detail.goodsAuditionConfig)
|
|
|
+ for (var itemChild of self.listenConfigList) {
|
|
|
sectionIdList.push(itemChild.sectionId)//存储试听节ID
|
|
|
}
|
|
|
self.$store.commit('setGoodsAuditionConfigIdList', {goodsAuditionConfigIdList:sectionIdList});
|
|
|
@@ -198,6 +278,43 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style scope>
|
|
|
+ .video_t2 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .video_t1 {
|
|
|
+ height: 80rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .video_t1_t {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 80rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ border-left: solid 1px #d6d6db;
|
|
|
+ }
|
|
|
+ .video_play {
|
|
|
+ position: absolute;
|
|
|
+ width: 95rpx;
|
|
|
+ height: 95rpx;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ .video_box {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
.courseName{
|
|
|
white-space:nowrap;
|
|
|
overflow:hidden;
|
|
|
@@ -235,6 +352,7 @@ export default {
|
|
|
}
|
|
|
.content{
|
|
|
background-color: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
.btn2{
|
|
|
width: 200rpx;
|
he2802