chen
/
martial-arts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化视频播放

master
chen 2022-08-05 18:01:57 +08:00
parent da5ae60764
commit 03bc80f0df
6 changed files with 244 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
commons/base.css
View File

@ -33,6 +33,7 @@ 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;}

10
components/list.vue
View File

@ -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="!ifCourse" class="radius18 pad-zy12 disjcac flexs fon20" style="color: #f37617;border: 2rpx solid #f37617;">购买</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-else class="radius16 pad-zy10 disjcac colf flexs fon20" style="border: 2rpx solid #f37617;background-color: #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> </view>
</view> </view>
</view> </view>
@ -20,12 +20,6 @@
<script> <script>
export default { export default {
name:"list", name:"list",
props:{
ifCourse:{
type:Boolean,
default:false
}
},
data() { data() {
return { return {
list:[] list:[]

143
pages/tabbar/pagehome/pagehome.vue
View File

@ -8,47 +8,48 @@
<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"> <view class="pad-zy20 pad-s25" v-if="ifLoading">
<view class="radius8 bacf pad10 boxshow1"> <view class="" v-if="bigCourse.length">
<view class="radius8 bacf pad10 boxshow1" v-for="(item,index) in bigCourse" :key="index">
<view class="posir"> <view class="posir">
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 518rpx;" mode="aspectFill" class="width100" lazy-load></image> <image :src="item.cover" 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">动作教学动作教学动作教学动作教学</view> <view class="clips1">{{item.name}}</view>
<view class="disjbac ae"> <view class="disjbac ae">
<view class=""> <view class="">
<span class="bold">￥199.00</span> <span class="bold">￥{{item.price}}</span>
<span class="fon20 colf8 mar-z20 tline-through">￥220.00</span> <span class="fon20 colf8 mar-z20 tline-through">￥{{item.original_price}}</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 @goDetail="goCourseDetail"></list> <list ref="refcourse" @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;">更多+</view> <view class="fon20" style="color: #bbb4b3;" @tap="goMore(0)">更多+</view>
</view> </view>
<view class="radius8 bacf pad10 boxshow1 mar-x30" v-for="(item,index) in 2" :key="index"> <view class="radius8 bacf pad10 boxshow1 mar-x30" v-for="(item,index) in videoList" :key="index">
<view class="posir disjcac"> <view class="posir disjcac">
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image> <image :src="item.cover" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image>
<image class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image> <image @tap="palyVideo(index)" 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">动作教学动作教学动作教学动作教学动作教学动作教学</view> <view class="clips2">{{item.title}}</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;">更多+</view> <view class="fon20" style="color: #bbb4b3;" @tap="goMore(1)">更多+</view>
</view> </view>
<list @goDetail="goShopDetail"></list> <list ref="refshop" @goDetail="goShopDetail"></list>
<!-- 推荐商品 end --> <!-- 推荐商品 end -->
</view> </view>
</view> </view>
@ -74,12 +75,12 @@
return { return {
newtop:uni.getSystemInfoSync().statusBarHeight + 40, newtop:uni.getSystemInfoSync().statusBarHeight + 40,
current:0, current:0,
dataList:[ dataList:[],//分类列表
{title:'课堂讲解'}, classId:'',//分类id
{title:'武德教育'}, bigCourse:[],
{title:'爱国主义教育'}, videoList:[],//推荐视频
{title:'示范动作讲解'}, ifLoading:false,
], ifCount:0
} }
}, },
onShow() { onShow() {
@ -91,12 +92,110 @@
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){

52
pages/tabbar/video/video.vue
View File

@ -5,30 +5,34 @@
<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 type="text" class="fon24 width100 pad-sx6" placeholder="关键字搜索" placeholder-style="color:#aaa4a3"> <input v-model="keyword" @confirm="getVideoList" 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 2" :key="index"> <view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in dataList" :key="index">
<view class="posir disjcac"> <view class="posir disjcac">
<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" style="height: 388rpx;" mode="aspectFill" class="width100" lazy-load></image> <image :src="item.cover" style="height: 388rpx;" mode="aspectFill" class="width100 animated fadeIn" 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;">动作教学动作教学动作教学动作教学动作教学动作教学</view> <view class="fon24 pad-sx16 clips2" style="color: #262626;">{{item.title}}</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>3021 <image class="mar-y10" src="/static/tabbar/icon-look.png" mode="" style="width: 33rpx;height: 25rpx;" lazy-load></image>{{item.view}}
</view> </view>
<view class="" style="color: #7f7f7f;">2022.07.22</view> <view class="" style="color: #7f7f7f;">{{item.created_at.slice(0,10).split('-').join('.')}}</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>
@ -48,12 +52,42 @@
return { return {
newtop:uni.getSystemInfoSync().statusBarHeight + 42, newtop:uni.getSystemInfoSync().statusBarHeight + 42,
dataList:[], dataList:[],
ifloading:false, page:1,
flag:true size:20,
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>

79
pagesB/play-video/play-video.nvue
View File

@ -1,23 +1,15 @@
<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 vertical :style="{width:newwidth+'px',height:newHeight+'px'}"> <swiper :current="currentIndex" vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
<swiper-item> <swiper-item @tap="doubleClick(index)" v-for="(item,index) in videoList" :key="index">
<video id="myVideo" style="width: 100%;" :style="{height:newHeight+'px'}" autoplay="true" <!-- :poster="item.cover" -->
:src="videoSrc" :enable-play-gesture="dans" :poster="posterSrc" <video :id="`video${index}`" :ref="`refvideo_${index}`" style="width: 100%;" :style="{height:newHeight+'px'}" :autoplay="item.autoplay"
:controls="isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull" :src="item.src" :enable-play-gesture="dans"
@play="comePlay" @pause="comePause"></video> :controls="item.isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
@play="comePlay(index)" @pause="comePause(index)"></video>
<!-- 封面图 --> <!-- 封面图 -->
<image v-if="isPlayImg" @tap="playEv" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%; <image v-if="item.isPlayImg" @tap="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>
</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>
@ -32,42 +24,63 @@
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',
isPlayImg:false, videoList:[],
autoplay:true, currentIndex:0,
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: function (res) { onReady: (res)=> {
this.videoContext = uni.createVideoContext('myVideo', this)
}, },
onLoad(options) { onLoad(op) {
this.videoSrc = options.src this.currentIndex = op.current;
this.posterSrc = options.posterSrc this.videoList = uni.getStorageSync('videoList');
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(){ playEv(index){
this.isPlayImg = false; this.playCurrentVideo(index);
this.autoplay = false;
this.videoContext.play(); this.videoContext.play();
}, },
comePlay(){//当开始/继续播放时触发play事件 // 视频播放
this.isControls = true; comePlay(index){//当开始/继续播放时触发play事件
this.videoList[index].isPlayImg = false;
this.videoList[index].isControls = true;
}, },
comePause(){ // 视频暂停
this.isPlayImg = true; comePause(index){
this.isControls = false; this.videoList[index].isPlayImg = true;
this.videoList[index].isControls = false;
} }
} }
} }

29
pagesB/shop-detail/shop-detail.vue
View File

@ -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"></swiper-pu> <swiper-pu newBottom="20rpx" newHeight="520rpx" :bannerList="bannerList"></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>
<rich-text :nodes="richText" style="color: #5a5a5a;"></rich-text> <view class="pad-s30">
<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">￥189.00</view> <view class="fon30 bold col-e42417">￥{{shopInfo.price}}</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,6 +33,8 @@
</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>
@ -49,6 +51,7 @@
richText:'', richText:'',
shopId:'',//产品id shopId:'',//产品id
shopInfo:'',//产品详情 shopInfo:'',//产品详情
bannerList:[],//产品轮播
} }
}, },
onShow() { onShow() {
@ -73,6 +76,22 @@
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);
})
}
} }
}) })
}, },