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

视频列表支付更新

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
Show Stats 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 */

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

@ -5,8 +5,7 @@
@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" :rightStyle="rightStyle"
:infoStyle="infoStyle" :showControls="control.showControls" :current="current"
<list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :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)"
@ -22,7 +21,7 @@
<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"
:rightStyle="rightStyle" :infoStyle="infoStyle" :isCommand="isCommand"
: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)"
@ -230,9 +229,7 @@
function controlstoggles(e) {
control.showControls = e.detail.show
console.log(control.showControls);
control.showBack = control.showControls
console.log(control);
}
const speeds = reactive({
@ -320,8 +317,11 @@
console.log('disappear nowIndex' + nowIndex.value);
console.log('cacheIndex' + cacheIndex);
nowIndex.value = cacheIndex
const item=props.list[nowIndex.value]
if (!item.videoUrl) {
popupShow('pay', item, nowIndex.value)
}
cacheIndex = null
console.log('disappear,nowIndex=' + nowIndex.value);
}
}
@ -330,11 +330,10 @@
//非金币支付
async function payOrder(data) {
const res = await Api.payOrder(data)
console.log(res);
if (res) {
// #ifdef APP
uni.navigateTo({
url: '/pages/pays/pays?orderId=' + res.orderId + '&url=' + res.h5Url
url: '/pages/pays/pays?orderId=' + data.orderId + '&url=' + res.h5Url
});
// #endif
// #ifdef H5
@ -344,15 +343,14 @@
}
//金币支付
async function goldPay(data) {
emits('update', {
index: popup.index
})
console.log(popup.index);
const res = await Api.goldPay(data)
if (res) {
uni.showToast({
title: '解锁成功',
icon: 'none'
})
popupClose()
emits('update', {
index: popup.index
})
@ -437,9 +435,10 @@
setVideoList(item)
insertHistory()
} else {
// 延迟设置元素位置，（可能视频位置比较靠后数据未渲染完毕）
positonmer = setTimeout(() => {
goListPosition(index)
}, 30)
}, 200)
}
}
@ -459,8 +458,8 @@
console.log(item);
popup[key] = true
if (item) {
popup['data'] = item
popup['index'] = index
popup.data = item
popup.index = index
}
}
@ -689,42 +688,6 @@
const nowDanjiPrice = computed(() => {
return videoList.value[current.value].price
})
const rightStyle = computed(() => {
const item = props.list[nowIndex.value]
if (!item.videoUrl) {
return {
transform: `translateX(0)`
}
}
// #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(() => {
const item = props.list[nowIndex.value]
if (!item.videoUrl) {
return {
transform: `translateX(0)`
}
}
// #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');
@ -735,6 +698,16 @@
'width': '750rpx',
}
})
function videoListUpdata(){
videoList.value=videoList.value.map(v=>{
const item=props.list.find(listItem=>listItem.courseDetailsId==v.courseDetailsId)
return item?item:v
})
}
defineExpose({
videoListUpdata
})
</script>
<style lang="scss" scoped>

3
pages/pays/pays.vue
View File

@ -31,7 +31,7 @@
getOrderInfo({
orderId: state.orderId
}).then(res => {
console.log(res.data);
console.log(res);
if (res.data == 1) {
uni.hideLoading()
const sysInfo = uni.getSystemInfoSync();
@ -74,6 +74,7 @@
uni.hideLoading()
})
onLoad((option) => {
console.log(option);
state.url = option.url
state.orderId = option.orderId
})

10
pages/video/detail.nvue
View File

@ -1,6 +1,6 @@
<template>
<view class="min-page">
<my-video-list v-if="state.list.length" @swiperChange="swiperChange" :list="state.list" @update="update"
<my-video-list ref="refVideoList" v-if="state.list.length" @swiperChange="swiperChange" :list="state.list" @update="update"
:info="state"></my-video-list>
</view>
</template>
@ -12,7 +12,7 @@
} from '@dcloudio/uni-app'
import * as Api from '@/api/video/index.js'
import {
reactive
reactive, ref
} from 'vue'
import {
slice
@ -28,6 +28,7 @@
price: 0,
title: ''
})
const refVideoList=ref(null)
async function init() {
try {
const res = await Api.getVideoDetail(options)
@ -44,14 +45,15 @@
}
}
function update({
async function update({
index,
item
}) {
if(item){
state.list[index] = item
}else{
init()
await init()
refVideoList.value.videoListUpdata()
}
}
onLoad((opt) => {