Skip to content

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

添加二级视频页

parent 363d66de
Expand all 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;
}
......
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