增加视频播放

pages.json

@@ -308,7 +308,17 @@
             "pages": [{
                 "path": "index"
             }]
-        }
+        },
+		//抖音商品短视频
+		{
+			"root": "pages/video",
+			"pages": [{
+				"path": "index",
+				"style": {
+				    "navigationStyle": "custom"
+				}
+			}]
+		}
     ],
     "globalStyle": {
         "navigationBarTextStyle": "black",

pages/video/index.vue

+<style>
+	.video_Page{
+		width:100%;
+		height:100%;
+		position: relative;
+	}
+	.video_Page .sharebox_top_nav {
+		width: 100%;
+		display: flex;
+		position: absolute;
+		z-index:999;
+		left:20px;
+	}
+	.player-video{
+		width:100%;
+		/* height:100%; */
+	}
+	.video_Bottom{
+		position: absolute;
+		bottom:20px;
+		right:15px;
+		width:53%;
+		height:42px;
+		z-index:999;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	.good_Detail{
+		width:50px;
+		height:50px;
+	}
+	.good_other{
+		width:40px;
+		height:40px;
+	}
+	.video_detail{
+		position: absolute;
+		width:210px;
+		height:65px;
+		top:-80px;
+		left:-230%;
+		background-color: #fff;
+		border-radius: 5px;
+		padding:5px;
+	}
+	.video_Tra{
+		width: 0;
+		height: 0;
+		border-left: 7px solid transparent;
+		border-right: 7px solid transparent;
+		border-top: 10px solid #fff;
+		position: absolute;
+		top:-16px;
+		left:18px;
+	}
+	.video_cha{
+		width:17px;
+		height:17px;
+		position: absolute;
+		right:-5px;
+		top:-5px;
+	}
+	.video_Shop{
+		display: flex;
+		position: relative;
+	}
+	.video_imgCt{
+		width:55px;
+		height:55px;
+		margin-right:5px;
+	}
+	.video_shopTitle{
+	   width:114px;
+	   overflow: hidden;
+	   text-overflow: ellipsis;
+	   display: -webkit-box;
+	   -webkit-line-clamp: 2;
+	   -webkit-box-orient: vertical;
+	   font-size:11px;
+	   color:#111111;
+	}
+	.video_price{
+		color:#FF3F47;
+		font-size:13px;
+		margin-top:6px;
+	}
+	.v_fx{
+		width: 40px;
+		height: 40px;
+		border: none;
+		outline: none;
+		padding: 0;
+		margin: 0;
+		line-height: unset;
+		background: none;
+	}
+	.video_Page button:after{
+		border: none;
+	}
+	.vd-cover{
+		position: absolute;
+		top:0;
+		left:0;
+		width:100%;
+		height:100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	video::-webkit-media-controls {
+	  display:none !important;
+	}
+</style>
+<template>
+	<view class="video_Page">
+		<view class="sharebox_top_nav" :style="{top:nav+10+'px'}">
+			<view class="arrow" @click="redirectPrev">
+				<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
+			</view>
+		</view>
+		<swiper :interval="3000" :duration="100" :vertical="true" :current="videoIndex" @change="handleSlider" :style="{'height':swiperHeight}">
+			<block v-for="(item,index) in vlist" :key="index">
+				<swiper-item style="width:100%;height:100%">
+					<view class="uni_vdplayer">
+						<video :id="'myVideo' + index" :ref="'myVideo' + index" v-if="index==hkindex||index==hkindex-1||index==hkindex+1" 
+						class="player-video" :loop="true" :show-progress="true" :controls="false"
+						:show-center-play-btn="false" :style="{'height':swiperHeight}"  :src="item.video_url" autoplay="true" />
+					</view>
+					<!-- 中间播放按钮 -->
+					<view class="vd-cover flexbox" @click="handleClicked(index)">
+						<image v-if="!isPlay" style="width:74px;height:74px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"></image>
+					</view>
+				</swiper-item>
+			</block>
+		</swiper>
+		<view class="video_Bottom">
+			<view style="position: relative;">
+				<template v-if="isShowInfo">
+					<view class="video_detail">
+						<view class="video_Shop">
+							<view class="video_imgCt">
+								<image style="width:100%;height:100%;" :src="comGoodImg"/>
+							</view>
+							<view>
+								<view class="video_shopTitle">
+									{{comGoodTitle}}
+								</view>
+								<view class="video_price">
+									<text style="font-size:10px;">¥</text>{{comGoodPrice}}
+								</view>
+							</view>
+							<view class="video_cha" @click="isShowInfo=false">
+								<image style="width:100%;height:100%;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_close.png"></image>
+							</view>
+						</view>
+					</view>
+					<view class="video_Tra"></view>
+				</template>
+				<image class="good_Detail" @click="getShowInfo()" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_goods.png"></image>
+			</view>
+			<image class="good_other" @click="goHome()" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_home.png"></image>
+			<image class="good_other" @click="getBuy()" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_buy.png"></image>
+			<button class="v_fx" open-type="share">
+			  <image style="height:100%;width: 100%;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_share.png"></image>
+			</button>
+		</view>
+		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
+		<good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
+	</view>
+</template>
+<script>
+	import goodSku from "@/components/goods/goodsku";
+	import auth from "@/components/auth/index";
+	export default {
+		data() {
+			return {
+				vlist: [],
+				videoIndex:0,
+				swiperHeight:0,
+				
+				GoodsId:0, //商品id
+				nav: 0,
+				changeIndex:0,
+				
+				goodObj:{}, //商品对象
+				msg: {
+					pageIndex: 1,
+					pageSize: 1,
+					Name: '',
+					GoodsType: 0,
+					CategoryIds: '',
+					OrderBy: 0,
+					IsVideo:1
+				},
+				hkindex:0,
+				isShowInfo:true, //显示商品弹窗
+				
+				comGoodImg:'', //商品缩小图
+				comGoodTitle:'', //商品名称
+				comGoodPrice:'', //商品价格
+				showSku:false,
+				sku: {},
+				showAuth:false,
+				u: {},
+				
+				isPlay:true, //当前视频是否播放中
+			}
+		},
+		components: {
+		  goodSku,
+		  auth
+		},
+		onReady(){
+		},
+		onLoad(option){ 
+			console.log(option,'optionsss');
+			this.GoodsId = option.GoodsId;
+			uni.getSystemInfo({	//获取系统信息
+				success: (res) => {
+				   this.swiperHeight = res.windowHeight + 'px'
+				},
+				fail: (res) => {
+					console.log('error')
+				}
+			})
+			this.vlist=[];
+		},
+		methods: {
+			//返回上一页
+			redirectPrev() {
+				uni.navigateBack({
+					delta: 1,
+				});
+			},
+			// 滑动切换 
+			handleSlider(e) {
+				console.log(e);
+				this.hkindex = e.detail.current;
+				let videoContext = wx.createVideoContext("myVideo" + e.detail.current + "")
+				var indx = e.detail.current;
+				let videoContexta = wx.createVideoContext("myVideo" + indx + "")  
+				
+				
+				this.comGoodImg=this.vlist[this.hkindex].picUrl;
+			    this.comGoodTitle=this.vlist[this.hkindex].name;
+			    this.comGoodPrice=this.vlist[this.hkindex].price;
+				this.GoodsId = this.vlist[this.hkindex].id;
+				
+				this.sku=this.vlist[this.hkindex];
+				this.isPlay = true;
+				
+				videoContexta.pause();
+				videoContexta.seek(0);
+				videoContext.play();
+				let xz = this.vlist.length- e.detail.current ;
+				if (xz == 1) {
+				  this.msg.pageIndex++;
+				  this.getList();  //加载更多视频
+				}
+			},
+			//点击暂停
+			handleClicked(index){
+				if(this.isPlay){
+					this.pause(index)
+				}else{
+					this.play(index)
+				}
+			},
+			 // 播放
+			play(index) {
+				let videoContext = wx.createVideoContext("myVideo" + index,this)
+				videoContext.play()
+				this.isPlay = true
+			},
+			// 暂停
+			pause(index) {
+				let videoContext = wx.createVideoContext("myVideo" + index,this)
+				videoContext.pause()
+				this.isPlay = false
+			},
+			//获取传递过来商品信息
+			getGoodInfo(){
+				this.request2(
+				  {
+				    url: "/api/AppletGoods/GetAppletGoodsInfo",
+				    data: {
+				      GoodsId: this.GoodsId,
+				    },
+				  },
+				  (res) => {
+				    if (res.resultCode == 1) {
+						console.log(res,'商品');
+				      this.goodObj = res.data.goods;
+					  let obj={
+						  OriginalPrice:this.goodObj.original_price,
+						  id:this.goodObj.id,
+						  name:this.goodObj.name,
+						  picUrl:this.goodObj.cover_pic,
+						  price:this.goodObj.price,
+						  video_url:this.goodObj.video_url
+					  }
+					  this.vlist.push(obj);
+					  this.comGoodImg=this.goodObj.cover_pic;
+					  this.comGoodTitle=this.goodObj.name;
+					  this.comGoodPrice=this.goodObj.price;
+					  this.GoodsId = this.goodObj.id;
+					  this.sku=obj;
+				    } else {
+				      
+				    }
+				  }
+				);
+			},
+			//滚动加载的商品信息
+			getList(){
+				this.request2({
+						url: '/api/AppletGoods/GetAppletGoodsPageListForZY',
+						data: this.msg
+					},
+					res => {							
+						console.log(res,'resss');
+						if (res.resultCode == 1) {
+							var data=res.data.pageData;
+							if(data.length>0){
+								let obj={
+							      OriginalPrice:data[0].original_price,
+								  id:data[0].id,
+								  name:data[0].name,
+								  picUrl:data[0].cover_pic,
+								  price:this.goodObj.price,
+								  video_url:data[0].video_url
+								}
+								this.vlist.push(obj);
+							}
+						}
+					}
+				);
+			},
+			//回到首页
+			goHome(){
+				uni.redirectTo({ url: "/pages/index/index" });
+			},
+			//加入购物车或购买
+			getBuy(){
+				this.u = uni.getStorageSync('mall_UserInfo');
+				console.log(this.u,'uuu');
+				if (!this.u) {
+					this.u = {
+						nickName: '未登录',
+						avatarUrl: ''
+					};
+					this.showAuth = true;
+				} else {
+					this.showSku = true;
+				}
+			},
+			reloadUserinfo() {
+				this.u = uni.getStorageSync('mall_UserInfo');
+			},
+			//关闭登录窗口
+			gbAuth() {
+				this.showAuth = false;
+			},
+			//分享
+			onShareAppMessage(){
+				return {
+				  title:this.comGoodTitle,
+				  path: "/pages/video/index?GoodsId=" + this.GoodsId,
+				  imageUrl:this.comGoodImg
+				};	
+			},
+			//点击商品
+			getShowInfo(){
+				this.isShowInfo=!this.isShowInfo;
+			}
+			
+		},
+		mounted() {
+			this.getGoodInfo(); //获取传过来的数据
+			this.getList();
+		},
+		created(){
+			this.nav = uni.getMenuButtonBoundingClientRect().top;
+		},
+	}
+</script>
+
+<style>
+
+</style>