|
|
@@ -1,19 +1,20 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<view class="live-chat" :style="{bottom:showToolBox?'-1000px':''}">
|
|
|
- <view class="bottomTextBgView" :class="hasGoods?'dietime':''" v-if="buyGoodsInfo.product_name">
|
|
|
- <view class="bottomTextView">
|
|
|
- <text style="font-size: 24rpx;color: #fff;">{{buyGoodsInfo.user_name}}</text>
|
|
|
- <text style="font-size: 24rpx;color: #8fe9f4;padding: 0 10rpx;">购买了</text>
|
|
|
- <text style="font-size: 24rpx;color: #fff;">{{buyGoodsInfo.product_name}}</text>
|
|
|
+ <view :class="hasGoods?'dietime':''" v-if="buyGoodsInfo.product_name">
|
|
|
+ <view :class="hasPush?'chat-boxs':'chat-box'">
|
|
|
+ <view style="align-items: flex-start">
|
|
|
+ <view class="user-chat">
|
|
|
+ <rich-text :nodes="richGoods(buyGoodsInfo)"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 评论互动区 -->
|
|
|
<scroll-view scroll-y="true" enhanced :show-scrollbar="false" :scroll-with-animation="true" :class="hasPush?'chat-boxs':'chat-box'" :scroll-top="scrollTop">
|
|
|
<view style="align-items: flex-start" id="chat-box">
|
|
|
- <view v-for="(item,index) in userMessage" :key="index" class="user-chat" v-if="index<maxChatText">
|
|
|
- <rich-text :nodes="richNodes(item)" style="background:transparent"></rich-text>
|
|
|
- <!-- <view v-html="item.content"></view> -->
|
|
|
+ <view v-for="(item,index) in userMessage" class="user-chat" :key="index" v-if="index<maxChatText">
|
|
|
+ <rich-text :nodes="richNodes(item)"></rich-text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
@@ -21,7 +22,7 @@
|
|
|
<view class="push-goods" v-if="hasPush">
|
|
|
<image :src="goodsInfo.product_img" mode="" class="goods-img"></image>
|
|
|
<text class="goods-name">{{goodsInfo.product_name}}</text>
|
|
|
- <view class="goods-price" @click="buyGoods">
|
|
|
+ <view class="goods-price" @click="buyGoods(goodsInfo)">
|
|
|
<image src="@/uni_modules/equnphp-streaming/static/buy-bg.png" mode="" class="buy-bg"></image>
|
|
|
<view class="price-box">
|
|
|
<text style="font-size: 20rpx;color: #fff;">¥</text>
|
|
|
@@ -165,7 +166,7 @@
|
|
|
// 点击发评论
|
|
|
sendBind(){
|
|
|
this.focus = true;
|
|
|
- // #ifdef APP-PLUS
|
|
|
+ // #ifdef APP-PLUS || H5
|
|
|
this.$refs.messageInput.focus();
|
|
|
// #endif
|
|
|
// #ifdef MP-WEIXIN
|
|
|
@@ -175,7 +176,7 @@
|
|
|
// input失焦事件
|
|
|
blur(){
|
|
|
this.focus = false;
|
|
|
- // #ifdef APP-PLUS
|
|
|
+ // #ifdef APP-PLUS || H5
|
|
|
this.$refs.messageInput.blur();
|
|
|
// #endif
|
|
|
// #ifdef MP-WEIXIN
|
|
|
@@ -194,7 +195,77 @@
|
|
|
}
|
|
|
stream.sendChat(this.mySend);
|
|
|
},
|
|
|
-
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ richNodes(item) {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'span',
|
|
|
+ attrs: {
|
|
|
+ style: 'color: #8fe9f4;fontSize:30rpx'
|
|
|
+ },
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: item.content == '进入直播间' ? item.nickname : item.nickname + ':'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'span',
|
|
|
+ attrs: {
|
|
|
+ style: 'color: #ffffff;fontSize:30rpx'
|
|
|
+ },
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: item.content
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ richGoods(info){
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'span',
|
|
|
+ attrs: {
|
|
|
+ style: 'color: #fff;fontSize:24rpx'
|
|
|
+ },
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: info.user_name
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'span',
|
|
|
+ attrs: {
|
|
|
+ style: 'color: #8fe9f4;fontSize:24rpx;padding:0 10rpx;'
|
|
|
+ },
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: '购买了'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'span',
|
|
|
+ attrs: {
|
|
|
+ style: 'color: #fff;fontSize:24rpx'
|
|
|
+ },
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: info.product_name
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS || H5
|
|
|
// 将评论转rich-text
|
|
|
richNodes(item){
|
|
|
return [{
|
|
|
@@ -216,7 +287,34 @@
|
|
|
]
|
|
|
}]
|
|
|
},
|
|
|
-
|
|
|
+ richGoods(info){
|
|
|
+ return [{
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ attrs: {
|
|
|
+ style: 'color: #fff;fontSize:24rpx'
|
|
|
+ },
|
|
|
+ text: info.user_name
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ attrs: {
|
|
|
+ style: 'color: #8fe9f4;fontSize:24rpx;padding: 0 10rpx;'
|
|
|
+ },
|
|
|
+ text: '购买了'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ attrs: {
|
|
|
+ style: 'color: #ffffff;fontSize:24rpx'
|
|
|
+ },
|
|
|
+ text: info.product_name
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
// 获取评论区高度
|
|
|
scrollChat(){
|
|
|
//利用了$nextTick,dom完成后才运行的函数
|
|
|
@@ -225,12 +323,12 @@
|
|
|
uni.createSelectorQuery().in(this).select('#chat-box').boundingClientRect((res)=>{
|
|
|
let top = res.height-175;
|
|
|
if(top>0){
|
|
|
- this.scrollTop=top;
|
|
|
+ this.scrollTop = top;
|
|
|
}
|
|
|
}).exec()
|
|
|
})
|
|
|
}else{
|
|
|
- // #ifdef APP-PLUS
|
|
|
+ // #ifdef APP-PLUS || H5
|
|
|
this.$nextTick(()=>{
|
|
|
uni.createSelectorQuery().select('#chat-box').boundingClientRect(data => {
|
|
|
if(data.height>0){
|
|
|
@@ -263,8 +361,8 @@
|
|
|
},
|
|
|
|
|
|
// 去抢购
|
|
|
- buyGoods(){
|
|
|
- this.$emit('buy')
|
|
|
+ buyGoods(goodsInfo){
|
|
|
+ this.$emit('buy',goodsInfo)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -283,10 +381,10 @@
|
|
|
transform: all 0.5s ease;
|
|
|
}
|
|
|
.bottomTextBgView {
|
|
|
- overflow: hidden;
|
|
|
+ /* overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- margin-left: 30rpx;
|
|
|
+ margin-left: 30rpx; */
|
|
|
}
|
|
|
.bottomTextView {
|
|
|
display: flex;
|
|
|
@@ -294,7 +392,12 @@
|
|
|
border-radius: 200px;
|
|
|
padding: 20rpx;
|
|
|
align-items: center;
|
|
|
+ /* #ifdef APP-PLUS */
|
|
|
background-color: rgba(0,0,0,0.45);
|
|
|
+ /* #endif */
|
|
|
+ /* #ifdef MP-WEIXIN */
|
|
|
+ background-color: rgba(255,255,255,0.45);
|
|
|
+ /* #endif */
|
|
|
}
|
|
|
.bottomText {
|
|
|
padding: 5rpx 10rpx;
|
|
|
@@ -316,6 +419,9 @@
|
|
|
width: 510rpx;
|
|
|
max-height: 500rpx;
|
|
|
padding: 22rpx 30rpx;
|
|
|
+ /* #ifdef MP-WEIXIN */
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ /* #endif */
|
|
|
}
|
|
|
/* #ifndef APP-NVUE */
|
|
|
::-webkit-scrollbar{
|
|
|
@@ -373,7 +479,6 @@
|
|
|
/* #endif */
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
background-color: rgba(255,255,255,0.4);
|
|
|
- color: red;
|
|
|
/* #endif */
|
|
|
border-radius: 60rpx;
|
|
|
padding: 16rpx 32rpx;
|