From 03bc80f0dff8f2f43022bc1573b94f643b68f652 Mon Sep 17 00:00:00 2001
From: chen <2659004835@qq.com>
Date: Fri, 5 Aug 2022 18:01:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A7=86=E9=A2=91=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 commons/base.css                   |   1 +
 components/list.vue                |  10 +-
 pages/tabbar/pagehome/pagehome.vue | 153 ++++++++++++++++++++++++-----
 pages/tabbar/video/video.vue       |  56 ++++++++---
 pagesB/play-video/play-video.nvue  |  79 ++++++++-------
 pagesB/shop-detail/shop-detail.vue |  29 +++++-
 6 files changed, 244 insertions(+), 84 deletions(-)

diff --git a/commons/base.css b/commons/base.css
index 42de2cc..9908f69 100644
--- a/commons/base.css
+++ b/commons/base.css
@@ -33,6 +33,7 @@ image{vertical-align: middle;}
 .width26{width: 26%;}
 .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;}
 .posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
 .posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
diff --git a/components/list.vue b/components/list.vue
index 5ba9eec..69650e8 100644
--- a/components/list.vue
+++ b/components/list.vue
@@ -9,8 +9,8 @@
 						<span class="bold colf8">￥{{item.price}}</span>
 						<span class="fon20 mar-z10 tline-through" style="color: #969696;">￥{{item.original_price}}</span>
 					</view>
-					<view v-if="!ifCourse" 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="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>
 			</view>
 		</view>
@@ -20,12 +20,6 @@
 <script>
 	export default {
 		name:"list",
-		props:{
-			ifCourse:{
-				type:Boolean,
-				default:false
-			}
-		},
 		data() {
 			return {
 				list:[]
diff --git a/pages/tabbar/pagehome/pagehome.vue b/pages/tabbar/pagehome/pagehome.vue
index d096fd1..c6149dd 100644
--- a/pages/tabbar/pagehome/pagehome.vue
+++ b/pages/tabbar/pagehome/pagehome.vue
@@ -8,47 +8,48 @@
 				<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>
 				</view>
-				<view class="pad-zy20 pad-s25">
-					<view class="radius8 bacf pad10 boxshow1">
-						<view class="posir">
-							<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="clips1">动作教学动作教学动作教学动作教学</view>
-								<view class="disjbac ae">
-									<view class="">
-										<span class="bold">￥199.00</span>
-										<span class="fon20 colf8 mar-z20 tline-through">￥220.00</span>
+				<view class="pad-zy20 pad-s25" v-if="ifLoading">
+					<view class="" v-if="bigCourse.length">
+						<view class="radius8 bacf pad10 boxshow1" v-for="(item,index) in bigCourse" :key="index">
+							<view class="posir">
+								<image :src="item.cover" style="height: 518rpx;" mode="aspectFill" class="width100" lazy-load></image>
+								<view class="posia-xzy bac5 fon24 colf pad18">
+									<view class="clips1">{{item.name}}</view>
+									<view class="disjbac ae">
+										<view class="">
+											<span class="bold">￥{{item.price}}</span>
+											<span class="fon20 colf8 mar-z20 tline-through">￥{{item.original_price}}</span>
+										</view>
+										<view class="radius18 pad-zy12 pad-sx4 borbot-f disjcac">购买</view>
 									</view>
-									<view class="radius18 pad-zy12 pad-sx4 borbot-f disjcac">购买</view>
 								</view>
 							</view>
 						</view>
 					</view>
 					<!-- 两列列表 start -->
-					<list @goDetail="goCourseDetail"></list>
+					<list ref="refcourse" @goDetail="goCourseDetail"></list>
 					<!-- 两列列表 end -->
-					
 					<!-- 推荐视频 start -->
 					<view class="disjb ae mar-s40 mar-x20">
 						<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 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">
-							<image src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" 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 :src="item.cover" 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>
 						</view>
 						<view class="fon24 pad-sx16 disjcac" style="color: #262626;">
-							<view class="clips2">动作教学动作教学动作教学动作教学动作教学动作教学</view>
+							<view class="clips2">{{item.title}}</view>
 						</view>
 					</view>
 					<!-- 推荐视频 end -->
 					<!-- 推荐商品 start -->
 					<view class="disjb ae mar-s40">
 						<view class="fon32 bold colb">推荐商品</view>
-						<view class="fon20" style="color: #bbb4b3;">更多+</view>
+						<view class="fon20" style="color: #bbb4b3;" @tap="goMore(1)">更多+</view>
 					</view>
-					<list @goDetail="goShopDetail"></list>
+					<list ref="refshop" @goDetail="goShopDetail"></list>
 					<!-- 推荐商品 end -->
 				</view>
 			</view>
@@ -74,12 +75,12 @@
 			return {
 				newtop:uni.getSystemInfoSync().statusBarHeight + 40,
 				current:0,
-				dataList:[
-					{title:'课堂讲解'},
-					{title:'武德教育'},
-					{title:'爱国主义教育'},
-					{title:'示范动作讲解'},
-				],
+				dataList:[],//分类列表
+				classId:'',//分类id
+				bigCourse:[],
+				videoList:[],//推荐视频
+				ifLoading:false,
+				ifCount:0
 			}
 		},
 		onShow() {
@@ -91,12 +92,110 @@
 			this.$store.commit('setAutoplay',false);
 		},
 		onLoad() {
-			
+			// 调用获取分类列表
+			this.getCourseCate();
 		},
 		methods: {
 			// tab点击事件
 			clickTab(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){
diff --git a/pages/tabbar/video/video.vue b/pages/tabbar/video/video.vue
index 40d06cf..a865513 100644
--- a/pages/tabbar/video/video.vue
+++ b/pages/tabbar/video/video.vue
@@ -5,28 +5,32 @@
 				<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="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">
-							<image class="flexs" src="/static/tabbar/icon-search.png" mode="" style="width: 28rpx;height: 28rpx;" lazy-load></image>
+							<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>
+							</view>
 						</view>
 					</view>
 				</view>
 				<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">
-							<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>
 						</view>
 						<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="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 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>
-					<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
+					<view class="" v-if="noMore">
+						<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
+					</view>
 				</view>
 			</view>
 		</status-container>
@@ -48,12 +52,42 @@
 			return {
 				newtop:uni.getSystemInfoSync().statusBarHeight + 42,
 				dataList:[],
-				ifloading:false,
-				flag:true
+				page:1,
+				size:20,
+				total:0,
+				keyword:'',
+				noMore:false
 			}
 		},
+		onReachBottom() {
+			if(this.total!=this.dataList.length){
+				this.page++;
+				this.getVideoList();
+			}
+		},
+		onLoad() {
+			this.getVideoList();
+		},
 		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>
diff --git a/pagesB/play-video/play-video.nvue b/pagesB/play-video/play-video.nvue
index 53d4786..f7ee50a 100644
--- a/pagesB/play-video/play-video.nvue
+++ b/pagesB/play-video/play-video.nvue
@@ -1,23 +1,15 @@
 <template>
 	<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>
-		<swiper vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
-			<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>
+		<swiper :current="currentIndex" vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
+			<swiper-item @tap="doubleClick(index)" v-for="(item,index) in videoList" :key="index">
+				  <!-- :poster="item.cover" -->
+				<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>
 				<!-- 封面图 -->
-				<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%;
+				<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>
@@ -32,42 +24,63 @@
 				newHeight:uni.getSystemInfoSync().windowHeight,
 				newwidth:uni.getSystemInfoSync().windowWidth,
 				videoSrc:'https://video.shipin520.com/videos/17/97/40/a_yiPIEXbE43Tm1559179740.mp4',
-				isPlayImg:false,
-				autoplay:true,
+				videoList:[],
+				currentIndex:0,
 				videoContext:'',
 				title:'',//视频的标题，全屏时在顶部展示
 				posterSrc:'',//视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
-				isControls: false,//是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
 				dans:true,//是否开启播放手势，即双击切换播放/暂停
 				isCenterImg:false,//是否显示视频中间的播放按钮
 				isBottomImg:true,//是否显示视频底部控制栏的播放按钮
-				isFull:true//是否显示全屏按钮
+				isFull:true,//是否显示全屏按钮
+				count:0
 			}
 		},
-		onReady: function (res) {
-			this.videoContext = uni.createVideoContext('myVideo', this)
+		onReady: (res)=> {
+			
 		},
-		onLoad(options) {
-			this.videoSrc = options.src
-			this.posterSrc = options.posterSrc
+		onLoad(op) {
+			this.currentIndex = op.current;
+			this.videoList = uni.getStorageSync('videoList');
+			this.videoContext = uni.createVideoContext(`video${this.currentIndex}`, this)
 		},
 		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(){
 				uni.navigateBack({
 					delta:1
 				})
 			},
-			playEv(){
-				this.isPlayImg = false;
-				this.autoplay = false;
+			playEv(index){
+				this.playCurrentVideo(index);
 				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;
-				this.isControls = false;
+			// 视频暂停
+			comePause(index){
+				this.videoList[index].isPlayImg = true;
+				this.videoList[index].isControls = false;
 			}
 		}
 	}
diff --git a/pagesB/shop-detail/shop-detail.vue b/pagesB/shop-detail/shop-detail.vue
index acd96ba..357092e 100644
--- a/pagesB/shop-detail/shop-detail.vue
+++ b/pagesB/shop-detail/shop-detail.vue
@@ -3,7 +3,7 @@
 		<status-container titlet="产品详情" returnc="#FFFFFF">
 			<view slot="content" style="margin-top: -20rpx;">
 				<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="fon26 col26">{{shopInfo.name}}</view>
 						<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>
 						</span>
 					</view>
-					<rich-text :nodes="richText" style="color: #5a5a5a;"></rich-text>
+					<view class="pad-s30">
+						<rich-text :nodes="richText"></rich-text>
+					</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="fon30 bold col-e42417">￥189.00</view>
+					<view class="fon30 bold col-e42417">￥{{shopInfo.price}}</view>
 					<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 @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>
 		</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>
 </template>
 
@@ -49,6 +51,7 @@
 				richText:'',
 				shopId:'',//产品id
 				shopInfo:'',//产品详情
+				bannerList:[],//产品轮播
 			}
 		},
 		onShow() {
@@ -73,6 +76,22 @@
 						this.shopInfo = res.data.detail;
 						// 富文本
 						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);
+							})
+						}
 					}
 				})
 			},