Skip to content

M
mallapp
Commit 5e660ce2 authored by zhengke's avatar zhengke
Browse files
Options

修改视频

parent 62fcebba
Show whitespace changes
Inline Side-by-side
Showing with 214 additions and 185 deletions
pages/video/index.vue
View file @ 5e660ce2
<style> <style>
.video_Page{ .video_Page {
width:100%; width: 100%;
height:100%; height: 100%;
position: relative; position: relative;
} }
.video_Page .sharebox_top_nav { .video_Page .sharebox_top_nav {
width: 100%; width: 100%;
display: flex; display: flex;
position: absolute; position: absolute;
z-index:999; z-index: 999;
left:20px; left: 20px;
}
.video_Page .uni_vdplayer {
width: 100%;
height: 100%;
} }
.player-video{
width:100%; .video_Page .player-video {
/* height:100%; */ width: 100%;
height: 100%;
} }
.video_Bottom{
.video_Bottom {
position: absolute; position: absolute;
bottom:20px; bottom: 20px;
right:15px; right: 15px;
width:53%; width: 53%;
height:42px; height: 42px;
z-index:999; z-index: 999;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.good_Detail{
width:50px; .good_Detail {
height:50px; width: 50px;
height: 50px;
} }
.good_other{
width:40px; .good_other {
height:40px; width: 40px;
height: 40px;
} }
.video_detail{
.video_detail {
position: absolute; position: absolute;
width:210px; width: 210px;
height:65px; height: 65px;
top:-80px; top: -80px;
left:-230%; left: -230%;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
padding:5px; padding: 5px;
} }
.video_Tra{
.video_Tra {
width: 0; width: 0;
height: 0; height: 0;
border-left: 7px solid transparent; border-left: 7px solid transparent;
border-right: 7px solid transparent; border-right: 7px solid transparent;
border-top: 10px solid #fff; border-top: 10px solid #fff;
position: absolute; position: absolute;
top:-16px; top: -16px;
left:18px; left: 18px;
} }
.video_cha{
width:17px; .video_cha {
height:17px; width: 17px;
height: 17px;
position: absolute; position: absolute;
right:-5px; right: -5px;
top:-5px; top: -5px;
} }
.video_Shop{
.video_Shop {
display: flex; display: flex;
position: relative; position: relative;
} }
.video_imgCt{
width:55px; .video_imgCt {
height:55px; width: 55px;
margin-right:5px; height: 55px;
margin-right: 5px;
} }
.video_shopTitle{
width:114px; .video_shopTitle {
width: 114px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size:11px; font-size: 11px;
color:#111111; color: #111111;
} }
.video_price{
color:#FF3F47; .video_price {
font-size:13px; color: #FF3F47;
margin-top:6px; font-size: 13px;
margin-top: 6px;
} }
.v_fx{
.v_fx {
width: 40px; width: 40px;
height: 40px; height: 40px;
border: none; border: none;
...@@ -95,21 +113,24 @@ ...@@ -95,21 +113,24 @@
line-height: unset; line-height: unset;
background: none; background: none;
} }
.video_Page button:after{
.video_Page button:after {
border: none; border: none;
} }
.vd-cover{
.vd-cover {
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
width:100%; width: 100%;
height:100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
video::-webkit-media-controls { video::-webkit-media-controls {
display:none !important; display: none !important;
} }
</style> </style>
<template> <template>
...@@ -119,16 +140,15 @@ ...@@ -119,16 +140,15 @@
<u-icon name="arrow-left" size="48" color="#fff"></u-icon> <u-icon name="arrow-left" size="48" color="#fff"></u-icon>
</view> </view>
</view> </view>
<swiper :interval="3000" :duration="100" :vertical="true" :current="videoIndex" @change="handleSlider" :style="{'height':swiperHeight}"> <swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" :style="{'height':swiperHeight}">
<block v-for="(item,index) in vlist" :key="index"> <block v-for="(item,index) in vlist" :key="index">
<swiper-item style="width:100%;height:100%"> <swiper-item>
<view class="uni_vdplayer"> <view class="uni_vdplayer">
<video :id="'myVideo' + index" :ref="'myVideo' + index" v-if="index==hkindex||index==hkindex-1||index==hkindex+1" <video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :loop="true" :show-progress="true"
class="player-video" :loop="true" :show-progress="true" :controls="false" :controls="false" :show-center-play-btn="false" :src="item.video_url" :autoplay="index==videoIndex" />
:show-center-play-btn="false" :style="{'height':swiperHeight}" :src="item.video_url" autoplay="true" />
</view> </view>
<!-- 中间播放按钮 --> <!-- 中间播放按钮 -->
<view class="vd-cover flexbox" @click="handleClicked(index)"> <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> <image v-if="!isPlay" style="width:74px;height:74px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"></image>
</view> </view>
</swiper-item> </swiper-item>
...@@ -140,7 +160,7 @@ ...@@ -140,7 +160,7 @@
<view class="video_detail"> <view class="video_detail">
<view class="video_Shop"> <view class="video_Shop">
<view class="video_imgCt"> <view class="video_imgCt">
<image style="width:100%;height:100%;" :src="comGoodImg"/> <image style="width:100%;height:100%;" :src="comGoodImg" />
</view> </view>
<view> <view>
<view class="video_shopTitle"> <view class="video_shopTitle">
...@@ -176,14 +196,14 @@ ...@@ -176,14 +196,14 @@
data() { data() {
return { return {
vlist: [], vlist: [],
videoIndex:0, videoIndex: 0,
swiperHeight:0, swiperHeight: 0,
GoodsId:0, //商品id GoodsId: 0, //商品id
nav: 0, nav: 0,
changeIndex:0, changeIndex: 0,
goodObj:{}, //商品对象 goodObj: {}, //商品对象
msg: { msg: {
pageIndex: 1, pageIndex: 1,
pageSize: 1, pageSize: 1,
...@@ -191,40 +211,38 @@ ...@@ -191,40 +211,38 @@
GoodsType: 0, GoodsType: 0,
CategoryIds: '', CategoryIds: '',
OrderBy: 0, OrderBy: 0,
IsVideo:1 IsVideo: 1
}, },
hkindex:0, hkindex: 0,
isShowInfo:true, //显示商品弹窗 isShowInfo: true, //显示商品弹窗
comGoodImg:'', //商品缩小图 comGoodImg: '', //商品缩小图
comGoodTitle:'', //商品名称 comGoodTitle: '', //商品名称
comGoodPrice:'', //商品价格 comGoodPrice: '', //商品价格
showSku:false, showSku: false,
sku: {}, sku: {},
showAuth:false, showAuth: false,
u: {}, u: {},
isPlay:true, //当前视频是否播放中 isPlay: true, //当前视频是否播放中
videoContextList: []
} }
}, },
components: { components: {
goodSku, goodSku,
auth auth
}, },
onReady(){ onReady() {
this.getGoodInfo(); //获取传过来的数据
this.getList();
}, },
onLoad(option){ onLoad(option) {
console.log(option,'optionsss'); console.log(option, 'optionsss');
this.GoodsId = option.GoodsId; this.GoodsId = option.GoodsId;
uni.getSystemInfo({ //获取系统信息 this.sysheight = uni.getSystemInfoSync().windowHeight;
success: (res) => { this.swiperHeight = `${this.sysheight}px`
this.swiperHeight = res.windowHeight + 'px' this.vlist = [];
},
fail: (res) => {
console.log('error')
}
})
this.vlist=[];
}, },
methods: { methods: {
//返回上一页 //返回上一页
...@@ -235,54 +253,54 @@ ...@@ -235,54 +253,54 @@
}, },
// 滑动切换 // 滑动切换
handleSlider(e) { handleSlider(e) {
console.log(e); let curIndex = e.detail.current
this.hkindex = e.detail.current; console.log(curIndex);
let videoContext = wx.createVideoContext("myVideo" + e.detail.current + "") if(curIndex>0){
var indx = e.detail.current; this.videoContextList[curIndex-1].pause()
let videoContexta = wx.createVideoContext("myVideo" + indx + "") }
if(curIndex<this.vlist.length-1){
this.videoContextList[curIndex+1].pause()
}
this.videoContextList[curIndex].play()
this.videoContextList[curIndex].seek(0)
this.isPlay=true
this.videoIndex = curIndex;
this.comGoodImg=this.vlist[this.hkindex].picUrl; console.log(this.vlist,'this.vlist');
this.comGoodTitle=this.vlist[this.hkindex].name; this.comGoodImg = this.vlist[this.curIndex].picUrl;
this.comGoodPrice=this.vlist[this.hkindex].price; this.comGoodTitle = this.vlist[this.curIndex].name;
this.GoodsId = this.vlist[this.hkindex].id; this.comGoodPrice = this.vlist[this.curIndex].price;
this.GoodsId = this.vlist[this.curIndex].id;
this.sku=this.vlist[this.hkindex]; this.sku = this.vlist[this.curIndex];
this.isPlay = true;
videoContexta.pause(); let xz = this.vlist.length - e.detail.current;
videoContexta.seek(0);
videoContext.play();
let xz = this.vlist.length- e.detail.current ;
if (xz == 1) { if (xz == 1) {
this.msg.pageIndex++; this.msg.pageIndex++;
this.getList(); //加载更多视频 this.getList(); //加载更多视频
} }
}, },
//点击暂停 //点击暂停
handleClicked(index){ handleClicked(index) {
if(this.isPlay){ if (this.isPlay) {
this.pause(index) this.pause(index)
}else{ } else {
this.play(index) this.play(index)
} }
}, },
// 播放 // 播放
play(index) { play(index) {
let videoContext = wx.createVideoContext("myVideo" + index,this) this.videoContextList[index].play()
videoContext.play()
this.isPlay = true this.isPlay = true
}, },
// 暂停 // 暂停
pause(index) { pause(index) {
let videoContext = wx.createVideoContext("myVideo" + index,this) this.videoContextList[index].pause()
videoContext.pause()
this.isPlay = false this.isPlay = false
}, },
//获取传递过来商品信息 //获取传递过来商品信息
getGoodInfo(){ getGoodInfo() {
this.request2( this.request2({
{
url: "/api/AppletGoods/GetAppletGoodsInfo", url: "/api/AppletGoods/GetAppletGoodsInfo",
data: { data: {
GoodsId: this.GoodsId, GoodsId: this.GoodsId,
...@@ -290,22 +308,29 @@ ...@@ -290,22 +308,29 @@
}, },
(res) => { (res) => {
if (res.resultCode == 1) { if (res.resultCode == 1) {
console.log(res,'商品'); console.log(res, '商品');
this.goodObj = res.data.goods; this.goodObj = res.data.goods;
let obj={ let obj = {
OriginalPrice:this.goodObj.original_price, OriginalPrice: this.goodObj.original_price,
id:this.goodObj.id, id: this.goodObj.id,
name:this.goodObj.name, name: this.goodObj.name,
picUrl:this.goodObj.cover_pic, picUrl: this.goodObj.cover_pic,
price:this.goodObj.price, price: this.goodObj.price,
video_url:this.goodObj.video_url video_url: this.goodObj.video_url
} }
this.vlist.push(obj); this.vlist.push(obj);
this.comGoodImg=this.goodObj.cover_pic; this.comGoodImg = this.goodObj.cover_pic;
this.comGoodTitle=this.goodObj.name; this.comGoodTitle = this.goodObj.name;
this.comGoodPrice=this.goodObj.price; this.comGoodPrice = this.goodObj.price;
this.GoodsId = this.goodObj.id; this.GoodsId = this.goodObj.id;
this.sku=obj; this.sku = obj;
this.videoContextList.push(uni.createVideoContext('myVideo0', this));
// this.videoContextList = []
// console.log(this.vlist,'vlist');
// for (var i = 0; i < this.vlist.length; i++) {
// }
console.log(this.videoContextList,'第一次加载');
} else { } else {
} }
...@@ -313,38 +338,44 @@ ...@@ -313,38 +338,44 @@
); );
}, },
//滚动加载的商品信息 //滚动加载的商品信息
getList(){ getList() {
this.request2({ this.request2({
url: '/api/AppletGoods/GetAppletGoodsPageListForZY', url: '/api/AppletGoods/GetAppletGoodsPageListForZY',
data: this.msg data: this.msg
}, },
res => { res => {
console.log(res,'resss'); console.log(res, 'resss');
if (res.resultCode == 1) { if (res.resultCode == 1) {
var data=res.data.pageData; var data = res.data.pageData;
if(data.length>0){ if (data.length > 0) {
let obj={ let obj = {
OriginalPrice:data[0].original_price, OriginalPrice: data[0].original_price,
id:data[0].id, id: data[0].id,
name:data[0].name, name: data[0].name,
picUrl:data[0].cover_pic, picUrl: data[0].cover_pic,
price:this.goodObj.price, price: this.goodObj.price,
video_url:data[0].video_url video_url: data[0].video_url
} }
this.vlist.push(obj); this.vlist.push(obj);
this.videoContextList = []
for (var i = 0; i < this.vlist.length; i++) {
this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
}
} }
} }
} }
); );
}, },
//回到首页 //回到首页
goHome(){ goHome() {
uni.redirectTo({ url: "/pages/index/index" }); uni.redirectTo({
url: "/pages/index/index"
});
}, },
//加入购物车或购买 //加入购物车或购买
getBuy(){ getBuy() {
this.u = uni.getStorageSync('mall_UserInfo'); this.u = uni.getStorageSync('mall_UserInfo');
console.log(this.u,'uuu'); console.log(this.u, 'uuu');
if (!this.u) { if (!this.u) {
this.u = { this.u = {
nickName: '未登录', nickName: '未登录',
...@@ -363,24 +394,22 @@ ...@@ -363,24 +394,22 @@
this.showAuth = false; this.showAuth = false;
}, },
//分享 //分享
onShareAppMessage(){ onShareAppMessage() {
return { return {
title:this.comGoodTitle, title: this.comGoodTitle,
path: "/pages/video/index?GoodsId=" + this.GoodsId, path: "/pages/video/index?GoodsId=" + this.GoodsId,
imageUrl:this.comGoodImg imageUrl: this.comGoodImg
}; };
}, },
//点击商品 //点击商品
getShowInfo(){ getShowInfo() {
this.isShowInfo=!this.isShowInfo; this.isShowInfo = !this.isShowInfo;
} }
}, },
mounted() { mounted() {
this.getGoodInfo(); //获取传过来的数据
this.getList();
}, },
created(){ created() {
this.nav = uni.getMenuButtonBoundingClientRect().top; this.nav = uni.getMenuButtonBoundingClientRect().top;
}, },
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment