|
@@ -25,8 +25,25 @@
|
|
|
</image>
|
|
|
<view class="sum">{{liveUserTotal||0}}</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
+ </view>
|
|
|
+ <!-- 右边的 -->
|
|
|
+ <view :class=" liveItem.showType==1 ? 'siderow-group' : 'side-group'">
|
|
|
+ <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">
|
|
|
+ <image @click="goStore(liveItem)" src="/static/images/live/shop.png"></image>
|
|
|
+ <view>店铺</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>
|
|
|
<!-- 红包内容 -->
|
|
|
<view style="position: fixed;top:120rpx;left: 0rpx; z-index: 5;" class="content-top">
|
|
|
<view class="u-flex-y-center">
|
|
@@ -62,10 +79,10 @@
|
|
|
</video>
|
|
|
<view v-if="liveItem.videoUrl" class="time">{{liveItem.totalTime}}</view>
|
|
|
<!-- 加载提示 -->
|
|
|
- <view v-if="liveItem.loading" class="loading-tip">
|
|
|
+ <!-- <view v-if="liveItem.loading" class="loading-tip">
|
|
|
<u-loading mode="circle" color="#ffffff" size="36"></u-loading>
|
|
|
<text class="loading-text">加载中...</text>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
@@ -115,7 +132,7 @@
|
|
|
<!-- 底部输入框和操作按钮 -->
|
|
|
<view class="justify-between p24">
|
|
|
<view class="u-flex-y-center"
|
|
|
- style="background:rgba(57, 57, 57, 0.8);padding:10rpx 14rpx 10rpx 32rpx;width: 500rpx;box-sizing:border-box;border-radius:36rpx;">
|
|
|
+ style="background:rgba(57, 57, 57, 0.8);padding:10rpx 14rpx 10rpx 32rpx;width: 580rpx;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">
|
|
@@ -123,7 +140,7 @@
|
|
|
<view class="send" @click="sendMsg(liveItem)">发送</view>
|
|
|
</view>
|
|
|
<view class="justify-between mr15 align-center">
|
|
|
- <view class="icon ml20" @click="onLike(liveItem)">
|
|
|
+ <!-- <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>
|
|
@@ -132,6 +149,9 @@
|
|
|
<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>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -139,21 +159,43 @@
|
|
|
|
|
|
<!-- 弹出商品 -->
|
|
|
<!-- v-if="liveItem.goodsCard.isShow" -->
|
|
|
- <view class="goods">
|
|
|
+ <!-- <view class="goods">
|
|
|
<view class="top">
|
|
|
<view class="left">
|
|
|
<image class="w30 h30 mr8" src="/static/images/signal.png"></image>讲解中
|
|
|
</view>
|
|
|
- <image class="w30 h30" src="/static/images/close.png" @click="liveItem.goodsCard.isShow=false"></image>
|
|
|
+ <image class="w30 h30" src="/static/images/close.png"
|
|
|
+ @click="liveItem.goodsCard.isShow=false"></image>
|
|
|
</view>
|
|
|
<image class="photo" :src="liveItem.goodsCard.imgUrl"></image>
|
|
|
<view class="item">
|
|
|
- <view class="price"><text class="red">¥{{liveItem.goodsCard.price}} </text><text class="del">¥{{liveItem.goodsCard.otPrice}}</text></view>
|
|
|
+ <view class="price"><text class="red">¥{{liveItem.goodsCard.price}} </text><text
|
|
|
+ class="del">¥{{liveItem.goodsCard.otPrice}}</text></view>
|
|
|
<view class="title oneline-hide">{{liveItem.goodsCard.productName}}</view>
|
|
|
<view class="button">立即抢购</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
+ <u-popup :show="liveItem.goodsCard.isShow" @close="!liveItem.goodsCard.isShow" round='20rpx'
|
|
|
+ mode="center" bgColor='#ffffff'>
|
|
|
+ <view class="goods">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">
|
|
|
+ <image class="w30 h30 mr8" src="/static/images/signal.png"></image>讲解中
|
|
|
+ </view>
|
|
|
+ <image class="w30 h30" src="/static/images/close.png"
|
|
|
+ @click="liveItem.goodsCard.isShow=false"></image>
|
|
|
+ </view>
|
|
|
+ <image class="photo" :src="liveItem.goodsCard.imgUrl"></image>
|
|
|
+ <view class="item">
|
|
|
+ <view class="price"><text class="red">¥{{liveItem.goodsCard.price}} </text><text
|
|
|
+ class="del">¥{{liveItem.goodsCard.otPrice}}</text></view>
|
|
|
+ <view class="title oneline-hide">{{liveItem.goodsCard.productName}}</view>
|
|
|
+ <view class="button"
|
|
|
+ @click="goShop(liveItem.goodsCard.productId,liveItem.goodsCard.goodsId)">立即抢购</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
|
|
|
<!-- 观众列表弹窗 -->
|
|
|
<u-popup :show="showadd" @close="close" @open="openViews" round='20rpx' bgColor='#ffffff'>
|
|
@@ -228,10 +270,8 @@
|
|
|
</image>
|
|
|
</view>
|
|
|
<view v-if="item.status==1" class="shop-btn"
|
|
|
- @click="goShop(item.productId,item.goodsId)">去购买
|
|
|
- </view>
|
|
|
- <view v-else-if="item.status==0" @click="goShop(item.productId)"
|
|
|
- class="shop-btn">
|
|
|
+ @click="goShop(item.productId,item.goodsId)">去购买 </view>
|
|
|
+ <view v-else-if="item.status==0" class="shop-btn">
|
|
|
已下架</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -257,6 +297,7 @@
|
|
|
collectStore, // 店铺收藏/取消收藏
|
|
|
collectGoods, // 商品收藏/取消收藏
|
|
|
store, // 查询店铺
|
|
|
+ showGoods, //弹出商品卡片
|
|
|
// follow, // 关注/取消关注
|
|
|
watchUserList, //获取直播间用户(展示在线用户)
|
|
|
liveMsg, //获取最近聊天记录
|
|
@@ -281,8 +322,8 @@
|
|
|
getAnswerlist,
|
|
|
submitAnswer
|
|
|
} 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 wsUrl = "ws://192.168.10.125:7114/app/webSocket"; //涂小龙
|
|
|
// var wsUrl = "ws://live.test.ylrztop.com/prod-api/app/webSocket"; //余红奇
|
|
|
// var wsUrl = "ws://nd383294.natappfree.cc/app/webSocket"; //余红奇
|
|
@@ -357,7 +398,7 @@
|
|
|
liveId: null,
|
|
|
// userId: uni.getStorageSync("userInfo.userId"),
|
|
|
|
|
|
- isZoom: false, //点赞按钮控制是否放大
|
|
|
+ // isZoom: false, //点赞按钮控制是否放大
|
|
|
userinfo: '', //用户信息
|
|
|
// path: 'http://192.168.10.166/dev-api', //余红奇
|
|
|
// path: 'http://v56c9b8e.natappfree.cc', //余红奇
|
|
@@ -370,17 +411,17 @@
|
|
|
// talklist: [],
|
|
|
scrollIntoView: '',
|
|
|
videoContext: '',
|
|
|
- thistime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
|
|
|
+ // thistime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
|
|
|
// showWelcomeMessage: false,
|
|
|
- isSubmit: false,
|
|
|
- messageContent: "",
|
|
|
- showziliao: false,
|
|
|
- isScreen: true,
|
|
|
+ // isSubmit: false,
|
|
|
+ // messageContent: "",
|
|
|
+ // showziliao: false,
|
|
|
+ // isScreen: true,
|
|
|
// shopping: false, //小黄车弹窗
|
|
|
- scrollTop: 0, //弹幕
|
|
|
- old: {
|
|
|
- scrollTop: 0
|
|
|
- },
|
|
|
+ // scrollTop: 0, //弹幕
|
|
|
+ // old: {
|
|
|
+ // scrollTop: 0
|
|
|
+ // },
|
|
|
livedata: {}, //直播间点赞、关注、在线人数数据
|
|
|
|
|
|
};
|
|
@@ -641,6 +682,7 @@
|
|
|
await Promise.allSettled([
|
|
|
this.getLiveMsg(currentLive),
|
|
|
this.getliveViewData(currentLive),
|
|
|
+ this.getShowGoods(currentLive),
|
|
|
this.getliving(currentLive)
|
|
|
]);
|
|
|
|
|
@@ -772,7 +814,7 @@
|
|
|
inputInfo: '',
|
|
|
showWelcomeMessage: false,
|
|
|
redInfo: {},
|
|
|
- goodsCard:{},
|
|
|
+ goodsCard: {},
|
|
|
totalTime: '00小时00分钟00秒', // 初始化差值为0
|
|
|
timeTimer: null, // 存储当前直播间的定时器,用于后续清理
|
|
|
// 预处理:统一将 startTime 转换为 iOS 兼容格式(避免重复转换)
|
|
@@ -845,7 +887,8 @@
|
|
|
await Promise.all([
|
|
|
this.getliving(liveItem),
|
|
|
this.getLiveMsg(liveItem),
|
|
|
- this.getliveViewData(liveItem)
|
|
|
+ this.getliveViewData(liveItem),
|
|
|
+ this.getShowGoods(liveItem)
|
|
|
]);
|
|
|
liveItem.loaded = true;
|
|
|
} catch (error) {
|
|
@@ -1324,16 +1367,25 @@
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ //弹出商品卡片
|
|
|
+ async getShowGoods(liveItem) {
|
|
|
+ if (!liveItem || !liveItem.liveId) return;
|
|
|
+ try {
|
|
|
+ const res = await showGoods(liveItem.liveId);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$set(liveItem, 'goodsCard', res);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("暂无商品卡片", error);
|
|
|
+ }
|
|
|
+ },
|
|
|
// 去购买,跳商品详情
|
|
|
goShop(productId, goodsId) {
|
|
|
const currentLive = this.list[this.currentSwiperIndex];
|
|
|
if (!currentLive || !currentLive.liveId) return;
|
|
|
- // console.log("拿现在的item", currentLive)
|
|
|
-
|
|
|
uni.navigateTo({
|
|
|
url: '/pages_shop/goods?productId=' + productId + '&liveId=' + currentLive.liveId +
|
|
|
- '&goodsId=' +
|
|
|
- goodsId + '&storeId=' + currentLive.storeId
|
|
|
+ '&goodsId=' + goodsId + '&storeId=' + currentLive.storeId
|
|
|
})
|
|
|
},
|
|
|
|
|
@@ -1439,22 +1491,22 @@
|
|
|
}).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 = false
|
|
|
},
|
|
|
- closes() {
|
|
|
- this.showziliao = !this.showziliao
|
|
|
- },
|
|
|
+ // closes() {
|
|
|
+ // this.showziliao = !this.showziliao
|
|
|
+ // },
|
|
|
// 关闭小黄车
|
|
|
closeShop() {
|
|
|
// 通过当前swiper索引获取当前直播间实例
|
|
@@ -1468,9 +1520,9 @@
|
|
|
this.showRed = !this.showRed
|
|
|
},
|
|
|
// 触摸结束
|
|
|
- handleTouchEnd() {
|
|
|
- this.isZoom = false; // 恢复原状
|
|
|
- },
|
|
|
+ // handleTouchEnd() {
|
|
|
+ // this.isZoom = false; // 恢复原状
|
|
|
+ // },
|
|
|
getEWechatSdk() {
|
|
|
// 只在H5平台执行
|
|
|
// #ifdef H5
|
|
@@ -1721,11 +1773,11 @@
|
|
|
});
|
|
|
} else if (socketMessage.cmd == 'goods') {
|
|
|
this.$set(liveItem, 'goodsCard', JSON.parse(socketMessage.data));
|
|
|
- } else if (socketMessage.cmd == 'out') {
|
|
|
+ } else if (socketMessage.cmd == 'out') {
|
|
|
// console.log("进入:", liveItem);
|
|
|
console.log("有人退出了:");
|
|
|
-
|
|
|
- } else if (socketMessage.cmd == 'live_start') {
|
|
|
+
|
|
|
+ } else if (socketMessage.cmd == 'live_start') {
|
|
|
// 直播开始
|
|
|
} else if (socketMessage.cmd == 'live_end') {
|
|
|
// 直播结束
|
|
@@ -2033,15 +2085,77 @@
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
+ .siderow-group {
|
|
|
+ position: absolute;
|
|
|
+ top: 65%;
|
|
|
+ right: 30rpx;
|
|
|
+ z-index: 9;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .side-item {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ background-color: transparent;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .side-group {
|
|
|
+ position: absolute;
|
|
|
+ // top: 30%;
|
|
|
+ top: 65%;
|
|
|
+ right: 30rpx;
|
|
|
+ z-index: 9;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .side-item {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ background-color: transparent;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.content-top {
|
|
|
width: 100%;
|
|
|
margin-top: 68rpx;
|
|
|
display: flex;
|
|
|
- // align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 0 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
+
|
|
|
+
|
|
|
.sum {
|
|
|
width: 80rpx;
|
|
|
height: 52rpx;
|
|
@@ -2075,9 +2189,6 @@
|
|
|
background-color: rgba(57, 57, 57, 0.4);
|
|
|
|
|
|
.time {
|
|
|
- position: relative;
|
|
|
- z-index: 999;
|
|
|
- margin-top: -40rpx;
|
|
|
color: #ffffff;
|
|
|
font-size: 20rpx;
|
|
|
margin-left: 10rpx;
|
|
@@ -2104,12 +2215,13 @@
|
|
|
// right: 10rpx;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
z-index: 5;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
overflow: hidden;
|
|
|
- width: 220rpx;
|
|
|
+ width: 300rpx;
|
|
|
+ // width: 220rpx;
|
|
|
padding: 4rpx;
|
|
|
|
|
|
.top {
|
|
@@ -2136,7 +2248,7 @@
|
|
|
|
|
|
.photo {
|
|
|
width: 100%;
|
|
|
- height: 200rpx;
|
|
|
+ height: 250rpx;
|
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
overflow: hidden;
|
|
|
}
|
|
@@ -2246,68 +2358,7 @@
|
|
|
transition: opacity 0.3s ease;
|
|
|
}
|
|
|
|
|
|
- .siderow-group {
|
|
|
- position: absolute;
|
|
|
- top: 65%;
|
|
|
- right: 30rpx;
|
|
|
- z-index: 9;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
|
|
|
- .side-item {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .button {
|
|
|
- background-color: transparent;
|
|
|
- margin: 0;
|
|
|
- line-height: 1;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .side-group {
|
|
|
- position: absolute;
|
|
|
- // top: 30%;
|
|
|
- top: 65%;
|
|
|
- right: 30rpx;
|
|
|
- z-index: 9;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .side-item {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- button {
|
|
|
- background-color: transparent;
|
|
|
- margin: 0;
|
|
|
- line-height: 1;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
|
|
|
.red-box {
|
|
|
.button {
|