183 lines
3.8 KiB
Vue
183 lines
3.8 KiB
Vue
<template>
|
|
<view class="msg-view">
|
|
<scroll-view class="msg-view-p" scroll-y="true" :scroll-top="msgPanelScrollTop">
|
|
<view id="chatArea">
|
|
<view class="chat-area-line" v-for="(item,index) in msgList">
|
|
|
|
<view class="system-msg"
|
|
:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}"
|
|
v-if="item.msg_type == 'system'">
|
|
<view class="system-msg-detail ">
|
|
<text class="system-msg-detail-username " v-for="i in item.userName">{{i}}</text>
|
|
<text class="system-msg-detail-content " v-for="i in ':'">{{i}}</text>
|
|
<text class="system-msg-detail-content " v-for="i in item.content">{{i}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="user-msg"
|
|
:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}" v-else>
|
|
|
|
<view class="user-msg-detail">
|
|
<view class="user-msg-detail-tag">
|
|
<!-- <text style="text-align: center;font-size: 20px;color: #DD524D;">★1</text> -->
|
|
<!-- 这里可以根据用户等级显示图片 -->
|
|
<image :src="item.avatar" class="user-msg-detail-tag"></image>
|
|
</view>
|
|
<text class="user-msg-detail-username" v-for="i in item.userName"
|
|
@click="test(item.userName)">{{i}}</text>
|
|
<text class="user-msg-detail-content" v-for="i in ':'">{{i}}</text>
|
|
<text class="user-msg-detail-content" v-for="i in item.content">{{i}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'MhMsgList',
|
|
props: {
|
|
msgList: {
|
|
type: [Object, Array],
|
|
default: [{
|
|
userName: "系统通知",
|
|
content: "直播倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
|
|
cmd: "say",
|
|
|
|
msg_type: "system"
|
|
}, ]
|
|
},
|
|
msgPanelScrollTop: {
|
|
type: [Number, String],
|
|
default: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
test(e) {
|
|
uni.showToast({
|
|
title: e,
|
|
icon: 'none'
|
|
})
|
|
},
|
|
|
|
setMsgPanelScroll() {
|
|
var that = this;
|
|
setTimeout(function() {
|
|
const query = uni.createSelectorQuery().in(that);
|
|
query.select('#chatArea').boundingClientRect(data => {
|
|
that.msgPanelScrollTop = data.height - 200;
|
|
}).exec();
|
|
}, 50)
|
|
|
|
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.msg-view-p {
|
|
display: flex;
|
|
width: 550rpx;
|
|
height: 550rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.chat-area-line {
|
|
width: 550upx;
|
|
|
|
flex-direction: row;
|
|
margin-bottom: 5upx;
|
|
}
|
|
|
|
.system-msg {
|
|
width: 550upx;
|
|
margin-bottom: 5upx;
|
|
}
|
|
|
|
.system-msg-detail {
|
|
// max-width: 550upx;
|
|
|
|
padding: 10upx;
|
|
border-radius: 30upx;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-right: 14upx;
|
|
|
|
>.system-msg-detail-username {
|
|
color: red;
|
|
font-size: 32upx;
|
|
font-weight: 400;
|
|
line-height: 40upx;
|
|
|
|
}
|
|
|
|
>.system-msg-detail-content {
|
|
font-size: 32upx;
|
|
font-weight: 400;
|
|
line-height: 40upx;
|
|
color: #A0CFFF;
|
|
}
|
|
}
|
|
|
|
.user-line {
|
|
// max-width: 530upx;
|
|
padding: 10upx;
|
|
color: #FFFFFF;
|
|
flex-direction: row;
|
|
border-radius: 30upx;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
margin-right: 14upx;
|
|
font-size: 28upx;
|
|
font-weight: 400;
|
|
line-height: 40upx;
|
|
}
|
|
|
|
.user-msg {
|
|
width: 530upx;
|
|
|
|
|
|
margin-bottom: 5upx;
|
|
}
|
|
|
|
.user-msg-detail-tag {
|
|
width: 40upx;
|
|
height: 40upx;
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
.user-msg-detail {
|
|
padding: 10upx;
|
|
border-radius: 30upx;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-right: 14upx;
|
|
|
|
|
|
|
|
>.user-msg-detail-username {
|
|
color: #A0CFFF;
|
|
font-size: 32upx;
|
|
font-weight: 400;
|
|
line-height: 40upx;
|
|
}
|
|
|
|
>.user-msg-detail-content {
|
|
font-size: 32upx;
|
|
font-weight: 400;
|
|
line-height: 40upx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style> |