修复选集弹窗ios偶发性不出现问题
This commit is contained in:
parent
169b3ca31e
commit
48154cf82f
|
|
@ -132,9 +132,12 @@
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
// #ifdef H5
|
||||
getElRect('myCanvas').then(res => {
|
||||
Object.assign(posterData, res)
|
||||
})
|
||||
// #endif
|
||||
|
||||
})
|
||||
|
||||
function hide() {
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
@ -332,8 +346,27 @@
|
|||
video = null
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
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,10 +550,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.ji-item:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.hot {
|
||||
width: 40rpx;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Loading…
Reference in New Issue