czg_team/new_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加推荐页面

Browse Source
This commit is contained in:
YeMingfei666
2025-01-09 17:28:30 +08:00
parent 8572bebabb
commit f6d386e793
5 changed files with 348 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
components/my-video-list/my-video-list.vue
View File

@@ -1,13 +1,19 @@
<template>
<!-- #ifdef H5 -->
<view class=" w-full box" style="width: 100vw;">
<swiper v-if="videoList.length" @change="swiperChange" :current="current" :circular="true" vertical
class="u-flex-1" @transition="transition" :indicator-dots="false" :autoplay="false" :interval="0"
:duration="200">
<swiper @longpress="popupShow('speed')"
:style="{height:wHeight+'px'}"
v-if="videoList.length" @change="swiperChange" :current="current"
:circular="true" vertical class="u-flex-1" @transition="transition" :indicator-dots="false"
:autoplay="false" :interval="0" :duration="200">
<swiper-item v-for="(item,index) in videoList" :key="index">
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
:index="index" :nowIndex="nowIndex" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow"></list-item-vue>
<list-item-vue :total="list.length" :item="item"
:isCommand="isCommand"
:current="current" :isCollect="isCollect"
@toDetail="toDetail(item,index)"
@controlstoggles="controlstoggles" :playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex"
@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)"
@popupShow="popupShow"></list-item-vue>
</swiper-item>
</swiper>
</view>
@@ -17,9 +23,12 @@
<list :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true"
@loadmore="loadmore" :scrollable="true">
<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
<view class="swipers-items" :style="boxStyle">
<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
:index="index" :instance="instance" :nowIndex="nowIndex" @appear="appear(item,index)"
:isCommand="isCommand"
@toDetail="toDetail(item,index)"
@itemMounted="itemMounted" @controlstoggles="controlstoggles" :index="index" :instance="instance"
:nowIndex="nowIndex" @appear="appear($event,item,index)" :playSpeeds="playSpeeds"
@disappear="disappear(item,index)" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow"></list-item-vue>
</view>
@@ -28,8 +37,13 @@
<!-- #endif -->
<!-- 返回按钮 -->
<view class="back-icon" v-if="!isTabbar&&control.showBack">
<u-icon name="arrow-left" color="#fff" :size="28" @click="back"></u-icon>
</view>
<!-- 选集 -->
<up-popup :show="popup.show" :round="10" @close="popupClose('show')">
<up-popup :show="popup.show" :round="10" @close="popupClose('show')" :customStyle="customStyle">
<view class="u-p-30">
<view class="u-flex u-flex-row u-row-between">
<view class="u-flex u-flex-row" style="align-items: baseline;">
@@ -57,7 +71,7 @@
</view>
</up-popup>
<!-- 支付 -->
<up-popup :show="popup.pay" :round="10" @close="popupClose('pay')">
<up-popup :show="popup.pay" :round="10" @close="popupClose('pay')" :customStyle="customStyle">
<view class="u-p-30">
<view class="u-flex u-flex-row u-row-between">
<view class="u-flex u-flex-row" style="align-items: baseline;">
@@ -85,7 +99,7 @@
</view>
</up-popup>
<!-- 支付确认 -->
<up-popup :show="popup.payTips" :round="10" @close="popupClose('payTips')">
<up-popup :show="popup.payTips" :round="10" @close="popupClose('payTips')" :customStyle="customStyle">
<view class="u-p-30">
<view class="u-flex u-flex-row u-row-between">
<view class="u-flex u-flex-row" style="align-items: baseline;">
@@ -125,13 +139,13 @@
</up-popup>
<!-- 倍速 -->
<up-popup :show="popup.speed" :round="0" @close="popupClose('speed')">
<up-popup :show="popup.speed" :round="0" @close="popupClose('speed')" :customStyle="customStyle">
<view class="u-p-20 u-flex u-flex-row u-row-between u-flex-y-center">
<text class="font-bold color-333 u-font-28">倍速:</text>
<view class="u-flex u-flex-row speed-list">
<text class="speed-list-item u-font-28" @click="changeSpeed(index)" :class="{active:index==speeds.active}"
v-for="(item,index) in speeds.list">{{item.num}}x</text>
<text class="speed-list-item u-font-28" @click="changeSpeed(index)"
:class="{active:index==speeds.active}" v-for="(item,index) in speeds.list">{{item.num}}x</text>
</view>
</view>
</up-popup>
@@ -163,6 +177,56 @@
onMounted,
getCurrentInstance
} from 'vue';
const props = defineProps({
list: {
type: Array,
default: () => {
[]
}
},
isCommand:{
type:Boolean,
default:false
},
isTabbar:{
type:Boolean,
default:false
},
info: {
tpye: Object,
default: () => {
return {
collect: 0,
current: {},
list: [],
price: 0,
title: ''
}
}
}
})
const control = reactive({
showBack: true,
showControls: true
})
const customStyle=computed(()=>{
// #ifdef H5
return {
bottom:props.isTabbar?'50px':'0'
}
// #endif
// #ifndef H5
return {}
// #endif
})
function controlstoggles(e) {
control.showControls = e.detail.show
control.showBack = control.showControls
console.log(control);
}
const speeds = reactive({
list: [{
name: '0.5x',
@@ -178,16 +242,35 @@
num: 1.5
}],
active: 1
})
function changeSpeed(index){
speeds.active=index
const $mountedComponents={}
function itemMounted(index) {
// $mountedComponents[index]=true
}
function back() {
const arr = getCurrentPages()
if (arr.length < 2) {
uni.switchTab({
url: '/pages/index/index'
})
return
}
uni.navigateBack()
}
function changeSpeed(index) {
speeds.active = index
uni.showToast({
title: '已切换' + speeds[index].num + '倍播放',
title: '已切换' + speeds.list[index].num + '倍播放',
icon: 'none',
duration: 2000
})
}
const playSpeeds = computed(() => {
return speeds.list[speeds.active].num
})
const instance = getCurrentInstance()
let isAgree = ref(false);
@@ -210,17 +293,24 @@
let cacheIndex = null
function appear(item, index) {
console.log(item.courseDetailsName + 'appear');
cacheIndex = index
function appear(isFirst,item, index) {
if(isFirst){
$mountedComponents[index]=true
}
if (!initing) {
cacheIndex = index
}
}
function disappear(item, index) {
console.log('disappear');
if (index == nowIndex.value && cacheIndex != null) {
if (index == nowIndex.value && cacheIndex != null && !initing) {
console.log('disappear' + index);
console.log('disappear nowIndex' + nowIndex.value);
console.log('cacheIndex' + cacheIndex);
nowIndex.value = cacheIndex
console.log(nowIndex.value);
cacheIndex = null
console.log('disappear,nowIndex=' + nowIndex.value);
}
}
@@ -261,15 +351,21 @@
}
//滚动到指定位置
function goListPosition(index) {
console.log('index');
console.log(index);
console.log('goListPosition:' + index)
const el = refList.value[index]
domModule.scrollToElement(el, {
animated: false
})
const item = props.list[index]
setVideoList(item)
insertHistory()
if($mountedComponents[props.list.length-1]){
domModule.scrollToElement(el, {
animated: false
})
initing = false;
const item = props.list[index]
setVideoList(item)
insertHistory()
}else{
setTimeout(()=>{
goListPosition(index)
},30)
}
}
@@ -287,26 +383,7 @@
function popupShow(key = 'show') {
popup[key] = true
}
const props = defineProps({
list: {
type: Array,
default: () => {
[]
}
},
info: {
tpye: Object,
default: () => {
return {
collect: 0,
current: {},
list: [],
price: 0,
title: ''
}
}
}
})
let jinbiBili = ref(0)
let wHeight = ref(0)
@@ -315,14 +392,20 @@
jinbiBili.value = res.value
const sysInfo = uni.getSystemInfoSync()
wHeight.value = sysInfo.screenHeight
wHeight.value = sysInfo.windowHeight
// wHeight.value = sysInfo.screenHeight
}
let isCollect = ref(props.info.collect)
watch(() => props.collect, (newval) => {
isCollect.value = newval
})
function toDetail(item,index){
uni.navigateTo({
url:'/pages/video/detail?courseId='+item.courseId
})
}
function posterError() {
@@ -359,9 +442,10 @@
setVideoList(props.info.current)
// #endif
// #ifdef APP
const index = props.list.findIndex(v => v.courseDetailsId == props.info.current.courseDetailsId)
console.log('index' + index);
goListPosition(index)
nextTick(() => {
const index = props.list.findIndex(v => v.courseDetailsId == props.info.current.courseDetailsId)
goListPosition(index)
})
// #endif
}
}
@@ -413,9 +497,6 @@
}
function controlstoggles() {
}
function videoPlay(videoId, courseDetailsId) {
@@ -448,6 +529,7 @@
}, 1000)
function swiperChange(e) {
console.log('e.detail.current');
console.log(e.detail.current);
current.value = e.detail.current
const item = videoList.value[e.detail.current]
@@ -461,6 +543,7 @@
const lastIndex = listLen - 1
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
nowIndex.value = index
console.log('setVideoList nowIndex' + index);
let position = ''
if (index === 0) {
position = 'start'
@@ -468,7 +551,6 @@
if (index === props.list.length - 1) {
position = 'end'
}
console.log(position);
if (current.value == 0) {
if (position === 'start') {
videoList.value = [item, props.list[index + 1], props.list[lastIndex]]
@@ -498,7 +580,7 @@
}
console.log(videoList.value);
if (!item.videoUrl) {
// popupShow('pay')
popupShow('pay')
}
}
@@ -513,11 +595,12 @@
function waiting() {
}
let initing = true
configInit()
onMounted(() => {
nextTick(() => {
init()
})
init()
// setTimeout(()=>{
// },500)
})
watch(() => props.list.length, (newval) => {
// #ifdef H5
@@ -695,6 +778,13 @@
height: 40rpx;
}
.back-icon {
position: fixed;
z-index: 9999;
left: 30rpx;
top: 100rpx;
}
.pay-list {
.pay-list-item {
flex-direction: row;