修复选集弹窗ios偶发性不出现问题

components/my-poster/my-poster.vue

@@ -132,9 +132,12 @@
 	}
 
 	onMounted(() => {
+		// #ifdef H5
 		getElRect('myCanvas').then(res => {
 			Object.assign(posterData, res)
 		})
+		// #endif
+		
 	})
 
 	function hide() {

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

@@ -3,22 +3,28 @@
 
 		<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
 			play-btn-position="center"
-			show-center-play-btn
+			:show-center-play-btn="false"
 			:show-play-btn="false"
-			@timeupdate="timeupdate" @waiting="waiting()" object-fit="cover" @pause="onpause" @click="videoClick()"
+			:controls="true"
+			@click.stop="videoClick()"
+			@timeupdate="timeupdate" @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="loop"
+			:show-loading="true" codec="software" :muted="false"  :loop="loop"
 			: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"
+		<image class="poster" v-else @click.stop="posterClick" :src="item.titleImg"
 			mode="aspectFill">
 		</image>
 		
+		<view class="play-icon" v-if="showVideo&&!isPlying" @click.stop="videoClick()" :style="playStyle">
+			<image class="icon"  src="@/static/images/play.png" mode=""></image>
+		</view>
+		
 		<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')">
+			<view class="u-m-t-20 color-fff" @click.stop="popupShow('show')">
 				<text class="color-fff">
 					{{item.courseDetailsName}}（共{{total}}集）选集 >
 				</text>
@@ -28,7 +34,7 @@
 		<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">
+			<view class="u-m-t-20 color-fff" @click.stop="toDetail">
 				<text class="color-fff">
 					查看更多续集 >
 				</text>
@@ -100,6 +106,10 @@
 				}
 			}
 		},
+		isTabbar:{
+			type: Boolean,
+			default: false
+		},
 		isCommand: {
 			type: Boolean,
 			default: false
@@ -148,7 +158,11 @@
 	const emits = defineEmits(['controlstoggles', 'disappear', 'appear', 'waiting', 'videoPlay', 'ended', 'dianzanClick',
 		'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail', 'showInfo', 'playStatusChange'
 	])
-
+	function posterClick(){
+		if(!props.item.videoUrl){
+			popupShow('pay',props.item)
+		}
+	}
 	function controlstoggles(e) {
 		emits('controlstoggles', e)
 	}
@@ -283,17 +297,17 @@
 	let video = null
 
 	function disappear() {
+		emits('disappear')
 		if (video) {
 			video.pause()
 		}
-		emits('disappear')
 	}
 	const showVideo = computed(() => {
 		// #ifdef H5
 		return props.current === props.index && props.item.videoUrl
 		// #endif
 		// #ifdef APP
-		return props.nowIndex === props.index && props.item.videoUrl
+		return props.nowIndex === props.index && props.item.videoUrl ?true :false
 		// #endif
 	})
 	onMounted(() => {
@@ -333,7 +347,26 @@
 		}
 	})
 	
-
+	const customStyle = computed(() => {
+		// #ifdef H5
+		return {
+			bottom: props.isTabbar ? '50px' : '0'
+		}
+		// #endif
+		// #ifndef H5
+		return {}
+		// #endif
+	})
+	const playStyle=computed(()=>{
+		if(isPlying.value){
+			return {
+				bottom:'0'
+			}
+		}
+		return {
+			bottom: props.isTabbar ? (50+44 +'px') : '44px'
+		}
+	})
 	const infoStyle = computed(() => {
 		return {
 			transform: `translateX(${(!isPlying.value||!props.item.videoUrl)?0:'-750rpx'})`
@@ -467,7 +500,21 @@
 		justify-content: center;
 		align-items: center;
 	}
+	.play-icon{
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		justify-content: center;
+		align-items: center;
+		$icon-size:80rpx;
+		.icon{
+			width: $icon-size;
+			height: $icon-size;
+		}
 		
+	}
 	.ji-list {
 		.ji-item {
 			width: 210rpx;
@@ -503,11 +550,13 @@
 			}
 		}
 	}
-
+	/* #ifdef H5 */
 	.ji-item:nth-of-type(3n) {
 		margin-right: 0;
 	}
 	
+	/* #endif */
+
 	.hot {
 		width: 40rpx;
 		height: 40rpx;

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

@@ -5,13 +5,12 @@
 			@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"
+				<list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :height="wHeight"
-				:height="wHeight"
+					:isTabbar="isTabbar" @playStatusChange="playStatusChange" :showControls="control.showControls"
-				@playStatusChange="playStatusChange"
+					:current="current" :isCollect="isCollect" @toDetail="toDetail(item,index)"
-					:showControls="control.showControls" :current="current" :isCollect="isCollect"
+					@controlstoggles="controlstoggles" :playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex"
-					@toDetail="toDetail(item,index)" @controlstoggles="controlstoggles" :playSpeeds="playSpeeds"
+					@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)"
-					:index="index" :nowIndex="nowIndex" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
+					@popupShow="popupShow($event,item,index)"></list-item-vue>
-					@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow($event,item,index)"></list-item-vue>
 			</swiper-item>
 		</swiper>
 	</view>
@@ -23,13 +22,12 @@
 		<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"
-				@playStatusChange="playStatusChange"
+					:isTabbar="isTabbar" @playStatusChange="playStatusChange" :height="wHeight" :isCommand="isCommand"
-				:height="wHeight"
+					:showControls="control.showControls" @toDetail="toDetail(item,index)" @itemMounted="itemMounted"
-					:isCommand="isCommand" :showControls="control.showControls" @toDetail="toDetail(item,index)"
+					@controlstoggles="controlstoggles" :index="index" :instance="instance" :nowIndex="nowIndex"
-					@itemMounted="itemMounted" @controlstoggles="controlstoggles" :index="index" :instance="instance"
+					@appear="appear($event,item,index)" :playSpeeds="playSpeeds" @disappear="disappear(item,index)"
-					:nowIndex="nowIndex" @appear="appear($event,item,index)" :playSpeeds="playSpeeds"
+					@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)"
-					@disappear="disappear(item,index)" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
+					@popupShow="popupShow($event,item,index)"></list-item-vue>
-					@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow($event,item,index)"></list-item-vue>
 			</view>
 		</cell>
 	</list>
@@ -41,9 +39,10 @@
 		<u-icon name="arrow-left" color="#fff" :size="28" @click="back"></u-icon>
 	</view>
 
+
 	<!-- 选集 -->
-	<up-popup :show="popup.show" :round="10" @close="popupClose('show')" :customStyle="customStyle">
+	<up-overlay :show="popup.show" @click="popupClose('show')">
-		<view class="u-p-30">
+		<view class="u-p-30 bg-fff xuanji-box">
 			<view class="u-flex u-flex-row u-row-between">
 				<view class="u-flex u-flex-row" style="align-items: baseline;">
 					<text class="color-333 u-font-32 ">{{info.title}}</text>
@@ -51,9 +50,45 @@
 				</view>
 				<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
 			</view>
-			<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll" ref="refXuanjiList"
+			<view :style="{height:xuanjiData.height+'px',overflow:'hidden'}">
-				:style="{height:xuanjiData.height+'px'}" @scroll="xuanjiScroll" :scroll-top="xuanjiData.scrollTop"
+				<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll" :style="{height:xuanjiData.height+'px'}"
-				scroll-with-animation :show-scrollbar="false">
+					:scroll-top="xuanjiData.scrollTop" :show-scrollbar="false">
+					<view class="ji-list u-flex u-flex-row u-flex-wrap">
+						<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
+							:class="[nowIndex==index?'active':'',(index+1)%3==0?'mr-0':'','ji-item'+index]"
+							v-for="(item,index) in list" :key="index">
+							<text class="u-font-28" :class="{'color-fff':nowIndex==index}">第{{index+1}}集</text>
+							<view class="lock u-flex-xy-center" v-if="!item.videoUrl">
+								<up-icon name="lock" :size="14" color="#fff"></up-icon>
+								<!-- <image class="lock-icon" src="@/static/images/lock.png" mode=""></image> -->
+							</view>
+							<image v-if="nowIndex==index" class="playing" src="@/static/images/playIng.png" mode="">
+							</image>
+						</view>
+					</view>
+
+				</scroll-view>
+			</view>
+
+		</view>
+	</up-overlay>
+
+
+
+	<!-- 暂时舍弃，因为在ios上会有奇怪问题导致经常不出现 -->
+	<!-- 选集--> 
+	<!-- <view class="mask" :class="{'mask-show':popup.show}">
+		<view class="u-p-30 bg-fff box">
+			<view class="u-flex u-flex-row u-row-between">
+				<view class="u-flex u-flex-row" style="align-items: baseline;">
+					<text class="color-333 u-font-32 ">{{info.title}}</text>
+					<text class="u-font-28 color-666 u-m-l-20">共{{list.length}}集</text>
+				</view>
+				<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
+			</view>
+			<view :style="{height:xuanjiData.height+'px',overflow:'hidden'}">
+				<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll" :style="{height:xuanjiData.height+'px'}"
+					:scroll-top="xuanjiData.scrollTop" :show-scrollbar="false">
 					<view class="ji-list u-flex u-flex-row u-flex-wrap">
 						<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
 							:class="[nowIndex==index?'active':'',(index+1)%3==0?'mr-0':'','ji-item'+index]"
@@ -69,7 +104,42 @@
 
 				</scroll-view>
 			</view>
+
+		</view>
+	</view> -->
+	<up-popup :show="popup.show1" :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;">
+					<text class="color-333 u-font-32 ">{{info.title}}</text>
+					<text class="u-font-28 color-666 u-m-l-20">共{{list.length}}集</text>
+				</view>
+				<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
+			</view>
+			<view :style="{height:xuanjiData.height+'px',overflow:'hidden'}">
+				<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll" :style="{height:xuanjiData.height+'px'}"
+					:scroll-top="xuanjiData.scrollTop" :show-scrollbar="false">
+					<view class="ji-list u-flex u-flex-row u-flex-wrap">
+						<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
+							:class="[nowIndex==index?'active':'',(index+1)%3==0?'mr-0':'','ji-item'+index]"
+							v-for="(item,index) in list" :key="index">
+							<text class="u-font-28" :class="{'color-fff':nowIndex==index}">第{{index+1}}集</text>
+							<view class="lock u-flex-xy-center" v-if="!item.videoUrl">
+								<up-icon name="lock" :size="14" color="#fff"></up-icon>
+								<!-- <image class="lock-icon" src="@/static/images/lock.png" mode=""></image> -->
+							</view>
+							<image v-if="nowIndex==index" class="playing" src="@/static/images/playIng.png" mode="">
+							</image>
+						</view>
+					</view>
+
+				</scroll-view>
+			</view>
+
+		</view>
 	</up-popup>
+
+
 	<!-- 支付 -->
 	<up-popup :show="popup.pay" :round="10" @close="popupClose('pay')" :customStyle="customStyle">
 		<view class="u-p-30">
@@ -155,7 +225,9 @@
 		</view>
 	</up-popup>
 
+	<!-- #ifdef H5 -->
 	<my-poster ref="refPoster"></my-poster>
+	<!-- #endif -->
 </template>
 
 <script setup>
@@ -188,8 +260,10 @@
 		watch,
 		nextTick,
 		onMounted,
-		getCurrentInstance
+		getCurrentInstance,
+		onUnmounted
 	} from 'vue';
+
 	let initing = true
 	const refPoster = ref(null)
 
@@ -336,11 +410,14 @@
 		const oneItemHeight = height + marginBottom
 		const scrollTop = Math.ceil((nowIndex.value + 1) / 3) * oneItemHeight - (xuanjiData.height) / 2 +
 			oneItemHeight / 2
-			console.log(scrollTop);
+		if(props.list.length<=15){
-		xuanjiData.scrollTop =scrollTop<0?0:scrollTop
+			xuanjiData.scrollTop=0
 			return 
+		}	
+		xuanjiData.scrollTop = scrollTop * 1 <0 ? 0 : scrollTop
 		// #endif
 
+		// #ifdef H5
 		if (!xuanjiData.items[props.list.length - 1]) {
 			const res = await getElRect('ji-list', instance, {
 				rect: true
@@ -363,6 +440,9 @@
 		xuanjiData.scrollTop = xuanjiData.items[nowIndex.value].top - (xuanjiData.height) / 2 + (xuanjiData.items[
 			nowIndex.value].height) / 2
 		console.log(xuanjiData);
+		// #endif
+
+
 	}
 
 
@@ -379,6 +459,9 @@
 		if (!initing) {
 			cacheIndex = index
 		}
+		if($common.isIos){
+			console.log('appear:'+index);
+		}
 	}
 
 	function disappear(item, index) {
@@ -535,17 +618,24 @@
 
 
 	function popupClose(key) {
+		console.log('popupClose:' + key);
+		if (key == 'show') {
+			// xuanjiData.scrollTop = 0
+		}
 		if (key) {
 			popup[key] = false
 			return
 		}
 		for (let i in popup) {
+			if (!i.includes(['data', 'payType'])) {
 				popup[i] = false
 			}
 		}
+	}
 
 	function popupShow(key = 'show', item, index) {
-		console.log(item);
+		console.log('key' + popup[key]);
+		console.log('popupShow');
 		if (key == 'show') {
 			// #ifdef H5
 			nextTick(() => {
@@ -555,7 +645,6 @@
 			// #ifdef APP
 			xuanjiInit()
 			// #endif
-
 		}
 		popup[key] = true
 		if (item) {
@@ -768,7 +857,11 @@
 		}
 		console.log(videoList.value);
 		if (!item.videoUrl) {
+			nextTick(() => {
+				setTimeout(() => {
 					popupShow('pay', item, index)
+				}, 100)
+			})
 		}
 	}
 
@@ -828,6 +921,9 @@
 	}, 2000)
 
 
+	onUnmounted(() => {
+		// popupClose()
+	})
 
 	defineExpose({
 		videoListUpdata
@@ -969,6 +1065,11 @@
 				padding: 2rpx 4rpx;
 				top: 0;
 				right: 0;
+
+				.lock-icon {
+					width: 24rpx;
+					height: 24rpx;
+				}
 			}
 
 			.playing {
@@ -1043,9 +1144,48 @@
 			align-items: center;
 			text-align: center;
 
+			.playing {}
+
 			&.active {
 				background-color: #ffffff;
+
+				.playing {}
 			}
 		}
 	}
+
+	.mask {
+		position: fixed;
+		z-index: 2000;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, .5);
+		justify-content: end;
+		transition: transform .3s ease-in-out;
+		transform: translateY(100vh);
+
+		&.mask-show {
+			transform: translateY(0);
+		}
+
+		.box {
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border-radius: 10px 10px 0 0;
+			background-color: #fff;
+		}
+	}
+
+	.xuanji-box {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 10px 10px 0 0;
+		background-color: #fff;
+	}
 </style>