|
|
@@ -1,23 +1,22 @@
|
|
|
<template>
|
|
|
<view class="swiper-wrapper" :class="liveItem.showType == 1 ? 'horizontal' : ''">
|
|
|
<view class="container">
|
|
|
- <!-- 预告直播状态 -->
|
|
|
- <view class="trailer-box" v-if="liveItem.status == 1">
|
|
|
- <view class="video-container2" :style="{ paddingBottom: videoRatio + '%',height:auto,width:'100%'}">
|
|
|
+ <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="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>
|
|
|
+ :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/no_live.png">
|
|
|
+ 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="live-name" v-if="liveItem.previewUrl">{{ liveItem.liveName }}</view>
|
|
|
<view class="countdown-display">
|
|
|
<text class="countdown-label">距离开播还有</text>
|
|
|
<view class="countdown-unit">
|
|
|
@@ -35,14 +34,13 @@
|
|
|
</view>
|
|
|
<view class="trailer-actions">
|
|
|
<button open-type="share" class="button-reset share-button">
|
|
|
- <view class="action-button mr18" @click="handleAgreement">
|
|
|
+ <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>
|
|
|
+ <text>{{ hasSubscribed ? '已预约' : '预约直播'}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -88,20 +86,6 @@
|
|
|
<view class="viewer-count ">{{formattedWatchCount || 0 }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- v-if="!hasReachedTarget" -->
|
|
|
- <!-- v-if="hasReachedTarget!=100" -->
|
|
|
- <view class="progress-countdown end" v-if="countdownPercentage!=100">
|
|
|
- <!-- <view class="mb16 title">领取完课积分</view> -->
|
|
|
- <image class="title" src="/static/images/points_title.png"></image>
|
|
|
- <view class="progress-bar-bg">
|
|
|
- <view class="progress-bar-fill" :style="{ width: countdownPercentage + '%' }"></view>
|
|
|
- </view>
|
|
|
- <!-- 剩余 -->
|
|
|
- <view class="progress-text">
|
|
|
- 倒计时{{ formattedCountdown.hours||'00' }}:{{ formattedCountdown.minutes||'00' }}:{{ formattedCountdown.seconds||"00" }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
@@ -110,6 +94,20 @@
|
|
|
<view class="video-container"
|
|
|
:style="{ paddingBottom: liveItem.showType==2||isFullscreen?'':videoRatio + '%',height:liveItem.showType==2?'100vh':isFullscreen?'auto':'400rpx',width:isFullscreen?'0':'100%'}"
|
|
|
:class="{'horizontal-layout': liveItem.showType == 1,'fullscreen-mode': isFullscreen}">
|
|
|
+ <!-- <video v-if="liveItem.videoUrl && liveItem.liveType == 2 && !generating"
|
|
|
+ :id="`myVideo_${liveId}`" :autoplay="true" class="video-player" :src="liveItem.videoUrl"
|
|
|
+ object-fit="contain" :custom-cache="false" :enable-progress-gesture="false"
|
|
|
+ vslide-gesture-in-fullscreen="true" :show-center-play-btn="false" :http-cache="false" loop
|
|
|
+ @error="videoError" @timeupdate="onVideoTimeUpdate" @loadedmetadata="onVideoMetaLoaded"
|
|
|
+ @pause="onVideoPause" @play="onVideoPlay" @waiting="onVideoWaiting"
|
|
|
+ :enable-play-gesture="false" :play-strategy="1" @dblclick="preventDoubleClick"
|
|
|
+ preload="auto" :enable-stash-buffer="false" :stash-initial-size="0" :stash-max-size="0"
|
|
|
+ :stash-time="0" type="application/x-mpegURL" :controls="false" :show-fullscreen-btn="true"
|
|
|
+ show-play-btn show-mute-btn enable-play-gesture="true"
|
|
|
+ @fullscreenchange="onFullscreenChange" x5-video-player-fullscreen="true"
|
|
|
+ x5-video-player-type="h5" x5-video-orientation="landscape" :webkit-playsinline="false"
|
|
|
+ playsinline="false" :x5-playsinline="false">
|
|
|
+ </video> -->
|
|
|
<video v-if="liveItem.videoUrl && liveItem.liveType == 2 && !generating"
|
|
|
:id="`myVideo_${liveId}`" :autoplay="true" class="video-player" :src="liveItem.videoUrl"
|
|
|
:style="{transform:liveItem.showType!==2?`scale(${scale})`:'', transformOrigin: 'center center', bottom:isFullscreen?'0':''}"
|
|
|
@@ -159,7 +157,8 @@
|
|
|
<view class="videolist" v-if="liveItem.status == 3">
|
|
|
<view class="video-container" style="height: 500rpx;"
|
|
|
:class="{'horizontal-layout': liveItem.showType == 1, 'fullscreen-mode': isFullscreen}">
|
|
|
- <view class="live-end-message">直播已结束</view>
|
|
|
+ <view class="live-end-message" :style="{marginTop:liveItem.showType === 2?'50%':''}">直播已结束
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -177,6 +176,19 @@
|
|
|
<view v-if="liveItem.videoUrl && liveItem.liveType == 3" class="replay-label">直播回放</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- v-if="!hasReachedTarget" -->
|
|
|
+ <!-- &&liveItem.completionPointsEnabled -->
|
|
|
+ <view class="progress-countdown end" :class="liveItem.showType==2?' progress-vertical':''"
|
|
|
+ v-if="countdownPercentage!=100&&liveItem.completionPointsEnabled&&!receiveStatus&&liveItem.status!= 1">
|
|
|
+ <image class="title" src="/static/images/points_title.png"></image>
|
|
|
+ <view class="progress-bar-bg">
|
|
|
+ <view class="progress-bar-fill" :style="{ width: countdownPercentage + '%' }"></view>
|
|
|
+ </view>
|
|
|
+ <!-- 剩余 -->
|
|
|
+ <view class="progress-text">
|
|
|
+ 倒计时{{ formattedCountdown.hours||'00' }}:{{ formattedCountdown.minutes||'00' }}:{{ formattedCountdown.seconds||"00" }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="slide-group" v-if="!isFocus && !isFullscreen">
|
|
|
<view class="action-button-group end">
|
|
|
<view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','ml20']">
|
|
|
@@ -200,10 +212,11 @@
|
|
|
|
|
|
<!-- 底部聊天区域 -->
|
|
|
<view class="chat-area-container" :class="{
|
|
|
- 'chat-area-container2': liveItem.showType == 1,
|
|
|
- 'chat-area-container3': liveItem.status == 1,
|
|
|
- 'chat-area-focused': isFocus
|
|
|
- }" :style="{ '--keyboard-height': keyboardHeight + 'rpx' ,'display':isFullscreen?'none':''}">
|
|
|
+ 'chat-area-container2': liveItem.showType == 1,
|
|
|
+ 'chat-area-container3': liveItem.status == 1 && !liveItem.previewUrl && liveItem.showType == 1,
|
|
|
+ 'chat-area-container4': liveItem.status == 1 && liveItem.previewUrl && liveItem.showType == 1,
|
|
|
+ 'chat-area-focused': isFocus
|
|
|
+ }" :style="{ '--keyboard-height': keyboardHeight + 'rpx' ,'display':isFullscreen?'none':''}">
|
|
|
<view class="tabs_bg" v-if="liveItem.showType == 1">
|
|
|
<u-tabs :list="listTabs" @click="clickTabs" lineColor="#02B176"
|
|
|
:activeStyle="{color: '#02B176',fontWeight: 'bold',transform: 'scale(1.05)'}">
|
|
|
@@ -215,18 +228,20 @@
|
|
|
<view class="fs26">投诉</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="chat-content-wrapper" :class="{ 'chat-content-focused': isFocus }">
|
|
|
+ <view class="chat-content-wrapper"
|
|
|
+ :style="{ 'height':liveItem.status == 1 && !liveItem.previewUrl && liveItem.showType == 2?'48vh':''}"
|
|
|
+ :class="{ 'chat-content-focused': isFocus }">
|
|
|
<view class="notice-message" v-if="isShowNotice"
|
|
|
+ :style="{ 'display':isFocus&&liveItem.showType == 2?'none':''}"
|
|
|
:class="liveItem.showType == 1 ? 'horizontal-notice' : 'horizontal-notice2'">
|
|
|
公告消息: {{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':'' }"
|
|
|
- :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"
|
|
|
- :scroll-into-view="scrollIntoView" @scroll="onScroll" ref="scrollView">
|
|
|
+ :style="{ height: liveItem.showType === 1 || liveItem.showType == 2 && !isFocus?`calc(100% - ${commonViewHeight}px)`:'',
|
|
|
+ marginTop:liveItem.showType === 1?commonViewHeight+'px':liveItem.showType == 2 && !isFocus?`calc(${commonViewHeight}px + 20rpx)`:'' }" :enhanced="true" :bounces="false"
|
|
|
+ :show-scrollbar="false" :fast-deceleration="false" :enable-back-to-top="false"
|
|
|
+ class="message-scroll-view" :scroll-top="scrollTop" :scroll-into-view="scrollIntoView"
|
|
|
+ @scroll="onScroll" ref="scrollView">
|
|
|
<view class="message-list" v-for="(item, talkIndex) in (talklist || [])"
|
|
|
:key="item.uniqueId " :id="`list_${item.uniqueId }`" v-show="item.cmd != 'red' ">
|
|
|
<view class="message-item">
|
|
|
@@ -244,20 +259,22 @@
|
|
|
<!-- 底部输入和操作区域 -->
|
|
|
<view class="input-actions-container" :class="{ 'input-actions-focused': isFocus }">
|
|
|
<view v-if="liveItem.status!=3&&!isPlayback" class="input-container" :class="{
|
|
|
- 'input-container-focused': isFocus,
|
|
|
- 'input-container-normal': !isFocus
|
|
|
- }">
|
|
|
+ 'input-container-focused': isFocus,
|
|
|
+ 'input-container-normal': !isFocus
|
|
|
+ }">
|
|
|
<input v-if="isIOS" type="text" :placeholder="placeholderText" v-model="value"
|
|
|
: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()">
|
|
|
@@ -269,9 +286,13 @@
|
|
|
<view
|
|
|
:class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-button','mr40']"
|
|
|
@click="isMore=true,shopping=false">
|
|
|
+ <!-- <image
|
|
|
+ src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png"
|
|
|
+ class="action-icon" /> -->
|
|
|
+
|
|
|
<image :src="liveItem.showType == 1
|
|
|
- ? '/static/images/more2.png'
|
|
|
- :'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png'"
|
|
|
+ ? '/static/images/more2.png'
|
|
|
+ :'https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/more-icon.png'"
|
|
|
class="action-icon" />
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -373,12 +394,11 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
- <!-- 积分弹窗 -->
|
|
|
+ <!-- 积分弹窗(完课) -->
|
|
|
<!-- showPoints -->
|
|
|
<!-- :show="!!integral.status" -->
|
|
|
<!-- :show="showPoints" -->
|
|
|
<u-popup :show="shouldShowIntegralPopup" round="20rpx" mode="center" bgColor="#ffffff" zIndex="10076">
|
|
|
- {{receiveList}}
|
|
|
<view class="integral-popup color9">
|
|
|
<view class="integral-header">
|
|
|
<view class="integral-title">观看视频领积分</view>
|
|
|
@@ -389,12 +409,28 @@
|
|
|
<view class="integral-content">
|
|
|
<view class="integral-item" v-for="(item,index ) in receiveList" :key="index">
|
|
|
<view class="integral-message">连续签到{{item.continuousDays}}天</view>
|
|
|
- <view class="integral-message">获取{{pointsAwarded}}积分</view>
|
|
|
+ <view class="integral-message">获取{{item.pointsAwarded}}积分</view>
|
|
|
<view class="integral-confirm-button" @click="completionReceive(item)">领取</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
+
|
|
|
+ <!-- 积分弹窗（时长) -->
|
|
|
+ <u-popup :show="!!integral.status" round="20rpx" mode="center" bgColor="#ffffff" zIndex="10076">
|
|
|
+ <view class="integral-popup color9">
|
|
|
+ <view class="integral-header">
|
|
|
+ <view class="integral-title">观看视频领积分</view>
|
|
|
+ <image class="integral-background-image"
|
|
|
+ src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/integral_bg.png"
|
|
|
+ mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ <view class="integral-content">
|
|
|
+ <view class="integral-message">{{ integral.msg }}</view>
|
|
|
+ <view class="integral-confirm-button" @click="integral.status = false">确认</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
<!-- 红包弹窗 -->
|
|
|
<u-popup :show="isShowRed" round="20rpx" mode="center" zIndex="10076" bgColor="transparent">
|
|
|
<view class="red-envelope-popup" @click="onRed()">
|
|
|
@@ -550,12 +586,12 @@
|
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/order.png" />
|
|
|
<view class="action-label">积分</view>
|
|
|
</view>
|
|
|
- <view class="more-action-item"
|
|
|
+ <!-- <view class="more-action-item"
|
|
|
@click="navgetTo('/pages_shopping/live/storeOrderRefundList?liveId=' + liveId), (isMore = false)">
|
|
|
<image class="action-icon"
|
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/after_sales.png" />
|
|
|
<view class="action-label">售后订单</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<view class="more-action-item" @click="goMiniProgram(), (isMore = false)">
|
|
|
<image class="action-icon"
|
|
|
src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/points.png" />
|
|
|
@@ -697,6 +733,7 @@
|
|
|
generateRandomString
|
|
|
} from '@/utils/courseTool.js'
|
|
|
import {
|
|
|
+ completionRecords,
|
|
|
completionReceive,
|
|
|
completionUnreceived,
|
|
|
} from '@/api/integral.js'
|
|
|
@@ -711,6 +748,15 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ receiveStatus: false,
|
|
|
+ completionRate: 0,
|
|
|
+ playbackTime: null, //用户观看回放时间
|
|
|
+ // 观看时长统计变量
|
|
|
+ watchStartTime: 0, // 开始观看时间戳
|
|
|
+ accumulatedWatchDuration: 0, // 累计观看时长（秒）
|
|
|
+ isPageVisible: true, // 页面是否可见
|
|
|
+ lastPauseTime: 0,
|
|
|
+
|
|
|
hasReachedTarget: false,
|
|
|
receiveList: [],
|
|
|
recordId: null, //完课积分记录ID
|
|
|
@@ -1204,7 +1250,7 @@
|
|
|
return !this.hasReachedTarget &&
|
|
|
this.liveItem?.liveType === 2 && // 只对录播显示
|
|
|
this.remainingTime > 0 && // 还有剩余时间
|
|
|
- this.remainingTime < this.liveItem.duration * 0.9; // 已经开始计时
|
|
|
+ this.remainingTime < this.liveItem.duration * this.completionRate; // 已经开始计时
|
|
|
},
|
|
|
// 控制是否显示非视频元素
|
|
|
shouldShowNonVideoElements() {
|
|
|
@@ -1573,16 +1619,17 @@
|
|
|
// 从本地存储加载观看进度
|
|
|
try {
|
|
|
const storedProgress = uni.getStorageSync(this.watchProgressKey);
|
|
|
- this.remainingTime = storedProgress ? parseInt(storedProgress) : this.liveItem.duration * 0.9;
|
|
|
+ this.remainingTime = storedProgress ? parseInt(storedProgress) : this.liveItem.duration * this
|
|
|
+ .completionRate;
|
|
|
console.log(`加载剩余时间: ${this.remainingTime}秒`);
|
|
|
} catch (error) {
|
|
|
console.error('加载观看进度失败:', error);
|
|
|
- this.remainingTime = this.liveItem.duration * 0.9;
|
|
|
+ this.remainingTime = this.liveItem.duration * this.completionRate;
|
|
|
}
|
|
|
// 如果剩余时间小于等于0，重置为总时长
|
|
|
if (this.remainingTime <= 0) {
|
|
|
console.log("超过了")
|
|
|
- this.remainingTime = this.liveItem.duration * 0.9;
|
|
|
+ this.remainingTime = this.liveItem.duration * this.completionRate;
|
|
|
}
|
|
|
|
|
|
// 更新显示
|
|
|
@@ -1651,7 +1698,7 @@
|
|
|
// 倒计时完成
|
|
|
onCountdownComplete() {
|
|
|
console.log('倒计时完成！');
|
|
|
- this.completionUnreceived()
|
|
|
+ // this.completionUnreceived()
|
|
|
|
|
|
this.stopCountdown();
|
|
|
this.remainingTime = 0;
|
|
|
@@ -1691,7 +1738,7 @@
|
|
|
// 重置倒计时
|
|
|
resetCountdown() {
|
|
|
this.stopCountdown();
|
|
|
- this.remainingTime = this.liveItem.duration * 0.9;
|
|
|
+ this.remainingTime = this.liveItem.duration * this.completionRate;
|
|
|
this.updateCountdownDisplay();
|
|
|
uni.removeStorageSync(this.watchProgressKey);
|
|
|
|
|
|
@@ -1735,7 +1782,7 @@
|
|
|
}
|
|
|
|
|
|
// 2. 计算目标观看时间（90%的总时长）
|
|
|
- const targetWatchTime = this.liveItem.duration * 0.9;
|
|
|
+ const targetWatchTime = this.liveItem.duration * this.completionRate;
|
|
|
|
|
|
// 3. 如果已经达到目标，直接返回100%
|
|
|
if (this.hasReachedTarget || this.remainingTime <= 0) {
|
|
|
@@ -1865,6 +1912,10 @@
|
|
|
if (res.code == 200) {
|
|
|
this.showPoints = false
|
|
|
console.log("领取完课积分", res)
|
|
|
+ uni.showToast({
|
|
|
+ title: '领取积分成功',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
}
|
|
|
}).catch((error) => {});
|
|
|
},
|
|
|
@@ -3435,6 +3486,8 @@
|
|
|
currentTime = storedProgress >= this.liveItem.duration ? 0 : storedProgress || 0;
|
|
|
this.isPlayback = true;
|
|
|
this.hasPlayback = true;
|
|
|
+
|
|
|
+
|
|
|
} else {
|
|
|
currentTime = diff % this.liveItem.duration;
|
|
|
}
|
|
|
@@ -3505,6 +3558,18 @@
|
|
|
this.isEnd = true;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // LJX
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // const difPlayback = currentTime
|
|
|
+ // const totalSeconds = Math.floor(difPlayback / 1000);
|
|
|
+ // const hours = this.padZero(Math.floor(totalSeconds / 3600));
|
|
|
+ // const minutes = this.padZero(Math.floor((totalSeconds % 3600) / 60));
|
|
|
+ // const seconds = this.padZero(totalSeconds % 60);
|
|
|
+ // this.playbackTime = `${hours}:${minutes}:${seconds}`;
|
|
|
+ // console.log("这个时间", difPlayback)
|
|
|
+ // });
|
|
|
+
|
|
|
},
|
|
|
|
|
|
// 视频暂停
|
|
|
@@ -3810,7 +3875,7 @@
|
|
|
},
|
|
|
|
|
|
// 计算当前时间与 liveItem.startTime 的差值，并更新 totalTime
|
|
|
- calculateTimeDiff(item) {
|
|
|
+ calculateTimeDiff(item, type) {
|
|
|
if (!item.startTime) return;
|
|
|
// 提取对应场景的时间字符串（直播用startTime，抽奖用updateTime）
|
|
|
let timeStr = item.startTime;
|
|
|
@@ -3829,6 +3894,9 @@
|
|
|
const minutes = this.padZero(Math.floor((totalSeconds % 3600) / 60));
|
|
|
const seconds = this.padZero(totalSeconds % 60);
|
|
|
this.diffTotalTime = `${hours}:${minutes}:${seconds}`;
|
|
|
+ if (type) {
|
|
|
+ return `${hours}:${minutes}:${seconds}`;
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
padZero(num) {
|
|
|
@@ -4106,6 +4174,31 @@
|
|
|
url: url
|
|
|
});
|
|
|
},
|
|
|
+ // 查询用户积分领取记录
|
|
|
+ completionRecords() {
|
|
|
+ if (!this.liveId) return;
|
|
|
+ const data = {
|
|
|
+ liveId: this.liveId
|
|
|
+ }
|
|
|
+ completionRecords(data).then((res) => {
|
|
|
+
|
|
|
+ if (res.code == 200) {
|
|
|
+ const targetData = res.data.find(item => item.liveId == this.liveId);
|
|
|
+ if (targetData) {
|
|
|
+ // 找到匹配的数据
|
|
|
+ const receiveStatus = targetData.receiveStatus;
|
|
|
+ this.receiveStatus = receiveStatus;
|
|
|
+ } else {
|
|
|
+ console.log('未找到liveId为', this.liveId, '的数据');
|
|
|
+ this.receiveStatus = false; // 或其他默认值
|
|
|
+ }
|
|
|
+ console.log("查询用户积分领取记录", res)
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
// 修改获取直播信息方法
|
|
|
async getliving(liveId) {
|
|
|
if (!liveId) return;
|
|
|
@@ -4174,10 +4267,15 @@
|
|
|
this.$set(this.liveItem, 'livingUrl', '');
|
|
|
this.$set(this.liveItem, 'videoUrl', '');
|
|
|
}
|
|
|
+ if (this.liveItem.configJson) {
|
|
|
+ this.completionRate = JSON.parse(this.liveItem.configJson).completionRate * 0.01
|
|
|
+ }
|
|
|
+
|
|
|
this.$set(this.liveItem, 'autoplay', res.data.liveType !== 0);
|
|
|
this.$set(this.liveItem, 'showType', res.data.showType);
|
|
|
this.storeId = res.storeId;
|
|
|
this.startLiveViewDataTimer();
|
|
|
+ this.completionRecords();
|
|
|
// 初始化观看时间统计
|
|
|
this.initWatchTime();
|
|
|
const diff = this.getTimeDifferenceInSeconds(this.liveItem.startTime)
|
|
|
@@ -4196,7 +4294,8 @@
|
|
|
this.generating = false;
|
|
|
this.hasPlayback = true;
|
|
|
this.playVideo();
|
|
|
- this.closeWebSocket(true);
|
|
|
+
|
|
|
+ // this.closeWebSocket(true);
|
|
|
this.isEnd = true;
|
|
|
}, remainingTime);
|
|
|
|
|
|
@@ -4205,7 +4304,7 @@
|
|
|
this.generating = false;
|
|
|
this.hasPlayback = true;
|
|
|
this.playVideo();
|
|
|
- this.closeWebSocket(true);
|
|
|
+ // this.closeWebSocket(true);
|
|
|
this.isEnd = true;
|
|
|
}
|
|
|
} else {
|
|
|
@@ -4897,6 +4996,31 @@
|
|
|
msg: socketMessage.msg,
|
|
|
status: true
|
|
|
};
|
|
|
+ }
|
|
|
+ // else if (socketMessage.cmd == 'completionPoints') {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: socketMessage.msg,
|
|
|
+ // icon: 'none',
|
|
|
+ // duration: 3000
|
|
|
+ // });
|
|
|
+ // this.completionUnreceived()
|
|
|
+ // }
|
|
|
+ else if (socketMessage.cmd == 'completionPoints') {
|
|
|
+ // 先显示toast
|
|
|
+ uni.showToast({
|
|
|
+ title: socketMessage.msg,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+
|
|
|
+ // 1秒后关闭弹窗并执行completionUnreceived
|
|
|
+ setTimeout(() => {
|
|
|
+ // 如果需要手动关闭toast（虽然设置了3秒自动关闭，但这里提前关闭）
|
|
|
+ uni.hideToast();
|
|
|
+
|
|
|
+ // 执行completionUnreceived方法
|
|
|
+ this.completionUnreceived();
|
|
|
+ }, 1000); // 1000毫秒 = 1秒
|
|
|
} else if (socketMessage.cmd == 'userCount') {
|
|
|
// 广播在线人数
|
|
|
this.virtualHuman = socketMessage.data * 10
|
|
|
@@ -5248,7 +5372,7 @@
|
|
|
background: var(--pop-bg);
|
|
|
border-radius: 24rpx;
|
|
|
position: absolute;
|
|
|
- top: 15%;
|
|
|
+ top: 16%;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
display: flex;
|
|
|
@@ -5351,6 +5475,117 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 新预告直播盒子
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .trailer-video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .trailer-placeholder {
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: -1;
|
|
|
+ /* 置于内容下方 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .countdown-container {
|
|
|
+ padding-top: 15%;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .live-name {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .countdown-display {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 30rpx 0;
|
|
|
+
|
|
|
+ .countdown-label {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: rgba(250, 214, 176, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .countdown-separator {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .countdown-unit {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: rgba(255, 246, 214, 1);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 8rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: rgba(0, 75, 59, 1);
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .trailer-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .action-button {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ 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%);
|
|
|
+
|
|
|
+ }
|
|
|
+ &:not(.reserve-button) {
|
|
|
+ color: rgba(255, 246, 214, 1);
|
|
|
+ background: rgba(0, 110, 80, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .no-live-title {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
// 主要内容区域
|
|
|
.content {
|
|
|
position: relative;
|
|
|
@@ -5390,43 +5625,6 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- .progress-countdown {
|
|
|
- position: absolute;
|
|
|
- top: 170rpx;
|
|
|
- width: 180rpx;
|
|
|
- // background: var(--normal-bg);
|
|
|
- background: rgba(0,0,0,0.3);
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 16rpx;
|
|
|
- flex-direction: column;
|
|
|
- .title {
|
|
|
- width: 148rpx;
|
|
|
- height: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .progress-bar-bg {
|
|
|
- width: 148rpx;
|
|
|
- height: 8rpx;
|
|
|
- margin-top: 16rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 16rpx;
|
|
|
-
|
|
|
- .progress-bar-fill {
|
|
|
- height: 100%;
|
|
|
- // background: linear-gradient(90deg, #4CAF50, #8BC34A);
|
|
|
- background: #FACE15;
|
|
|
- border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
|
- transition: width 1s linear;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .progress-text {
|
|
|
- color: #fff;
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
.user-info-section {
|
|
|
display: flex;
|
|
|
@@ -5609,11 +5807,56 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .progress-countdown {
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ top: calc(60% - 128rpx);
|
|
|
+ z-index: 9000;
|
|
|
+ width: 180rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 16rpx;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ &.progress-vertical {
|
|
|
+ top: 15%;
|
|
|
+ left: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 148rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-bar-bg {
|
|
|
+ width: 148rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .progress-bar-fill {
|
|
|
+ height: 100%;
|
|
|
+ // background: linear-gradient(90deg, #4CAF50, #8BC34A);
|
|
|
+ background: #FACE15;
|
|
|
+ border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
|
+ transition: width 1s linear;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
// 侧边
|
|
|
.slide-group {
|
|
|
position: absolute;
|
|
|
right: 20rpx;
|
|
|
- top: 56%;
|
|
|
+ top: 60%;
|
|
|
z-index: 9000;
|
|
|
|
|
|
.action-button-group {
|
|
|
@@ -5688,16 +5931,51 @@
|
|
|
}
|
|
|
|
|
|
&.chat-area-container3 {
|
|
|
+ height: calc(85% - 420rpx);
|
|
|
+ flex: 1;
|
|
|
+ transform: none; // 移除之前的变换
|
|
|
+ will-change: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
|
|
|
- max-height: 40%;
|
|
|
+ &.chat-area-container4 {
|
|
|
+ height: calc(85% - 680rpx);
|
|
|
+ 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-container5 {
|
|
|
+ height: calc(85% - 450rpx);
|
|
|
flex: 1;
|
|
|
- min-height: 0; // 重要：允许收缩到0
|
|
|
- // position: relative;
|
|
|
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 {
|
|
|
@@ -5733,7 +6011,7 @@
|
|
|
position: relative;
|
|
|
|
|
|
&.chat-content-focused {
|
|
|
- height: 100rpx;
|
|
|
+ height: 100rpx !important;
|
|
|
}
|
|
|
|
|
|
.notice-message {
|
|
|
@@ -5756,7 +6034,10 @@
|
|
|
}
|
|
|
|
|
|
&.horizontal-notice2 {
|
|
|
- color: #fff !important
|
|
|
+ color: #fff !important;
|
|
|
+ top: 12rpx;
|
|
|
+ height: fit-content;
|
|
|
+ z-index: 2;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -5895,7 +6176,6 @@
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
flex: auto;
|
|
|
- // margin-right: 15rpx;
|
|
|
transform: translateZ(0);
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
@@ -5913,8 +6193,6 @@
|
|
|
width: 58rpx;
|
|
|
height: 58rpx;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
