Skip to content

U
uniapp_vedio
Commit d7567ba5 authored by jyx's avatar jyx
Browse files
Options

添加二级视频页

parent 363d66de
Hide whitespace changes
Inline Side-by-side
Showing with 764 additions and 73 deletions
vedio/pages.json
View file @ d7567ba5
......@@ -117,7 +117,7 @@
"network": "all", //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
"packages": ["pagesA"] //进入页面后预下载分包
},
"pages/spread/spread": {
"pages/recommend/recommend": {
"network": "all", //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
"packages": ["pagesC"] //进入页面后预下载分包
},
......@@ -133,5 +133,15 @@
"bounce": "none",
"scrollIndicator": "none"
}
},
"condition" : { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [
{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}
]
}
}
\ No newline at end of file
vedio/pages/recommend/follow.vue
View file @ d7567ba5
<template>
<view style="background: white;">
<view style="position: absolute;right: 20rpx;top: 26rpx;" @click="isEditStyle = !isEditStyle">
<view style="position: absolute;left: 20rpx;top: 26rpx;" @click="isEditStyle = !isEditStyle">
<image style="width: 60rpx;height: 60rpx;" mode="widthFix"
:src="isEditStyle?'/static/video/scRed.png':'/static/video/aixinRed.png'" />
</view>
......@@ -15,9 +15,10 @@
<image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
<view class="text" style="font-size: 26rpx;color: black;">{{value.name}}</view>
<view class="text" style="font-size: 22rpx;color: gray;">{{value.name}}</view>
<view v-if="isEditStyle" @click="cbClick(key)"
style="position: absolute;background: #000000; opacity: 0.6;;width: 100%;height: 100%;top: 0;border-radius:20rpx;">
<u-checkbox-group class="cb" @change="onChange(key)">
<view v-if="isEditStyle" @click.stop="cbClick(key)"
style="position: absolute;background: #000000; opacity: 0.6;;width: 100%;height: 100%;top: 0;border-radius:20rpx;
padding-left: 20rpx;padding-top: 20rpx;">
<u-checkbox-group @change="onChange(key)">
<u-checkbox active-color="red" shape="circle" :checked="value.isChecked" />
</u-checkbox-group>
</view>
......@@ -57,20 +58,16 @@
this.windowHeight = uni.getSystemInfoSync().windowHeight
this.queryList()
},
queryList() {
let this_ = this
let data = {};
uni.request({
url: 'https://xjc.demo.hongcd.com/api/video/indexdata',
data: data,
success: data => {
let _data = data.data.new
for (let i = 0; i < _data.length; i++) {
_data[i].isChecked = false
}
this.dataList = _data
},
fail: (data, code) => {}
loadData() {
// 收藏记录
this.post({
url: '/vedio/collectList',
showLoading: false,
success: ({
data
}) => {
this.dataList = data.list;
}
});
},
click(id, key) {
......@@ -98,7 +95,27 @@
}
},
deleteCollect() {
console.log("deleteCollect")
let list = []
for (let i = 0; i < this.dataList.length; i++) {
list.add(this.dataList[i])
}
// 取消收藏
this.post({
url: '/vedio/cancelCollect',
data: {
list
},
showLoading: false,
success: ({
data
}) => {
this.isEditStyle = false
uni.showToast({
title: "删除成功"
})
}
});
},
}
}
......@@ -119,8 +136,9 @@
}
.cb {
left: 10rpx;
top: 10rpx;
position: absolute;
margin-top: 10rpx;
margin-left: 10rpx;
// position: absolute;
}
</style>
\ No newline at end of file
vedio/pages/recommend/recommend.vue
View file @ d7567ba5
......@@ -11,7 +11,7 @@
</view>
</view>
<swiper class="swiper" @change="swiperChange" :current="current">
<swiper class="swiper" @change="swiperChange" :current="current" :disable-touch="showEditBar">
<swiper-item class="swiper-item">
<followPage v-on:showEditBarR="showEditBarR" ref="follow" />
......@@ -44,8 +44,8 @@
},
data() {
return {
current: 0,
tabIndex: 0,
current: 1,
tabIndex: 1,
tabs: [{
title: '追剧',
value: 0
......
vedio/pages/recommend/recommendVideo.vue
View file @ d7567ba5
......@@ -5,52 +5,53 @@
<swiper-item v-for="(list, index) in displaySwiperList" :key="index">
<view v-if="Math.abs(displayIndex-index)!=0" style="z-index: 999;height: 100%;">
<video v-if="Math.abs(displayIndex-index)!=0" :id="list._id" :controls="controls" :autoplay="false"
:loop="false" @ended="ended" @controlstoggle="controlstoggle" @click="tapVideoHover()"
:style="'width:100%; height:100%;'" :src="list.src">
<video muted="muted" v-if="Math.abs(displayIndex-index)!=0" :id="''+list.vedioId"
:controls="controls" :autoplay="false" :loop="false" @ended="ended"
@controlstoggle="controlstoggle" :show-fullscreen-btn="false" @click="tapVideoHover()"
:style="'width:100%; height:100%;'" :src="list.recommendUrl">
</video>
</view>
<!-- :poster="list.img" -->
<view v-if="Math.abs(displayIndex-index)==0" style="height: 100%;">
<video v-if="Math.abs(displayIndex-index)==0" :id="list._id" :controls="controls" :isplay="true"
:loop="!isplay" @ended="ended" @controlstoggle="controlstoggle" @click="tapVideoHover()"
:enable-progress-gesture="false" :style="'width:100%; height:100%;'" :src="list.src">
<video muted="muted" v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId"
:controls="controls" :isplay="true" :loop="!isplay" @ended="ended"
@controlstoggle="controlstoggle" :show-fullscreen-btn="false" @click="tapVideoHover()"
:enable-progress-gesture="false" :style="'width:100%; height:100%;'" :src="list.recommendUrl">
</video>
</view>
></image> -->
<view v-if="isqp" class="userInfo flex">
<!-- 点赞 -->
<view class="flex" @click.stop="cLike(list.like,list.id,list.mid);"
<view class="flex" @click.stop="cLike(list.collect,list.id,list.mid);"
style="opacity: 0.9; margin-top: 10rpx;">
<image v-if="list.like*1==1" src="@/static/video/aixin.png"
style="width: 80rpx; height: 80rpx; position: absolute;right: 10rpx;"></image>
<image v-if="list.like*1==2" src="@/static/video/aixinRed.png"
style="width: 80rpx; height: 80rpx; position: absolute;right: 10rpx;"></image>
<image @click="collect(list.vedioId,index)" v-if="list.collect==0"
src="@/static/video/aixin.png" />
<image @click="cancelCollect(list.vedioId,index)" v-if="list.collect==1"
src="@/static/video/aixinRed.png" />
<text
style="margin-top: 100rpx;color: #FFFFFF;font-size: 30rpx; text-align: center;font-weight: bold;"
:class="{'likeNumActive':list.like}">{{list.like_n}}</text>
style="margin-top: 110rpx;color: #FFFFFF;font-size: 26rpx; text-align: center;font-weight: bold;"
:class="{'likeNumActive':list.collect!=0}">{{list.hot}}</text>
</view>
<!-- 分享 -->
<view class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image src="@/static/video/share-fill.png"
style="width: 80rpx; height: 80rpx; position: absolute;right: 10rpx;"></image>
<image src="@/static/video/share-fill.png" />
<text
style="margin-top: 100rpx; color: #FFFFFF;font-size: 30rpx; text-align: center; font-weight: bold;">分享</text>
style="margin-top: 110rpx; color: #FFFFFF;font-size: 26rpx; text-align: center; font-weight: bold;">分享</text>
<button open-type="share"
style="position: absolute;;background: none; width: 80rpx; height: 80rpx; right: 10rpx;"
@click.stop="reShare"></button>
</view>
</view>
<!-- 最底下的文字部分 -->
<view v-if="isqp" class="contentcd flex">
<text class="userName"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text><!-- i={{i}} -->
<text class="wordss"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.msg}}</text><!-- k={{k}} -->
<text class="words" @click.stop="detail(list.id,0)"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.namets}}</text><!-- k={{k}} -->
<view v-if="isqp" class="contentcd flex" @click.stop="detail(list)">
<text class="userName">{{list.title}}</text>
<text class="words">{{'第'+list.recommendIndex+'集'}}</text>
<view class="wordss2">
<image src="@/static/video/layers.png" />
<text
class="wordss">{{'共'+list.vedioTotal+'集' + ((list.completeStatus==0)?' 已完结':' 更新中')}}</text>
<text class="wordsss">{{(list.completeStatus==0)?'下一集':'看全部'}}</text>
</view>
</view>
</swiper-item>
</swiper>
......@@ -95,6 +96,8 @@
onLoad(e) {
this.windowWidth = uni.getSystemInfoSync().windowWidth
this.windowHeight = uni.getSystemInfoSync().windowHeight
this.show()
},
methods: {
reShare() {
......@@ -133,15 +136,35 @@
show() {
if (this.isFirstLoad) {
this.isFirstLoad = false
this.queryRecommend()
// this.queryRecommend()
this.queryList()
} else {
this.videoContext?.play()
}
},
stop() {
stop() {
audo.pause()
this.videoContext?.pause()
},
queryList() {
// 推荐
this.post({
url: '/vedio/autoList',
showLoading: false,
success: ({
data
}) => {
var msg = data.list
for (let i = 0; i < msg.length; i++) {
this.originList.push(msg[i])
}
if (this.page == 1) {
this.initSwiperData();
}
this.page = this.page + 1
}
});
},
queryRecommend() {
uni.request({
url: this.urls,
......@@ -203,18 +226,19 @@
this.oid = this.originList.length - 1
}
console.log('++++++++++++上一条播放数据 Index:', this.oid)
// audo.pause()
this.videoContext = uni.createVideoContext(this.originList[this.oid]._id, this)
this.videoContext.pause()
// audo.pause()
this.videoContext = uni.createVideoContext("" + this.originList[this.oid].vedioId, this)
this.videoContext.pause()
this.videoContext.stop()
setTimeout(() => {
console.log('qqqqqq:', this.originList[originIndex]._id)
this.videoContext = uni.createVideoContext(this.originList[originIndex]._id, this)
console.log('qqqqqq:', this.originList[originIndex].vedioId)
this.videoContext = uni.createVideoContext("" + this.originList[originIndex].vedioId, this)
this.videoContext.play()
}, 500)
var pCount = this.originList.length - this.playCount
if (originIndex == pCount && this.nodate) {
this.queryRecommend()
// this.queryRecommend()
this.queryList()
}
},
/**
......@@ -248,8 +272,9 @@
console.log(e.detail.show);
this.issp = e.detail.show
},
detail(vid, mid) {
detail(detail) {
navigateTo(`/pagesC/video/videoDetail?data=` + encodeURIComponent(JSON.stringify(detail)) +
`&playNext=1`)
},
cLike(sss, vid, mid) {
if (uni.getStorageSync("userinfo")) {
......@@ -259,6 +284,34 @@
return false
}
},
collect(vedioId, index) {
this.dataList[index].collect = 1
// 收藏
this.post({
url: '/vedio/collect',
data: {
vedioId
},
showLoading: false,
success: ({
data
}) => {}
});
},
cancelCollect(vedioId, index) {
this.dataList[index].collect = 0
// 取消收藏
this.post({
url: '/vedio/cancelCollect',
data: {
vedioId
},
showLoading: false,
success: ({
data
}) => {}
});
},
loginTips() {
uni.showModal({
title: '温馨提示',
......@@ -295,8 +348,15 @@
z-index: 99;
bottom: 30%;
right: 10px;
width: 100rpx;
width: 90rpx;
flex-direction: column;
image {
width: 70rpx;
height: 70rpx;
position: absolute;
right: 10rpx;
}
}
.likeIco,
......@@ -320,9 +380,9 @@
.contentcd {
z-index: 99;
width: 100%;
position: absolute;
bottom: 30px;
padding: 15rpx;
bottom: 32px;
color: #ffffff;
flex-direction: column;
align-items: flex-start;
......@@ -331,19 +391,45 @@
.userName {
font-size: 30rpx;
color: #ffffff;
margin-top: 80upx;
margin-left: -12rpx;
margin-left: 10rpx;
}
.words {
margin-top: 16rpx;
font-size: 30rpx;
.wordss {
font-size: 26rpx;
color: #ffffff;
margin-bottom: 20rpx;
margin-left: 10rpx;
}
.wordss {
margin-top: 10rpx;
.wordss2 {
width: 100%;
height: 60rpx;
opacity: 0.6;
background: black;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 20rpx;
image {
margin-left: 10rpx;
width: 30rpx;
height: 30rpx;
}
.wordsss {
margin-right: 10rpx;
margin-left: auto;
font-size: 22rpx;
color: #ffffff;
padding: 3rpx 10rpx;
border-radius: 30rpx;
background: red;
}
}
.words {
margin-top: 20rpx;
margin-left: 10rpx;
font-size: 26rpx;
color: #ffffff;
}
......
vedio/pagesC/video/videoDetail.nvue → vedio/pagesC/video/videoDetail.vue
View file @ d7567ba5
......@@ -3,49 +3,49 @@
<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
<swiper-item v-for="(list, index) in displaySwiperList" :key="index" :style="'width:100%; height:100%;'">
<view :style="'width:100%; height:100%;'">
<video v-if="Math.abs(displayIndex-index)==0 && list.src" :id="list._id" :controls="controls"
:loop="!isplay" :enable-progress-gesture="false" :show-center-play-btn="false"
:show-loading="true" :show-fullscreen-btn="false" @ended="ended"
<video v-if="Math.abs(displayIndex-index)==0 && list.vedioUrl" :id="list.vedioId"
:controls="controls" :loop="!isplay" :enable-progress-gesture="false" :auto-play="true"
:show-center-play-btn="false" :show-loading="true" :show-fullscreen-btn="false" @ended="ended"
@controlstoggle="controlstoggle" @click="tapVides()" @timeupdate="timeupdate"
:style="'width:100%; height:100%;'" :src="list.src" :poster="list.img" class="tsvideo">
:style="'width:100%; height:100%;'" :src="list.vedioUrl" :poster="data.coverImage"
class="tsvideo">
</video>
<view v-if="isqp" class="userInfo">
<!-- 点赞 -->
<view @click.stop="cLike(list.like,list.pid,list.mid);"
style="opacity: 0.9; margin-top: 17rpx;">
<image v-if="list.like*1==1" src="@/static/video/aixin.png"
style="width: 80rpx; height: 80rpx; position: absolute; right: 6px;"></image>
<image v-if="list.like*1==2" src="@/static/video/aixinRed.png"
style="width: 80rpx; height: 80rpx; position: absolute; right: 6px;"></image>
<view class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image @click.stop="collect(data.vedioId,index)" v-if="data.collect==0"
src="@/static/video/aixin.png" />
<image @click.stop="cancelCollect(data.vedioId,index)" v-if="data.collect==1"
src="@/static/video/aixinRed.png" />
<text
style="color: #FFFFFF; font-size: 30rpx; text-align: center; margin-top: 80rpx; font-weight: bold;"
:class="{'likeNumActive':list.like}">{{list.like_n}}</text>
style="margin: 0 auto;margin-top: 110rpx;color: #FFFFFF;font-size: 26rpx;font-weight: bold;"
:class="{'likeNumActive':data.collect!=0}">{{data.hot}}</text>
</view>
<!-- 分享 -->
<view style="opacity: 0.9; margin-top: 17rpx;">
<image src="@/static/video/share-fill.png"
style="width: 80rpx; height: 80rpx; position: absolute; right: 10rpx;"></image>
<view class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image src="@/static/video/share-fill.png" />
<text
style="color: #FFFFFF; font-size: 30rpx; text-align: center; font-weight: bold; margin-top: 80rpx;">分享</text>
style="margin: 0 auto;margin-top: 110rpx; color: #FFFFFF;font-size: 26rpx; font-weight: bold;">分享</text>
<button open-type="share"
style="position: absolute; background: none; width: 100%; height: 100%;"
@click.stop="share"></button>
style="position: absolute;;background: none; width: 80rpx; height: 80rpx; right: 10rpx;"
@click.stop="reShare"></button>
</view>
</view>
<!-- 最底下的文字部分 -->
<view v-if="isqp" class="contentcd">
<text class="userName"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text><!-- i={{i}} -->
<text class="wordss"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.msg}}</text><!-- k={{k}} -->
<text class="words" @click.stop="sellxj()"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.namets}}</text><!-- k={{k}} -->
<view v-if="isqp" class="contentcd flex">
<text class="userName">{{data.title}}</text>
<text class="words">{{list.title}}</text>
<view class="wordss2" @click.stop="sellxj()">
<image src="@/static/video/layers.png" />
<text
class="wordss">{{'共'+data.vedioTotal+'集' + ((data.completeStatus==0)?' 已完结':' 更新中')}}</text>
<image class="wordsss" src="@/static/up.png"></image>
</view>
</view>
<!-- play-btn-position="center" -->
<view v-if="Math.abs(displayIndex-index)!=0 || !list.src" class="videoHover tsimg"
<view v-if="Math.abs(displayIndex-index)!=0 || !list.vedioUrl" class="videoHover tsimg"
@click.stop="tapVideoHover(index,list.pays)"
:style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'">
<image :src="list.img"
<image :src="data.coverImage"
:style="'width: 100%; height:'+heightxw+'%; background-color: #000; position: absolute;'"
mode="aspectFit"></image>
<image class="playState" src="@/static/video/play.png"></image>
......@@ -62,16 +62,15 @@
<view style="display: flex; flex-direction: column;">
<view style="display: flex; flex-direction: row;">
<image src="@/static/video/layers.png"
style="width: 20px; height: 20px; margin-top: 10px; margin-left: 20px;"></image>
style="width: 40rpx; height: 40rpx; margin-top: 20rpx; margin-left: 20rpx;"></image>
<view
:style="'font-size: 16px; font-weight: bold; color: #FFFFFF; margin-top: 9px; height: 22px; margin-left: 20px; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">
:style="'font-size: 30rpx; font-weight: bold; color: #FFFFFF; margin-top: 20rpx; height: 40rpx; margin-left: 20rpx; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">
当前播放第{{ Number(originIndex+1) }}个视频
</view>
</view>
<!-- <view :style="'font-size: 12px; color: #FFFFFF; margin-top: 2px; height: 18px; margin-left: 20px; opacity: 0.6; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">这是第{{ Number(k+1) }}个视频</view> -->
</view>
<image @click="down" src="@/static/video/down.png"
style="width: 30px; height: 30px; margin-top: 5px; position: absolute; right: 20px;">
style="width: 50rpx; height: 50rpx; margin-top: 20rpx; position: absolute; right: 20rpx;">
</image>
</view>
</view>
......@@ -80,25 +79,24 @@
<block v-for="(list,index) in originList">
<view @click="selectThisVideo(index,list.pays)"
:style="'width: '+ (windowWidth) +'px; display: flex; flex-direction: row;'">
<image :src="list.img" mode="aspectFill"
style="width: 70px; height: 80px; margin-top: 15px; margin-left: 15px; border-radius: 5px;">
<image :src="data.coverImage" mode="aspectFill"
style="width: 100rpx; height: 120rpx; margin-top: 20rpx; margin-left: 20rpx; border-radius: 10rpx;">
</image>
<view style="display: flex; flex-direction: column; margin-top: 15px; margin-left: 10px;">
<view style="display: flex; flex-direction: row;">
<view style="font-size: 18px; color: #FFFFFF; font-weight: bold;">{{list.name}}
</view>
<image v-if="list.pays*1==1" src="@/static/video/lock.png"
style="width: 50rpx; height: 50rpx; margin-left: 20rpx;"></image>
<view style="display: flex; flex-direction: column; margin-top: 20rpx; margin-left: 20rpx;">
<view :style="'font-size: 26rpx; color: #FFFFFF; margin-top: 20rpx; overflow: hidden;'">
{{data.title}}
</view>
<view
:style="'font-size: 16px; color: #FFFFFF; margin-top: 5px; width: '+ (windowWidth*0.7) +'px; overflow: hidden;'">
:style="'font-size: 26rpx; color: #FFFFFF; margin-top: 10rpx; overflow: hidden; opacity: 0.6;'">
{{list.title}}
</view>
<view
:style="'font-size: 16px; color: #FFFFFF; margin-top: 5px; width: '+ (windowWidth*0.7) +'px; overflow: hidden; opacity: 0.6;'">
{{list.msg}}
</view>
</view>
<view v-if="index == originIndex"
style="font-size: 26rpx; color: #FFFFFF;margin-left:30rpx;margin-top:30rpx;">
{{'正在播放中...'}}
</view>
<image v-if="(index+1)>data.unlockIndex" src="@/static/video/lock.png"
style="width: 50rpx; height: 50rpx; margin: auto 20rpx auto auto;"></image>
</view>
</block>
<view style="width: 1px; height: 1px; margin-top: 30px;"></view>
......@@ -111,74 +109,19 @@
<view style="display: flex; flex-direction: column;">
<view style="display: flex; flex-direction: row;">
<image src="@/static/video/lock.png"
style="width: 20px; height: 20px; margin-top: 10px; margin-left: 20px;"></image>
style="width: 40rpx; height: 40rpx; margin-top: 20rpx; margin-left: 20rpx;"></image>
<view
:style="'font-size: 16px; font-weight: bold; color: #FFFFFF; margin-top: 9px; margin-left: 20px; height: 22px; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">
:style="'font-size: 30rpx; font-weight: bold; color: #FFFFFF; margin-top: 20rpx; margin-left: 20rpx; height: 40rpx; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">
当前视频 没有权限播放
</view>
</view>
</view>
<image @click="downbuy" src="@/static/video/down.png"
style="width: 30px; height: 30px; margin-top: 5px; position: absolute; right: 20px;">
style="width: 50rpx; height: 50rpx; margin-top: 20rpx; position: absolute; right: 20rpx;">
</image>
</view>
</view>
<view class="flex space alcenter wrap"
style="padding:30rpx 30rpx 10rpx 30rpx;flex-direction: row; display:flex;">
<view class="ft14" style="color: #fff;">我的{{hbmc}}：{{userinfo.money*1}}</view>
<view class="ft14" style="color: #fff;" v-if="userinfo.group_id == 1">普通用户</view>
<view class="ft14" style="color: #fff;" v-if="userinfo.group_id == 2">VIP用户</view>
</view>
<view
style="padding:10rpx 30rpx; border: #FFFFFF solid; 1upx; margin:10upx 30upx; border-radius: 16upx;">
<view v-if="userinfo.group_id == 1" class="flex space alcenter wrap"
style="flex-direction: row; display:flex;">
<view class="ft14" IF style="color: #fff;">单集视频：{{originList[baymid].priced*1}}{{hbmc}}</view>
<view class="ft14" style="color: #fff;">整部视频：{{originList[baymid].priceq*1}}{{hbmc}}</view>
</view>
<view v-if="userinfo.group_id == 2" class="flex space alcenter wrap"
style="flex-direction: row; display:flex;">
<view class="ft14" style="color: #fff;">VIP单集视频：{{originList[baymid].vippriced*1}}{{hbmc}}
</view>
<view class="ft14" style="color: #fff;">VIP整部视频：{{originList[baymid].vippriceq*1}}{{hbmc}}
</view>
</view>
<view class="flex space alcenter wrap mt10" style="flex-direction: row; display:flex;">
<view @click="buyAct(1)" class="gdfgjh" style="width: 49%; float: left;">购买单集视频</view>
<view @click="buyAct(0)" class="gdfgjh" style="width: 49%; float: left;">购买整部视频</view>
</view>
</view>
<view
style="padding:10rpx 30rpx; border: #FFFFFF solid; 1upx; margin:10upx 30upx; border-radius: 16upx;">
<view class="ft14 ftw500" style="color: #fff; ">当前充值优惠活动：</view>
<view class="flex space alcenter wrap mt5" style="flex-direction: row; display:flex;">
<block v-for="(tm,index) in moneyList">
<view @click="congzs(tm.money)" class="pd5_15 mt10"
style="background: #fff; border-radius: 10upx; width: 49%;">
<view class="ft14 ftw500" style="color: #666;">充值￥{{tm.money*1}}</view>
<view class="ft12" style="color: #666;">{{hbmc}}{{tm.num*1}} +送{{tm.coupon*1}}</view>
</view>
</block>
</view>
</view>
<view
style="padding:10rpx 30rpx; border: #FFFFFF solid; 1upx; margin:10upx 30upx; border-radius: 16upx;">
<view class="ft14 ftw500" style="color: #fff; ">VIP用户权益：</view>
<view class="flex space alcenter wrap mt5" style="flex-direction: row; display:flex;">
<view v-if="originList[baymid].vippriced*1>0" class="ft12" style="color: #fff;">
VIP单集视频：{{originList[baymid].vippriced*1}} {{hbmc}}</view>
<view v-if="originList[baymid].vippriced*1==0 && originList[baymid].vippriceq*1>0" class="ft12"
style="color: #fff;">VIP当前单节视频免费</view>
<view v-if="originList[baymid].vippriceq*1>0" class="ft12" style="color: #fff;">
VIP整部视频：{{originList[baymid].vippriceq*1}} {{hbmc}}</view>
<view v-if="originList[baymid].vippriceq*1==0" class="ft12" style="color: #fff;">VIP当前整部免费
</view>
</view>
<view class="ft12 mt5" style="color: #ff0000;">开通VIP享受更多优惠福利</view>
<view @click="govip()" class="gdfgjh mt10">开通VIP</view>
</view>
<view @click="govip()" class="gdfgjh mt-30">开通VIP</view>
</view>
</uni-popup>
......@@ -193,11 +136,17 @@
import {
navigateTo,
} from '@/utils/fun.js';
import {
data
} from '../../uni_modules/uview-ui/libs/mixin/mixin';
let audo = uni.createInnerAudioContext()
export default {
name: "videoDetail",
mixins: [common],
components: {
uniPopup
},
data() {
return {
sharedata: {
......@@ -218,42 +167,24 @@
current: 0,
oid: 0,
isplay: true, //是否自动播放下一个视频
playCount: 2, //剩余多少视频加载视频列表
nodate: true, //true 有数据
duration: 500,
issp: '',
isqp: true,
page: 1,
urls: "https://xjc.demo.hongcd.com",
baymid: 0,
scrollTop: 0,
vid: 0,
mid: 0,
isbuylx: 0, //大于0单节购买 0全集
safeArea: 0,
ttuop: 0,
uid: 0,
heightxw: 100,
hbmc: '',
userinfo: [],
moneyList: []
moneyList: [],
data: {},
isPlayNext: 0
};
},
onLoad(e) {
// this.hbmc = uni.getStorageSync("config").site.hbmc
this.hbmc = "AAA"
console.log('eeeeeee-----', e)
if (e.fxpid) {
if (e.fxpid > 0) {
uni.setStorage({
key: 'fxpid',
data: e.fxpid
})
}
}
if (uni.getStorageSync("userinfo")) {
this.cztc();
this.uid = uni.getStorageSync("userinfo").id
onLoad(options) {
this.data = JSON.parse(decodeURIComponent(options.data));
if (decodeURIComponent(options.isPlayNext) != undefined) {
this.isPlayNext = decodeURIComponent(options.isPlayNext);
}
uni.getSystemInfo({
success: res => {
......@@ -263,16 +194,6 @@
}
}
})
uni.setStorage({
key: 'isbuy',
data: 1
})
if (e.vid) {
this.vid = e.vid
}
if (e.mid) {
this.mid = e.mid
}
// #ifdef MP-TOUTIAO
this.ttuop = 64
......@@ -281,148 +202,26 @@
this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea - this.ttuop
console.log(this.windowHeight)
//this.Recommend();
this.Recommend();
},
onShow() {
this.gxdd()
if (uni.getStorageSync("userinfo")) {
this.ongrzlTap()
} else {
this.denglu()
}
},
onShareAppMessage: function(res) {
// #ifdef MP-WEIXIN
var href = '/pages/client/tuan/detail?vid=' + this.vid + '&fxpid=' + this.uid + '&mid=0'
console.log(res)
let that = this;
const obj = {
title: "发送给好友",
imageUrl: '',
path: href,
success: function(res) {
console.log(res, "转发成功")
},
fail: function(res) {
wx.showToast({
title: '发送失败',
icon: 'none'
})
}
}
return obj
// #endif
this.Recommend()
},
methods: {
cztc() {
let data = {};
data.token = uni.getStorageSync("userinfo").token;
data.uid = uni.getStorageSync("userinfo").id;
uni.request({
url: this.configs.webUrl + '/api/user/cztc',
data: data,
success: res => {
console.log(res.data)
this.moneyList = res.data
},
fail: (data, code) => {
//console.log('fail' + JSON.stringify(data));
}
});
},
share() {
var href = '/pages/client/tuan/detail?vid=' + this.vid + '&fxpid=' + this.uid + '&mid=0'
// #ifdef H5
uni.setClipboardData({
data: this.urls + '/h5/#' + href,
complete() {
uni.showToast({
title: "分享连接已复制到剪贴板"
})
}
})
// #endif
// #ifndef H5
uni.share({
provider: "weixin",
scene: "WXSenceTimeline",
type: 0,
href: href,
title: '分享标题',
summary: '分享总结',
imageUrl: '',
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
})
// #endif
},
gxdd() {
var isbuy = uni.getStorageSync("isbuy")
console.log('更新列表')
this.page = 1
this.Recommend();
},
buyAct(mid) {
if (mid == 1) {
mid = this.originList[this.baymid].mid
}
var info = this.originList[this.baymid]
if (uni.getStorageSync("userinfo")) {
this.isbuylx = mid
uni.setStorage({ //缓存配置信息
key: 'buydata',
data: info
})
uni.setStorage({
key: 'isbuy',
data: 1
})
this.downbuy()
uni.navigateTo({
url: '/pages/client/tuan/buy?id=' + this.vid + '&mid=' + mid
})
} else {
this.denglu()
return false
}
},
congzs(price) {
var mid = this.originList[this.baymid].mid
uni.navigateTo({
url: '/pages/client/vipcard/recharge?id=' + this.vid + '&mid=' + mid + '&price=' + price
})
},
govip() {
var mid = this.originList[this.baymid].mid
if (uni.getStorageSync("userinfo")) {
this.downbuy()
uni.navigateTo({
url: '/pages/client/vipcard/index?vid=' + this.vid + '&mid=' + mid
})
} else {
this.denglu()
return false
}
},
timeupdate(event) {
// console.log(11111)
// console.log(this.displayIndex)
if (event.detail.currentTime > 0 && this.originList[this.originIndex].pays == 1) {
uni.createVideoContext(this.originList[this.originIndex]._id, this).seek(0);
uni.createVideoContext(this.originList[this.originIndex]._id, this).pause();
if (event.detail.currentTime > 0 && this.originList[this.originIndex].vedioIndex > this.data.unlockIndex) {
uni.createVideoContext(this.originList[this.originIndex].vedioId, this).seek(0);
uni.createVideoContext(this.originList[this.originIndex].vedioId, this).pause();
this.fenji = 2
this.baymid = this.originIndex
this.$refs.select.open('bottom');
}
},
selectThisVideo(index, pays) {
this.down();
if (pays == 1) {
this.baymid = index
this.fenji = 2
this.$refs.select.open('bottom');
} else {
......@@ -446,87 +245,43 @@
this.$nextTick(() => {
let num1 = (this.windowHeight / 1.6) * 0.85;
let num2 = num1 / 4.78;
this.scrollTop = num2 * Number(this.k);
this.scrollTop = num2 * Number(this.originIndex);
})
},
tapVideoHover(index, pays) {
this.baymid = index
this.fenji = 2
this.$refs.select.open('bottom');
},
tapVides() {
this.isqp = !this.isqp
},
ongrzlTap() {
let data = {};
data.token = uni.getStorageSync("userinfo").token;
data.uid = uni.getStorageSync("userinfo").id;
uni.request({
url: this.urls + '/api/user/index',
data: data,
success: res => {
if (res.data.code == 1) {
let ionfo = res.data.data
this.userinfo = ionfo
} else {
uni.showToast({
title: res.data.msg,
icon: "none"
});
}
},
fail: (data, code) => {
//console.log('fail' + JSON.stringify(data));
}
});
},
Recommend() {
this.originList = []
var uid = 0;
if (uni.getStorageSync("userinfo")) {
uid = uni.getStorageSync("userinfo").id
}
uni.request({
//url: this.urls+'/api/video/videoinfo?page='+this.page+'&uid='+uid,
url: this.urls + '/api/video/videoinfo?page=' + this.page + '&uid=' + uid + '&vid=' + this
.vid + '&mid=' + this.mid + '&token=' + uni.getStorageSync("userinfo").token,
success: (res) => {
if (res.data.isempty == 1) {
// #ifdef MP-WEIXIN
if (res.data.videodata) {
uni.setNavigationBarTitle({
title: res.data.videodata.name
});
}
// #endif
var msg = res.data.data
var midlog = res.data.midlog
//2.这里把视频添加到视频列表
if (this.page == 1) {
this.originList = res.data.data
for (let i = 0; i < msg.length; i++) {
if (this.mid > 0) { //等于0 上一个页面视频id未0 相当于没有上传
if (msg[i].mid == this.mid) { //判断判断上一个页面视频id
this.originIndex = i
}
} else {
if (msg[i].mid == midlog) { //判断当前历史记录最新视频id
this.originIndex = i
}
}
}
this.initSwiperData(this.originIndex);
} else {
for (let i = 0; i < msg.length; i++) {
this.originList.push(msg[i])
}
}
this.page = this.page + 1
this.post({
url: '/vedio/getIndexList',
data: {
vedioId: this.data.vedioId
},
showLoading: false,
success: ({
data
}) => {
this.originList = data.list
if (this.isPlayNext == 0) {
this.originIndex = this.data.seeIndex - 1
} else {
this.nodate = false
this.originIndex = this.data.recommendIndex - 1
if (this.originIndex >= this.data.unlockIndex - 1) {
this.originIndex = this.data.unlockIndex - 1
}
}
if (this.originIndex > this.data.vedioTotal || this.originIndex <= 0) {
this.originIndex = 0
}
this.data = data.vedioMsg
this.initSwiperData(this.originIndex);
}
})
});
},
ended() {
//console.log('isplay----',this.isplay)
......@@ -547,7 +302,7 @@
*/
initSwiperData(originIndex = this.originIndex) {
this.isqp = false
//console.log('--------当前数据 Index:',originIndex)
console.log('--------当前数据 Index:', originIndex)
const originListLength = this.originList.length; // 源数据长度
const displayList = [];
displayList[this.displayIndex] = this.originList[originIndex];
......@@ -569,26 +324,21 @@
if (this.oid < 0) {
this.oid = this.originList.length - 1
}
//console.log('++++++++++++上一条播放数据 Index:',this.oid)
uni.createVideoContext(this.originList[this.oid]._id, this).stop();
if (this.originList[originIndex].pays == 1) {
console.log('++++++++++++上一条播放数据 Index:', this.oid)
uni.createVideoContext("" + this.originList[this.oid].vedioId, this).stop();
if (this.originList[originIndex].vedioIndex > this.data.unlockIndex) {
this.isqp = true
this.baymid = this.originIndex
this.fenji = 2
this.$refs.select.open('bottom');
} else {
setTimeout(() => {
this.isqp = true
console.log('qqqqqq:', this.originList[originIndex]._id)
//audo.play()
uni.createVideoContext(this.originList[originIndex]._id, this).play();
this.bfjl(this.originList[originIndex].mid)
console.log('qqqqqq:', this.originList[originIndex + 1].vedioId)
// audo.play()
uni.createVideoContext("" + this.originList[originIndex + 1].vedioId, this).play();
}, 500)
}
var pCount = this.originList.length - this.playCount
if (originIndex == pCount && this.nodate) {
this.Recommend()
}
},
/**
* swiper滑动时候
......@@ -617,101 +367,39 @@
}
},
detail(vid, mid) {
var fxpid = 1
if (uni.getStorageSync("userinfo")) {
fxpid = uni.getStorageSync("userinfo").id
}
uni.navigateTo({
url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
})
},
bfjl(mid) { //更新播放记录
let this_ = this
if (uni.getStorageSync("userinfo")) {
let data = {
'vid': this_.vid,
'mid': mid
};
data.uid = uni.getStorageSync("userinfo").id
uni.request({
url: this_.urls + '/api/video/bfjl',
data: data,
success: data => {
},
fail: (data, code) => {}
});
}
},
controlstoggle(e) {
console.log(e.detail.show);
this.issp = e.detail.show
},
cLike(sss, vid, mid) {
if (uni.getStorageSync("userinfo")) {
} else {
this.denglu()
return false
}
const video = this.displaySwiperList[this.displayIndex];
if (sss == 1) {
this.displaySwiperList[this.displayIndex].like = 2
video.like_n += 1;
} else {
this.displaySwiperList[this.displayIndex].like = 1
video.like_n -= 1
}
console.log(vid)
let this_ = this
let data = {
'vid': vid,
'mid': mid
};
data.token = uni.getStorageSync("userinfo").token
data.uid = uni.getStorageSync("userinfo").id
uni.request({
url: this_.urls + '/api/user/tapLove',
data: data,
success: data => {
// uni.showToast({
// icon:'none',
// title:data.data.msg
// })
// if(data.data.msg=='取消成功'){
// video.like_n -= 1
// }else{
// video.like_n += 1;
// }
collect(vedioId, index) {
this.data.collect = 1
// 收藏
this.post({
url: '/vedio/collect',
data: {
vedioId
},
fail: (data, code) => {}
showLoading: false,
success: ({
data
}) => {}
});
},
denglu() {
uni.showModal({
title: '温馨提示',
content: '请先登录',
showCancel: true,
confirmText: "登录",
success: function(res) {
if (res.confirm) {
uni.navigateTo({
url: "/pages/login/login"
})
} else if (res.cancel) {
//uni.navigateBack();
}
}
cancelCollect(vedioId, index) {
this.data.collect = 0
// 取消收藏
this.post({
url: '/vedio/cancelCollect',
data: {
vedioId
},
showLoading: false,
success: ({
data
}) => {}
});
}
},
created() {
},
};
</script>
......@@ -737,28 +425,6 @@
height: 100%;
}
.wrap_content {
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
background: gray;
color: aqua;
height: 100%;
font-size: 80px;
margin: 0rpx 40rpx;
}
.container {
background-color: #000000;
}
.item {
/* width : 750rpx; */
background-color: #000000;
position: relative;
}
.videoHover {
position: absolute;
top: 0px;
......@@ -767,10 +433,6 @@
background-color: rgba(0, 0, 0, 0.1);
justify-content: center;
align-items: center;
/* border-style: dashed;
border-color: #DD524D;
border-width: 1px; */
}
.playState {
......@@ -783,36 +445,25 @@
position: absolute;
z-index: 99;
bottom: 30%;
right: 10rpx;
width: 100rpx;
text-align: center;
right: 10px;
width: 90rpx;
display: flex;
flex-direction: column;
image {
width: 70rpx;
height: 70rpx;
position: absolute;
right: 10rpx;
}
}
.userAvatar {
border-radius: 500%;
margin-bottom: 15px;
border-style: solid;
border-width: 2px;
border-color: #ffffff;
}
.userAvatar {
width: 100rpx;
height: 100rpx;
}
.likeIco,
.shareIco,
.commentIco {
.shareIco {
width: 60rpx;
height: 60rpx;
margin-top: 15px;
}
.likeNum,
.commentNum,
.shareTex {
color: #ffffff;
font-size: 30rpx;
......@@ -824,41 +475,6 @@
color: red;
}
.contentcd {
width: 720rpx;
z-index: 99;
position: absolute;
bottom: 70rpx;
/* justify-content: center; */
padding: 15rpx;
flex-direction: column;
justify-content: flex-start;
color: #ffffff;
}
.userName {
font-size: 30rpx;
color: #ffffff;
margin-top: 80upx;
margin-left: -12rpx;
}
.words {
margin-top: 16rpx;
font-size: 30rpx;
color: #ffffff;
margin-bottom: 20rpx;
}
.wordss {
margin-top: 10rpx;
font-size: 26rpx;
color: #ffffff;
}
.root {
background-color: #000000;
}
.gdfgjh {
font-size: 30rpx;
......@@ -868,7 +484,9 @@
border-radius: 18rpx;
padding: 0 20rpx;
text-align: center;
margin-bottom: 20rpx;
margin-bottom: 50rpx;
margin-left: 50rpx;
margin-right: 50rpx;
}
.tsvideo {
......@@ -889,6 +507,60 @@
/* animation:fadenum12 10s 1; */
}
.contentcd {
z-index: 99;
width: 100%;
position: absolute;
bottom: 36px;
color: #ffffff;
flex-direction: column;
align-items: flex-start;
}
.userName {
font-size: 30rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss {
font-size: 26rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss2 {
width: 100%;
height: 60rpx;
// opacity: 0.6;
background: black;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 60rpx;
margin-top: 20rpx;
image {
margin-left: 10rpx;
width: 30rpx;
height: 30rpx;
}
.wordsss {
margin-right: 10rpx;
margin-left: auto;
width: 40rpx;
height: 40rpx;
}
}
.words {
margin-top: 20rpx;
margin-left: 10rpx;
font-size: 26rpx;
color: #ffffff;
}
@keyframes fadenum12 {
0% {
opacity: 1;
......
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