修改视频
parent
19718e29b4
commit
1c6e8206ad
|
|
@ -2,9 +2,13 @@
|
||||||
<view class="banner-box">
|
<view class="banner-box">
|
||||||
<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight}" :autoplay="ifAutoplay" :circular="true" :interval="3000" :duration="500">
|
<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">
|
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||||
<view @tap="chooseImg(index,item.url)" class="img-box">
|
<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"></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>
|
<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>
|
</view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
@ -30,9 +34,9 @@
|
||||||
type:Array,
|
type:Array,
|
||||||
default:function(){
|
default:function(){
|
||||||
return [
|
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:'',type:'image'},
|
||||||
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
|
{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:''},
|
{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:'',type:'image'},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -51,15 +55,25 @@
|
||||||
browseP:{//是否可预览
|
browseP:{//是否可预览
|
||||||
type:Boolean,
|
type:Boolean,
|
||||||
default:false
|
default:false
|
||||||
}
|
},
|
||||||
|
ifAutoplays: { //banner是否自动轮播
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
videoAutoPlays: { //视频是否自动播放
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
// ...mapState({
|
||||||
ifAutoplay: state => state.moduleA.ifAutoplay
|
// ifAutoplay: state => state.moduleA.ifAutoplay
|
||||||
})
|
// })
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
videoAutoPlay: this.videoAutoPlays,
|
||||||
|
ifAutoplay: this.ifAutoplays,
|
||||||
bcurrent: 0, // 默认当前选中项
|
bcurrent: 0, // 默认当前选中项
|
||||||
isShowVideo:false, // 是否显示视频
|
isShowVideo:false, // 是否显示视频
|
||||||
isVideo:uni.getStorageSync('is_video') // 是否是视频
|
isVideo:uni.getStorageSync('is_video') // 是否是视频
|
||||||
|
|
@ -67,7 +81,7 @@
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
// 图片点击事件
|
// 图片点击事件
|
||||||
chooseImg(index,url){
|
chooseImg(index,url,type){
|
||||||
// console.log('当前banner图',index);
|
// console.log('当前banner图',index);
|
||||||
this.bcurrent = index
|
this.bcurrent = index
|
||||||
if(this.browseP){
|
if(this.browseP){
|
||||||
|
|
@ -97,6 +111,8 @@
|
||||||
current:this.bcurrent,
|
current:this.bcurrent,
|
||||||
sources:imgList
|
sources:imgList
|
||||||
})
|
})
|
||||||
|
} else if(type == 'video') {
|
||||||
|
return false
|
||||||
}else {
|
}else {
|
||||||
// 有链接，跳转链接
|
// 有链接，跳转链接
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
|
|
@ -106,8 +122,20 @@
|
||||||
},
|
},
|
||||||
// 切换后获取当前索引
|
// 切换后获取当前索引
|
||||||
changeBanner(e){
|
changeBanner(e){
|
||||||
this.bcurrent = e.detail.current//当前的指示点下标
|
this.bcurrent = e.detail.current;//当前的指示点下标
|
||||||
// console.log(this.bcurrent);
|
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){
|
chooseDot(index){
|
||||||
|
|
@ -118,16 +146,22 @@
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:`/pagesB/video/playVideo?src=${this.bannerList[index].url}&posterSrc=${this.bannerList[index].poster}`
|
url:`/pagesB/video/playVideo?src=${this.bannerList[index].url}&posterSrc=${this.bannerList[index].poster}`
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.banner-box{position: relative;}
|
.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;}
|
.img{width:100%;vertical-align: bottom;}
|
||||||
.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
|
.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);}
|
.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);}
|
.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>
|
</style>
|
||||||
|
|
|
||||||
38
pages.json
38
pages.json
|
|
@ -119,6 +119,24 @@
|
||||||
"enablePullDownRefresh": false
|
"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
|
"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-coupon.png',title:'我的优惠券'},
|
||||||
{src:'/static/tabbar/icon-score.png',title:'我的积分'},
|
{src:'/static/tabbar/icon-score.png',title:'我的积分'},
|
||||||
{src:'/static/tabbar/icon-address.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:'我的推广'},
|
||||||
|
{src:'/static/tabbar/icon-znz.png',title:'我的分享'},
|
||||||
], // 导航列表
|
], // 导航列表
|
||||||
userInfo:{}, //用户信息
|
userInfo:{}, //用户信息
|
||||||
}
|
}
|
||||||
|
|
@ -100,10 +102,12 @@
|
||||||
'/pagesA/my-coupon/my-coupon',
|
'/pagesA/my-coupon/my-coupon',
|
||||||
'/pagesA/my-integral/my-integral',
|
'/pagesA/my-integral/my-integral',
|
||||||
'/pagesA/my-address/my-address',
|
'/pagesA/my-address/my-address',
|
||||||
|
'/pagesA/my-watch/my-watch',
|
||||||
|
'',
|
||||||
'',
|
'',
|
||||||
]
|
]
|
||||||
if(index==7){
|
if(index==8){
|
||||||
list[7] = ['/pagesA/my-extend/my-extend','/pagesB/second-level/second-level?level=1','/pagesB/second-level/second-level?level=2' ][this.userInfo.position]
|
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({
|
uni.navigateTo({
|
||||||
url:list[index]
|
url:list[index]
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,9 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
|
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
|
||||||
bannerList:[],//轮播图
|
bannerList:[
|
||||||
|
|
||||||
|
],//轮播图
|
||||||
current:0,
|
current:0,
|
||||||
dataList:[],//分类列表
|
dataList:[],//分类列表
|
||||||
classId:'',//分类id
|
classId:'',//分类id
|
||||||
|
|
@ -136,6 +138,7 @@
|
||||||
if(res.data.length){
|
if(res.data.length){
|
||||||
res.data.forEach(item=>{
|
res.data.forEach(item=>{
|
||||||
let obj = {
|
let obj = {
|
||||||
|
type:item.type,
|
||||||
imgSrc:item.src,
|
imgSrc:item.src,
|
||||||
url:item.url,
|
url:item.url,
|
||||||
isVideo:false,
|
isVideo:false,
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="disjbac width100">
|
<view class="disjbac width100">
|
||||||
<view class="fon24">￥{{item.price}}</view>
|
<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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<status-container titlet="我的推广" returnc="#FFFFFF">
|
<status-container titlet="我的推广" returnc="#FFFFFF">
|
||||||
|
|
||||||
|
<!-- 我的推广 -->
|
||||||
<view slot="content" style="margin-top: -20rpx;" v-if="loading">
|
<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="bacf pad-zy20 boxshow2 posi-sticky" :style="{top:newtop+'px'}">
|
||||||
<view class="disjcac pad-sx30 bbot">
|
<view class="disjcac pad-sx30 bbot">
|
||||||
<view v-if="personCode" class="">
|
<view v-if="personCode" class="">
|
||||||
|
|
@ -122,11 +131,36 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
share() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:`/pagesA/my-share/my-share`
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<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>
|
</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"
|
<video :id="`video${index}`" :ref="`refvideo_${index}`" style="width: 100%;" :style="{height:newHeight+'px'}" :autoplay="item.autoplay"
|
||||||
:src="item.src" :enable-play-gesture="dans"
|
:src="item.src" :enable-play-gesture="dans"
|
||||||
:controls="item.isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
|
: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%;
|
<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>
|
width: 126rpx;height: 126rpx;transform: translate(-50%, -50%);" mode="aspectFill"></image>
|
||||||
|
|
@ -33,7 +33,8 @@
|
||||||
isCenterImg:false,//是否显示视频中间的播放按钮
|
isCenterImg:false,//是否显示视频中间的播放按钮
|
||||||
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
|
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
|
||||||
isFull:true,//是否显示全屏按钮
|
isFull:true,//是否显示全屏按钮
|
||||||
count:0
|
count:0,
|
||||||
|
currentTime:'' //记录观看时长
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onReady: (res)=> {
|
onReady: (res)=> {
|
||||||
|
|
@ -56,6 +57,21 @@
|
||||||
},
|
},
|
||||||
onHide() {
|
onHide() {
|
||||||
uni.removeStorageSync('videoList');
|
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:{
|
methods:{
|
||||||
// 视频滑动结束
|
// 视频滑动结束
|
||||||
|
|
@ -113,6 +129,10 @@
|
||||||
comePause(index){
|
comePause(index){
|
||||||
this.videoList[index].isPlayImg = true;
|
this.videoList[index].isPlayImg = true;
|
||||||
this.videoList[index].isControls = false;
|
this.videoList[index].isControls = false;
|
||||||
|
},
|
||||||
|
//记录观看时长
|
||||||
|
timeupdate(e) {
|
||||||
|
this.currentTime = Number(e.detail.currentTime);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue