Compare commits
No commits in common. "ecbb2f78576a07d6a142430db87dcec8c8cfaab6" and "19c11c165a400b7361343cc2eef55099ab03d750" have entirely different histories.
ecbb2f7857
...
19c11c165a
|
@ -33,7 +33,6 @@ image{vertical-align: middle;}
|
||||||
.width26{width: 26%;}
|
.width26{width: 26%;}
|
||||||
.width25{width: 25%;}
|
.width25{width: 25%;}
|
||||||
|
|
||||||
.posi{position: fixed;z-index: 10;}
|
|
||||||
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
|
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
|
||||||
.posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
|
.posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
|
||||||
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
|
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
|
||||||
|
|
|
@ -9,8 +9,8 @@
|
||||||
<span class="bold colf8">¥{{item.price}}</span>
|
<span class="bold colf8">¥{{item.price}}</span>
|
||||||
<span class="fon20 mar-z10 tline-through" style="color: #969696;">¥{{item.original_price}}</span>
|
<span class="fon20 mar-z10 tline-through" style="color: #969696;">¥{{item.original_price}}</span>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="item.is_buy!=1" class="radius18 pad-zy12 disjcac flexs fon20" style="color: #f37617;border: 2rpx solid #f37617;">购买</view>
|
<view v-if="!ifCourse" class="radius18 pad-zy12 disjcac flexs fon20" style="color: #f37617;border: 2rpx solid #f37617;">购买</view>
|
||||||
<view v-if="item.is_buy==1" class="radius16 pad-zy10 disjcac colf flexs fon20" style="border: 2rpx solid #f37617;background-color: #f37617;">去学习</view>
|
<view v-else class="radius16 pad-zy10 disjcac colf flexs fon20" style="border: 2rpx solid #f37617;background-color: #f37617;">去学习</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
@ -20,6 +20,12 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name:"list",
|
name:"list",
|
||||||
|
props:{
|
||||||
|
ifCourse:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
}
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list:[]
|
list:[]
|
||||||
|
|
|
@ -8,48 +8,47 @@
|
||||||
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
||||||
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
|
||||||
</view>
|
</view>
|
||||||
<view class="pad-zy20 pad-s25" v-if="ifLoading">
|
<view class="pad-zy20 pad-s25">
|
||||||
<view class="" v-if="bigCourse.length">
|
<view class="radius8 bacf pad10 boxshow1">
|
||||||
<view class="radius8 bacf pad10 boxshow1" v-for="(item,index) in bigCourse" :key="index">
|
|
||||||
<view class="posir">
|
<view class="posir">
|
||||||
<image :src="item.cover" style="height: 518rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 518rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||||
<view class="posia-xzy bac5 fon24 colf pad18">
|
<view class="posia-xzy bac5 fon24 colf pad18">
|
||||||
<view class="clips1">{{item.name}}</view>
|
<view class="clips1">动作教学动作教学动作教学动作教学</view>
|
||||||
<view class="disjbac ae">
|
<view class="disjbac ae">
|
||||||
<view class="">
|
<view class="">
|
||||||
<span class="bold">¥{{item.price}}</span>
|
<span class="bold">¥199.00</span>
|
||||||
<span class="fon20 colf8 mar-z20 tline-through">¥{{item.original_price}}</span>
|
<span class="fon20 colf8 mar-z20 tline-through">¥220.00</span>
|
||||||
</view>
|
</view>
|
||||||
<view class="radius18 pad-zy12 pad-sx4 borbot-f disjcac">购买</view>
|
<view class="radius18 pad-zy12 pad-sx4 borbot-f disjcac">购买</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
<!-- 两列列表 start -->
|
<!-- 两列列表 start -->
|
||||||
<list ref="refcourse" @goDetail="goCourseDetail"></list>
|
<list @goDetail="goCourseDetail"></list>
|
||||||
<!-- 两列列表 end -->
|
<!-- 两列列表 end -->
|
||||||
|
|
||||||
<!-- 推荐视频 start -->
|
<!-- 推荐视频 start -->
|
||||||
<view class="disjb ae mar-s40 mar-x20">
|
<view class="disjb ae mar-s40 mar-x20">
|
||||||
<view class="fon32 bold colb">推荐视频</view>
|
<view class="fon32 bold colb">推荐视频</view>
|
||||||
<view class="fon20" style="color: #bbb4b3;" @tap="goMore(0)">更多+</view>
|
<view class="fon20" style="color: #bbb4b3;">更多+</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="radius8 bacf pad10 boxshow1 mar-x30" v-for="(item,index) in videoList" :key="index">
|
<view class="radius8 bacf pad10 boxshow1 mar-x30" v-for="(item,index) in 2" :key="index">
|
||||||
<view class="posir disjcac">
|
<view class="posir disjcac">
|
||||||
<image :src="item.cover" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||||
<image @tap="palyVideo(index)" class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
<image class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="fon24 pad-sx16 disjcac" style="color: #262626;">
|
<view class="fon24 pad-sx16 disjcac" style="color: #262626;">
|
||||||
<view class="clips2">{{item.title}}</view>
|
<view class="clips2">动作教学动作教学动作教学动作教学动作教学动作教学</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 推荐视频 end -->
|
<!-- 推荐视频 end -->
|
||||||
<!-- 推荐商品 start -->
|
<!-- 推荐商品 start -->
|
||||||
<view class="disjb ae mar-s40">
|
<view class="disjb ae mar-s40">
|
||||||
<view class="fon32 bold colb">推荐商品</view>
|
<view class="fon32 bold colb">推荐商品</view>
|
||||||
<view class="fon20" style="color: #bbb4b3;" @tap="goMore(1)">更多+</view>
|
<view class="fon20" style="color: #bbb4b3;">更多+</view>
|
||||||
</view>
|
</view>
|
||||||
<list ref="refshop" @goDetail="goShopDetail"></list>
|
<list @goDetail="goShopDetail"></list>
|
||||||
<!-- 推荐商品 end -->
|
<!-- 推荐商品 end -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
@ -75,12 +74,12 @@
|
||||||
return {
|
return {
|
||||||
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
|
newtop:uni.getSystemInfoSync().statusBarHeight + 40,
|
||||||
current:0,
|
current:0,
|
||||||
dataList:[],//分类列表
|
dataList:[
|
||||||
classId:'',//分类id
|
{title:'课堂讲解'},
|
||||||
bigCourse:[],
|
{title:'武德教育'},
|
||||||
videoList:[],//推荐视频
|
{title:'爱国主义教育'},
|
||||||
ifLoading:false,
|
{title:'示范动作讲解'},
|
||||||
ifCount:0
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
|
@ -92,110 +91,12 @@
|
||||||
this.$store.commit('setAutoplay',false);
|
this.$store.commit('setAutoplay',false);
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
// 调用获取分类列表
|
|
||||||
this.getCourseCate();
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// tab点击事件
|
// tab点击事件
|
||||||
clickTab(index){
|
clickTab(index){
|
||||||
this.current = index;
|
this.current = index;
|
||||||
// 设置分类id
|
|
||||||
this.classId = this.dataList[index].id;
|
|
||||||
this.bigCourse = [];
|
|
||||||
this.$refs.refcourse.list = [];
|
|
||||||
this.ifCount++;
|
|
||||||
// 调用获取课程列表
|
|
||||||
this.getCourseList();
|
|
||||||
},
|
|
||||||
// 获取分类列表
|
|
||||||
getCourseCate(){
|
|
||||||
this.$requst.get('/api/spu/category',{type:'course'}).then(res=>{
|
|
||||||
// 设置分类列表
|
|
||||||
this.dataList = res.data;
|
|
||||||
// 如果分类列表不为空
|
|
||||||
if(this.dataList.length){
|
|
||||||
// 设置分类id
|
|
||||||
this.classId = this.dataList[0].id;
|
|
||||||
// 调用获取课程列表
|
|
||||||
this.getCourseList();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 获取课程列表
|
|
||||||
getCourseList(){
|
|
||||||
let params = {
|
|
||||||
category_id:this.classId,
|
|
||||||
is_home:1
|
|
||||||
}
|
|
||||||
this.$requst.post('/api/spu/course',params).then(res=>{
|
|
||||||
if(res.code==0){
|
|
||||||
this.ifLoading = true;
|
|
||||||
if(!this.ifCount){
|
|
||||||
// 调用获取推荐视频列表
|
|
||||||
this.getVideoList();
|
|
||||||
// 调用获取推荐视频列表
|
|
||||||
this.getShopList();
|
|
||||||
}
|
|
||||||
let dataList = res.data.list;
|
|
||||||
if(dataList.length){
|
|
||||||
this.bigCourse.push(dataList[0]);
|
|
||||||
dataList.splice(0,1);
|
|
||||||
if(dataList.length){
|
|
||||||
setTimeout(()=>{
|
|
||||||
// 设置课程列表
|
|
||||||
this.$refs.refcourse.list = dataList;
|
|
||||||
},200)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 获取推荐视频列表
|
|
||||||
getVideoList(){
|
|
||||||
this.$requst.post('/api/spu/video',{is_home:1}).then(res=>{
|
|
||||||
if(res.code==0){
|
|
||||||
// 设置推荐视频列表
|
|
||||||
this.videoList = res.data.list;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 获取推荐商品
|
|
||||||
getShopList(){
|
|
||||||
let params = {
|
|
||||||
page:1,
|
|
||||||
size:20,
|
|
||||||
is_home:1
|
|
||||||
}
|
|
||||||
this.$requst.post('/api/spu/list',{params}).then(res=>{
|
|
||||||
if(res.code==0){
|
|
||||||
this.$refs.refshop.list = res.data.list;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 播放视频
|
|
||||||
palyVideo(index){
|
|
||||||
let newList = [];
|
|
||||||
if(this.videoList.length){
|
|
||||||
this.videoList.forEach(item=>{
|
|
||||||
let obj = {
|
|
||||||
...item,
|
|
||||||
isPlayImg:true,
|
|
||||||
autoplay:false,
|
|
||||||
isControls:false
|
|
||||||
}
|
|
||||||
newList.push(obj);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
uni.setStorageSync('videoList',newList);
|
|
||||||
uni.navigateTo({
|
|
||||||
url:`/pagesB/play-video/play-video?current=${index}`
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 更多
|
|
||||||
goMore(index){
|
|
||||||
uni.reLaunch({
|
|
||||||
url:['/pages/tabbar/video/video','/pages/tabbar/shop/shop'][index]
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
// 去课程详情
|
// 去课程详情
|
||||||
goCourseDetail(id){
|
goCourseDetail(id){
|
||||||
|
|
|
@ -5,34 +5,30 @@
|
||||||
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
<view class="posi-sticky" :style="{top:newtop+'px'}">
|
||||||
<view class="pad-sx26 pad-zy20" style="box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.1);">
|
<view class="pad-sx26 pad-zy20" style="box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.1);">
|
||||||
<view class="radius40 pad-sx2 disjbac pad-zy20" style="background-color: #fff6f5;border: 2rpx solid #ece6e6;">
|
<view class="radius40 pad-sx2 disjbac pad-zy20" style="background-color: #fff6f5;border: 2rpx solid #ece6e6;">
|
||||||
<input v-model="keyword" @confirm="getVideoList" type="text" class="fon24 width100 pad-sx6" placeholder="关键字搜索" placeholder-style="color:#aaa4a3">
|
<input type="text" class="fon24 width100 pad-sx6" placeholder="关键字搜索" placeholder-style="color:#aaa4a3">
|
||||||
<view class="pad-sx6 pad-zy10 disjcac" @tap="getVideoList">
|
|
||||||
<image class="flexs" src="/static/tabbar/icon-search.png" mode="" style="width: 28rpx;height: 28rpx;" lazy-load></image>
|
<image class="flexs" src="/static/tabbar/icon-search.png" mode="" style="width: 28rpx;height: 28rpx;" lazy-load></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
<view class="pad-zy20">
|
<view class="pad-zy20">
|
||||||
<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in dataList" :key="index">
|
<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in 2" :key="index">
|
||||||
<view class="posir disjcac">
|
<view class="posir disjcac">
|
||||||
<image :src="item.cover" style="height: 388rpx;" mode="aspectFill" class="width100 animated fadeIn" lazy-load></image>
|
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
|
||||||
<image @tap="$toolAll.tools.goPage('/pagesB/play-video/play-video')" class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
<image @tap="$toolAll.tools.goPage('/pagesB/play-video/play-video')" class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="pad-zy10">
|
<view class="pad-zy10">
|
||||||
<view class="fon24 pad-sx16 clips2" style="color: #262626;">{{item.title}}</view>
|
<view class="fon24 pad-sx16 clips2" style="color: #262626;">动作教学动作教学动作教学动作教学动作教学动作教学</view>
|
||||||
<view class="disjbac fon20">
|
<view class="disjbac fon20">
|
||||||
<view class="disac" style="color: #aaaaaa;">
|
<view class="disac" style="color: #aaaaaa;">
|
||||||
<image class="mar-y10" src="/static/tabbar/icon-look.png" mode="" style="width: 33rpx;height: 25rpx;" lazy-load></image>{{item.view}}
|
<image class="mar-y10" src="/static/tabbar/icon-look.png" mode="" style="width: 33rpx;height: 25rpx;" lazy-load></image>3021
|
||||||
</view>
|
</view>
|
||||||
<view class="" style="color: #7f7f7f;">{{item.created_at.slice(0,10).split('-').join('.')}}</view>
|
<view class="" style="color: #7f7f7f;">2022.07.22</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="" v-if="noMore">
|
|
||||||
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
</status-container>
|
</status-container>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
<foot-tab current="3"></foot-tab>
|
<foot-tab current="3"></foot-tab>
|
||||||
|
@ -52,42 +48,12 @@
|
||||||
return {
|
return {
|
||||||
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
newtop:uni.getSystemInfoSync().statusBarHeight + 42,
|
||||||
dataList:[],
|
dataList:[],
|
||||||
page:1,
|
ifloading:false,
|
||||||
size:20,
|
flag:true
|
||||||
total:0,
|
|
||||||
keyword:'',
|
|
||||||
noMore:false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
|
||||||
if(this.total!=this.dataList.length){
|
|
||||||
this.page++;
|
|
||||||
this.getVideoList();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
this.getVideoList();
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
// 获取视频列表
|
|
||||||
getVideoList(){
|
|
||||||
let params = {
|
|
||||||
keyword:this.keyword,
|
|
||||||
page:this.page,
|
|
||||||
size:this.size
|
|
||||||
}
|
|
||||||
this.$requst.post('/api/spu/video',params).then(res=>{
|
|
||||||
if(res.code==0){
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,15 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="width:100%;overflow-x:hidden;">
|
<div style="width:100%;overflow-x:hidden;">
|
||||||
<image class="" @tap="backEv" :style="{top:statusHeight+'px'}" src="/static/public/video-back.png" style="width: 33rpx;height: 33rpx;position: fixed;z-index: 10;left: 20rpx;" mode="aspectFill"></image>
|
<image class="" @tap="backEv" :style="{top:statusHeight+'px'}" src="/static/public/video-back.png" style="width: 33rpx;height: 33rpx;position: fixed;z-index: 10;left: 20rpx;" mode="aspectFill"></image>
|
||||||
<swiper :current="currentIndex" vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
|
<swiper vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
|
||||||
<swiper-item @tap="doubleClick(index)" v-for="(item,index) in videoList" :key="index">
|
<swiper-item>
|
||||||
<!-- :poster="item.cover" -->
|
<video id="myVideo" style="width: 100%;" :style="{height:newHeight+'px'}" autoplay="true"
|
||||||
<video :id="`video${index}`" :ref="`refvideo_${index}`" style="width: 100%;" :style="{height:newHeight+'px'}" :autoplay="item.autoplay"
|
:src="videoSrc" :enable-play-gesture="dans" :poster="posterSrc"
|
||||||
:src="item.src" :enable-play-gesture="dans"
|
:controls="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" @pause="comePause"></video>
|
||||||
@play="comePlay(index)" @pause="comePause(index)"></video>
|
|
||||||
<!-- 封面图 -->
|
<!-- 封面图 -->
|
||||||
<image v-if="item.isPlayImg" @tap="playEv(index)" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%;
|
<image v-if="isPlayImg" @tap="playEv" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%;
|
||||||
|
width: 126rpx;height: 126rpx;transform: translate(-50%, -50%);" mode="aspectFill"></image>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<video id="myVideo" style="width: 100%;" :style="{height:newHeight+'px'}" autoplay="true"
|
||||||
|
:src="videoSrc" :enable-play-gesture="dans" :poster="posterSrc"
|
||||||
|
:controls="isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
|
||||||
|
@play="comePlay" @pause="comePause"></video>
|
||||||
|
<!-- 封面图 -->
|
||||||
|
<image v-if="isPlayImg" @tap="playEv" 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>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
@ -24,63 +32,42 @@
|
||||||
newHeight:uni.getSystemInfoSync().windowHeight,
|
newHeight:uni.getSystemInfoSync().windowHeight,
|
||||||
newwidth:uni.getSystemInfoSync().windowWidth,
|
newwidth:uni.getSystemInfoSync().windowWidth,
|
||||||
videoSrc:'https://video.shipin520.com/videos/17/97/40/a_yiPIEXbE43Tm1559179740.mp4',
|
videoSrc:'https://video.shipin520.com/videos/17/97/40/a_yiPIEXbE43Tm1559179740.mp4',
|
||||||
videoList:[],
|
isPlayImg:false,
|
||||||
currentIndex:0,
|
autoplay:true,
|
||||||
videoContext:'',
|
videoContext:'',
|
||||||
title:'',//视频的标题,全屏时在顶部展示
|
title:'',//视频的标题,全屏时在顶部展示
|
||||||
posterSrc:'',//视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效
|
posterSrc:'',//视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效
|
||||||
|
isControls: false,//是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
|
||||||
dans:true,//是否开启播放手势,即双击切换播放/暂停
|
dans:true,//是否开启播放手势,即双击切换播放/暂停
|
||||||
isCenterImg:false,//是否显示视频中间的播放按钮
|
isCenterImg:false,//是否显示视频中间的播放按钮
|
||||||
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
|
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
|
||||||
isFull:true,//是否显示全屏按钮
|
isFull:true//是否显示全屏按钮
|
||||||
count:0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onReady: (res)=> {
|
onReady: function (res) {
|
||||||
|
this.videoContext = uni.createVideoContext('myVideo', this)
|
||||||
},
|
},
|
||||||
onLoad(op) {
|
onLoad(options) {
|
||||||
this.currentIndex = op.current;
|
this.videoSrc = options.src
|
||||||
this.videoList = uni.getStorageSync('videoList');
|
this.posterSrc = options.posterSrc
|
||||||
this.videoContext = uni.createVideoContext(`video${this.currentIndex}`, this)
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
// 双击
|
|
||||||
doubleClick(index){
|
|
||||||
this.count++;
|
|
||||||
setTimeout(()=>{
|
|
||||||
if(this.count>2 && this.videoList[index].isPlayImg == true){
|
|
||||||
this.playCurrentVideo(index);
|
|
||||||
this.count = 0;
|
|
||||||
} else {
|
|
||||||
this.videoList[index].isPlayImg = true;
|
|
||||||
}
|
|
||||||
},1000)
|
|
||||||
},
|
|
||||||
// 播放当前视频
|
|
||||||
playCurrentVideo(index){
|
|
||||||
this.videoContext.pause();
|
|
||||||
this.videoContext = uni.createVideoContext(`video${index}`, this)
|
|
||||||
this.videoList[index].isPlayImg = false;
|
|
||||||
},
|
|
||||||
backEv(){
|
backEv(){
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
delta:1
|
delta:1
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
playEv(index){
|
playEv(){
|
||||||
this.playCurrentVideo(index);
|
this.isPlayImg = false;
|
||||||
|
this.autoplay = false;
|
||||||
this.videoContext.play();
|
this.videoContext.play();
|
||||||
},
|
},
|
||||||
// 视频播放
|
comePlay(){//当开始/继续播放时触发play事件
|
||||||
comePlay(index){//当开始/继续播放时触发play事件
|
this.isControls = true;
|
||||||
this.videoList[index].isPlayImg = false;
|
|
||||||
this.videoList[index].isControls = true;
|
|
||||||
},
|
},
|
||||||
// 视频暂停
|
comePause(){
|
||||||
comePause(index){
|
this.isPlayImg = true;
|
||||||
this.videoList[index].isPlayImg = true;
|
this.isControls = false;
|
||||||
this.videoList[index].isControls = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<status-container titlet="产品详情" returnc="#FFFFFF">
|
<status-container titlet="产品详情" returnc="#FFFFFF">
|
||||||
<view slot="content" style="margin-top: -20rpx;">
|
<view slot="content" style="margin-top: -20rpx;">
|
||||||
<view class="bacf boxshowb">
|
<view class="bacf boxshowb">
|
||||||
<swiper-pu newBottom="20rpx" newHeight="520rpx" :bannerList="bannerList"></swiper-pu>
|
<swiper-pu newBottom="20rpx" newHeight="520rpx"></swiper-pu>
|
||||||
<view class="pad-zy30 pad-sx24">
|
<view class="pad-zy30 pad-sx24">
|
||||||
<view class="fon26 col26">{{shopInfo.name}}</view>
|
<view class="fon26 col26">{{shopInfo.name}}</view>
|
||||||
<view class="col-e42417 dis ae fon24 mar-s20">
|
<view class="col-e42417 dis ae fon24 mar-s20">
|
||||||
|
@ -19,13 +19,13 @@
|
||||||
<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
|
<view class="posia-xzy" style="height: 6rpx;background-color: #e42417;bottom: -2rpx;"></view>
|
||||||
</span>
|
</span>
|
||||||
</view>
|
</view>
|
||||||
<view class="pad-s30">
|
<rich-text :nodes="richText" style="color: #5a5a5a;"></rich-text>
|
||||||
<rich-text :nodes="richText"></rich-text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 购物车图标 -->
|
||||||
|
<image @tap="$toolAll.tools.goPage('/pagesB/cart/cart')" class="posia" src="/static/tabbar/icon-cart.png" mode="" lazy-load style="width: 79rpx;height: 79rpx;right: 20rpx;bottom: 160rpx;"></image>
|
||||||
<!-- 底部按钮 -->
|
<!-- 底部按钮 -->
|
||||||
<view class="posixzy bacf pad-zy30 disjbac pad-sx20">
|
<view class="posixzy bacf pad-zy30 disjbac pad-sx20">
|
||||||
<view class="fon30 bold col-e42417">¥{{shopInfo.price}}</view>
|
<view class="fon30 bold col-e42417">¥189.00</view>
|
||||||
<view class="disac fon24 colf">
|
<view class="disac fon24 colf">
|
||||||
<view class="radius32 disjcac" style="background-color: #FFFFFF;color: #f37617;border: 2rpx solid #f37617; width: 184rpx;height: 64rpx;">加入购物车</view>
|
<view class="radius32 disjcac" style="background-color: #FFFFFF;color: #f37617;border: 2rpx solid #f37617; width: 184rpx;height: 64rpx;">加入购物车</view>
|
||||||
<view @tap="goConfirmOrder" class="radius32 disjcac mar-z10" style="background-color: #f37617;border: 2rpx solid #f37617;width: 184rpx;height: 64rpx;">立即购买</view>
|
<view @tap="goConfirmOrder" class="radius32 disjcac mar-z10" style="background-color: #f37617;border: 2rpx solid #f37617;width: 184rpx;height: 64rpx;">立即购买</view>
|
||||||
|
@ -33,8 +33,6 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</status-container>
|
</status-container>
|
||||||
<!-- 购物车图标 -->
|
|
||||||
<image @tap="$toolAll.tools.goPage('/pagesB/cart/cart')" class="posi" src="/static/tabbar/icon-cart.png" mode="" lazy-load style="width: 79rpx;height: 79rpx;right: 20rpx;bottom: 160rpx;"></image>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -51,7 +49,6 @@
|
||||||
richText:'',
|
richText:'',
|
||||||
shopId:'',//产品id
|
shopId:'',//产品id
|
||||||
shopInfo:'',//产品详情
|
shopInfo:'',//产品详情
|
||||||
bannerList:[],//产品轮播
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
|
@ -76,22 +73,6 @@
|
||||||
this.shopInfo = res.data.detail;
|
this.shopInfo = res.data.detail;
|
||||||
// 富文本
|
// 富文本
|
||||||
this.richText = this.$toolAll.tools.escape2Html(this.shopInfo.content);
|
this.richText = this.$toolAll.tools.escape2Html(this.shopInfo.content);
|
||||||
// 产品详情
|
|
||||||
let newImg = [];
|
|
||||||
if(this.shopInfo.images){
|
|
||||||
newImg = this.shopInfo.images.split(',');
|
|
||||||
}
|
|
||||||
if(newImg.length){
|
|
||||||
newImg.forEach(item=>{
|
|
||||||
let obj = {
|
|
||||||
imgSrc:item,
|
|
||||||
url:'',
|
|
||||||
isVideo:false,
|
|
||||||
poster:''
|
|
||||||
}
|
|
||||||
this.bannerList.push(obj);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue