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-13 15:50:56 +08:00
parent 2ef47931e5
commit 3433ebb6aa
4 changed files with 92 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
components/my-video-list/list-item.vue
View File

@@ -2,15 +2,14 @@
<view class="item" @appear="appear" @disappear="disappear" @click.stop>
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
@waiting="waiting()" object-fit="cover"
@pause="onpause"
@click="videoClick()"
@waiting="waiting()" object-fit="cover" @pause="onpause" @click="videoClick()"
@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
:autoplay="autoplay" @ended="ended" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"></video>
<image class="poster" v-else @click="!item.videoUrl?popupShow('pay',item):''" :src="item.titleImg" mode="aspectFill">
<image class="poster" v-else @click="!item.videoUrl?popupShow('pay',item):''" :src="item.titleImg"
mode="aspectFill">
</image>
<view class="info" v-if="!isCommand" :style="infoStyle">
@@ -44,8 +43,8 @@
<text class="text color-fff u-font-24">分享</text>
</view>
<view class="zhuiju u-m-b-40 u-flex u-flex-xy-center u-flex-col u-text-center" @click="zhuijuClick">
<image class="icon" v-if="isCollect" src="@/static/images/shuqian.png" mode=""></image>
<image class="icon" v-else src="@/static/images/shuqian_s.png" mode=""></image>
<image class="icon" v-if="isCollect" src="@/static/images/shuqian_s.png" mode=""></image>
<image class="icon" v-else src="@/static/images/shuqian.png" mode=""></image>
<text class="text color-fff u-font-24">{{isCollect?'已追':'追剧'}}</text>
</view>
</view>
@@ -71,19 +70,19 @@
}
}
},
rightStyle:{
type:Object,
default:()=>{
rightStyle: {
type: Object,
default: () => {
return {
}
}
},
infoStyle:{
type:Object,
default:()=>{
infoStyle: {
type: Object,
default: () => {
return {
}
}
},
@@ -125,7 +124,7 @@
type: Number,
default: 1
},
showControls:{
showControls: {
type: Boolean,
default: true
}
@@ -133,11 +132,10 @@
let autoplay = ref(props.item.videoUrl ? true : false)
const emits = defineEmits(['controlstoggles', 'disappear', 'appear', 'waiting', 'videoPlay', 'ended', 'dianzanClick',
'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail'
'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail', 'showInfo'
])
function controlstoggles(e) {
console.log(e);
emits('controlstoggles', e)
}
@@ -151,28 +149,39 @@
function waiting() {
}
let isPlying = ref(false)
watch(() => isPlying.value, (newval) => {
console.log(newval);
emits('showInfo', newval)
})
let isPlying=false
function videoPlay() {
isPlying=true
isPlying.value = true
// #ifdef H5
emits('controlstoggles', {
detail:{show:true}
detail: {
show: true
}
})
// #endif
}
function onpause(){
isPlying=false
function onpause() {
isPlying.value = false
// #ifdef H5
emits('controlstoggles', {
detail:{show:false}
detail: {
show: false
}
})
// #endif
}
function ended() {
}
@@ -192,16 +201,18 @@
function popupShow(key) {
emits('popupShow', key)
}
function videoClick(){
if(video){
if(isPlying){
function videoClick() {
console.log('videoClick');
if (video) {
if (isPlying.value) {
video.pause()
}else{
} else {
video.play()
}
}
}
let first = true
function appear() {
@@ -233,7 +244,6 @@
})
onMounted(() => {
init()
console.log('itemMounted', props.index);
emits('itemMounted', props.index)
})
@@ -242,6 +252,8 @@
if (props.item.videoUrl && showVideo.value) {
video = uni.createVideoContext('myVideo' + props.item.courseDetailsId)
video.playbackRate(props.playSpeeds)
video.play()
console.log('init play');
}
} catch (error) {
console.error('------')
@@ -255,13 +267,28 @@
}
})
watch(() => showVideo.value, (newval) => {
console.log('showVideo change:'+newval);
if (newval) {
init()
nextTick(()=>{
init()
})
} else {
video = null
}
})
const infoStyle = computed(() => {
return {
transform: `translateX(${(!isPlying.value||!props.item.videoUrl)?0:'-110%'})`
}
})
const rightStyle = computed(() => {
return {
transform: `translateX(${(!isPlying.value||!props.item.videoUrl)?'0':60}px)`
}
})
</script>
<style lang="scss" scoped>
@@ -345,7 +372,7 @@
}
.right {
transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
position: absolute !important;
right: 20rpx;
/* #ifdef H5 */