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

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

Browse Source
This commit is contained in:
YeMingfei666
2025-01-17 16:19:23 +08:00
parent 169b3ca31e
commit 48154cf82f
6 changed files with 247 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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"
:height="wHeight"
@playStatusChange="playStatusChange"
: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($event,item,index)"></list-item-vue>
<list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :height="wHeight"
:isTabbar="isTabbar" @playStatusChange="playStatusChange" :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($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"
:height="wHeight"
: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)"
@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow($event,item,index)"></list-item-vue>
:isTabbar="isTabbar" @playStatusChange="playStatusChange" :height="wHeight" :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)" @zhuijuClick="zhuijuClick(item)"
@popupShow="popupShow($event,item,index)"></list-item-vue>
</view>
</cell>
</list>
@@ -41,8 +39,75 @@
<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 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>
<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-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]"
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>
</view>
<image v-if="nowIndex==index" class="playing" src="@/static/images/playIng.png" mode="">
</image>
</view>
</view>
</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;">
@@ -51,25 +116,30 @@
</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"
:style="{height:xuanjiData.height+'px'}" @scroll="xuanjiScroll" :scroll-top="xuanjiData.scrollTop"
scroll-with-animation :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>
<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>
<image v-if="nowIndex==index" class="playing" src="@/static/images/playIng.png" mode="">
</image>
</view>
</view>
</scroll-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)
@@ -334,13 +408,16 @@
const height = 44
const marginBottom = 10
const oneItemHeight = height + marginBottom
const scrollTop= Math.ceil((nowIndex.value + 1) / 3) * oneItemHeight - (xuanjiData.height) / 2 +
const scrollTop = Math.ceil((nowIndex.value + 1) / 3) * oneItemHeight - (xuanjiData.height) / 2 +
oneItemHeight / 2
console.log(scrollTop);
xuanjiData.scrollTop =scrollTop<0?0:scrollTop
return
if(props.list.length<=15){
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) {
popup[i] = false
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) {
popupShow('pay', item, index)
nextTick(() => {
setTimeout(() => {
popupShow('pay', item, index)
}, 100)
})
}
}
@@ -824,10 +917,13 @@
* @param {type} = [start,end]
*/
const playStatusChange = debounce((data) => {
Api.playStatus(data)
Api.playStatus(data)
}, 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>