|
@@ -32,7 +32,6 @@
|
|
|
<LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
|
|
<LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
|
|
|
<view>{{liveViewData && liveViewData.like||0}}</view>
|
|
<view>{{liveViewData && liveViewData.like||0}}</view>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
<view class="side-item">
|
|
<view class="side-item">
|
|
|
<button open-type="share" class="button">
|
|
<button open-type="share" class="button">
|
|
|
<image class="image" src="/static/images/weixin.png" mode="widthFix" />
|
|
<image class="image" src="/static/images/weixin.png" mode="widthFix" />
|
|
@@ -146,25 +145,26 @@
|
|
|
<view :style="{position: 'fixed',width: '100%',bottom: chatHeight + 'rpx',zIndex:999}">
|
|
<view :style="{position: 'fixed',width: '100%',bottom: chatHeight + 'rpx',zIndex:999}">
|
|
|
<view class="mt20" :style="{ height: chatHeight ? '64rpx' : '30vh' }">
|
|
<view class="mt20" :style="{ height: chatHeight ? '64rpx' : '30vh' }">
|
|
|
<scroll-view v-if="Array.isArray(talklist)" enable-flex scroll-y="true"
|
|
<scroll-view v-if="Array.isArray(talklist)" enable-flex scroll-y="true"
|
|
|
- class=" pl20 scrolly flex-1 column" style="width: calc(100% - 20rpx); height: 100%;"
|
|
|
|
|
- :scroll-into-view="scrollIntoView">
|
|
|
|
|
-
|
|
|
|
|
|
|
+ class="pl20 scrolly flex-1 column" style="width: calc(100% - 20rpx); height: 100%;"
|
|
|
|
|
+ :scroll-top="scrollTop" ref="scrollView">
|
|
|
|
|
+ <!-- 聊天消息列表 -->
|
|
|
<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'">
|
|
|
- <view class="talk-list justify-start">
|
|
|
|
|
|
|
+ <view class="talk-list justify-start">
|
|
|
<view class="fs30" style="max-width: 100%;">
|
|
<view class="fs30" style="max-width: 100%;">
|
|
|
<text style="color: #FFDA73;">{{item.nickName||"未命名"}}:</text>
|
|
<text style="color: #FFDA73;">{{item.nickName||"未命名"}}:</text>
|
|
|
<text class='colorf'>{{item.msg}}</text>
|
|
<text class='colorf'>{{item.msg}}</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 欢迎消息 -->
|
|
|
<view v-if="showWelcomeMessage" class="welcome-message" style="max-width: 100%;">
|
|
<view v-if="showWelcomeMessage" class="welcome-message" style="max-width: 100%;">
|
|
|
<view class="list justify-start" v-show="inAndOut.cmd=='entry'||inAndOut.cmd=='out'">
|
|
<view class="list justify-start" v-show="inAndOut.cmd=='entry'||inAndOut.cmd=='out'">
|
|
|
<view class="talk-list justify-start">
|
|
<view class="talk-list justify-start">
|
|
|
<view class="fs30">
|
|
<view class="fs30">
|
|
|
<text style="color: #ff89d6;">{{inAndOut.nickName||"未命名"}} </text>
|
|
<text style="color: #ff89d6;">{{inAndOut.nickName||"未命名"}} </text>
|
|
|
- <text class='colorf'>
|
|
|
|
|
- {{inAndOut.msg}}直播间</text>
|
|
|
|
|
|
|
+ <text class='colorf'>{{inAndOut.msg}}直播间</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -173,16 +173,15 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 底部输入框和操作按钮 -->
|
|
<!-- 底部输入框和操作按钮 -->
|
|
|
- <view :class="{'justify-between': true,'p24': true,'pb40': isFocus}"
|
|
|
|
|
- :style="{background: isFocus ? '#fff' : 'transparent',}">
|
|
|
|
|
|
|
+ <view class="justify-between p24">
|
|
|
<view class="x-f"
|
|
<view class="x-f"
|
|
|
- :style="{background: isFocus ? '#ededed' : '#393939' ,padding: '10rpx 14rpx 10rpx 32rpx',boxSizing: 'border-box',borderRadius: '36rpx',width: isFocus ? '100%' : '580rpx'}">
|
|
|
|
|
|
|
+ :style="{background:'#393939' ,padding: '10rpx 14rpx 10rpx 32rpx',boxSizing: 'border-box',borderRadius: '36rpx',width: isFocus ? '100%' : '580rpx'}">
|
|
|
<u-input :placeholder="placeholderText" border="none" customStyle='font-size:24rpx;'
|
|
<u-input :placeholder="placeholderText" border="none" customStyle='font-size:24rpx;'
|
|
|
- v-model="value" shape='circle' :color="isFocus ? '#000000' : '#ffffff'"
|
|
|
|
|
- :placeholderStyle="{color:isFocus ? '#888888' : '#e7e7e7' }" :adjust-position="false"
|
|
|
|
|
- :scroll-with-animation="false" class="ml20" @focus="inputFocus" @blur="inputBlur">
|
|
|
|
|
|
|
+ v-model="value" shape='circle' color="#ffffff" placeholderStyle="color:#e7e7e7"
|
|
|
|
|
+ :adjust-position="false" :scroll-with-animation="false" class="ml20" @focus="inputFocus"
|
|
|
|
|
+ @blur="inputBlur">
|
|
|
</u-input>
|
|
</u-input>
|
|
|
- <view :class="isFocus ? 'send-input' : 'send'" @click="sendMsg()">发送</view>
|
|
|
|
|
|
|
+ <view class="send" @click="sendMsg()">发送</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="justify-between mr15 align-center" v-if="!isFocus">
|
|
<view class="justify-between mr15 align-center" v-if="!isFocus">
|
|
|
<view class="icon-bg ml20" @click="openCart()">
|
|
<view class="icon-bg ml20" @click="openCart()">
|
|
@@ -191,7 +190,6 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="goods" v-if="isShowGoods">
|
|
<view class="goods" v-if="isShowGoods">
|
|
@@ -294,9 +292,6 @@
|
|
|
<view class="button" @click="isShowPrize=false">确认</view>
|
|
<view class="button" @click="isShowPrize=false">确认</view>
|
|
|
</view>
|
|
</view>
|
|
|
</u-popup>
|
|
</u-popup>
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
<!-- 观众列表弹窗 -->
|
|
<!-- 观众列表弹窗 -->
|
|
|
<u-popup :show="showadd" @close="close" @open="openViews" round='20rpx' bgColor='#ffffff' zIndex='10077'>
|
|
<u-popup :show="showadd" @close="close" @open="openViews" round='20rpx' bgColor='#ffffff' zIndex='10077'>
|
|
|
<view class="view-box">
|
|
<view class="view-box">
|
|
@@ -382,89 +377,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- <!-- <u-popup :show="true" @close="closeShop" round='20rpx' bgColor='#f3f5f9' zIndex='10075'>
|
|
|
|
|
- <view class="coupon">
|
|
|
|
|
- <view class="coupon-top">
|
|
|
|
|
- <view class=" search-top">
|
|
|
|
|
- <image class="w48 h48" src="/static/images/order.png" />
|
|
|
|
|
- <view>我的券码</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <scroll-view enable-flex scroll-y :style="{ height: boxHeight + 'px' }">
|
|
|
|
|
- <div class="coupon-list" v-if="couponsList.length > 0">
|
|
|
|
|
- <div class="item acea-row row-center-wrapper" v-for="(item, index) in couponsList"
|
|
|
|
|
- :key="index">
|
|
|
|
|
- <div class="money">
|
|
|
|
|
- <image v-if="item.status==0" class="img" src="/static/images/coupon1.png"
|
|
|
|
|
- mode="widthFix"></image>
|
|
|
|
|
- <image v-if="item.status!=0" class="img" src="/static/images/coupon2.png"
|
|
|
|
|
- mode="widthFix"></image>
|
|
|
|
|
- <div style="z-index: 999;">
|
|
|
|
|
- ¥<span class="num">{{ item.couponPrice }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="pic-num">满{{ item.useMinPrice }}元可用</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="text">
|
|
|
|
|
- <div class="condition line1">
|
|
|
|
|
- {{ item.couponTitle }}
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="data acea-row row-between-wrapper">
|
|
|
|
|
- <div>{{ item.limitTime }}到期</div>
|
|
|
|
|
- <div class="bnt gray" v-if="item.status==1">已使用</div>
|
|
|
|
|
- <div class="bnt gray" v-if="item.status==-1">已过期</div>
|
|
|
|
|
- <div class="bnt bg-color-red" v-if="item.status==0">可使用</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- <view v-if="couponsList.length == 0" class="no-data-box" @click="getMyCouponList()">
|
|
|
|
|
- <image src="/static/images/no_data.png" mode="aspectFit"></image>
|
|
|
|
|
- <view class="empty-title">暂无数据</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </u-popup> -->
|
|
|
|
|
- <!-- <u-popup :show="true" @close="closeShop" round='20rpx' bgColor='#f3f5f9' zIndex='10075'>
|
|
|
|
|
- <view class="coupon">
|
|
|
|
|
- <scroll-view enable-flex scroll-y :style="{ height: boxHeight + 'px' }">
|
|
|
|
|
- <div class="coupon-list" v-if="couponsList.length > 0">
|
|
|
|
|
- <div class="item acea-row row-center-wrapper" v-for="(item, index) in couponsList"
|
|
|
|
|
- :key="index">
|
|
|
|
|
- <div class="money">
|
|
|
|
|
- <image v-if="item.status==0" class="img" src="/static/images/coupon1.png"
|
|
|
|
|
- mode="widthFix"></image>
|
|
|
|
|
- <image v-if="item.status!=0" class="img" src="/static/images/coupon2.png"
|
|
|
|
|
- mode="widthFix"></image>
|
|
|
|
|
- <div style="z-index: 999;">
|
|
|
|
|
- ¥<span class="num">{{ item.couponPrice }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="pic-num">满{{ item.useMinPrice }}元可用</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="text">
|
|
|
|
|
- <div class="condition line1">
|
|
|
|
|
- {{ item.couponTitle }}
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="data acea-row row-between-wrapper">
|
|
|
|
|
- <div>{{ item.limitTime }}到期</div>
|
|
|
|
|
- <div class="bnt gray" v-if="item.status==1">已使用</div>
|
|
|
|
|
- <div class="bnt gray" v-if="item.status==-1">已过期</div>
|
|
|
|
|
- <div class="bnt bg-color-red" v-if="item.status==0">可使用</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- <view v-if="couponsList.length == 0" class="no-data-box" @click="getMyCouponList()">
|
|
|
|
|
- <image src="/static/images/no_data.png" mode="aspectFit"></image>
|
|
|
|
|
- <view class="empty-title">暂无数据</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </u-popup> -->
|
|
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
@@ -488,11 +401,16 @@
|
|
|
getLiveViewData, //直播间点赞、关注、在线人数数据
|
|
getLiveViewData, //直播间点赞、关注、在线人数数据
|
|
|
currentActivities, //红包 卡片 抽奖
|
|
currentActivities, //红包 卡片 抽奖
|
|
|
getlive,
|
|
getlive,
|
|
|
- subNotifyLive
|
|
|
|
|
|
|
+ subNotifyLive,
|
|
|
|
|
+ internetTraffic // 流量(缓冲百分比)
|
|
|
} from '@/api/living.js'
|
|
} from '@/api/living.js'
|
|
|
import {
|
|
import {
|
|
|
getUserInfo
|
|
getUserInfo
|
|
|
} from '@/api/user'
|
|
} from '@/api/user'
|
|
|
|
|
+ import {
|
|
|
|
|
+ generateRandomString
|
|
|
|
|
+ } from "@/utils/common.js"
|
|
|
|
|
+ import dayjs from 'dayjs';
|
|
|
import {
|
|
import {
|
|
|
nextTick
|
|
nextTick
|
|
|
} from "vue"
|
|
} from "vue"
|
|
@@ -510,19 +428,16 @@
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
|
|
+ stayTime: 0,
|
|
|
|
|
+ startTime: 0,
|
|
|
|
|
+
|
|
|
|
|
+ scrollTop: 0,
|
|
|
isOnload: false,
|
|
isOnload: false,
|
|
|
isConnecting: false, // 是否正在连接中
|
|
isConnecting: false, // 是否正在连接中
|
|
|
previousToken: null,
|
|
previousToken: null,
|
|
|
hasInitialized: false,
|
|
hasInitialized: false,
|
|
|
|
|
|
|
|
-
|
|
|
|
|
- couponsList: [{
|
|
|
|
|
- status: 0,
|
|
|
|
|
- couponPrice: 59,
|
|
|
|
|
- useMinPrice: 99,
|
|
|
|
|
- couponTitle: '包装袋',
|
|
|
|
|
- limitTime: 2
|
|
|
|
|
- }],
|
|
|
|
|
|
|
+ couponsList: [],
|
|
|
liveViewersData: [],
|
|
liveViewersData: [],
|
|
|
liveUserCalled: false, //调用过watchUserList没
|
|
liveUserCalled: false, //调用过watchUserList没
|
|
|
liveViewDataTimer: null,
|
|
liveViewDataTimer: null,
|
|
@@ -534,8 +449,6 @@
|
|
|
shownEntryUsers: new Set(), // 存储已显示过「进入提示」的用户ID
|
|
shownEntryUsers: new Set(), // 存储已显示过「进入提示」的用户ID
|
|
|
isPageUnloading: false, // 标记页面是否正在卸载(区分主动离开vs重连out)
|
|
isPageUnloading: false, // 标记页面是否正在卸载(区分主动离开vs重连out)
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
templateId: 'fxYJu817lxHNKXl0hJypb54UnGRCNAoI72Qf-xjKCik',
|
|
templateId: 'fxYJu817lxHNKXl0hJypb54UnGRCNAoI72Qf-xjKCik',
|
|
|
isAgreement: false,
|
|
isAgreement: false,
|
|
|
socket: null, // WebSocket 实例
|
|
socket: null, // WebSocket 实例
|
|
@@ -546,12 +459,8 @@
|
|
|
reconnectCount: 0, // 当前重连次数
|
|
reconnectCount: 0, // 当前重连次数
|
|
|
maxReconnectAttempts: 3, // 最大重连次数
|
|
maxReconnectAttempts: 3, // 最大重连次数
|
|
|
isManualClose: false, // 是否手动关闭(用于区分主动关闭和异常断开)
|
|
isManualClose: false, // 是否手动关闭(用于区分主动关闭和异常断开)
|
|
|
- // pingTimeout: 10000, // 心跳响应超时时间(10秒)
|
|
|
|
|
pingTimeoutTimer: null, // 心跳超时定时器
|
|
pingTimeoutTimer: null, // 心跳超时定时器
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- // wsNewUrl: 'ws://192.168.10.126:7014/app/webSocket',
|
|
|
|
|
// wsNewUrl: 'wss://api.fhhx.runtzh.com/app/webSocket',
|
|
// wsNewUrl: 'wss://api.fhhx.runtzh.com/app/webSocket',
|
|
|
wsNewUrl: 'wss://api.fhhx.runtzh.com/ws/app/webSocket',
|
|
wsNewUrl: 'wss://api.fhhx.runtzh.com/ws/app/webSocket',
|
|
|
// wsNewUrl: 'ws://192.168.10.166:7114/ws/app/webSocket',
|
|
// wsNewUrl: 'ws://192.168.10.166:7114/ws/app/webSocket',
|
|
@@ -559,11 +468,9 @@
|
|
|
qrFrom: null,
|
|
qrFrom: null,
|
|
|
scene: '',
|
|
scene: '',
|
|
|
|
|
|
|
|
- liveCountdown: {},
|
|
|
|
|
- countdown: {},
|
|
|
|
|
-
|
|
|
|
|
|
|
+ liveCountdown: {}, //直播倒计时
|
|
|
|
|
+ countdown: {}, //抽奖倒计时
|
|
|
liveViewData: {},
|
|
liveViewData: {},
|
|
|
-
|
|
|
|
|
chatHeight: 0,
|
|
chatHeight: 0,
|
|
|
|
|
|
|
|
keyboardHeight: 0,
|
|
keyboardHeight: 0,
|
|
@@ -655,6 +562,9 @@
|
|
|
videoContext: '',
|
|
videoContext: '',
|
|
|
livedata: {}, //直播间点赞、关注、在线人数数据
|
|
livedata: {}, //直播间点赞、关注、在线人数数据
|
|
|
userData: {},
|
|
userData: {},
|
|
|
|
|
+
|
|
|
|
|
+ //流量
|
|
|
|
|
+ uuId: "",
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
|
|
@@ -717,6 +627,13 @@
|
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
},
|
|
},
|
|
|
|
|
+ onPullDownRefresh() {
|
|
|
|
|
+ this.getLiveMsg(this.liveId)
|
|
|
|
|
+ this.getliveUser()
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
|
|
+ }, 1000)
|
|
|
|
|
+ },
|
|
|
async onShow() {
|
|
async onShow() {
|
|
|
if (this.liveId && !this.isOnload) {
|
|
if (this.liveId && !this.isOnload) {
|
|
|
await this.getLiveMsg(this.liveItem);
|
|
await this.getLiveMsg(this.liveItem);
|
|
@@ -724,6 +641,7 @@
|
|
|
if (!this.userData) {
|
|
if (!this.userData) {
|
|
|
await this.getUserInfo()
|
|
await this.getUserInfo()
|
|
|
}
|
|
}
|
|
|
|
|
+ this.uuId = generateRandomString(16)
|
|
|
const currentToken = await uni.getStorageSync('AppToken')
|
|
const currentToken = await uni.getStorageSync('AppToken')
|
|
|
console.log("token在这里", currentToken)
|
|
console.log("token在这里", currentToken)
|
|
|
const isLiveLogin = uni.getStorageSync('isLiveLogin')
|
|
const isLiveLogin = uni.getStorageSync('isLiveLogin')
|
|
@@ -734,6 +652,7 @@
|
|
|
if (this.share && this.share.length > 0) {
|
|
if (this.share && this.share.length > 0) {
|
|
|
this.liveId = this.share.liveId
|
|
this.liveId = this.share.liveId
|
|
|
this.qrFrom = `&companyId=${this.share.companyId}&companyUserId=${this.share.companyUserId}`;
|
|
this.qrFrom = `&companyId=${this.share.companyId}&companyUserId=${this.share.companyUserId}`;
|
|
|
|
|
+ uni.removeStorageSync('share')
|
|
|
}
|
|
}
|
|
|
if (this.scene) {
|
|
if (this.scene) {
|
|
|
console.log("有扫码")
|
|
console.log("有扫码")
|
|
@@ -749,6 +668,7 @@
|
|
|
if (params.b && params.c) {
|
|
if (params.b && params.c) {
|
|
|
this.qrFrom = `&companyId=${params.b}&companyUserId=${params.c}`;
|
|
this.qrFrom = `&companyId=${params.b}&companyUserId=${params.c}`;
|
|
|
}
|
|
}
|
|
|
|
|
+ uni.removeStorageSync('scene')
|
|
|
}
|
|
}
|
|
|
if (isLiveLogin) {
|
|
if (isLiveLogin) {
|
|
|
console.log("登录了")
|
|
console.log("登录了")
|
|
@@ -773,6 +693,13 @@
|
|
|
this.setVideoProgress();
|
|
this.setVideoProgress();
|
|
|
});
|
|
});
|
|
|
console.log("预约liveiD", this.liveId)
|
|
console.log("预约liveiD", this.liveId)
|
|
|
|
|
+ if (this.lookTimer) {
|
|
|
|
|
+ clearInterval(this.lookTimer)
|
|
|
|
|
+ this.lookTimer = null;
|
|
|
|
|
+ this.stayTime = 0;
|
|
|
|
|
+ this.startTime = 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.startTimer()
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
//分享给好友
|
|
//分享给好友
|
|
@@ -861,6 +788,15 @@
|
|
|
clearInterval(this.welcomeTimer);
|
|
clearInterval(this.welcomeTimer);
|
|
|
this.welcomeTimer = null;
|
|
this.welcomeTimer = null;
|
|
|
}
|
|
}
|
|
|
|
|
+ if (this.trafficInterval != null) {
|
|
|
|
|
+ clearInterval(this.trafficInterval)
|
|
|
|
|
+ }
|
|
|
|
|
+ if (this.lookTimer) {
|
|
|
|
|
+ clearInterval(this.lookTimer)
|
|
|
|
|
+ this.lookTimer = null;
|
|
|
|
|
+ this.stayTime = 0;
|
|
|
|
|
+ this.startTime = 0;
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
mounted() {
|
|
@@ -903,6 +839,68 @@
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ startTimer() {
|
|
|
|
|
+ this.startTime = Date.now()
|
|
|
|
|
+
|
|
|
|
|
+ this.lookTimer = setInterval(() => {
|
|
|
|
|
+ this.stayTime = Math.floor((Date.now() - this.startTime) / 1000)
|
|
|
|
|
+ }, 1000)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 缓冲
|
|
|
|
|
+ getInternetTraffic() {
|
|
|
|
|
+ console.log("流量>>>>")
|
|
|
|
|
+ // if(!this.liveId) return
|
|
|
|
|
+ // const playVideoTime = Math.ceil(this.playTime / this.duration * 100) // 播放百分比
|
|
|
|
|
+ // if(this.bufferRate == 0 || this.bufferRate < playVideoTime) {
|
|
|
|
|
+ // this.bufferRate = playVideoTime
|
|
|
|
|
+ // }
|
|
|
|
|
+ // if(this.bufferRate == 0 || Number(this.bufferRate.toFixed(2)) == 0) return
|
|
|
|
|
+
|
|
|
|
|
+ const currentTime = this.stayTime / this.liveItem.duration * 100;
|
|
|
|
|
+ console.log("currentTime是什么", currentTime)
|
|
|
|
|
+
|
|
|
|
|
+ const param = {
|
|
|
|
|
+ companyId: this.companyId || '',
|
|
|
|
|
+ companyUserId: this.companyUserId || '',
|
|
|
|
|
+ userId: this.userData.userId || '',
|
|
|
|
|
+ liveId: this.liveId || '',
|
|
|
|
|
+ videoType: this.liveItem.videoType,
|
|
|
|
|
+ videoId: this.liveItem.videoId,
|
|
|
|
|
+
|
|
|
|
|
+ uuId: dayjs().format('YYYYMMDD') + this.uuId,
|
|
|
|
|
+ duration: this.liveItem.duration,
|
|
|
|
|
+ bufferRate: currentTime,
|
|
|
|
|
+ }
|
|
|
|
|
+ // if(!param.bufferRate) return
|
|
|
|
|
+ // internetTraffic(param)
|
|
|
|
|
+ console.log("流量1>>>>")
|
|
|
|
|
+ internetTraffic(param).then(res => {
|
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
|
+ console.log("流量成功>>>>", res)
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(error => {
|
|
|
|
|
+ console.error("流量失败:", error);
|
|
|
|
|
+
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ scrollToBottom() {
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
|
|
+
|
|
|
|
|
+ // 获取 scroll-view 和内容的高度
|
|
|
|
|
+ query.select('.scrolly').boundingClientRect(scrollRect => {
|
|
|
|
|
+ query.select('.scrolly').scrollOffset(scrollOffset => {
|
|
|
|
|
+ // 计算新的滚动位置
|
|
|
|
|
+ const newScrollTop = scrollOffset.scrollHeight - scrollRect
|
|
|
|
|
+ .height;
|
|
|
|
|
+ this.scrollTop = newScrollTop;
|
|
|
|
|
+ }).exec();
|
|
|
|
|
+ }).exec();
|
|
|
|
|
+ }, 100);
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
// 恢复页面活动
|
|
// 恢复页面活动
|
|
|
async resumePageActivity() {
|
|
async resumePageActivity() {
|
|
|
console.log("恢复了")
|
|
console.log("恢复了")
|
|
@@ -1192,7 +1190,7 @@
|
|
|
|
|
|
|
|
//输入框
|
|
//输入框
|
|
|
inputFocus() {
|
|
inputFocus() {
|
|
|
- this.chatHeight = this.keyboardHeight - 10;
|
|
|
|
|
|
|
+ this.chatHeight = this.keyboardHeight;
|
|
|
this.isFocus = true;
|
|
this.isFocus = true;
|
|
|
},
|
|
},
|
|
|
inputBlur() {
|
|
inputBlur() {
|
|
@@ -1288,12 +1286,6 @@
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
// 点击红包
|
|
// 点击红包
|
|
|
onRed() {
|
|
onRed() {
|
|
|
|
|
|
|
@@ -1735,23 +1727,21 @@
|
|
|
}, 1000); // 延迟时间:500毫秒
|
|
}, 1000); // 延迟时间:500毫秒
|
|
|
},
|
|
},
|
|
|
async getLiveMsg(liveItem) {
|
|
async getLiveMsg(liveItem) {
|
|
|
- // 强化校验:确保 liveItem 存在且包含 liveId
|
|
|
|
|
if (!liveItem || !this.liveId) {
|
|
if (!liveItem || !this.liveId) {
|
|
|
- console.error('getLiveMsg 错误:无效的 liveItem', {
|
|
|
|
|
- liveItem: liveItem,
|
|
|
|
|
- currentIndex: this.currentSwiperIndex,
|
|
|
|
|
- });
|
|
|
|
|
- return; // 直接返回,不执行后续逻辑
|
|
|
|
|
|
|
+ console.error('getLiveMsg 错误:无效的 liveItem');
|
|
|
|
|
+ return;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
try {
|
|
try {
|
|
|
const res = await liveMsg(this.liveId, 30, 1);
|
|
const res = await liveMsg(this.liveId, 30, 1);
|
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
|
const rows = Array.isArray(res.rows) ? res.rows : [];
|
|
const rows = Array.isArray(res.rows) ? res.rows : [];
|
|
|
const reversedTalkList = [...rows].reverse();
|
|
const reversedTalkList = [...rows].reverse();
|
|
|
- // .reverse();
|
|
|
|
|
this.talklist = Array.isArray(reversedTalkList) ? reversedTalkList : [];
|
|
this.talklist = Array.isArray(reversedTalkList) ? reversedTalkList : [];
|
|
|
|
|
+
|
|
|
|
|
+ // 获取历史消息后也滚动到底部
|
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
|
- this.scrollIntoView = `list_${reversedTalkList.length - 1}`;
|
|
|
|
|
|
|
+ this.scrollToBottom();
|
|
|
});
|
|
});
|
|
|
} else {
|
|
} else {
|
|
|
this.talklist = [];
|
|
this.talklist = [];
|
|
@@ -1896,6 +1886,7 @@
|
|
|
clearInterval(this.liveStartTimer);
|
|
clearInterval(this.liveStartTimer);
|
|
|
}
|
|
}
|
|
|
}, 1000);
|
|
}, 1000);
|
|
|
|
|
+
|
|
|
this.$set(this.liveItem, 'previewUrl', res.data.previewUrl);
|
|
this.$set(this.liveItem, 'previewUrl', res.data.previewUrl);
|
|
|
this.$set(this.liveItem, 'livingUrl', ''); // 清空直播流
|
|
this.$set(this.liveItem, 'livingUrl', ''); // 清空直播流
|
|
|
this.$set(this.liveItem, 'videoUrl', ''); // 清空回放视频
|
|
this.$set(this.liveItem, 'videoUrl', ''); // 清空回放视频
|
|
@@ -1920,6 +1911,15 @@
|
|
|
await this.getLiveMsg(this.liveItem);
|
|
await this.getLiveMsg(this.liveItem);
|
|
|
await this.getliveViewData(this.liveItem);
|
|
await this.getliveViewData(this.liveItem);
|
|
|
|
|
|
|
|
|
|
+ //流量
|
|
|
|
|
+ let that = this
|
|
|
|
|
+ if (this.trafficInterval != null) {
|
|
|
|
|
+ clearInterval(that.trafficInterval)
|
|
|
|
|
+ }
|
|
|
|
|
+ this.trafficInterval = setInterval(function() {
|
|
|
|
|
+ that.getInternetTraffic()
|
|
|
|
|
+ }, 5000);
|
|
|
|
|
+
|
|
|
this.$set(this.liveItem, 'autoplay', res.data.liveType !== 0);
|
|
this.$set(this.liveItem, 'autoplay', res.data.liveType !== 0);
|
|
|
this.$set(this.liveItem, 'showType', res.data.showType);
|
|
this.$set(this.liveItem, 'showType', res.data.showType);
|
|
|
this.storeId = res.storeId;
|
|
this.storeId = res.storeId;
|
|
@@ -2314,11 +2314,12 @@
|
|
|
this.talklist = newList;
|
|
this.talklist = newList;
|
|
|
// 1. 将消息追加到当前直播间的talklist中(响应式更新)
|
|
// 1. 将消息追加到当前直播间的talklist中(响应式更新)
|
|
|
this.talklist = newList;
|
|
this.talklist = newList;
|
|
|
|
|
+ this.scrollToBottom();
|
|
|
// 2. 延迟下一帧滚动到最新消息(确保DOM已更新)
|
|
// 2. 延迟下一帧滚动到最新消息(确保DOM已更新)
|
|
|
- this.$nextTick(() => {
|
|
|
|
|
- const lastIndex = this.talklist.length - 1;
|
|
|
|
|
- this.scrollIntoView = `list_${lastIndex}`;
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ // this.$nextTick(() => {
|
|
|
|
|
+ // const lastIndex = this.talklist.length - 1;
|
|
|
|
|
+ // this.scrollIntoView = `list_${lastIndex}`;
|
|
|
|
|
+ // });
|
|
|
} else if (socketMessage.cmd == 'red') {
|
|
} else if (socketMessage.cmd == 'red') {
|
|
|
this.redInfo = JSON.parse(socketMessage.data);
|
|
this.redInfo = JSON.parse(socketMessage.data);
|
|
|
this.isShowRed = socketMessage.status === 1;
|
|
this.isShowRed = socketMessage.status === 1;
|
|
@@ -2380,13 +2381,10 @@
|
|
|
}
|
|
}
|
|
|
} else if (socketMessage.cmd == 'entry') {
|
|
} else if (socketMessage.cmd == 'entry') {
|
|
|
try {
|
|
try {
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
if (!this.liveUserCalled) {
|
|
if (!this.liveUserCalled) {
|
|
|
await this.getliveUser(false);
|
|
await this.getliveUser(false);
|
|
|
this.liveUserCalled = true;
|
|
this.liveUserCalled = true;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
const userIdToEntry = socketMessage.userId;
|
|
const userIdToEntry = socketMessage.userId;
|
|
|
const existingIndex = this.liveViewersData.findIndex(item => item.userId ===
|
|
const existingIndex = this.liveViewersData.findIndex(item => item.userId ===
|
|
|
userIdToEntry);
|
|
userIdToEntry);
|
|
@@ -2398,7 +2396,6 @@
|
|
|
avatar: socketMessage.avatar
|
|
avatar: socketMessage.avatar
|
|
|
}
|
|
}
|
|
|
this.liveViewersData.push(liveViewers);
|
|
this.liveViewersData.push(liveViewers);
|
|
|
- console.log("在这里>>>", this.liveViewersData);
|
|
|
|
|
this.liveUserTotal++;
|
|
this.liveUserTotal++;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -2435,8 +2432,6 @@
|
|
|
this.liveUserTotal--; // 根据userId删除对应的用户数据
|
|
this.liveUserTotal--; // 根据userId删除对应的用户数据
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
this.inAndOut = socketMessage;
|
|
this.inAndOut = socketMessage;
|
|
|
this.showWelcomeMessage = true;
|
|
this.showWelcomeMessage = true;
|
|
|
|
|
|
|
@@ -2621,94 +2616,6 @@
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .coupon {
|
|
|
|
|
- padding: 20rpx;
|
|
|
|
|
-
|
|
|
|
|
- .coupon-top {}
|
|
|
|
|
-
|
|
|
|
|
- .coupon-list {
|
|
|
|
|
- margin-top: 0.25 * 100rpx;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
-
|
|
|
|
|
- .item {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 1.7 * 100rpx;
|
|
|
|
|
- margin-bottom: 0.16 * 100rpx;
|
|
|
|
|
-
|
|
|
|
|
- .money {
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- width: 2.4 * 100rpx;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- font-size: 0.36 * 100rpx;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- position: relative;
|
|
|
|
|
-
|
|
|
|
|
- .img {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- width: 2.4 * 100rpx;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .num {
|
|
|
|
|
- font-size: 0.6 * 100rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .pic-num {
|
|
|
|
|
- font-size: 20rpx;
|
|
|
|
|
- z-index: 99;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .text {
|
|
|
|
|
- width: 4.5 * 100rpx;
|
|
|
|
|
- padding: 0 0.17 * 100rpx 0 0.24 * 100rpx;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
-
|
|
|
|
|
- .condition {
|
|
|
|
|
- font-size: 0.3 * 100rpx;
|
|
|
|
|
- color: #282828;
|
|
|
|
|
- height: 0.93 * 100rpx;
|
|
|
|
|
- line-height: 0.93 * 100rpx;
|
|
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .data {
|
|
|
|
|
- font-size: 0.2 * 100rpx;
|
|
|
|
|
- color: #999;
|
|
|
|
|
- height: 0.76 * 100rpx;
|
|
|
|
|
-
|
|
|
|
|
- .bnt {
|
|
|
|
|
- width: 1.36 * 100rpx;
|
|
|
|
|
- height: 0.44 * 100rpx;
|
|
|
|
|
- border-radius: 0.22 * 100rpx;
|
|
|
|
|
- font-size: 0.22 * 100rpx;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- line-height: 0.44 * 100rpx;
|
|
|
|
|
- background-color: red;
|
|
|
|
|
-
|
|
|
|
|
- .gray {
|
|
|
|
|
- background-color: #ccc;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
.swiper-wrapper {
|
|
.swiper-wrapper {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -2721,15 +2628,11 @@
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
transition: opacity 0.3s ease;
|
|
transition: opacity 0.3s ease;
|
|
|
- transform: translateZ(0); // 开启GPU加速
|
|
|
|
|
- will-change: opacity; // 告诉浏览器提前优化该属性
|
|
|
|
|
|
|
+ transform: translateZ(0);
|
|
|
|
|
+ will-change: opacity;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
.loading-tip {
|
|
.loading-tip {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
@@ -2748,22 +2651,6 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .loading-more,
|
|
|
|
|
- .no-more {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- padding: 20rpx 0;
|
|
|
|
|
- color: #999;
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .loading-more {
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
/* button自带样式清除 */
|
|
/* button自带样式清除 */
|
|
|
button::after {
|
|
button::after {
|
|
|
border: none !important;
|
|
border: none !important;
|
|
@@ -2794,16 +2681,6 @@
|
|
|
transition: opacity 0.3s ease;
|
|
transition: opacity 0.3s ease;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- @keyframes fadeOut {
|
|
|
|
|
- from {
|
|
|
|
|
- opacity: 1;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- to {
|
|
|
|
|
- opacity: 0;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
.send {
|
|
.send {
|
|
|
background-color: #fafafa;
|
|
background-color: #fafafa;
|
|
|
border-radius: 28rpx;
|
|
border-radius: 28rpx;
|
|
@@ -2812,14 +2689,6 @@
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .send-input {
|
|
|
|
|
- background-color: #ffb082;
|
|
|
|
|
- border-radius: 28rpx;
|
|
|
|
|
- padding: 14rpx 16rpx;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
.talk-list {
|
|
.talk-list {
|
|
|
max-width: 100%;
|
|
max-width: 100%;
|
|
|
border-radius: 30rpx;
|
|
border-radius: 30rpx;
|
|
@@ -2838,8 +2707,6 @@
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
.activity-box {
|
|
.activity-box {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
top: 188rpx;
|
|
top: 188rpx;
|
|
@@ -3391,10 +3258,6 @@
|
|
|
top: 10rpx;
|
|
top: 10rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.icon-bg {
|
|
.icon-bg {
|
|
@@ -3422,7 +3285,7 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
to {
|
|
to {
|
|
|
- margin-top: 20rpx;
|
|
|
|
|
|
|
+ // margin-top: 20rpx;
|
|
|
opacity: 1;
|
|
opacity: 1;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|