|
|
@@ -27,7 +27,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 右边的side -->
|
|
|
- <view class="side-group">
|
|
|
+ <!-- <view class="side-group">
|
|
|
<view class="side-item" @click="onLike">
|
|
|
<LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
|
|
|
<view>{{liveViewData && liveViewData.like||0}}</view>
|
|
|
@@ -38,9 +38,30 @@
|
|
|
</button>
|
|
|
<view>分享</view>
|
|
|
</view>
|
|
|
+ </view> -->
|
|
|
+ <view class="side-group">
|
|
|
+ <!-- v-if="isShowRed" -->
|
|
|
+ <view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','item-box']" @click="onRed()" >
|
|
|
+ <view class="x-f">
|
|
|
+ <view class="tip">领红包</view>
|
|
|
+ <view class="item">
|
|
|
+ <image class="w70 img" src="/static/images/redbag.png" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- v-if="isShowLottery&&countdown" -->
|
|
|
+ <view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','item-box']" @click="onLottery()" >
|
|
|
+ <view class="x-f">
|
|
|
+ <view class="tip">抽奖</view>
|
|
|
+ <view class="item">
|
|
|
+ <image class="w60" src="/static/images/lottery.png" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
|
|
|
- <view class="activity-box">
|
|
|
+ <!-- <view class="activity-box">
|
|
|
<view class="item-box" @click="onRed()" v-if="isShowRed">
|
|
|
<view class="x-f">
|
|
|
<view class="tip">领红包</view>
|
|
|
@@ -57,7 +78,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<view class="shop-prompt f30 x-f"
|
|
|
v-if="showPurchasePrompt&&orderUser&&orderUser.count&&liveItem.status==2">
|
|
|
<image class="w32 h32 mr8" src="/static/images/shopping.png" />
|
|
|
@@ -151,7 +172,8 @@
|
|
|
:scroll-top="scrollTop" ref="scrollView">
|
|
|
<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'">
|
|
|
- <view class="talk-list justify-start">
|
|
|
+ <view
|
|
|
+ :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','talk-list','justify-start']">
|
|
|
<view class="fs30" style="max-width: 100%;">
|
|
|
<text style="color: #FFDA73;">{{item.nickName||"未命名"}}：</text>
|
|
|
<text class='colorf'>{{item.msg}}</text>
|
|
|
@@ -161,7 +183,8 @@
|
|
|
|
|
|
<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="talk-list justify-start">
|
|
|
+ <view
|
|
|
+ :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','talk-list','justify-start']">
|
|
|
<view class="fs30">
|
|
|
<text style="color: #ff89d6;">{{inAndOut.nickName||"未命名"}} </text>
|
|
|
<text class='colorf'>{{inAndOut.msg}}直播间</text>
|
|
|
@@ -173,9 +196,9 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部输入框和操作按钮 -->
|
|
|
- <view class="justify-between p24">
|
|
|
- <view class="x-f justify-between"
|
|
|
- :style="{background:'#393939' ,padding: '10rpx 14rpx 10rpx 32rpx',boxSizing: 'border-box',borderRadius: '36rpx',width: isFocus ? '100%' : '580rpx'}">
|
|
|
+ <view class="justify-between p24 input-bottom">
|
|
|
+ <view class="x-f justify-between" :class="liveItem.showType==1? 'horizontal':'vertical'"
|
|
|
+ :style="{padding: '10rpx 14rpx 10rpx 32rpx',boxSizing: 'border-box',borderRadius: '36rpx',width: isFocus ? '100%' : '420rpx'}">
|
|
|
<input :placeholder="placeholderText" v-model="value" placeholder-style="color:#e7e7e7;"
|
|
|
placeholder-class="placeholder-style" class="ml20 input-native" @focus="inputFocus"
|
|
|
@blur="inputBlur"
|
|
|
@@ -183,9 +206,32 @@
|
|
|
cursor-spacing="100" :adjust-position="false" />
|
|
|
<view class="send" @click="sendMsg()">发送</view>
|
|
|
</view>
|
|
|
- <view class="justify-between mr15 align-center" v-if="!isFocus">
|
|
|
- <view class="icon-bg ml20" @tap="openCart()">
|
|
|
- <image src="/static/images/shopping.png" class="w58 h58" />
|
|
|
+ <view class="justify-between align-center" v-if="!isFocus">
|
|
|
+ <view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-bg','ml20']"
|
|
|
+ @tap="openCart()">
|
|
|
+ <image src="/static/images/more-icon.png" class="w48 h48" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between align-center" v-if="!isFocus">
|
|
|
+ <view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-bg','ml20']"
|
|
|
+ @tap="openCart()">
|
|
|
+ <image src="/static/images/shopping.png" class="w48 h48" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="justify-between align-center" v-if="!isFocus">
|
|
|
+ <view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-bg','ml20']"
|
|
|
+ style="position: relative;">
|
|
|
+ <LikeButton :initialCount="100" :heartsPerClick="5" @like="onLike" />
|
|
|
+ <view class="num">{{liveViewData && liveViewData.like||0}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="justify-between align-center" v-if="!isFocus">
|
|
|
+ <view :class="[liveItem.showType === 1 ? 'horizontal' : 'vertical','icon-bg','ml20']">
|
|
|
+ <button open-type="share" class="w48 h48 button button-reset">
|
|
|
+ <image class="w48 h48" src="/static/images/weixin.png" mode="widthFix" />
|
|
|
+ </button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -1118,6 +1164,7 @@
|
|
|
var that = this
|
|
|
this.trafficTimer = setInterval(() => {
|
|
|
that.calculateTraffic(bitrate);
|
|
|
+ console.log("liveItem在这里>>>", this.liveItem)
|
|
|
}, 10000); // 每10秒计算一次
|
|
|
},
|
|
|
// 计算流量
|
|
|
@@ -2486,7 +2533,7 @@
|
|
|
},
|
|
|
// 限制聊天消息数量，防止内存泄漏
|
|
|
addToTalkList(message) {
|
|
|
- const MAX_TALK_ITEMS = 50;
|
|
|
+ const MAX_TALK_ITEMS = 30;
|
|
|
|
|
|
const oldList = Array.isArray(this.talklist) ? this.talklist : [];
|
|
|
const newList = [...oldList, message];
|
|
|
@@ -2562,20 +2609,22 @@
|
|
|
}
|
|
|
// 清除已有定时器（无论状态是否为1，先清掉旧的）
|
|
|
clearTimeout(this.lotteryTimer);
|
|
|
-
|
|
|
if (this.isShowLottery) {
|
|
|
- this.lotteryTimer = setInterval(() => {
|
|
|
- this.countdown = this.handleTime(this.lotteryInfo.updateTime, this.lotteryInfo
|
|
|
- .duration)
|
|
|
- if (!this.countdown) {
|
|
|
- console.log("倒计时", this.countdown)
|
|
|
- this.isShowLottery = false;
|
|
|
- this.isShowLotteryPop = false;
|
|
|
- clearInterval(this.lotteryTimer)
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
-
|
|
|
-
|
|
|
+ this.countdown = this.handleTime(this.lotteryInfo.updateTime, this.lotteryInfo
|
|
|
+ .duration)
|
|
|
+ if (this.countdown) {
|
|
|
+ this.lotteryTimer = setInterval(() => {
|
|
|
+ this.countdown = this.handleTime(this.lotteryInfo.updateTime, this
|
|
|
+ .lotteryInfo
|
|
|
+ .duration)
|
|
|
+ if (!this.countdown) {
|
|
|
+ // console.log("倒计时", this.countdown)
|
|
|
+ this.isShowLottery = false;
|
|
|
+ this.isShowLotteryPop = false;
|
|
|
+ clearInterval(this.lotteryTimer)
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
} else {
|
|
|
this.isShowLottery = false
|
|
|
}
|
|
|
@@ -2770,6 +2819,48 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+ .input-bottom {
|
|
|
+ .button -reset::after {
|
|
|
+ border: none !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-reset {
|
|
|
+ background-color: transparent !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ line-height: inherit !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ width: auto !important;
|
|
|
+ font-weight: 500 !important;
|
|
|
+ border-radius: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14rpx;
|
|
|
+ color: #FA341E;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .horizontal {
|
|
|
+ background-color: rgba(23, 23, 23, 0.8);
|
|
|
+ }
|
|
|
+
|
|
|
+ .vertical {
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
.skeleton-item {
|
|
|
display: flex;
|
|
|
padding: 20rpx;
|
|
|
@@ -2888,7 +2979,13 @@
|
|
|
.send {
|
|
|
background-color: #fafafa;
|
|
|
border-radius: 28rpx;
|
|
|
- padding: 14rpx 16rpx;
|
|
|
+ // width: 50rpx;
|
|
|
+ // height: 80rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: center;
|
|
|
+ // padding: 14rpx 16rpx;
|
|
|
color: #181818;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
@@ -2910,7 +3007,7 @@
|
|
|
|
|
|
max-width: 100%;
|
|
|
border-radius: 30rpx;
|
|
|
- background-color: rgba(33, 33, 33, 0.5);
|
|
|
+ // background-color: rgba(33, 33, 33, 0.5);
|
|
|
padding: 10rpx 30rpx;
|
|
|
}
|
|
|
|
|
|
@@ -2925,41 +3022,117 @@
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
- .activity-box {
|
|
|
- position: fixed;
|
|
|
- top: 188rpx;
|
|
|
- left: 30rpx;
|
|
|
- z-index: 999999;
|
|
|
+ // .activity-box {
|
|
|
+ // position: fixed;
|
|
|
+ // top: 188rpx;
|
|
|
+ // left: 30rpx;
|
|
|
+ // z-index: 999999;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+
|
|
|
+ // .item-box {
|
|
|
+ // -webkit-transform: translateZ(0);
|
|
|
+ // /* 硬件加速 */
|
|
|
+ // transform: translateZ(0);
|
|
|
+ // border-radius: 16rpx;
|
|
|
+ // background-color: rgba(77, 77, 77, 0.5);
|
|
|
+ // width: 90rpx;
|
|
|
+ // height: 100rpx;
|
|
|
+ // margin-right: 20rpx;
|
|
|
+ // position: relative;
|
|
|
+ // z-index: 999;
|
|
|
+
|
|
|
+ // .tip {
|
|
|
+ // position: absolute;
|
|
|
+ // width: 100%;
|
|
|
+ // bottom: 0;
|
|
|
+ // color: #fafcff;
|
|
|
+ // font-size: 26rpx;
|
|
|
+ // background-color: rgba(15, 15, 15, 0.8);
|
|
|
+ // border-radius: 16rpx;
|
|
|
+ // text-align: center;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .item {
|
|
|
+ // margin: 0 auto;
|
|
|
+ // padding: 10rpx 0;
|
|
|
+
|
|
|
+ // .img {
|
|
|
+ // height: 100%;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 减少重绘
|
|
|
+ .side-group,
|
|
|
+ .content-top {
|
|
|
+ will-change: transform;
|
|
|
+ }
|
|
|
+
|
|
|
+ .side-group {
|
|
|
+ position: absolute;
|
|
|
+ top: 55%;
|
|
|
+ right: 30rpx;
|
|
|
+ z-index: 1000;
|
|
|
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 -reset::after {
|
|
|
+ // border: none !important;
|
|
|
+ // padding: 0 !important;
|
|
|
+ // margin: 0 !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .button-reset {
|
|
|
+ // background-color: transparent !important;
|
|
|
+ // padding: 0 !important;
|
|
|
+ // line-height: inherit !important;
|
|
|
+ // margin: 0 !important;
|
|
|
+ // width: auto !important;
|
|
|
+ // font-weight: 500 !important;
|
|
|
+ // border-radius: none !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .image {
|
|
|
+ // width: 72rpx;
|
|
|
+ // height: 72rpx;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
.item-box {
|
|
|
-webkit-transform: translateZ(0);
|
|
|
/* 硬件加速 */
|
|
|
transform: translateZ(0);
|
|
|
border-radius: 16rpx;
|
|
|
- background-color: rgba(77, 77, 77, 0.5);
|
|
|
- width: 90rpx;
|
|
|
- height: 100rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
position: relative;
|
|
|
z-index: 999;
|
|
|
-
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
.tip {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
bottom: 0;
|
|
|
color: #fafcff;
|
|
|
font-size: 26rpx;
|
|
|
- background-color: rgba(15, 15, 15, 0.8);
|
|
|
- border-radius: 16rpx;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
text-align: center;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.item {
|
|
|
margin: 0 auto;
|
|
|
padding: 10rpx 0;
|
|
|
-
|
|
|
+
|
|
|
.img {
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -2967,52 +3140,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 减少重绘
|
|
|
- .side-group,
|
|
|
- .content-top {
|
|
|
- will-change: transform;
|
|
|
- }
|
|
|
-
|
|
|
- .side-group {
|
|
|
- position: absolute;
|
|
|
- top: 65%;
|
|
|
- right: 30rpx;
|
|
|
- z-index: 1000;
|
|
|
- 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 选择器改为类选择器
|
|
|
- .button-reset::after {
|
|
|
- border: none !important;
|
|
|
- padding: 0 !important;
|
|
|
- margin: 0 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .button-reset {
|
|
|
- background-color: transparent !important;
|
|
|
- padding: 0 !important;
|
|
|
- line-height: inherit !important;
|
|
|
- margin: 0 !important;
|
|
|
- width: auto !important;
|
|
|
- font-weight: 500 !important;
|
|
|
- border-radius: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.content-top {
|
|
|
width: 100%;
|
|
|
margin-top: 48rpx;
|
|
|
@@ -3516,10 +3643,9 @@
|
|
|
}
|
|
|
|
|
|
.icon-bg {
|
|
|
- background-color: rgba(57, 57, 57, 0.8);
|
|
|
border-radius: 50%;
|
|
|
- width: 88rpx;
|
|
|
- height: 88rpx;
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
