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-10 18:24:40 +08:00
parent df3bc23cfc
commit 4a141878f2
34 changed files with 3399 additions and 1752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
@waiting="waiting()" object-fit="cover"
@pause="onpause"
@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"
@@ -11,7 +12,7 @@
<image class="poster" v-else @click="!item.videoUrl?popupShow('pay'):''" :src="item.titleImg" mode="aspectFill">
</image>
<view class="info" v-if="!isCommand">
<view class="info" v-if="!isCommand" :style="infoStyle">
<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
<view v-if="item.content" v-html="item.content"></view>
<view class="u-m-t-20 color-fff" @click="popupShow('show')">
@@ -21,7 +22,7 @@
</view>
</view>
<view class="info" v-if="isCommand">
<view class="info" v-if="isCommand" :style="infoStyle">
<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
<view v-if="item.content" v-html="item.content"></view>
<view class="u-m-t-20 color-fff" @click="toDetail">
@@ -31,7 +32,7 @@
</view>
</view>
<view class="right">
<view class="right" :style="rightStyle">
<view class="love u-flex u-flex-xy-center u-flex-col u-m-b-40 u-text-center" @click="dianzanClick">
<up-icon name="heart-fill" v-if="item.isGood==1" color="red" size="30"></up-icon>
<up-icon name="heart-fill" v-else color="#ffffff" size="30"></up-icon>
@@ -69,6 +70,22 @@
}
}
},
rightStyle:{
type:Object,
default:()=>{
return {
}
}
},
infoStyle:{
type:Object,
default:()=>{
return {
}
}
},
isCommand: {
type: Boolean,
default: false
@@ -106,6 +123,10 @@
playSpeeds: {
type: Number,
default: 1
},
showControls:{
type: Boolean,
default: true
}
})
let autoplay = ref(props.item.videoUrl ? true : false)
@@ -115,6 +136,7 @@
])
function controlstoggles(e) {
console.log(e);
emits('controlstoggles', e)
}
@@ -130,7 +152,20 @@
}
function videoPlay() {
// #ifdef H5
emits('controlstoggles', {
detail:{show:true}
})
// #endif
}
function onpause(){
// #ifdef H5
emits('controlstoggles', {
detail:{show:false}
})
// #endif
}
function ended() {
@@ -211,6 +246,7 @@
video = null
}
})
</script>
<style lang="scss" scoped>
@@ -279,6 +315,7 @@
color: #ffffff;
font-size: 15px;
z-index: 9999;
transition: all .3s ease-in-out;
}
.u-flex-y-center {
@@ -293,6 +330,7 @@
}
.right {
transition: all .3s ease-in-out;
position: absolute !important;
right: 20rpx;
/* #ifdef H5 */

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

@@ -1,19 +1,16 @@
<template>
<!-- #ifdef H5 -->
<view class=" w-full box" style="width: 100vw;">
<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 @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"
: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>
<list-item-vue :total="list.length" :item="item" :isCommand="isCommand"
:rightStyle="rightStyle" :infoStyle="infoStyle"
:showControls="control.showControls" :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>
@@ -25,8 +22,8 @@
<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
:isCommand="isCommand"
@toDetail="toDetail(item,index)"
:rightStyle="rightStyle" :infoStyle="infoStyle"
:isCommand="isCommand" :showControls="control.showControls" @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)"
@@ -150,8 +147,7 @@
</view>
</up-popup>
<my-poster ref="refPoster"></my-poster>
</template>
<script setup>
@@ -177,6 +173,9 @@
onMounted,
getCurrentInstance
} from 'vue';
const refPoster = ref(null)
const props = defineProps({
list: {
type: Array,
@@ -184,13 +183,13 @@
[]
}
},
isCommand:{
type:Boolean,
default:false
isCommand: {
type: Boolean,
default: false
},
isTabbar:{
type:Boolean,
default:false
isTabbar: {
type: Boolean,
default: false
},
info: {
tpye: Object,
@@ -209,11 +208,14 @@
showBack: true,
showControls: true
})
const customStyle=computed(()=>{
// #ifdef APP
control.showControls=false
// #endif
const customStyle = computed(() => {
// #ifdef H5
return {
bottom:props.isTabbar?'50px':'0'
bottom: props.isTabbar ? '50px' : '0'
}
// #endif
// #ifndef H5
@@ -223,6 +225,7 @@
function controlstoggles(e) {
control.showControls = e.detail.show
console.log(control.showControls );
control.showBack = control.showControls
console.log(control);
}
@@ -243,8 +246,9 @@
}],
active: 1
})
const $mountedComponents={}
const $mountedComponents = {}
function itemMounted(index) {
// $mountedComponents[index]=true
}
@@ -293,9 +297,9 @@
let cacheIndex = null
function appear(isFirst,item, index) {
if(isFirst){
$mountedComponents[index]=true
function appear(isFirst, item, index) {
if (isFirst) {
$mountedComponents[index] = true
}
if (!initing) {
cacheIndex = index
@@ -353,7 +357,7 @@
function goListPosition(index) {
console.log('goListPosition:' + index)
const el = refList.value[index]
if($mountedComponents[props.list.length-1]){
if ($mountedComponents[props.list.length - 1]) {
domModule.scrollToElement(el, {
animated: false
})
@@ -361,10 +365,10 @@
const item = props.list[index]
setVideoList(item)
insertHistory()
}else{
setTimeout(()=>{
} else {
setTimeout(() => {
goListPosition(index)
},30)
}, 30)
}
}
@@ -383,7 +387,7 @@
function popupShow(key = 'show') {
popup[key] = true
}
let jinbiBili = ref(0)
let wHeight = ref(0)
@@ -400,10 +404,10 @@
watch(() => props.collect, (newval) => {
isCollect.value = newval
})
function toDetail(item,index){
function toDetail(item, index) {
uni.navigateTo({
url:'/pages/video/detail?courseId='+item.courseId
url: '/pages/video/detail?courseId=' + item.courseId
})
}
@@ -510,8 +514,27 @@
const urls = returnShareUrl() + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode;
console.log(urls);
posterData.img = item.titleImg
posterData.show = true
// #ifdef H5
refPoster.value.make({
qrcode: urls,
title: props.info.title,
bigImg: item.titleImg,
tips: '长按或扫描识别二维码观看'
})
// #endif
// #ifndef H5
uni.setClipboardData({
data: urls,
success() {
uni.showToast({
title: '邀请链接已复制到剪贴板',
icon: 'none'
})
}
})
// #endif
}
function posterHide() {
@@ -610,7 +633,30 @@
const nowDanjiPrice = computed(() => {
return videoList.value[current.value].price
})
const rightStyle=computed(()=>{
// #ifdef H5
return {
transform: `translateX(${!control.showControls?'0':60}px)`
}
// #endif
// #ifdef APP
return {
transform: `translateX(${control.showControls?'0':60}px)`
}
// #endif
})
const infoStyle=computed(()=>{
// #ifdef H5
return {
transform: `translateX(${!control.showControls?0:'-110%'})`
}
// #endif
// #ifdef APP
return {
transform: `translateX(${control.showControls?0:'-110%'})`
}
// #endif
})
function loadmore() {
console.log('loadmore');
}
@@ -810,6 +856,13 @@
height: 56rpx;
}
.qrcode {
position: fixed;
top: -9999px;
left: -9999px;
opacity: 0;
}
.speed-list {
align-items: center;
background-color: #eeeeef;