视频列表支付更新

components/my-video-list/list-item.vue

@@ -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"
+			@waiting="waiting()" object-fit="cover" @pause="onpause" @click="videoClick()"
-			@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-if="isCollect" src="@/static/images/shuqian_s.png" mode=""></image>
-				<image class="icon" v-else 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:{
+		rightStyle: {
-			type:Object,
+			type: Object,
-			default:()=>{
+			default: () => {
 				return {
-					
+
 				}
 			}
 		},
-		infoStyle:{
+		infoStyle: {
-			type:Object,
+			type: Object,
-			default:()=>{
+			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(){
+	function onpause() {
-		isPlying=false
+		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){
+	function videoClick() {
-			if(isPlying){
+		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 */

components/my-video-list/my-video-list.vue

@@ -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"
+				<list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :showControls="control.showControls" :current="current"
-					: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)"
@@ -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', {
+		console.log(popup.index);
-			index: 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.data = item
-			popup['index'] = index
+			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>

pages/pays/pays.vue

@@ -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
 	})

pages/video/detail.nvue

@@ -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) => {