|
@@ -36,23 +36,22 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 右边的 -->
|
|
|
- <view :class=" liveItem.showType==1 ? 'siderow-group' : 'side-group'">
|
|
|
+ <!-- <view :class=" liveItem.showType==1 ? 'siderow-group' : 'side-group'">
|
|
|
<view class="side-item">
|
|
|
- <image @click="onLike(liveItem)" src="/static/images/live/like.png"></image>
|
|
|
+ <image class="image" @click="onLike(liveItem)" src="/static/images/live/like.png"></image>
|
|
|
<view>{{liveItem.liveViewData?.like||0}}</view>
|
|
|
</view>
|
|
|
- <!-- <view class="side-item">
|
|
|
- <image @click="goStore(liveItem)" src="/static/images/live/shop.png"></image>
|
|
|
- <view>店铺</view>
|
|
|
- </view> -->
|
|
|
-
|
|
|
<view class="side-item">
|
|
|
- <button open-type="share">
|
|
|
- <image src="/static/images/live/share.png" mode="widthFix"></image>
|
|
|
+ <button open-type="share" class="button">
|
|
|
+ <image class="image" src="/static/images/live/share.png" mode="widthFix"></image>
|
|
|
</button>
|
|
|
<view>分享</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ <view class="side-item">
|
|
|
+ <image @click="goStore(liveItem)" src="/static/images/live/shop.png"></image>
|
|
|
+ <view>店铺</view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
|
|
|
<view class="shop-prompt u-flex-y-center" v-if="showPurchasePrompt&&orderUser?.count">
|
|
|
<image class="w32 h32 mr8" src="/static/images/live/shopping.png"></image>
|
|
@@ -134,7 +133,7 @@
|
|
|
|
|
|
<view class="justify-between p24">
|
|
|
<view class="u-flex-y-center"
|
|
|
- style="background:rgba(157, 157, 157, 0.8);padding:10rpx 14rpx 10rpx 32rpx;width: 566rpx;box-sizing:border-box;border-radius:36rpx;">
|
|
|
+ style="background:rgba(57, 57, 57, 0.8);padding:10rpx 14rpx 10rpx 32rpx;width: 500rpx;box-sizing:border-box;border-radius:36rpx;">
|
|
|
<u-input :placeholder="liveItem.placeholderText" border="none"
|
|
|
customStyle='font-size:24rpx;' v-model="liveItem.value" shape='circle'
|
|
|
color='#fff' placeholderStyle='color:#e7e7e7' class="ml20">
|
|
@@ -142,6 +141,28 @@
|
|
|
<view class="send" @click="sendMsg(liveItem)">发送</view>
|
|
|
</view>
|
|
|
<view class="justify-between mr15 align-center">
|
|
|
+ <!-- <view class="side-item">
|
|
|
+ <image class="image" @click="onLike(liveItem)" src="/static/images/live/like.png"></image>
|
|
|
+ <view>{{liveItem.liveViewData?.like||0}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="side-item">
|
|
|
+ <button open-type="share" class="button">
|
|
|
+ <image class="image" src="/static/images/live/share.png" mode="widthFix"></image>
|
|
|
+ </button>
|
|
|
+ <view>分享</view>
|
|
|
+ </view>
|
|
|
+ -->
|
|
|
+ <view class="icon ml20" @click="onLike(liveItem)">
|
|
|
+ <image src="/static/images/live/like.png" class="w56 h56"></image>
|
|
|
+ <view>{{liveItem.liveViewData?.like||0}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon ml20">
|
|
|
+ <button open-type="share" class="button">
|
|
|
+ <image src="/static/images/live/share.png" class="w56 h56"></image>
|
|
|
+ </button>
|
|
|
+ <view>分享</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- <view class="icon-bg ml20" @click="openCart(liveItem)">
|
|
|
<image src="/static/images/shopping.png" class="w48 h48"></image>
|
|
|
</view> -->
|
|
@@ -154,16 +175,15 @@
|
|
|
|
|
|
<!-- 弹出商品 -->
|
|
|
<view @click="" class="goods">
|
|
|
- <view class="item">
|
|
|
- <view class="top">
|
|
|
- <view class="">
|
|
|
- <image class="w30 h30" src="/static/images/signal.png"></image>讲解中
|
|
|
- </view>
|
|
|
- <image class="w30 h30" src="/static/images/close.png"></image>
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">
|
|
|
+ <image class="w30 h30" src="/static/images/signal.png"></image>讲解中
|
|
|
</view>
|
|
|
- <image class="w100 h100" style="width: 70rpx;height: 70rpx;"
|
|
|
- src="@/static/images/hongbao.png" mode="widthFix"></image>
|
|
|
- <view class="price"><text class="red">23</text><text class="">26</text></view>
|
|
|
+ <image class="w30 h30" src="/static/images/close.png"></image>
|
|
|
+ </view>
|
|
|
+ <image class="photo" src="@/static/images/a.jpg"></image>
|
|
|
+ <view class="item">
|
|
|
+ <view class="price"><text class="red">23.55</text><text class="del">26.66</text></view>
|
|
|
<view class="title">新鲜土鸡蛋</view>
|
|
|
<view class="button">立即抢购</view>
|
|
|
</view>
|
|
@@ -303,9 +323,9 @@
|
|
|
submitAnswer
|
|
|
} from '@/api/home'
|
|
|
|
|
|
- // var wsUrl = "ws://192.168.10.166:7114/app/webSocket"; //余红奇
|
|
|
+ var wsUrl = "ws://192.168.10.166:7114/app/webSocket"; //余红奇
|
|
|
// var wsUrl = "ws://192.168.10.125:7114/app/webSocket"; //涂小龙
|
|
|
- var wsUrl = "wss://live.test.ylrztop.com/ws/live-api/app/webSocket"; //余红奇
|
|
|
+ // var wsUrl = "wss://live.test.ylrztop.com/ws/live-api/app/webSocket"; //余红奇
|
|
|
// var wsUrl = "ws://live.test.ylrztop.com/prod-api/app/webSocket"; //余红奇
|
|
|
// var wsUrl = "ws://nd383294.natappfree.cc/app/webSocket"; //余红奇
|
|
|
// var wsUrl = "ws://v56c9b8e.natappfree.cc/app/webSocket"; //余红奇
|
|
@@ -319,6 +339,9 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ lastClickTime: 0,
|
|
|
+ clickDelay: 300, // 300ms内只响应一次点击
|
|
|
+
|
|
|
connectingLiveId: null, // 记录正在连接的直播间ID
|
|
|
swiperDuration: 0, // 初始化为0,首次加载无动画
|
|
|
videoRetryCounts: {}, // 记录每个直播间的视频重试次数,格式: { liveId: 次数 }
|
|
@@ -429,7 +452,7 @@
|
|
|
console.warn('当前平台不支持 uni.showShareMenu');
|
|
|
}
|
|
|
} else {
|
|
|
- console.log('当前平台无需显示分享菜单');
|
|
|
+ // console.log('当前平台无需显示分享菜单');
|
|
|
}
|
|
|
},
|
|
|
onReady() {},
|
|
@@ -501,6 +524,13 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ toggleViewerList() {
|
|
|
+ const now = Date.now()
|
|
|
+ if (now - this.lastClickTime > this.clickDelay) {
|
|
|
+ this.showadd = !this.showadd
|
|
|
+ this.lastClickTime = now
|
|
|
+ }
|
|
|
+ },
|
|
|
// 重置在线用户列表的分页参数
|
|
|
resetUserListParams() {
|
|
|
this.viewPageNum = 1; // 重置页码为第一页
|
|
@@ -632,7 +662,7 @@
|
|
|
await this.initCurrentLiveData();
|
|
|
|
|
|
// 获取在线用户
|
|
|
- this.getliveUser(true);
|
|
|
+ this.getliveUser(false);
|
|
|
|
|
|
// 延迟播放视频
|
|
|
setTimeout(() => {
|
|
@@ -840,8 +870,7 @@
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- this.liveViewers = isLoadMore ? [...this.liveViewers, ...res.rows] :
|
|
|
- res.rows; // 首次加载/切换直播间时重置数据
|
|
|
+ this.liveViewers = isLoadMore ? [...this.liveViewers, ...res.rows] :res.rows; // 首次加载/切换直播间时重置数据
|
|
|
this.viewPageNum++;
|
|
|
// console.log("在线观众", this.liveViewers)
|
|
|
}
|
|
@@ -1030,8 +1059,6 @@
|
|
|
} else if (res.data.liveType === 1) {
|
|
|
// 直播流
|
|
|
this.$set(liveItem, 'livingUrl', res.data.flvHlsUrl);
|
|
|
- console.log("排查中1》》", res.data.flvHlsUrl)
|
|
|
- console.log("排查中2》》", liveItem.livingUrl)
|
|
|
this.$set(liveItem, 'videoUrl', ''); // 清空回放视频
|
|
|
this.$set(liveItem, 'placeholderText', "说点什么...");
|
|
|
} else {
|
|
@@ -1211,8 +1238,6 @@
|
|
|
if (res.code == 200) {
|
|
|
// 强制响应式更新,确保数据实时显示
|
|
|
this.$set(liveItem, 'liveViewData', res);
|
|
|
- // 打印日志确认数据已加载
|
|
|
- console.log(`直播间 ${liveItem.liveId} 数据加载完成:`, res);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error("获取直播间数据失败:", error);
|
|
@@ -1325,33 +1350,6 @@
|
|
|
const now = new Date();
|
|
|
this.timestamp = now.getTime(); // 例如:'2023-04-01 12:00:00'
|
|
|
},
|
|
|
- // initWebSocket() {
|
|
|
- // const liveWS = new LiveWS('ws://your-server.com', 123, 456);
|
|
|
-
|
|
|
- // // 从 URL 中解析 timestamp
|
|
|
- // const urlParams = new URL(liveWS.url).searchParams;
|
|
|
- // this.timestamp = urlParams.get('timestamp');
|
|
|
- // // console.log('Timestamp:', timestamp);
|
|
|
- // },
|
|
|
-
|
|
|
- // 弹幕滚动
|
|
|
- lowerChat: function(e) {
|
|
|
- console.log(e)
|
|
|
- },
|
|
|
- scroll: function(e) {
|
|
|
- console.log(e)
|
|
|
- this.old.scrollTop = e.detail.scrollTop
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- loadmore() {
|
|
|
- // for (let i = 0; i < 30; i++) {
|
|
|
- // this.indexList.push({
|
|
|
- // url: this.shopList[uni.$u.random(0, this.shopList.length - 1)],
|
|
|
- // });
|
|
|
- // }
|
|
|
- },
|
|
|
-
|
|
|
openShop() {
|
|
|
|
|
|
},
|
|
@@ -1365,37 +1363,27 @@
|
|
|
}).exec();
|
|
|
});
|
|
|
},
|
|
|
- openCart(liveItem) {
|
|
|
- if (!liveItem.storeId) {
|
|
|
- uni.showToast({
|
|
|
- title: "当前直播间暂未开通店铺",
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- liveItem.shopping = !liveItem.shopping
|
|
|
- },
|
|
|
+ // openCart(liveItem) {
|
|
|
+ // if (!liveItem.storeId) {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: "当前直播间暂未开通店铺",
|
|
|
+ // icon: 'none'
|
|
|
+ // });
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // liveItem.shopping = !liveItem.shopping
|
|
|
+ // },
|
|
|
close() {
|
|
|
- this.showadd = !this.showadd
|
|
|
+ this.showadd = false
|
|
|
},
|
|
|
closes() {
|
|
|
this.showziliao = !this.showziliao
|
|
|
},
|
|
|
- closest() {
|
|
|
- this.showAnswer = !this.showAnswer
|
|
|
- },
|
|
|
- closestred() {
|
|
|
- this.showAnswerred = !this.showAnswerred
|
|
|
- },
|
|
|
- closeanswer() {
|
|
|
- this.answerbtn = !this.answerbtn
|
|
|
- },
|
|
|
// 关闭小黄车
|
|
|
closeShop() {
|
|
|
// 通过当前swiper索引获取当前直播间实例
|
|
|
const currentLive = this.list[this.currentSwiperIndex];
|
|
|
if (currentLive) {
|
|
|
- // 使用响应式更新修改shopping属性
|
|
|
this.$set(currentLive, 'shopping', !currentLive.shopping);
|
|
|
}
|
|
|
},
|
|
@@ -1614,38 +1602,50 @@
|
|
|
} else if (socketMessage.cmd == 'sendRedPacketQuestion') {
|
|
|
const list = JSON.parse(message.data.data);
|
|
|
// 处理红包答题逻辑
|
|
|
- } else if (socketMessage.cmd == 'entry') {
|
|
|
- // console.log("进入:", liveItem);
|
|
|
- console.log("在线人数进入:");
|
|
|
+ } else if (socketMessage.cmd == 'entry' || socketMessage.cmd == 'out') {
|
|
|
+
|
|
|
this.$set(liveItem, 'talklist', [...liveItem.talklist, messageData]);
|
|
|
// 先重置为 false(避免残留状态)
|
|
|
this.$set(liveItem, 'showWelcomeMessage', false);
|
|
|
// 立即设为 true(触发 DOM 更新)
|
|
|
this.$set(liveItem, 'showWelcomeMessage', true);
|
|
|
this.getliveUser(false); // 调用获取在线用户接口
|
|
|
- console.log("开启欢迎消息:", liveItem.showWelcomeMessage);
|
|
|
+ // console.log("开启欢迎消息:", liveItem.showWelcomeMessage);
|
|
|
if (liveItem.welcomeTimer) {
|
|
|
clearTimeout(liveItem.welcomeTimer);
|
|
|
}
|
|
|
// 存储定时器到 liveItem 中(避免引用丢失)
|
|
|
liveItem.welcomeTimer = setTimeout(() => {
|
|
|
this.$set(liveItem, 'showWelcomeMessage', false);
|
|
|
- console.log("关闭欢迎消息:", liveItem.showWelcomeMessage);
|
|
|
+ // console.log("关闭欢迎消息:", liveItem.showWelcomeMessage);
|
|
|
}, 1000); // 1秒后隐藏
|
|
|
- } else if (socketMessage.cmd == 'live_start') {
|
|
|
- // 直播开始
|
|
|
- } else if (socketMessage.cmd == 'live_end') {
|
|
|
- // 直播结束
|
|
|
- } else if (socketMessage.data.cmd == 'deleteId') {
|
|
|
- uni.$emit('deleteId');
|
|
|
- } else if (socketMessage.data.cmd == 'sendRedPacketQuestion') {
|
|
|
- // const list = JSON.parse(socketMessage)
|
|
|
- // liveItem.redanswerAll = [...liveItem.redanswerAll, ...list]
|
|
|
- // if (liveItem.redanswerAll[1].randomAmount !== null) {
|
|
|
- // liveItem.redanswertips = JSON.parse(liveItem.redanswerAll[0]
|
|
|
- // .randomAmount)
|
|
|
- // }
|
|
|
+ } else if (socketMessage.cmd == 'Integral') {
|
|
|
+ uni.showToast({
|
|
|
+ title: socketMessage.msg,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 20000
|
|
|
+ });
|
|
|
+ // 观看奖励事件 弹出框2s 显示msg
|
|
|
+ } else if (socketMessage.cmd == 'blockUser') {
|
|
|
+ //拉黑事件 主动删除用户token,强制跳转到登录页面
|
|
|
+ uni.removeStorage({
|
|
|
+ key: 'AppToken', // 存储 Token 时的 key
|
|
|
+ success: () => {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/auth/login' // 登录页路径,需根据项目实际路径调整
|
|
|
+ });
|
|
|
+ console.log('Token 删除成功');
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('Token 删除失败:', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
+ // else if (socketMessage.data.cmd == 'deleteId') {
|
|
|
+
|
|
|
+ // } else if (socketMessage.data.cmd =='sendRedPacketQuestion') {
|
|
|
+
|
|
|
+ // }
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: data.msg,
|
|
@@ -1724,7 +1724,6 @@
|
|
|
socketItem.instance.send({
|
|
|
data: JSON.stringify(data),
|
|
|
success: () => {
|
|
|
- // 成功后可以移除 local 标记(可选)
|
|
|
// 比如找到最后一条 local 消息并标记为 sent
|
|
|
},
|
|
|
fail: (err) => {
|
|
@@ -1861,10 +1860,11 @@
|
|
|
}
|
|
|
|
|
|
.send {
|
|
|
- background-color: #4b4b4b;
|
|
|
+ background-color: #fafafa;
|
|
|
border-radius: 28rpx;
|
|
|
padding: 14rpx 16rpx;
|
|
|
- color: #fff;
|
|
|
+ color: #181818;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
// .container {
|
|
@@ -1996,32 +1996,116 @@
|
|
|
|
|
|
.goods {
|
|
|
position: fixed;
|
|
|
- bottom: 120rpx;
|
|
|
- right: 0rpx;
|
|
|
+ bottom: 160rpx;
|
|
|
+ right: 10rpx;
|
|
|
z-index: 5;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
overflow: hidden;
|
|
|
- width: 200rpx;
|
|
|
- height: 350rpx;
|
|
|
+ width: 220rpx;
|
|
|
+ padding: 4rpx;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ position: absolute;
|
|
|
+ top: 4rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ padding: 10rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 4rpx;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ .red {
|
|
|
+ color: #FF5701;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .del {
|
|
|
+ color: #828282;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-decoration: line-through
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin: 10rpx 0 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ background: linear-gradient(270deg, #ff4702 0%, #fe6304 100%);
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
- .top {}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
+ .icon {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: -10rpx;
|
|
|
|
|
|
- // .icon-bg {
|
|
|
- // background-color: rgba(157, 157, 157, 0.8);
|
|
|
- // border-radius: 50%;
|
|
|
- // width: 72rpx;
|
|
|
- // height: 72rpx;
|
|
|
- // display: flex;
|
|
|
- // justify-content: center;
|
|
|
- // align-items: center;
|
|
|
- // transition: transform 0.2s ease;
|
|
|
- // }
|
|
|
+ .button {
|
|
|
+ background-color: transparent;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-bg {
|
|
|
+ background-color: rgba(157, 157, 157, 0.8);
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ background-color: transparent;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.list {
|
|
|
width: 80%;
|
|
@@ -2071,14 +2155,14 @@
|
|
|
margin-bottom: 32rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
- button {
|
|
|
+ .button {
|
|
|
background-color: transparent;
|
|
|
margin: 0;
|
|
|
line-height: 1;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
- image {
|
|
|
+ .image {
|
|
|
width: 72rpx;
|
|
|
height: 72rpx;
|
|
|
}
|