|
@@ -9,7 +9,7 @@
|
|
<image @click="goBack" class="w60 h64 mr26" src="/static/images/live/return.png">
|
|
<image @click="goBack" class="w60 h64 mr26" src="/static/images/live/return.png">
|
|
</image>
|
|
</image>
|
|
<view class="align-center"
|
|
<view class="align-center"
|
|
- style="padding: 6rpx 4rpx;height: 64rpx;background: rgba(0,0,0,0.5);border-radius: 32rpx;">
|
|
|
|
|
|
+ style="padding: 6rpx 8rpx;height: 64rpx;background: rgba(0,0,0,0.5);border-radius: 32rpx;">
|
|
<u-avatar :src="liveItem.liveImgUrl||$img.logo" size="32"></u-avatar>
|
|
<u-avatar :src="liveItem.liveImgUrl||$img.logo" size="32"></u-avatar>
|
|
<view class="colorf ml10 mr6">
|
|
<view class="colorf ml10 mr6">
|
|
<view>{{liveItem.liveName?truncateString(liveItem.liveName,8):"未命名"}}</view>
|
|
<view>{{liveItem.liveName?truncateString(liveItem.liveName,8):"未命名"}}</view>
|
|
@@ -78,17 +78,21 @@
|
|
{{orderUser.count || 0}}
|
|
{{orderUser.count || 0}}
|
|
人正在去购买</text>
|
|
人正在去购买</text>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
- <view class="videolist" style="margin: auto 0">
|
|
|
|
- <view class="video" style="height:100vh">
|
|
|
|
|
|
+ <!-- style="margin: auto 0" -->
|
|
|
|
+ <view class="videolist">
|
|
|
|
+ <view class="video" :class="liveItem.showType == 1 ? 'video_row' : ''">
|
|
<!-- 视频组件 -->
|
|
<!-- 视频组件 -->
|
|
- <live-player v-if=" liveItem.livingUrl && liveItem.liveType === 1"
|
|
|
|
- :id="'myLivePlayer_' + liveId" :class="liveItem.showType == 1 ? 'video_row' : 'videotop'"
|
|
|
|
- :src="liveItem.livingUrl" autoplay mode="live" object-fit="contain" :waiting="false"
|
|
|
|
- :muted="false" :orientation="liveItem.showType == 1 ? 'horizontal' : 'vertical'"
|
|
|
|
|
|
+ <!-- <live-player v-if=" liveItem.livingUrl && liveItem.liveType === 1"
|
|
|
|
+ :id="'myLivePlayer_' + liveId" :src="liveItem.livingUrl" autoplay mode="live"
|
|
|
|
+ object-fit="contain" :waiting="false" :muted="false"
|
|
|
|
+ :orientation="liveItem.showType == 1 ? 'horizontal' : 'vertical'"
|
|
@statechange="onLiveStateChange($event, liveItem)" @error="onLiveError($event, liveItem)"
|
|
@statechange="onLiveStateChange($event, liveItem)" @error="onLiveError($event, liveItem)"
|
|
- class="live-player"></live-player>
|
|
|
|
-
|
|
|
|
|
|
+ class=" item"></live-player> -->
|
|
|
|
+ <live-player v-if="liveItem.livingUrl && liveItem.liveType === 1" :id="'myLivePlayer_' + liveId"
|
|
|
|
+ :src="liveItem.livingUrl" autoplay mode="live" object-fit="contain" :muted="false"
|
|
|
|
+ orientation="vertical" :enable-play-gesture="true"
|
|
|
|
+ @statechange="onLiveStateChange($event, liveItem)" @error="onLiveError($event, liveItem)"
|
|
|
|
+ class="item"></live-player>
|
|
|
|
|
|
<!-- <video v-if="currentSwiperIndex === index && liveItem.livingUrl"
|
|
<!-- <video v-if="currentSwiperIndex === index && liveItem.livingUrl"
|
|
:id="'myVideo_' + liveItem.liveId"
|
|
:id="'myVideo_' + liveItem.liveId"
|
|
@@ -103,27 +107,39 @@
|
|
:custom-cache="false" :enable-progress-gesture="false" vslide-gesture-in-fullscreen='true'
|
|
:custom-cache="false" :enable-progress-gesture="false" vslide-gesture-in-fullscreen='true'
|
|
:show-center-play-btn="false" :http-cache="false" loop @error="videoError">
|
|
:show-center-play-btn="false" :http-cache="false" loop @error="videoError">
|
|
</video> -->
|
|
</video> -->
|
|
-
|
|
|
|
- <video v-if="liveItem.videoUrl" :id="`myVideo_${liveId}`"
|
|
|
|
- :class="liveItem.showType == 1 ? 'video_row' : 'videotop'" :src="liveItem.videoUrl"
|
|
|
|
- :autoplay="true" :controls="false" object-fit="contain" :custom-cache="false"
|
|
|
|
- :enable-progress-gesture="false" vslide-gesture-in-fullscreen="true"
|
|
|
|
|
|
+ <!-- 录播 -->
|
|
|
|
+ <video v-if="liveItem.videoUrl&&liveItem.liveType==2" :id="`myVideo_${liveId}`" class="item"
|
|
|
|
+ :src="liveItem.videoUrl" :autoplay="true" :controls="false" 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"
|
|
:show-center-play-btn="false" :http-cache="false" loop @error="videoError"
|
|
@timeupdate="onVideoTimeUpdate" @loadeddata="onVideoLoaded"
|
|
@timeupdate="onVideoTimeUpdate" @loadeddata="onVideoLoaded"
|
|
@loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause" @play="onVideoPlay">
|
|
@loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause" @play="onVideoPlay">
|
|
</video>
|
|
</video>
|
|
- <view v-if="liveItem.videoUrl" class="time">{{liveItem.totalTime}}</view>
|
|
|
|
|
|
+
|
|
|
|
+ <!-- 直播回放 -->
|
|
|
|
+ <!-- :enable-progress-gesture="true" -->
|
|
|
|
+ <video v-if="liveItem.videoUrl&&liveItem.liveType==3" :id="`myVideo_${liveId}`" class="item"
|
|
|
|
+ :src="liveItem.videoUrl" :autoplay="true" :controls="true" object-fit="contain"
|
|
|
|
+ :custom-cache="false" :enable-progress-gesture="liveItem.isSpeedAllowed"
|
|
|
|
+ vslide-gesture-in-fullscreen="true" :show-center-play-btn="true" :http-cache="false" loop
|
|
|
|
+ @error="videoError" @timeupdate="onVideoTimeUpdate" @loadeddata="onVideoLoaded"
|
|
|
|
+ @loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause" @play="onVideoPlay"
|
|
|
|
+ @seek="onVideoSeek">
|
|
|
|
+ </video>
|
|
|
|
+ <!-- v-if="liveItem.liveType" -->
|
|
|
|
+ <view v-if="liveItem.videoUrl&&liveItem.liveType==2" class="time">{{liveItem.totalTime}}</view>
|
|
|
|
+ <view v-if="liveItem.videoUrl&&liveItem.liveType==3" class="lable">直播回放</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 底部聊天区域 -->
|
|
<!-- 底部聊天区域 -->
|
|
- <view class="pb40 mt90 " style="position: fixed;bottom: 120rpx;width: 100%;">
|
|
|
|
- <view class="w100 h500 mt20">
|
|
|
|
- <scroll-view enable-flex scroll-y="true" class="talk p20 scrolly flex-1 column"
|
|
|
|
|
|
+ <view class="pb40 " style="position: fixed;bottom: 120rpx;width: 100%;">
|
|
|
|
+ <view class="w100 mt20" style="height: 35vh;">
|
|
|
|
+ <scroll-view enable-flex scroll-y="true" class=" p20 scrolly flex-1 column"
|
|
style="width: calc(100% - 40rpx);height: calc(100% - 40rpx);"
|
|
style="width: calc(100% - 40rpx);height: calc(100% - 40rpx);"
|
|
:scroll-into-view="scrollIntoView">
|
|
:scroll-into-view="scrollIntoView">
|
|
- <view>
|
|
|
|
- <view class="list justify-start" v-for="(item,talkIndex) in talklist" :key="talkIndex"
|
|
|
|
|
|
+ <!-- <view>
|
|
|
|
+ <view class="list justify-start" v-for="(item,talkIndex) in inAndOut" :key="talkIndex"
|
|
v-show="item.cmd=='announcement'">
|
|
v-show="item.cmd=='announcement'">
|
|
<view class="talk-list ml16 justify-start">
|
|
<view class="talk-list ml16 justify-start">
|
|
<view class="fs30">
|
|
<view class="fs30">
|
|
@@ -132,7 +148,7 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
|
|
+ </view> -->
|
|
|
|
|
|
<view class="list justify-start" v-for="(item,talkIndex) in talklist" :key="talkIndex"
|
|
<view class="list justify-start" v-for="(item,talkIndex) in talklist" :key="talkIndex"
|
|
:id="`list_${talkIndex}`" v-show="item.cmd!='red'&&item.cmd!='out'&&item.cmd!='entry'">
|
|
:id="`list_${talkIndex}`" v-show="item.cmd!='red'&&item.cmd!='out'&&item.cmd!='entry'">
|
|
@@ -144,13 +160,12 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="showWelcomeMessage" class="welcome-message">
|
|
<view v-if="showWelcomeMessage" class="welcome-message">
|
|
- <view class="list justify-start" v-for="(item,talkIndex) in talklist" :key="talkIndex"
|
|
|
|
- v-show="item.cmd=='entry'||item.cmd=='out'">
|
|
|
|
|
|
+ <view class="list justify-start" v-show="inAndOut.cmd=='entry'||inAndOut.cmd=='out'">
|
|
<view class="talk-list ml16 justify-start">
|
|
<view class="talk-list ml16 justify-start">
|
|
<view class="fs30">
|
|
<view class="fs30">
|
|
- <text style="color: #ff89d6;">{{item.nickName}} </text>
|
|
|
|
|
|
+ <text style="color: #ff89d6;">{{inAndOut.nickName}} </text>
|
|
<text class='colorf'>
|
|
<text class='colorf'>
|
|
- {{item.msg}}直播间{{liveItem.messageContent}}</text>
|
|
|
|
|
|
+ {{inAndOut.msg}}直播间{{liveItem.messageContent}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -176,7 +191,27 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <u-popup :show="isShowGoods" @close="!isShowGoods" round='20rpx' mode="center" zIndex='10099'
|
|
|
|
|
|
+
|
|
|
|
+ <view class="goods" v-if="isShowGoods">
|
|
|
|
+ <view class="top">
|
|
|
|
+ <view class="left">
|
|
|
|
+ <image class="w30 h30 mr8" src="/static/images/signal.png"></image>讲解中
|
|
|
|
+ </view>
|
|
|
|
+ <image class="w44 h44 mr10" src="/static/images/close.png" @click="isShowGoods=false">
|
|
|
|
+ </image>
|
|
|
|
+ </view>
|
|
|
|
+ <image class="photo" :src="goodsCard?.imgUrl"></image>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="price"><text class="red">¥{{goodsCard?.price}} </text><text
|
|
|
|
+ class="del">¥{{goodsCard?.otPrice}}</text></view>
|
|
|
|
+ <view class="title oneline-hide">{{goodsCard?.productName}}</view>
|
|
|
|
+ <view class="button" @click="goShop(goodsCard?.productId,goodsCard?.goodsId)">
|
|
|
|
+ 立即抢购
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- <u-popup :show="isShowGoods" @close="!isShowGoods" round='20rpx' mode="center" zIndex='10099'
|
|
bgColor='#ffffff'>
|
|
bgColor='#ffffff'>
|
|
<view class="goods">
|
|
<view class="goods">
|
|
<view class="top">
|
|
<view class="top">
|
|
@@ -196,7 +231,7 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </u-popup>
|
|
|
|
|
|
+ </u-popup> -->
|
|
<u-popup :show="isShowLotteryPop" @close="!isShowLotteryPop" round='40rpx'>
|
|
<u-popup :show="isShowLotteryPop" @close="!isShowLotteryPop" round='40rpx'>
|
|
<view class="prize-box" style="border-radius: 40rpx;height: fit-content;">
|
|
<view class="prize-box" style="border-radius: 40rpx;height: fit-content;">
|
|
<image class="nav-img " src="/static/images/red_head.png" mode="widthFix"></image>
|
|
<image class="nav-img " src="/static/images/red_head.png" mode="widthFix"></image>
|
|
@@ -235,24 +270,12 @@
|
|
<ThreeItemSwiper :products="lotteryProducts"></ThreeItemSwiper>
|
|
<ThreeItemSwiper :products="lotteryProducts"></ThreeItemSwiper>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
-
|
|
|
|
<!-- <view class="item-group">
|
|
<!-- <view class="item-group">
|
|
- <view class="item" v-for="(item,index) in lotteryProducts" :key="index">
|
|
|
|
- <image class="w280 h280" :src="item.imgUrl"></image>
|
|
|
|
- <view v-show="true" class="title">{{item.prizeLevel}}等奖</view>
|
|
|
|
- <view v-show="true" class="txt">{{item.productName}}</view>
|
|
|
|
- </view>
|
|
|
|
<view class="item center">
|
|
<view class="item center">
|
|
<image class="w280 h280" src="/static/images/img.png"></image>
|
|
<image class="w280 h280" src="/static/images/img.png"></image>
|
|
<view v-show="true" class="title">二等奖</view>
|
|
<view v-show="true" class="title">二等奖</view>
|
|
<view v-show="true" class="txt">新用户免费领礼品弹窗</view>
|
|
<view v-show="true" class="txt">新用户免费领礼品弹窗</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
- <view class="item">
|
|
|
|
- <image class="w280 h280" src="/static/images/img.png"></image>
|
|
|
|
- <view v-show="false" class="title">二等奖</view>
|
|
|
|
- <view v-show="false" class="txt">新用户免费领礼品弹窗</view>
|
|
|
|
- </view>
|
|
|
|
</view> -->
|
|
</view> -->
|
|
<view class="point-group" v-for="(item,index) in lotteryProducts" :key="index">
|
|
<view class="point-group" v-for="(item,index) in lotteryProducts" :key="index">
|
|
<!-- <view class="item" v-if="item.length"
|
|
<!-- <view class="item" v-if="item.length"
|
|
@@ -296,14 +319,17 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</u-popup>
|
|
|
|
+ <!-- :show="isShowPrize" -->
|
|
|
|
|
|
- <u-popup :show="isShowPrize" @close="!isShowPrize" round='20rpx' mode="center" bgColor='#fff' zIndex='10076'>
|
|
|
|
|
|
+ <u-popup :show="isShowPrize" @close="!isShowPrize" round='20rpx' mode="center" bgColor='#fff'
|
|
|
|
+ zIndex='10076'>
|
|
<view class="prize-card">
|
|
<view class="prize-card">
|
|
- <view class="title">位幸运观众</view>
|
|
|
|
|
|
+ <view class="title">{{prizeInfo.length}}位幸运观众</view>
|
|
<view class="prize-content" v-for="(item,index) in prizeInfo" :key="index">
|
|
<view class="prize-content" v-for="(item,index) in prizeInfo" :key="index">
|
|
- <view class="name">{{item.userName}}</view>
|
|
|
|
- <view class="txt ">{{item.prizeLevel}}等奖</view>
|
|
|
|
|
|
+ <view>{{item.userName}}</view>
|
|
|
|
+ <view class="txt">{{item.prizeLevel}}等奖</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="tip">请联系管理员领取</view>
|
|
<view class="button" @click="isShowPrize=flase">确认</view>
|
|
<view class="button" @click="isShowPrize=flase">确认</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</u-popup>
|
|
@@ -329,7 +355,7 @@
|
|
</u-popup>
|
|
</u-popup>
|
|
|
|
|
|
<!-- 商品弹窗 -->
|
|
<!-- 商品弹窗 -->
|
|
- <u-popup :show="shopping" @close="closeShop" @open="openShop" round='20rpx' bgColor='f3f5f9' zIndex='10070'>
|
|
|
|
|
|
+ <u-popup :show="shopping" @close="closeShop" round='20rpx' bgColor='f3f5f9' zIndex='10075'>
|
|
<view class="shoppop">
|
|
<view class="shoppop">
|
|
<view class="shoppop-top">
|
|
<view class="shoppop-top">
|
|
<!-- <u-avatar :src="store.logoUrl" size="36" class="ml16"></u-avatar> -->
|
|
<!-- <u-avatar :src="store.logoUrl" size="36" class="ml16"></u-avatar> -->
|
|
@@ -413,8 +439,8 @@
|
|
import {
|
|
import {
|
|
getlive,
|
|
getlive,
|
|
} from '@/api/home'
|
|
} from '@/api/home'
|
|
- // var wsUrl = "wss://live.test.ylrztop.com/ws/live-api/app/webSocket"; //余红奇
|
|
|
|
- var wsUrl = "ws://192.168.10.166:7114/app/webSocket"; //余红奇
|
|
|
|
|
|
+ var wsUrl = "wss://live.test.ylrztop.com/ws/live-api/app/webSocket"; //余红奇
|
|
|
|
+ // var wsUrl = "ws://192.168.10.166:7114/app/webSocket"; //余红奇
|
|
var pingpangTimes = null;
|
|
var pingpangTimes = null;
|
|
var initTimes = null;
|
|
var initTimes = null;
|
|
var isSocketOpen = false;
|
|
var isSocketOpen = false;
|
|
@@ -429,7 +455,7 @@
|
|
videoCurrentTime: 0, // 当前视频播放时间
|
|
videoCurrentTime: 0, // 当前视频播放时间
|
|
isVideoPlaying: false, // 视频是否正在播放
|
|
isVideoPlaying: false, // 视频是否正在播放
|
|
videoProgressKey: '', // 存储进度的key
|
|
videoProgressKey: '', // 存储进度的key
|
|
-
|
|
|
|
|
|
+ inAndOut: {},
|
|
|
|
|
|
isShowPrize: false,
|
|
isShowPrize: false,
|
|
prizeInfo: [],
|
|
prizeInfo: [],
|
|
@@ -575,12 +601,12 @@
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
filteredViewers() {
|
|
filteredViewers() {
|
|
- // 若 liveViewers 是 null/undefined/非数组,返回空数组
|
|
|
|
- if (!Array.isArray(this.liveViewers)) {
|
|
|
|
|
|
+ // 先判断是否为数组,再判断长度,避免 null/undefined 报错
|
|
|
|
+ if (!Array.isArray(this.liveViewers) || this.liveViewers.length === 0) {
|
|
return [];
|
|
return [];
|
|
}
|
|
}
|
|
return this.liveViewers.slice(0, 3);
|
|
return this.liveViewers.slice(0, 3);
|
|
- },
|
|
|
|
|
|
+ }
|
|
// payLimitTime() {
|
|
// payLimitTime() {
|
|
// return this.order?.updateTime ?
|
|
// return this.order?.updateTime ?
|
|
// dayjs(this.order.updateTime).add(2, 'day').format('YYYY-MM-DD HH:mm:ss') :
|
|
// dayjs(this.order.updateTime).add(2, 'day').format('YYYY-MM-DD HH:mm:ss') :
|
|
@@ -603,6 +629,7 @@
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
this.getCurrentActivities();
|
|
this.getCurrentActivities();
|
|
|
|
+ this.getliveOrder()
|
|
},
|
|
},
|
|
onUnload() {
|
|
onUnload() {
|
|
// 页面卸载时保存视频进度
|
|
// 页面卸载时保存视频进度
|
|
@@ -671,8 +698,8 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ // 录播时间点
|
|
onVideoMetaLoaded(e) {
|
|
onVideoMetaLoaded(e) {
|
|
- console.log('视频元数据加载完成');
|
|
|
|
// 设置存储key
|
|
// 设置存储key
|
|
this.videoProgressKey = `videoProgress_${this.liveId}`;
|
|
this.videoProgressKey = `videoProgress_${this.liveId}`;
|
|
|
|
|
|
@@ -680,7 +707,6 @@
|
|
uni.getStorage({
|
|
uni.getStorage({
|
|
key: this.videoProgressKey,
|
|
key: this.videoProgressKey,
|
|
success: (res) => {
|
|
success: (res) => {
|
|
- console.log('获取到保存的播放进度:', res.data);
|
|
|
|
this.videoCurrentTime = res.data;
|
|
this.videoCurrentTime = res.data;
|
|
|
|
|
|
// 设置视频播放位置
|
|
// 设置视频播放位置
|
|
@@ -728,7 +754,7 @@
|
|
|
|
|
|
if (videoContext) {
|
|
if (videoContext) {
|
|
videoContext.seek(time);
|
|
videoContext.seek(time);
|
|
- console.log(`设置视频播放位置: ${time}秒`);
|
|
|
|
|
|
+ // console.log(`设置视频播放位置: ${time}秒`);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
@@ -751,17 +777,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
onChange(e) {
|
|
onChange(e) {
|
|
this.timeData = e
|
|
this.timeData = e
|
|
},
|
|
},
|
|
@@ -806,7 +821,7 @@
|
|
|
|
|
|
// 抽奖查询
|
|
// 抽奖查询
|
|
liveLottery(data).then(res => {
|
|
liveLottery(data).then(res => {
|
|
- this.isShowLottery = false
|
|
|
|
|
|
+ // this.isShowLottery = false
|
|
this.isShowLotteryPop = true
|
|
this.isShowLotteryPop = true
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
this.lotteryList = res.data
|
|
this.lotteryList = res.data
|
|
@@ -851,20 +866,23 @@
|
|
inputBlur() {
|
|
inputBlur() {
|
|
this.isFocus = false
|
|
this.isFocus = false
|
|
},
|
|
},
|
|
|
|
+
|
|
//正在购买
|
|
//正在购买
|
|
- async getliveOrder() {
|
|
|
|
|
|
|
|
- try {
|
|
|
|
- const res = await liveOrderUser(this.liveId);
|
|
|
|
- if (res.code === 200) {
|
|
|
|
- this.orderUser = res; // 同步全局变量
|
|
|
|
- }
|
|
|
|
- } catch (error) {
|
|
|
|
- console.error('获取正在购买用户失败:', error);
|
|
|
|
|
|
+ getliveOrder(item) {
|
|
|
|
+ if (!this.liveId) {
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
- },
|
|
|
|
- openShop() {
|
|
|
|
- this.shopping = true
|
|
|
|
|
|
+ liveOrderUser(this.liveId).then(res => {
|
|
|
|
+ console.log("正在购买", res)
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ this.orderUser = res; // 同步全局变量
|
|
|
|
+ } else {
|
|
|
|
+ console.error('获取正在购买用户失败:', error);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ rej => {}
|
|
|
|
+ );
|
|
},
|
|
},
|
|
onLiveStateChange(e, liveItem) {
|
|
onLiveStateChange(e, liveItem) {
|
|
// console.log('直播状态变化:', e.detail.code, e.detail);
|
|
// console.log('直播状态变化:', e.detail.code, e.detail);
|
|
@@ -904,7 +922,6 @@
|
|
|
|
|
|
// 抽奖
|
|
// 抽奖
|
|
this.lotteryTime = this.lotteryInfo?.duration * 60 * 1000
|
|
this.lotteryTime = this.lotteryInfo?.duration * 60 * 1000
|
|
- console.log("毫秒", this.lotteryTime)
|
|
|
|
|
|
|
|
if (this.goodsCard && this.goodsCard.status == 1) {
|
|
if (this.goodsCard && this.goodsCard.status == 1) {
|
|
|
|
|
|
@@ -1123,6 +1140,14 @@
|
|
videoContext.play();
|
|
videoContext.play();
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
+ } else if (liveItem.liveType === 3 && liveItem.videoUrl) {
|
|
|
|
+ const videoId = `myVideo_${this.liveId}`;
|
|
|
|
+ const videoContext = uni.createVideoContext(videoId, this);
|
|
|
|
+ if (videoContext) {
|
|
|
|
+ videoContext.pause(() => {
|
|
|
|
+ videoContext.play();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
}
|
|
}
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error("播放视频失败:", error);
|
|
console.error("播放视频失败:", error);
|
|
@@ -1171,28 +1196,21 @@
|
|
|
|
|
|
// 获取直播间用户
|
|
// 获取直播间用户
|
|
async getliveUser(isLoadMore = false) {
|
|
async getliveUser(isLoadMore = false) {
|
|
- // 强制使用当前 liveId,避免使用旧值
|
|
|
|
-
|
|
|
|
this.viewLoading = true;
|
|
this.viewLoading = true;
|
|
try {
|
|
try {
|
|
- const res = await watchUserList(this.liveId, this.viewPageSize, this.viewPageNum,
|
|
|
|
- false);
|
|
|
|
|
|
+ const res = await watchUserList(this.liveId, this.viewPageSize, this.viewPageNum, false);
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
- // 若请求期间已切换直播间,忽略旧数据
|
|
|
|
-
|
|
|
|
- this.liveUserTotal = res.total;
|
|
|
|
- if (res.rows.length === 0) {
|
|
|
|
- this.viewNoMoreData = true;
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- this.liveViewers = isLoadMore ? [...this.liveViewers, ...res.rows] : res
|
|
|
|
- .rows; // 首次加载/切换直播间时重置数据
|
|
|
|
|
|
+ this.liveUserTotal = res.total || 0;
|
|
|
|
+ // 强制将 rows 转为数组(防止接口返回 null/undefined)
|
|
|
|
+ const newRows = Array.isArray(res.rows) ? res.rows : [];
|
|
|
|
+ // 加载更多时合并数组,首次加载直接赋值(确保始终是数组)
|
|
|
|
+ this.liveViewers = isLoadMore ? [...this.liveViewers, ...newRows] : newRows;
|
|
this.viewPageNum++;
|
|
this.viewPageNum++;
|
|
- // console.log("在线观众", this.liveViewers)
|
|
|
|
}
|
|
}
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error('获取观众列表失败:', error);
|
|
console.error('获取观众列表失败:', error);
|
|
|
|
+ // 异常时重置为数组,避免后续报错
|
|
|
|
+ this.liveViewers = [];
|
|
} finally {
|
|
} finally {
|
|
this.viewLoading = false;
|
|
this.viewLoading = false;
|
|
}
|
|
}
|
|
@@ -1523,7 +1541,7 @@
|
|
initSocket() {
|
|
initSocket() {
|
|
|
|
|
|
|
|
|
|
- if (this.liveId == null) return;
|
|
|
|
|
|
+ if (!this.liveId||this.userinfo?.userId ) return;
|
|
|
|
|
|
// 设置正在连接的直播间ID
|
|
// 设置正在连接的直播间ID
|
|
// this.connectingLiveId = liveId;
|
|
// this.connectingLiveId = liveId;
|
|
@@ -1610,18 +1628,18 @@
|
|
this.isShowLottery = false
|
|
this.isShowLottery = false
|
|
}, time * 60000)
|
|
}, time * 60000)
|
|
this.lotteryTime = time * 60 * 1000
|
|
this.lotteryTime = time * 60 * 1000
|
|
- // console.log("毫秒",this.lotteryTime)
|
|
|
|
// this.convertMinutesToHoursMinutes(time)
|
|
// this.convertMinutesToHoursMinutes(time)
|
|
} else {
|
|
} else {
|
|
this.isShowLottery = false
|
|
this.isShowLottery = false
|
|
}
|
|
}
|
|
} else if (socketMessage.cmd == 'entry' || socketMessage.cmd ==
|
|
} else if (socketMessage.cmd == 'entry' || socketMessage.cmd ==
|
|
'out') {
|
|
'out') {
|
|
- const oldList = this.talklist || [];
|
|
|
|
|
|
+
|
|
|
|
+ // const oldList = this.talklist || [];
|
|
// 创建新数组并添加元素
|
|
// 创建新数组并添加元素
|
|
- const newList = [...oldList, messageData];
|
|
|
|
|
|
+
|
|
// 1. 将消息追加到当前直播间的talklist中(响应式更新)
|
|
// 1. 将消息追加到当前直播间的talklist中(响应式更新)
|
|
- this.talklist = newList;
|
|
|
|
|
|
+ this.inAndOut = socketMessage;
|
|
this.showWelcomeMessage = false;
|
|
this.showWelcomeMessage = false;
|
|
this.showWelcomeMessage = true;
|
|
this.showWelcomeMessage = true;
|
|
this.getliveUser(false);
|
|
this.getliveUser(false);
|
|
@@ -1636,7 +1654,8 @@
|
|
}
|
|
}
|
|
} else if (socketMessage.cmd == 'LotteryDetail') {
|
|
} else if (socketMessage.cmd == 'LotteryDetail') {
|
|
this.prizeInfo = JSON.parse(socketMessage.data);
|
|
this.prizeInfo = JSON.parse(socketMessage.data);
|
|
- this.isShowPrize = socketMessage.status === 1;
|
|
|
|
|
|
+ this.isShowPrize = true;
|
|
|
|
+ this.isShowLottery = false
|
|
} else if (socketMessage.cmd == 'blockUser') {
|
|
} else if (socketMessage.cmd == 'blockUser') {
|
|
uni.removeStorage({
|
|
uni.removeStorage({
|
|
key: 'AppToken',
|
|
key: 'AppToken',
|
|
@@ -1709,11 +1728,6 @@
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
- .live-player {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
.swiper-wrapper {
|
|
.swiper-wrapper {
|
|
position: relative;
|
|
position: relative;
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -1891,7 +1905,7 @@
|
|
|
|
|
|
.activity-box {
|
|
.activity-box {
|
|
position: fixed;
|
|
position: fixed;
|
|
- top: 220rpx;
|
|
|
|
|
|
+ top: 188rpx;
|
|
left: 30rpx;
|
|
left: 30rpx;
|
|
z-index: 5;
|
|
z-index: 5;
|
|
display: flex;
|
|
display: flex;
|
|
@@ -1900,8 +1914,8 @@
|
|
.item-box {
|
|
.item-box {
|
|
border-radius: 16rpx;
|
|
border-radius: 16rpx;
|
|
background-color: rgba(77, 77, 77, 0.5);
|
|
background-color: rgba(77, 77, 77, 0.5);
|
|
- width: 80rpx;
|
|
|
|
- height: 90rpx;
|
|
|
|
|
|
+ width: 90rpx;
|
|
|
|
+ height: 100rpx;
|
|
margin-right: 20rpx;
|
|
margin-right: 20rpx;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
|
@@ -1910,7 +1924,7 @@
|
|
width: 100%;
|
|
width: 100%;
|
|
bottom: 0;
|
|
bottom: 0;
|
|
color: #fafcff;
|
|
color: #fafcff;
|
|
- font-size: 20rpx;
|
|
|
|
|
|
+ font-size: 26rpx;
|
|
background-color: rgba(15, 15, 15, 0.8);
|
|
background-color: rgba(15, 15, 15, 0.8);
|
|
border-radius: 16rpx;
|
|
border-radius: 16rpx;
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -2030,30 +2044,47 @@
|
|
|
|
|
|
.videolist {
|
|
.videolist {
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ height: 100vh;
|
|
|
|
+ width: 100%;
|
|
|
|
+
|
|
|
|
|
|
.video {
|
|
.video {
|
|
height: 100vh;
|
|
height: 100vh;
|
|
- /* 占屏幕高度的80% */
|
|
|
|
width: 100%;
|
|
width: 100%;
|
|
background-color: rgba(57, 57, 57, 0.4);
|
|
background-color: rgba(57, 57, 57, 0.4);
|
|
|
|
|
|
|
|
+ .item {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
.time {
|
|
.time {
|
|
|
|
+
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
font-size: 20rpx;
|
|
font-size: 20rpx;
|
|
margin-left: 10rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
|
|
- .videotop {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+ .lable {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50rpx;
|
|
|
|
+ right: 16rpx;
|
|
|
|
+ background-color: rgba(57, 57, 57, 0.6);
|
|
|
|
+ padding: 4rpx 10rpx;
|
|
|
|
+ color: #fff;
|
|
|
|
+ border-radius: 15rpx;
|
|
}
|
|
}
|
|
|
|
|
|
- .video_row {
|
|
|
|
- width: 100%;
|
|
|
|
- max-height: 500rpx;
|
|
|
|
- overflow: hidden;
|
|
|
|
- margin-top: 360rpx;
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .video_row {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 18%;
|
|
|
|
+ max-height: 500rpx;
|
|
|
|
+ z-index: 99;
|
|
|
|
+
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
@@ -2073,31 +2104,34 @@
|
|
}
|
|
}
|
|
|
|
|
|
.prize-content {
|
|
.prize-content {
|
|
|
|
+ width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
- flex-direction: column;
|
|
|
|
-
|
|
|
|
- .name {
|
|
|
|
- font-size: 32rpx;
|
|
|
|
- font-weight: 600;
|
|
|
|
- }
|
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
|
|
.txt {
|
|
.txt {
|
|
- font-size: 28rpx;
|
|
|
|
- color: #C32008;
|
|
|
|
|
|
+ font-weight: 600;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ .tip {
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: #222222;
|
|
|
|
+ margin: 30rpx 0;
|
|
}
|
|
}
|
|
|
|
|
|
.button {
|
|
.button {
|
|
- width: 392rpx;
|
|
|
|
- height: 96rpx;
|
|
|
|
- line-height: 96rpx;
|
|
|
|
- background: linear-gradient(180deg, #FFF4D5 0%, #FFE5B1 100%);
|
|
|
|
- border-radius: 48rpx 48rpx 48rpx 48rpx;
|
|
|
|
- font-weight: 600;
|
|
|
|
- font-size: 36rpx;
|
|
|
|
- color: #C32008;
|
|
|
|
|
|
+ width: 200rpx;
|
|
|
|
+ height: 70rpx;
|
|
|
|
+ line-height: 70rpx;
|
|
|
|
+ background: linear-gradient(180deg, #ff7c30 0%, #FF3A1E 100%);
|
|
|
|
+ border-radius: 28rpx;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: #ffffff;
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -2220,14 +2254,14 @@
|
|
|
|
|
|
.goods {
|
|
.goods {
|
|
position: fixed;
|
|
position: fixed;
|
|
- top: 50%;
|
|
|
|
- left: 50%;
|
|
|
|
- transform: translate(-50%, -50%);
|
|
|
|
|
|
+ bottom: 140rpx;
|
|
|
|
+ right: 100rpx;
|
|
|
|
+ // transform: translate(-50%, -50%);
|
|
z-index: 5;
|
|
z-index: 5;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
- width: 400rpx;
|
|
|
|
|
|
+ width: 280rpx;
|
|
padding: 4rpx;
|
|
padding: 4rpx;
|
|
|
|
|
|
.top {
|
|
.top {
|
|
@@ -2244,7 +2278,7 @@
|
|
.left {
|
|
.left {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
padding: 12rpx;
|
|
padding: 12rpx;
|
|
- font-size: 26rpx;
|
|
|
|
|
|
+ font-size: 22rpx;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -2254,7 +2288,7 @@
|
|
|
|
|
|
.photo {
|
|
.photo {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 400rpx;
|
|
|
|
|
|
+ height: 180rpx;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
@@ -2263,7 +2297,7 @@
|
|
padding: 4rpx;
|
|
padding: 4rpx;
|
|
|
|
|
|
.price {
|
|
.price {
|
|
- font-size: 34rpx;
|
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
|
.red {
|
|
.red {
|
|
color: #FF5701;
|
|
color: #FF5701;
|
|
@@ -2281,7 +2315,7 @@
|
|
|
|
|
|
.title {
|
|
.title {
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
- font-size: 34rpx;
|
|
|
|
|
|
+ font-size: 30rpx;
|
|
margin: 10rpx 0 12rpx;
|
|
margin: 10rpx 0 12rpx;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -2292,7 +2326,7 @@
|
|
padding: 16rpx 0;
|
|
padding: 16rpx 0;
|
|
border-radius: 10rpx;
|
|
border-radius: 10rpx;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
- font-size: 34rpx;
|
|
|
|
|
|
+ font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|