You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
479 lines
11 KiB
479 lines
11 KiB
<template>
|
|
<view class="video_wrapper">
|
|
<view class="videoCate"
|
|
:style="{top:statusBarHeight +'px',height:statusBarHeight +'px',lineHeight:statusBarHeight +'px'}">
|
|
<u-tabs :list="videoCateList" :activeStyle="{
|
|
color: '#fff',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)'
|
|
}" :inactiveStyle="{
|
|
color: '#fff',
|
|
transform: 'scale(1)'
|
|
}" @click="clickTabItem" keyName="cate_name">
|
|
<view slot="right" style="padding-left: 4px;" @tap="search()">
|
|
<u-icon name="search" size="24" color="#fff"></u-icon>
|
|
</view>
|
|
</u-tabs>
|
|
</view>
|
|
|
|
|
|
<view class="cashOutBtn" @click.stop="goCashOut">
|
|
提现
|
|
</view>
|
|
|
|
<swiper circular vertical duration="200" @click.stop="maskTouchend($event,changeIndex)" @change="changeSwiper"
|
|
:style="{height: screenHeight - statusBarHeight +'px'}">
|
|
<block v-for="(item,index) in videoList" :key="index">
|
|
<swiper-item>
|
|
<!-- <image :src="item.cover" mode="aspectFill" style="width: 100%;height: 100%;"></image> -->
|
|
<ls-dom-video :ref="'DomVideo'+index" v-if="index==changeIndex" :src="item.video" :autoplay="true"
|
|
:controls="false" @ended="endedVideo" @listener="listener"></ls-dom-video>
|
|
|
|
|
|
|
|
<view class="goodsDetail" v-if="goodsInfo" @click.stop="goGoodsDetail(goodsInfo)">
|
|
<image class="cover" :src="goodsInfo.goods_image_arr[0]" mode="aspectFit"></image>
|
|
<view class="infoBox">
|
|
<view class="title">
|
|
{{goodsInfo.goods_name}}
|
|
</view>
|
|
<view class="skuBox">
|
|
<view class="price">
|
|
￥{{goodsInfo.price}}
|
|
</view>
|
|
<view class="specName">
|
|
/ {{goodsInfo.unit}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
|
|
<!-- 底部tabBar -->
|
|
<view id="tab-bar"><diy-bottom-nav></diy-bottom-nav></view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
screenHeight: 0,
|
|
statusBarHeight: 0,
|
|
navBarHeight: 120,
|
|
// originList: [], // 源数据
|
|
// displaySwiperList: [], // swiper需要的数据
|
|
displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
|
|
originIndex: 0, // 记录源数据的下标
|
|
changeIndex: 0, //控制video是否渲染
|
|
page_count: 0,
|
|
page: 1, // 页数
|
|
page_size: 3, // 每页条数
|
|
flag: true,
|
|
|
|
// 操作视频参数
|
|
isStopPlay: false,
|
|
|
|
// 提现按钮参数
|
|
x: 600,
|
|
y: 600,
|
|
old: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
|
|
swiperCurrent: 0,
|
|
|
|
|
|
videoCateList: [],
|
|
videoCateId: 0,
|
|
videoList: [],
|
|
goodsInfo: {
|
|
goods_image_arr: []
|
|
},
|
|
formData: {
|
|
total_duration: 0, //视频总时长 单位： s
|
|
id: 0, //视频id
|
|
type: 0, //获得收益方式 1, 视频开始 2 视频结束 3 观看到一定时长 默认3
|
|
time: 0, //观看时长， 单位s type = 3 时生效 默认10
|
|
},
|
|
videoDuration: 0,
|
|
|
|
dataIsOver: false,
|
|
|
|
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
changeIndex: {
|
|
handler(newVal, oldVal) {
|
|
|
|
if (newVal == 2 && oldVal) {
|
|
this.$refs['DomVideo' + oldVal][0].pause()
|
|
if (newVal > oldVal && this.page_count > this.page) {
|
|
this.page++;
|
|
this.getVideoList()
|
|
}
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
computed: {
|
|
// canCircular() {
|
|
// console.log(Boolean((this.originIndex + 1 == this.originList.length ? 0 : this.originIndex + 1) == 1))
|
|
// return (this.originIndex + 1 == this.originList.length ? 0 : this.originIndex + 1) == 1;
|
|
// }
|
|
},
|
|
onLoad() {
|
|
this.getVideoConfig()
|
|
/* 获取系统信息 */
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
// 获取屏幕高度 减去底部导航栏高度
|
|
this.screenHeight = res.screenHeight - 120
|
|
// 获取状态栏高度
|
|
this.statusBarHeight = res.statusBarHeight
|
|
// 通过操作系统 确定自定义导航栏高度
|
|
if (res.system.substring(0, 3) == "iOS") {
|
|
this.navBarHeight = 42
|
|
} else {
|
|
this.navBarHeight = 40
|
|
}
|
|
}
|
|
})
|
|
this.getVideoCateList()
|
|
|
|
},
|
|
mounted() {
|
|
// this.getGoodsItem(this.videoList[this.changeIndex])
|
|
},
|
|
onShow() {
|
|
// this.$store.dispatch('getCartNumber');
|
|
},
|
|
methods: {
|
|
//获取视频收益配置 ———— 上线后取消传参
|
|
getVideoConfig() {
|
|
this.$api.sendRequest({
|
|
url: '/api/video/getConfig',
|
|
data: {
|
|
type: 1, //1视频开始 2视频结束 3观看到一定时长 默认3
|
|
time: 0, //观看时长，单位s type=3时生效 默认10
|
|
},
|
|
success: res => {
|
|
this.videoConfig = res.data
|
|
if (this.videoConfig.length < 3) {
|
|
uni.showToast({
|
|
title: '没有更多数据了',
|
|
icon: 'none',
|
|
})
|
|
// this.dataIsOver = true
|
|
// } else {
|
|
// this.dataIsOver = false
|
|
}
|
|
uni.setStorageSync('videoConfig', this.videoConfig)
|
|
}
|
|
})
|
|
},
|
|
//获取视频分类列表
|
|
getVideoCateList() {
|
|
this.$api.sendRequest({
|
|
url: '/api/video/getCateList',
|
|
data: {
|
|
|
|
},
|
|
success: res => {
|
|
// this.videoCateList = res.data.reverse()
|
|
this.videoCateList = res.data
|
|
this.videoCateId = this.videoCateList[0].id
|
|
this.getVideoList()
|
|
}
|
|
})
|
|
},
|
|
getVideoList() {
|
|
this.$api.sendRequest({
|
|
url: '/api/video/getList',
|
|
data: {
|
|
page: this.page,
|
|
page_size: this.page_size,
|
|
cid: this.videoCateId,
|
|
},
|
|
success: res => {
|
|
this.videoList = res.data.list
|
|
this.page_count = res.data.page_count
|
|
this.changeIndex = 0
|
|
if (this.videoList.length) {
|
|
this.getGoodsItem(this.videoList[0])
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 切换视频分类
|
|
clickTabItem(item) {
|
|
console.log('item', item);
|
|
this.videoCateId = item.id
|
|
this.changeIndex = 0
|
|
this.page = 1
|
|
this.getVideoList()
|
|
},
|
|
onChange(e) {
|
|
let windowWidth, windowHeight;
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
|
|
windowWidth = (res.windowWidth);
|
|
windowHeight = (res.windowHeight);
|
|
}
|
|
});
|
|
this.old.x = e.detail.x;
|
|
this.old.y = e.detail.y;
|
|
this.x = e.detail.x;
|
|
this.y = e.detail.y;
|
|
|
|
},
|
|
// 监听播放状态
|
|
listener(e) {
|
|
console.log('listener', e);
|
|
console.log('当前播放视频信息', this.videoList[this.changeIndex]);
|
|
console.log('收益配置信息', this.videoConfig);
|
|
this.formData = {
|
|
id: 0, //视频id
|
|
total_duration: 0, //视频总时长 单位： s
|
|
type: 0, //获得收益方式 1-视频开始 2-视频结束 3-观看到一定时长 默认3
|
|
time: 0, //观看时长， 单位s type = 3 时生效 默认10
|
|
}
|
|
this.formData = {
|
|
id: this.videoList[this.changeIndex].id,
|
|
total_duration: e.duration
|
|
}
|
|
// console.log('e.name', e.name);
|
|
switch (e.name) {
|
|
case 'play':
|
|
// console.log(666)
|
|
if (this.videoConfig.type == 1) {
|
|
this.formData.type = 1;
|
|
this.formData.time = 0;
|
|
}
|
|
break;
|
|
//暂停
|
|
//getVideoConfig取消传参后需判断 e.currentTime必须大于this.formData.time才可获取收益
|
|
case 'pause':
|
|
if (this.videoConfig.type == 3) {
|
|
this.formData.type = 3;
|
|
this.formData.time = Math.round(Number(e.currentTime));
|
|
}
|
|
break;
|
|
//播放
|
|
case 'ended':
|
|
if (this.videoConfig.type == 2) {
|
|
this.formData.type = 2;
|
|
this.formData.time = 0;
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
// console.log('111',this.formData.type, uni.getStorageSync('token'));
|
|
if (this.formData.type && uni.getStorageSync('token')) {
|
|
// 获得收益
|
|
this.videoSy()
|
|
}
|
|
|
|
},
|
|
videoSy() {
|
|
this.$api.sendRequest({
|
|
url: '/api/video/getVideoSy',
|
|
data: this.formData,
|
|
success: res => {
|
|
console.log('获得收益', res);
|
|
}
|
|
})
|
|
},
|
|
maskTouchend(e, index) {
|
|
if (this.isStopPlay) {
|
|
this.$refs['DomVideo' + index][0].play()
|
|
console.log('视频播放', this.changeIndex);
|
|
} else {
|
|
this.$refs['DomVideo' + index][0].pause()
|
|
console.log('视频暂停', this.changeIndex);
|
|
}
|
|
console.log(this.$refs['DomVideo' + index][0]);
|
|
this.isStopPlay = !this.isStopPlay
|
|
},
|
|
endedVideo() {
|
|
console.log('视频播放完了', this.changeIndex);
|
|
console.log(this.$refs['DomVideo' + index][0]);
|
|
// this.$refs['DomVideo' + this.changeIndex][0].play()
|
|
},
|
|
|
|
changeSwiper(event) {
|
|
|
|
console.log('changeSwiper', event);
|
|
this.isStopPlay = false
|
|
this.changeIndex = event.detail.current; // 设置当前视频
|
|
console.log(this.videoList[this.changeIndex]);
|
|
this.getGoodsItem(this.videoList[this.changeIndex])
|
|
|
|
|
|
if (uni.getStorageSync('token')) {
|
|
this.$api.sendRequest({
|
|
url: '/api/video/viewLog',
|
|
data: {
|
|
id: this.videoList[this.changeIndex].id,
|
|
},
|
|
success: res => {
|
|
console.log('视频观看记录', res);
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
this.videoConfig = uni.getStorageSync('videoConfig')
|
|
this.formData = {
|
|
id: this.videoList[this.changeIndex].id,
|
|
// total_duration: e.duration,
|
|
type: this.videoConfig.type,
|
|
time: this.videoConfig.time,
|
|
}
|
|
if (this.formData.type == 1 && uni.getStorageSync('token')) {
|
|
this.videoSy()
|
|
}
|
|
},
|
|
|
|
|
|
getGoodsItem(item) {
|
|
this.$api.sendRequest({
|
|
url: '/api/goodssku/detail',
|
|
data: {
|
|
goods_id: item.goods_id
|
|
},
|
|
success: res => {
|
|
this.goodsInfo = res.data.goods_sku_detail
|
|
}
|
|
});
|
|
},
|
|
search() {
|
|
this.$util.redirectTo('/page_video/videoList/search', {});
|
|
},
|
|
goGoodsDetail(row) {
|
|
this.$util.redirectTo('/page_goods/detail/detail', {
|
|
goods_id: row.goods_id
|
|
});
|
|
},
|
|
// 提现
|
|
goCashOut() {
|
|
this.$util.redirectTo('/page_video/video/cashOut', {});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.video_wrapper {
|
|
position: relative;
|
|
background: #000;
|
|
|
|
.videoCate {
|
|
position: absolute;
|
|
width: calc(100% - 60rpx);
|
|
padding: 0 30rpx;
|
|
z-index: 100;
|
|
color: #fff
|
|
}
|
|
|
|
.cashOutBtn {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
padding: 5rpx;
|
|
z-index: 11;
|
|
border: 1rpx solid #ccc;
|
|
box-shadow: 0rpx 5rpx 7rpx 5rpx rgba(117, 84, 0, 0.08);
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
bottom: 600rpx;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/deep/.uni-swiper-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.uni-swiper-slides {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.video-container {
|
|
width: 100%;
|
|
height: 50%;
|
|
position: relative;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
|
|
.uni-cover-view {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
uni-video {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsDetail {
|
|
position: absolute;
|
|
left: 30rpx;
|
|
bottom: 0rpx;
|
|
width: calc(100% - 120rpx);
|
|
height: 110rpx;
|
|
margin: 0 auto;
|
|
border-radius: 10rpx;
|
|
padding: 20rpx 30rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
|
|
.cover {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
}
|
|
}
|
|
|
|
.infoBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.skuBox {
|
|
display: flex;
|
|
|
|
.price {
|
|
margin-right: 10rpx;
|
|
color: #f33b50;
|
|
}
|
|
|
|
.specName {
|
|
/*1. 先强制一行内显示文本*/
|
|
white-space: nowrap;
|
|
/*2. 超出的部分隐藏*/
|
|
overflow: hidden;
|
|
/*3. 文字用省略号替代超出的部分*/
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|