修改视频
parent
19718e29b4
commit
1c6e8206ad
|
|
@ -2,9 +2,13 @@
|
|||
<view class="banner-box">
|
||||
<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight}" :autoplay="ifAutoplay" :circular="true" :interval="3000" :duration="500">
|
||||
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||
<view @tap="chooseImg(index,item.url)" class="img-box">
|
||||
<image :style="{borderRadius:newRadius,height:newHeight}" class="img animated fadeIn" :src="item.imgSrc" mode="aspectFill"></image>
|
||||
<image @tap.stop="playVideo(index)" v-if="item.isVideo && isVideo" class="posia animated bounceIn" style="width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
|
||||
<view @tap="chooseImg(index,item.url,item.type)" class="img-box">
|
||||
<!-- 图片 -->
|
||||
<image :style="{borderRadius:newRadius,height:newHeight}" class="img animated fadeIn" :src="item.imgSrc" mode="aspectFill" v-if="item.type === 'img'"></image>
|
||||
<!-- 视频 -->
|
||||
<video :id="`video${index}`" style="width: 100%;" v-if="item.type === 'video'"
|
||||
:videoAutoplay="videoAutoPlay" :enable-progress-gesture="false" :src="item.imgSrc"
|
||||
@play="handleVideoPlay" @pause="handleVideoPause" @ended="handleVideoEnd" class="banner-video"></video>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
|
@ -30,9 +34,9 @@
|
|||
type:Array,
|
||||
default:function(){
|
||||
return [
|
||||
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
||||
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:'',type:'image'},
|
||||
{imgSrc:'https://www.runoob.com/try/demo_source/movie.mp4',url:'',isVideo:false,poster:'',type:'video'},
|
||||
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:'',type:'image'},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
@ -51,15 +55,25 @@
|
|||
browseP:{//是否可预览
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
ifAutoplays: { //banner是否自动轮播
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
videoAutoPlays: { //视频是否自动播放
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
ifAutoplay: state => state.moduleA.ifAutoplay
|
||||
})
|
||||
// ...mapState({
|
||||
// ifAutoplay: state => state.moduleA.ifAutoplay
|
||||
// })
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoAutoPlay: this.videoAutoPlays,
|
||||
ifAutoplay: this.ifAutoplays,
|
||||
bcurrent: 0, // 默认当前选中项
|
||||
isShowVideo:false, // 是否显示视频
|
||||
isVideo:uni.getStorageSync('is_video') // 是否是视频
|
||||
|
|
@ -67,7 +81,7 @@
|
|||
},
|
||||
methods:{
|
||||
// 图片点击事件
|
||||
chooseImg(index,url){
|
||||
chooseImg(index,url,type){
|
||||
// console.log('当前banner图',index);
|
||||
this.bcurrent = index
|
||||
if(this.browseP){
|
||||
|
|
@ -97,7 +111,9 @@
|
|||
current:this.bcurrent,
|
||||
sources:imgList
|
||||
})
|
||||
} else {
|
||||
} else if(type == 'video') {
|
||||
return false
|
||||
}else {
|
||||
// 有链接，跳转链接
|
||||
uni.navigateTo({
|
||||
url:`/${url}`
|
||||
|
|
@ -106,8 +122,20 @@
|
|||
},
|
||||
// 切换后获取当前索引
|
||||
changeBanner(e){
|
||||
this.bcurrent = e.detail.current//当前的指示点下标
|
||||
// console.log(this.bcurrent);
|
||||
this.bcurrent = e.detail.current;//当前的指示点下标
|
||||
let videoIndex = e.detail.current;
|
||||
//切换时要把视频暂停
|
||||
uni.createVideoContext("video" + (videoIndex),this).pause()
|
||||
},
|
||||
handleVideoPlay() {
|
||||
this.ifAutoplay = false
|
||||
this.videoAutoPlay = true;
|
||||
},
|
||||
handleVideoPause() {
|
||||
this.ifAutoplay = true
|
||||
},
|
||||
handleVideoEnd() {
|
||||
this.ifAutoplay = true;
|
||||
},
|
||||
// 点击当前指示点
|
||||
chooseDot(index){
|
||||
|
|
@ -118,16 +146,22 @@
|
|||
uni.navigateTo({
|
||||
url:`/pagesB/video/playVideo?src=${this.bannerList[index].url}&posterSrc=${this.bannerList[index].poster}`
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.banner-box{position: relative;}
|
||||
.img-box{position: relative;display: flex;justify-content: center;align-items: center;}
|
||||
.img-box{position: relative;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}
|
||||
.img{width:100%;vertical-align: bottom;}
|
||||
.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
|
||||
.dotActive{width: 16rpx;height: 16rpx;margin-right: 16rpx;border-radius: 100%; background-color: rgba(255, 255, 255, 1);}
|
||||
.dotMo{width: 16rpx;height: 16rpx;margin-right: 16rpx;border-radius: 100%;background-color: rgba(0, 0, 0, 0.5);}
|
||||
.banner-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
38
pages.json
38
pages.json
|
|
@ -119,6 +119,24 @@
|
|||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "my-share/my-share",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "my-watch/my-watch",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -214,6 +232,26 @@
|
|||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "course-list/course-list",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
,{
|
||||
"path" : "course-video/course-video",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,9 @@
|
|||
{src:'/static/tabbar/icon-coupon.png',title:'我的优惠券'},
|
||||
{src:'/static/tabbar/icon-score.png',title:'我的积分'},
|
||||
{src:'/static/tabbar/icon-address.png',title:'我的地址'},
|
||||
{src:'/static/tabbar/icon-znz.png',title:'观看记录'},
|
||||
{src:'/static/tabbar/icon-znz.png',title:'我的推广'},
|
||||
{src:'/static/tabbar/icon-znz.png',title:'我的分享'},
|
||||
], // 导航列表
|
||||
userInfo:{}, //用户信息
|
||||
}
|
||||
|
|
@ -100,10 +102,12 @@
|
|||
'/pagesA/my-coupon/my-coupon',
|
||||
'/pagesA/my-integral/my-integral',
|
||||
'/pagesA/my-address/my-address',
|
||||
'/pagesA/my-watch/my-watch',
|
||||
'',
|
||||
'',
|
||||
]
|
||||
if(index==7){
|
||||
list[7] = ['/pagesA/my-extend/my-extend','/pagesB/second-level/second-level?level=1','/pagesB/second-level/second-level?level=2' ][this.userInfo.position]
|
||||
if(index==8){
|
||||
list[8] = ['/pagesA/my-extend/my-extend','/pagesB/second-level/second-level?level=1','/pagesB/second-level/second-level?level=2' ][this.userInfo.position]
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:list[index]
|
||||
|
|
|
|||
|
|
@ -80,7 +80,9 @@
|
|||
data() {
|
||||
return {
|
||||
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
|
||||
bannerList:[],//轮播图
|
||||
bannerList:[
|
||||
|
||||
],//轮播图
|
||||
current:0,
|
||||
dataList:[],//分类列表
|
||||
classId:'',//分类id
|
||||
|
|
@ -136,6 +138,7 @@
|
|||
if(res.data.length){
|
||||
res.data.forEach(item=>{
|
||||
let obj = {
|
||||
type:item.type,
|
||||
imgSrc:item.src,
|
||||
url:item.url,
|
||||
isVideo:false,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</view>
|
||||
<view class="disjbac width100">
|
||||
<view class="fon24">￥{{item.price}}</view>
|
||||
<view @tap="$toolAll.tools.goPage(`/pagesB/course-detail/course-detail?id=${item.spu_id}`)" class="disjcac fon22 radius26" style="width: 144rpx;height: 52rpx;color: #f37717;border: 2rpx solid #f37717;">点击学习</view>
|
||||
<view @tap="$toolAll.tools.goPage(`/pagesB/course-list/course-list?id=${item.spu_id}`)" class="disjcac fon22 radius26" style="width: 144rpx;height: 52rpx;color: #f37717;border: 2rpx solid #f37717;">点击学习</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="我的推广" returnc="#FFFFFF">
|
||||
|
||||
<!-- 我的推广 -->
|
||||
<view slot="content" style="margin-top: -20rpx;" v-if="loading">
|
||||
|
||||
<!-- <view class="extend-list">
|
||||
<view class="text curr">我的推广</view>
|
||||
<view class="text" @tap="share()">我的分享</view>
|
||||
</view> -->
|
||||
|
||||
|
||||
<view class="bacf pad-zy20 boxshow2 posi-sticky" :style="{top:newtop+'px'}">
|
||||
<view class="disjcac pad-sx30 bbot">
|
||||
<view v-if="personCode" class="">
|
||||
|
|
@ -122,11 +131,36 @@
|
|||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
share() {
|
||||
uni.navigateTo({
|
||||
url:`/pagesA/my-share/my-share`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.extend-list {
|
||||
margin: 30rpx 0;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.extend-list .text {
|
||||
line-height: 70rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin: 0 40rpx;
|
||||
text-align: center;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
.extend-list .text.curr {
|
||||
font-weight: bold;
|
||||
border-bottom: 3px solid #e42417;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="我的分享" returnc="#FFFFFF"></status-container>
|
||||
<!-- 分享图 -->
|
||||
<image :src="shareImg" mode="widthFix" lazy-load></image>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-btn">
|
||||
<view @tap="downloadImgEv">下载图片</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
import yzQr from '@/components/yz-qr/yz-qr.vue';
|
||||
import {base64ToPath} from '@/jsFile/base64-src.js';
|
||||
export default {
|
||||
components:{
|
||||
pitera,
|
||||
yzQr
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shareImg:'',
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.showToast({
|
||||
title:'正在生成推广码',
|
||||
icon:'loading',
|
||||
duration:10000
|
||||
})
|
||||
// 生成推广码
|
||||
createPoster({introducer:wx.getStorageSync('introducer')}).then(res=>{
|
||||
this.shareImg = res.data.path;
|
||||
uni.hideLoading();
|
||||
}).catch(err=>{
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title:'生成失败',
|
||||
icon:'none',
|
||||
position:'bottom'
|
||||
})
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack({delta:1})
|
||||
},1000)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 下载图片
|
||||
downloadImgEv(){
|
||||
uni.downloadFile({
|
||||
url: this.shareImg,
|
||||
success: (res) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: ()=> {
|
||||
console.log('save success');
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({title:'保存失败',icon:'error'})
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
box-shadow: 0rpx -3rpx 20rpx rgba(0,0,0,.05);
|
||||
}
|
||||
.bottom-btn view {
|
||||
background-color: #eb5d10;
|
||||
color: #FFFFFF;
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 80rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="观影记录" returnc="#FFFFFF">
|
||||
<view slot="content" style="margin-top: -20rpx;">
|
||||
<view class="pad-zy30 bacf pad-x30" v-if="total">
|
||||
<view class="pad-sx30 disac fon24 bbot" v-for="(item,index) in dataList" :key="index">
|
||||
<image class="flexs" :src="item.cover" mode="aspectFill" style="width: 228rpx;height: 160rpx;"></image>
|
||||
<view class="disjbac fc width100 mar-z20" style="height: 160rpx;">
|
||||
<view class="fon26 col26 width100">
|
||||
<view class="clips2">{{item.name}}</view>
|
||||
<view class="fon20 mar-s10" style="color: #7f7f7f;">{{item.created_at}}</view>
|
||||
</view>
|
||||
<view class="disjbac width100">
|
||||
<view class="fon24">￥{{item.price}}</view>
|
||||
<view @tap="$toolAll.tools.goPage(`/pagesB/course-detail/course-detail?id=${item.spu_id}`)" class="disjcac fon22 radius26" style="width: 144rpx;height: 52rpx;color: #f37717;border: 2rpx solid #f37717;">点击学习</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="loading">
|
||||
<pitera :textStr="`${noMore && total > dataList.length?'上滑加载更多':'到底了'}~~`" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{
|
||||
swiperTab,
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList:[],
|
||||
page:1,
|
||||
size:20,
|
||||
total:0,
|
||||
noMore:false,
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 获取课程列表
|
||||
this.getCouresList();
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.total!=this.dataList.length){
|
||||
this.page++;
|
||||
this.getCouresList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取课程列表
|
||||
getCouresList(){
|
||||
this.loading = false;
|
||||
let params = {
|
||||
page:this.page,
|
||||
size:this.size
|
||||
}
|
||||
this.$requst.get('/api/course/course-browse-records',params).then(res=>{
|
||||
this.total = res.data.total;
|
||||
if(this.page==1){this.dataList=[];}
|
||||
this.dataList = [...this.dataList,...res.data.list];
|
||||
if(this.total==this.dataList.length && this.page!=1){
|
||||
this.noMore = true;
|
||||
}
|
||||
this.loading = true;
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.used-item{
|
||||
border-top: 2rpx solid ;
|
||||
}
|
||||
.noshow{
|
||||
transform: rotate(-90deg);
|
||||
transition: all .3s linear;
|
||||
}
|
||||
.isshow{
|
||||
transform: rotate(90deg);
|
||||
transition: all .3s linear;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="课程列表" returnc="#FFFFFF">
|
||||
<view slot="content" style="margin-top: -20rpx;">
|
||||
<view class="pad-zy30 bacf pad-x30" v-if="total">
|
||||
<view class="pad-sx30 disac fon24 bbot" v-for="(item,index) in dataList" :key="index">
|
||||
<image class="flexs" :src="hostapi + item.cover" mode="aspectFill" style="width: 228rpx;height: 160rpx;"></image>
|
||||
<view class="disjbac fc width100 mar-z20" style="height: 160rpx;">
|
||||
<view class="fon26 col26 width100">
|
||||
<view class="clips2">{{item.title}}</view>
|
||||
<view class="fon20 mar-s10" style="color: #7f7f7f;">{{item.summary}}</view>
|
||||
</view>
|
||||
<view class="disjbac width100" style="justify-content: flex-end;">
|
||||
<view @tap="getVideoInfo(item.id)" class="disjcac fon22 radius26" style="width: 144rpx;height: 52rpx;color: #f37717;border: 2rpx solid #f37717;">点击查看</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="loading">
|
||||
<pitera :textStr="`${noMore && total > dataList.length?'上滑加载更多':'到底了'}~~`" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||
</view>
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{
|
||||
swiperTab,
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList:[],
|
||||
course_id:'',
|
||||
hostapi:'',
|
||||
page:1,
|
||||
size:20,
|
||||
total:0,
|
||||
noMore:false,
|
||||
loading:false
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.course_id = e.id;
|
||||
this.hostapi = getApp().globalData.hostapi;
|
||||
// 获取课程列表
|
||||
this.getCouresList();
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.total!=this.dataList.length){
|
||||
this.page++;
|
||||
this.getCouresList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取课程列表
|
||||
getCouresList(){
|
||||
this.loading = false;
|
||||
let params = {
|
||||
page:this.page,
|
||||
size:this.size,
|
||||
course_id:this.course_id,
|
||||
}
|
||||
this.$requst.get('/api/course/get-course-video',params).then(res=>{
|
||||
this.total = res.data.list;
|
||||
if(this.page==1){this.dataList=[];}
|
||||
this.dataList = [...this.dataList,...res.data.list];
|
||||
if(this.total==this.dataList.length && this.page!=1){
|
||||
this.noMore = true;
|
||||
}
|
||||
this.loading = true;
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
getVideoInfo(id) {
|
||||
this.$requst.get('/api/course/get-course-video-info',{course_video_id:id}).then(res=>{
|
||||
console.log(res.code,'课程视频')
|
||||
if(res.code == 0) {
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/course-video/course-video?id=${id}`
|
||||
})
|
||||
}else {
|
||||
uni.showToast({
|
||||
title: res.msg,//标题 必填
|
||||
icon: 'error',//图标
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.used-item{
|
||||
border-top: 2rpx solid ;
|
||||
}
|
||||
.noshow{
|
||||
transform: rotate(-90deg);
|
||||
transition: all .3s linear;
|
||||
}
|
||||
.isshow{
|
||||
transform: rotate(90deg);
|
||||
transition: all .3s linear;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<view>
|
||||
<status-container titlet="课程详情" returnc="#FFFFFF">
|
||||
<view v-if="isLoading" slot="content" style="margin-top: -20rpx;">
|
||||
<view class="bacf">
|
||||
<view class="fon32 tcenter pad-s50">{{couresDetail.title}}</view>
|
||||
<view class="pad30 posir disjcac">
|
||||
<image :src="hostapi + couresDetail.cover" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||
<image v-if="couresDetail.video.includes('.mp4')" @tap="playVideo" class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
||||
</view>
|
||||
<view class="mar-zy30 bbot pad-x10">
|
||||
<span class="fon28 bold posir pad-x10">
|
||||
<text>课程介绍</text>
|
||||
<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
|
||||
</span>
|
||||
</view>
|
||||
<view class="mar-zy30 pad-sx20 bbot">
|
||||
<view class="disjbac ae pad-x20" style="color: #262626;display: block;">
|
||||
<view class="fon24">介绍：{{couresDetail.summary}}</view>
|
||||
<view class="fon20 pad-s20">{{couresDetail.create_time.slice(0,10).split('-').join('.')}}</view>
|
||||
</view>
|
||||
<view class="rich-text fon24" style="line-height: 1.8;">
|
||||
<rich-text :nodes="couresDetail.content" style="color: #5a5a5a;"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="pad-zy20">
|
||||
<view class="disjb ae mar-s40">
|
||||
<view class="fon32 bold colb">推荐课程</view>
|
||||
<view class="fon20" style="color: #bbb4b3;" @tap="$toolAll.tools.goPage('/pages/tabbar/course/course')">更多+</view>
|
||||
</view>
|
||||
<list ref="refcourse" @goDetail="goDetail"></list>
|
||||
</view> -->
|
||||
<!-- 登录弹框 start -->
|
||||
<view class="posAll disjc" v-if="ifLogin">
|
||||
<view class="bacf radius10 posir disjcac fc pad-zy60" style="height: 256rpx;margin-top: 304rpx;">
|
||||
<image src="/static/tabbar/icon-password.png" mode="" lazy-load style="width: 86rpx;height: 102rpx;"></image>
|
||||
<view class="fon28 mar-s20">请登录后查看课程，<span style="color:#e42417;" @tap="goLogin">去登陆</span></view>
|
||||
<view class="posia-sy20" @tap="ifLogin=false"><i class="icon icon-del-white fon24" style="color: #9d9d9d;"></i></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 登录弹框 end -->
|
||||
</view>
|
||||
</status-container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 底部组件
|
||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||
import list from '@/components/list.vue';
|
||||
export default {
|
||||
components:{'foot-tab' :footTab,list},
|
||||
data() {
|
||||
return {
|
||||
richText:'', //
|
||||
ifLogin:false, //是否登录
|
||||
isLoading:false, //加载完成
|
||||
couresRecommend:[], //课程推荐
|
||||
couresDetail:'',//课程详情
|
||||
classId:'', //分类id
|
||||
course_video_id:'', //课程id
|
||||
page:1, //页数
|
||||
size:1000, //条数
|
||||
duration:0,//观看时长
|
||||
hostapi:'',// 域名
|
||||
}
|
||||
},
|
||||
onLoad(op) {
|
||||
if(op.id){
|
||||
if(op.invite_code) {
|
||||
// 设置为第一次进入
|
||||
this.$store.commit('setFristIn',true);
|
||||
uni.setStorageSync('invite_code',op.invite_code);
|
||||
} else {
|
||||
this.$store.commit('setFristIn',false);
|
||||
}
|
||||
this.hostapi = getApp().globalData.hostapi;
|
||||
this.course_video_id = op.id;
|
||||
// 获取课程详情
|
||||
this.getCouresDetail(this.course_video_id);
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
var shareObj = {
|
||||
title: ``, // 默认是小程序的名称(可以写slogan等)
|
||||
path: `/pagesB/course-detail/course-detail?id=${this.id}&category_id=${this.classId}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||||
imageUrl: ``//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||||
};
|
||||
return shareObj;
|
||||
},
|
||||
onShow() {
|
||||
uni.removeStorageSync('courseInfo');
|
||||
uni.removeStorageSync('skuList');
|
||||
},
|
||||
methods: {
|
||||
// 获取课程详情
|
||||
getCouresDetail(course_video_id){
|
||||
uni.showLoading({
|
||||
title:'加载中'
|
||||
});
|
||||
this.$requst.get('/api/course/get-course-video-info',{course_video_id:course_video_id}).then(res=>{
|
||||
console.log(res,'课程视频')
|
||||
if(res.code == 0) {
|
||||
this.couresDetail = res.data;
|
||||
}
|
||||
uni.hideLoading();
|
||||
this.isLoading = true;
|
||||
})
|
||||
},
|
||||
|
||||
// 获取课程推荐
|
||||
getCouresRecommend(){
|
||||
let params = {
|
||||
page:this.page,
|
||||
size:this.size,
|
||||
category_id:this.classId,
|
||||
id:this.id
|
||||
}
|
||||
this.$requst.get('/api/spu/course-recommend',params).then(res=>{
|
||||
if(res.code==0) {
|
||||
this.$refs.refcourse.list = res.data.list;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 去课程详情
|
||||
goDetail(id){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/course-detail/course-detail?id=${id}&category_id=${this.classId}`
|
||||
})
|
||||
},
|
||||
// 播放视频
|
||||
playVideo(){
|
||||
if(this.couresDetail.type=="video_number"){
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.openChannelsActivity({
|
||||
finderUserName:this.couresDetail.video_number,
|
||||
feedId:this.couresDetail.video_id,
|
||||
success:(res)=>{},fail:()=>{
|
||||
// this.$toolAll.tools.showToast('视频已丢失或已删除')
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
} else {
|
||||
if(uni.getStorageSync('is_active')){
|
||||
let newArr = [];
|
||||
let videoSrc = this.hostapi + this.couresDetail.video;
|
||||
newArr.push({
|
||||
src:videoSrc,
|
||||
course_video_id:this.course_video_id,
|
||||
})
|
||||
uni.setStorageSync('videoList',newArr);
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/play-video/play-video?current=${0}`
|
||||
})
|
||||
} else {
|
||||
this.ifLogin = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 去登录
|
||||
goLogin(){
|
||||
uni.navigateTo({
|
||||
url:`/pages/login/login`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<video :id="`video${index}`" :ref="`refvideo_${index}`" style="width: 100%;" :style="{height:newHeight+'px'}" :autoplay="item.autoplay"
|
||||
:src="item.src" :enable-play-gesture="dans"
|
||||
:controls="item.isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
|
||||
@play="comePlay(index)" @pause="comePause(index)"></video>
|
||||
@play="comePlay(index)" @pause="comePause(index)" @timeupdate='timeupdate'></video>
|
||||
<!-- 封面图 -->
|
||||
<image v-if="item.isPlayImg" @tap.stop="playEv(index)" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%;
|
||||
width: 126rpx;height: 126rpx;transform: translate(-50%, -50%);" mode="aspectFill"></image>
|
||||
|
|
@ -33,7 +33,8 @@
|
|||
isCenterImg:false,//是否显示视频中间的播放按钮
|
||||
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
|
||||
isFull:true,//是否显示全屏按钮
|
||||
count:0
|
||||
count:0,
|
||||
currentTime:'' //记录观看时长
|
||||
}
|
||||
},
|
||||
onReady: (res)=> {
|
||||
|
|
@ -56,6 +57,21 @@
|
|||
},
|
||||
onHide() {
|
||||
uni.removeStorageSync('videoList');
|
||||
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
console.log('页面销毁了')
|
||||
let course_video_id = this.videoList[this.currentIndex].course_video_id;
|
||||
let params = {
|
||||
course_video_id:course_video_id,
|
||||
duration:this.currentTime,
|
||||
}
|
||||
this.$requst.get('/api/course/create-browse-records',params).then(res=>{
|
||||
if(res.code == 0) {
|
||||
console.log('观影记录提交成功',this.currentTime)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 视频滑动结束
|
||||
|
|
@ -113,6 +129,10 @@
|
|||
comePause(index){
|
||||
this.videoList[index].isPlayImg = true;
|
||||
this.videoList[index].isControls = false;
|
||||
},
|
||||
//记录观看时长
|
||||
timeupdate(e) {
|
||||
this.currentTime = Number(e.detail.currentTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue