|
|
@@ -2,52 +2,51 @@
|
|
|
<view class="swiper-wrapper" :class="liveItem.showType == 1 ? 'horizontal' : ''">
|
|
|
<view class="container">
|
|
|
<!-- 预告直播状态 -->
|
|
|
- <view class="trailer-box2" v-if="liveItem.status == 1">
|
|
|
- <view class="video-container2" :style="{ paddingBottom:videoRatio + '%',height:auto,width:'100%'}">
|
|
|
- <!-- <view class="video-container2" :style="{ paddingBottom:liveItem.previewUrl?videoRatio + '%':'' ,height:auto,width:'100%'}"> -->
|
|
|
- <!-- <video v-if="liveItem.previewUrl" :id="`myVideo_${liveId}`" class="trailer-video" -->
|
|
|
- <video :id="`myVideo_${liveId}`" class="trailer-video"
|
|
|
- src="https://7f49ea74-bjzmkytcpv-ylrzcloud-com.tliveapp.com/course/20251211/1765419935568.mp4" :autoplay="true" :loop="false"
|
|
|
- :object-fit="isHeight?'contain':'fill'" :custom-cache="false"
|
|
|
- :enable-progress-gesture="false" vslide-gesture-in-fullscreen="false" :show-center-play-btn="false"
|
|
|
- :http-cache="false" @error="videoError" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
|
|
|
- @play="onVideoPlay" :disable-progress="true" :enable-play-gesture="true" @waiting="onVideoWaiting"
|
|
|
- preload="auto" type="application/x-mpegURL" :controls="false"></video>
|
|
|
+ <view :class="liveItem.previewUrl?'trailer-box':'trailer-box2'" v-if="liveItem.status == 1">
|
|
|
+ <view class="video-container2"
|
|
|
+ :style="{ paddingBottom:liveItem.previewUrl?videoRatio + '%':'' ,height:auto,width:'100%'}">
|
|
|
+ <video v-if="liveItem.previewUrl" :id="`myVideo_${liveId}`" class="trailer-video"
|
|
|
+ :src="liveItem.previewUrl" :autoplay="true" :loop="false"
|
|
|
+ :object-fit="isHeight?'contain':'fill'" :custom-cache="false" :enable-progress-gesture="false"
|
|
|
+ vslide-gesture-in-fullscreen="false" :show-center-play-btn="false" :http-cache="false"
|
|
|
+ @error="videoError" @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause"
|
|
|
+ @play="onVideoPlay" :disable-progress="true" :enable-play-gesture="true"
|
|
|
+ @waiting="onVideoWaiting" preload="auto" type="application/x-mpegURL" :controls="false"></video>
|
|
|
+ </view>
|
|
|
+ <image v-if="liveItem.status == 1 && !liveItem.previewUrl" class="trailer-placeholder"
|
|
|
+ src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/readyStart.png">
|
|
|
+ </image>
|
|
|
+ <view class="countdown-container" v-if="liveItem.status == 1 && liveCountdown">
|
|
|
+ <!-- <view class="live-name">{{ liveItem.liveName }}</view> -->
|
|
|
+ <view class="countdown-display">
|
|
|
+ <text class="countdown-label">距离开播还有</text>
|
|
|
+ <view class="countdown-unit">
|
|
|
+ {{ liveCountdown.hours || '00' }}
|
|
|
</view>
|
|
|
- <image v-if="liveItem.status == 1 && !liveItem.previewUrl" class="trailer-placeholder"
|
|
|
- src="/static/images/y-bg.png">
|
|
|
- </image>
|
|
|
- <view class="countdown-container" v-if="liveItem.status == 1 && liveCountdown">
|
|
|
- <!-- <view class="live-name">{{ liveItem.liveName }}</view> -->
|
|
|
- <view class="countdown-display">
|
|
|
- <text class="countdown-label">距离开播还有</text>
|
|
|
- <view class="countdown-unit">
|
|
|
- {{ liveCountdown.hours || '00' }}
|
|
|
- </view>
|
|
|
- <view class="countdown-separator">:</view>
|
|
|
- <view class="countdown-unit">
|
|
|
- {{ liveCountdown.minutes || '00' }}
|
|
|
- </view>
|
|
|
- <view class="countdown-separator">:</view>
|
|
|
- <view class="countdown-unit">
|
|
|
- {{ liveCountdown.seconds || '00' }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="countdown-separator">:</view>
|
|
|
+ <view class="countdown-unit">
|
|
|
+ {{ liveCountdown.minutes || '00' }}
|
|
|
</view>
|
|
|
- <view class="trailer-actions">
|
|
|
- <button open-type="share" class="button-reset share-button">
|
|
|
- <view class="action-button mr24" @click="handleAgreement">
|
|
|
- <text>分享给好友</text>
|
|
|
- </view>
|
|
|
- </button>
|
|
|
-
|
|
|
- <view class="action-button reserve-button" @click="handleAgreement">
|
|
|
- <!-- <image class="button-icon mr8" src="/static/images/trailer.png"></image> -->
|
|
|
- <text>预约直播</text>
|
|
|
- </view>
|
|
|
+ <view class="countdown-separator">:</view>
|
|
|
+ <view class="countdown-unit">
|
|
|
+ {{ liveCountdown.seconds || '00' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="trailer-actions">
|
|
|
+ <button open-type="share" class="button-reset share-button">
|
|
|
+ <view class="action-button mr24" @click="handleAgreement">
|
|
|
+ <text>分享给好友</text>
|
|
|
</view>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <view class="action-button reserve-button" @click="handleAgreement">
|
|
|
+ <!-- <image class="button-icon mr8" src="/static/images/trailer.png"></image> -->
|
|
|
+ <text>预约直播</text>
|
|
|
</view>
|
|
|
-
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 无直播状态 -->
|
|
|
<view class="trailer-box" v-if="!liveItem">
|
|
|
<image class="trailer-placeholder"
|
|
|
@@ -163,7 +162,8 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 回放标签 -->
|
|
|
- <view v-if="isPlayback" class="replay-label" :style="{top:liveItem.showType === 2?'22%':isFullscreen?'':'10%',bottom:isFullscreen?'75vw':''}"
|
|
|
+ <view v-if="isPlayback" class="replay-label"
|
|
|
+ :style="{top:liveItem.showType === 2?'22%':isFullscreen?'':'10%',bottom:isFullscreen?'75vw':''}"
|
|
|
:class="isFullscreen? 'replay-full' : ''">回放
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -214,7 +214,8 @@
|
|
|
<!-- 底部聊天区域 -->
|
|
|
<view class="chat-area-container" :class="{
|
|
|
'chat-area-container2': liveItem.showType == 1,
|
|
|
- 'chat-area-container3': liveItem.status == 1,
|
|
|
+ 'chat-area-container3': liveItem.status == 1 && !liveItem.previewUrl,
|
|
|
+ 'chat-area-container4': liveItem.status == 1 && liveItem.previewUrl,
|
|
|
'chat-area-focused': isFocus
|
|
|
}" :style="{ '--keyboard-height': keyboardHeight + 'rpx' ,'display':isFullscreen?'none':''}">
|
|
|
<view class="tabs_bg" v-if="liveItem.showType == 1">
|
|
|
@@ -235,7 +236,7 @@
|
|
|
公告消息: {{notice.msg}}
|
|
|
</view>
|
|
|
<scroll-view id="msgScroll" v-if="Array.isArray(talklist)" enable-flex scroll-y="true"
|
|
|
- :style="{ height: liveItem.showType === 1?`calc(100% - ${commonViewHeight}px)`:'',marginTop:liveItem.showType === 1?commonViewHeight+'px':'' }"
|
|
|
+ :style="{ height: liveItem.showType === 1?`calc(100% - ${commonViewHeight}px)`:liveItem.status == 1?'100%':'',marginTop:liveItem.showType === 1?commonViewHeight+'px':'' }"
|
|
|
:enhanced="true" :bounces="false" :show-scrollbar="false" :fast-deceleration="false"
|
|
|
:enable-back-to-top="false" class="message-scroll-view"
|
|
|
:class="liveItem.status == 1 ? 'message-scroll2' : ''" :scroll-top="scrollTop"
|
|
|
@@ -264,13 +265,15 @@
|
|
|
:placeholder-style="liveItem.showType == 1 ? 'color:#999999;' : 'color:#e7e7e7;'"
|
|
|
placeholder-class="placeholder-style" class="chat-input"
|
|
|
:class="{ 'input-focused': isFocus }" @focus="inputFocus" @blur="inputBlur"
|
|
|
- cursor-spacing="100" :adjust-position="false" :disabled="isEnd" @confirm="sendMsg" />
|
|
|
+ cursor-spacing="100" :adjust-position="false" :disabled="isEnd" @confirm="sendMsg"
|
|
|
+ :confirm-type="value?'send':'done'" />
|
|
|
|
|
|
- <input v-else :placeholder="placeholderText" v-model="value"
|
|
|
+ <input v-else :placeholder="placeholderText" v-model="value" type="text"
|
|
|
:placeholder-style="liveItem.showType == 1 ? 'color:#999999;' : 'color:#e7e7e7;'"
|
|
|
placeholder-class="placeholder-style" class="chat-input"
|
|
|
:class="{ 'input-focused': isFocus }" @focus="inputFocus" @blur="inputBlur"
|
|
|
- cursor-spacing="100" :adjust-position="false" :disabled="isEnd" />
|
|
|
+ cursor-spacing="100" :adjust-position="false" :disabled="isEnd" @confirm="sendMsg"
|
|
|
+ :confirm-type="value?'send':'done'" />
|
|
|
<!-- v-if="isFocus&&!isIOS" -->
|
|
|
<view class="send-button" v-if="!isIOS" :class="liveItem.showType == 1 ? 'send2' : ''"
|
|
|
@click="sendMsg()">
|
|
|
@@ -746,7 +749,7 @@
|
|
|
data() {
|
|
|
return {
|
|
|
menuButtonInfo: {}, // 胶囊按钮布局信息
|
|
|
- isHeight:false,
|
|
|
+ isHeight: false,
|
|
|
isFullscreen: false,
|
|
|
isVideoRotated: false,
|
|
|
showNonVideoElementsFlag: true,
|
|
|
@@ -1381,13 +1384,25 @@
|
|
|
immediate: true
|
|
|
},
|
|
|
'isShowNotice': {
|
|
|
- handler(newVal, oldVal) {
|
|
|
- setTimeout(() => {
|
|
|
- this.noticeHeightFun()
|
|
|
- }, 800)
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.noticeHeightFun()
|
|
|
+ }, 800)
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ },
|
|
|
+ 'notice.msg': {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ const newLength = newVal.length;
|
|
|
+ const oldLength = oldVal.length;
|
|
|
+ if (newLength !== oldLength) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.noticeHeightFun()
|
|
|
+ }, 800)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
noticeHeightFun() {
|
|
|
@@ -3076,8 +3091,8 @@
|
|
|
//横屏
|
|
|
const wW = (winW / winH) * 100;
|
|
|
//竖屏
|
|
|
- if(height>width){
|
|
|
- this.isHeight=true
|
|
|
+ if (height > width) {
|
|
|
+ this.isHeight = true
|
|
|
}
|
|
|
const wH = (winH / winW) * 100;
|
|
|
// this.scale = wW / this.videoRatio;
|
|
|
@@ -3086,7 +3101,7 @@
|
|
|
// this.scale = wH / videoRatio;
|
|
|
// console.log("比例", this.videoRatio, width, height)
|
|
|
// } else if (this.isFullscreen) {
|
|
|
-
|
|
|
+
|
|
|
// }
|
|
|
this.videoProgressKey = `videoProgress_${this.liveId}`;
|
|
|
this.setVideoProgress();
|
|
|
@@ -4768,7 +4783,8 @@
|
|
|
bottom: -1px;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
-.video-container2 {
|
|
|
+
|
|
|
+ .video-container2 {
|
|
|
position: relative;
|
|
|
bottom: -1px;
|
|
|
transition: all 0.3s ease;
|
|
|
@@ -4919,7 +4935,7 @@
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
- border-radius:20rpx ;
|
|
|
+ border-radius: 20rpx;
|
|
|
}
|
|
|
|
|
|
.trailer-placeholder {
|
|
|
@@ -5004,17 +5020,19 @@
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
- // 新预告直播盒子
|
|
|
+
|
|
|
+ // 新预告直播盒子
|
|
|
.trailer-box2 {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 16%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- z-index: 999;
|
|
|
- transition: box-shadow 0.3s ease ;
|
|
|
- height: 400rpx;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 16%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 999;
|
|
|
+ transition: box-shadow 0.3s ease;
|
|
|
+ height: 400rpx;
|
|
|
+
|
|
|
.trailer-video {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -5023,13 +5041,14 @@
|
|
|
}
|
|
|
|
|
|
.trailer-placeholder {
|
|
|
-
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: -1; /* 置于内容下方 */
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: -1;
|
|
|
+ /* 置于内容下方 */
|
|
|
}
|
|
|
|
|
|
.countdown-container {
|
|
|
@@ -5088,9 +5107,10 @@
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
text-align: center;
|
|
|
-border: 1px solid rgba(151, 151, 151, 1);
|
|
|
-font-size: 36rpx;
|
|
|
-font-weight: bold;
|
|
|
+ border: 1px solid rgba(151, 151, 151, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
&.reserve-button {
|
|
|
color: rgba(0, 110, 80, 1);
|
|
|
background: linear-gradient(231.51deg, rgba(249, 215, 178, 1) 0%, rgba(255, 255, 191, 1) 47.83%, rgba(255, 250, 229, 1) 65.77%, rgba(248, 214, 178, 1) 100%);
|
|
|
@@ -5115,6 +5135,7 @@ font-weight: bold;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 主要内容区域
|
|
|
.content {
|
|
|
position: relative;
|
|
|
@@ -5278,6 +5299,7 @@ font-weight: bold;
|
|
|
color: #fff;
|
|
|
border-radius: 28rpx;
|
|
|
z-index: 999999 !important;
|
|
|
+
|
|
|
&.complaint-full {
|
|
|
// top: 10rpx;
|
|
|
left: 82vh;
|
|
|
@@ -5408,7 +5430,7 @@ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
&.chat-area-container3 {
|
|
|
- height:calc(85% - 420rpx);
|
|
|
+ height: calc(85% - 420rpx);
|
|
|
flex: 1;
|
|
|
transform: none; // 移除之前的变换
|
|
|
will-change: auto;
|
|
|
@@ -5417,6 +5439,25 @@ font-weight: bold;
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
+ &.chat-area-container4 {
|
|
|
+ height: calc(85% - 640rpx);
|
|
|
+ flex: 1;
|
|
|
+ transform: none; // 移除之前的变换
|
|
|
+ will-change: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: absolute;
|
|
|
+ // max-height: 40%;
|
|
|
+ // flex: 1;
|
|
|
+ // min-height: 0; // 重要:允许收缩到0
|
|
|
+ // // position: relative;
|
|
|
+ // transform: none; // 移除之前的变换
|
|
|
+ // will-change: auto;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
&.chat-area-focused {
|
|
|
transform: translateY(calc(-1 * var(--keyboard-height, 0rpx))) translateZ(0);
|
|
|
z-index: 1000;
|
|
|
@@ -5471,8 +5512,9 @@ font-weight: bold;
|
|
|
height: fit-content;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
+
|
|
|
&.horizontal-notice2 {
|
|
|
- color:#fff !important
|
|
|
+ color: #fff !important
|
|
|
}
|
|
|
}
|
|
|
|