调整聊天界面样式
This commit is contained in:
唐明明
@@ -1,41 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<scroll-view ref="scrollview" :scroll-y="true" class="scroll" :scroll-into-view="scrollIntoID"
|
||||
:scroll-with-animation="false">
|
||||
<view v-for="(item,index) in messages" :id="'chatId_'+index">
|
||||
<div :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<div class="avatar" v-if="item.messageDirection == 2">
|
||||
<u-avatar :src="userInfo.portraitUrl" @click="showFriend" shape="square" />
|
||||
</div>
|
||||
<div class="msg">
|
||||
{{ item.content.content }}
|
||||
<div class="status" v-if="item.messageDirection == 1">
|
||||
<u-icon v-if="item.sentStatus == 50" name="checkbox-mark" />
|
||||
<span v-else>未读</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar" v-if="item.messageDirection == 1">
|
||||
<u-avatar text="Me" @click="showMine" shape="square" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time">{{ item.sentTime|timeCustomCN }}</div>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<u-icon name="volume" />
|
||||
</div>
|
||||
<div class="middle">
|
||||
<u--input autoBlur confirmHold confirmType="send" @confirm="send" v-model="inputTxt" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-button type="primary" v-if="showSendButton" class="custom-style" text="发送" @click="send"></u-button>
|
||||
<u-icon v-else name="plus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template>
|
||||
<view class="chat-content">
|
||||
<scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID" :scroll-with-animation="false">
|
||||
<!-- 聊天窗口 -->
|
||||
<view class="chat-item" v-for="(item,index) in messages" :key="index" :id="'chatId_'+index">
|
||||
<view class="chat-item-time">
|
||||
<text>{{ item.sentTime|timeCustomCN }}</text>
|
||||
</view>
|
||||
<view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<view class="chat-msg">
|
||||
<view class="chat-msg-text">{{ item.content.content }}</view>
|
||||
<!-- 预留一些图片，语音表情包等位置 -->
|
||||
</view>
|
||||
<view class="chat-status" :class="{'hide': item.sentStatus == 50}" v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
|
||||
<view class="chat-avatar">
|
||||
<!-- <u-avatar :src="userInfo.portraitUrl" @click="showFriend"></u-avatar> -->
|
||||
<u-avatar
|
||||
text="无"
|
||||
fontSize="14"
|
||||
bg-color="rgba(0,0,0,.2)"
|
||||
></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="chat-footer">
|
||||
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10"/>
|
||||
<button class="chat-push" size="mini" @click="send">发送</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -82,7 +74,7 @@
|
||||
this.getMessageList()
|
||||
|
||||
// 监听消息回执
|
||||
RongIMLib.addReadReceiptReceivedListener((result) => {
|
||||
RongIMLib.addReadReceiptReceivedListener((result) => {
|
||||
const res = result.data.message
|
||||
if (res.targetId == this.targetId) {
|
||||
this.getMessageList()
|
||||
@@ -106,7 +98,7 @@
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.getters.newMessage': function(msg) {
|
||||
'$store.getters.newMessage': function(msg) {
|
||||
if (msg.targetId == this.targetId) {
|
||||
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
|
||||
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
|
||||
@@ -140,7 +132,7 @@
|
||||
({
|
||||
code,
|
||||
messages
|
||||
}) => {
|
||||
}) => {
|
||||
if (code === 0) {
|
||||
this.messages = messages.reverse()
|
||||
this.scrollBottom()
|
||||
@@ -188,98 +180,117 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$footer-height: 55px;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - 55px);
|
||||
width: 100vw;
|
||||
padding: 0 $uni-spacing-col-lg;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
height: $footer-height;
|
||||
background-color: $uni-bg-color-grey;
|
||||
|
||||
.u-icon {
|
||||
padding: $uni-spacing-col-sm;
|
||||
border: 1px solid $u-content-color;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 0 $uni-spacing-col-lg;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.middle {
|
||||
flex: 1;
|
||||
|
||||
.u-input {
|
||||
background-color: $uni-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 0 $uni-spacing-col-lg;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-style {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.time {
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $u-light-color;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: top;
|
||||
|
||||
.avatar {
|
||||
margin-top: $uni-spacing-col-base;
|
||||
}
|
||||
|
||||
.msg {
|
||||
font-size: $uni-font-size-base;
|
||||
margin: $uni-spacing-col-base;
|
||||
padding: $uni-spacing-col-base;
|
||||
word-wrap: break-word;
|
||||
width: 60%;
|
||||
border-radius: $uni-border-radius-base;
|
||||
position: relative;
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
bottom: 5rpx;
|
||||
font-size: $uni-font-size-base / 1.5;
|
||||
color: $uni-text-color-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
.msg {
|
||||
background-color: $uni-bg-color-grey;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.msg {
|
||||
background-color: $u-primary-disabled;
|
||||
}
|
||||
}
|
||||
.chat-content{
|
||||
height: 100vh;
|
||||
background: $window-color;
|
||||
.chat-scrool{
|
||||
height: calc(100vh - 140rpx);
|
||||
box-sizing: border-box;
|
||||
padding-bottom: $padding;
|
||||
.chat-item{
|
||||
.chat-item-time{
|
||||
text-align: center;
|
||||
padding: $padding/2 $padding;
|
||||
text{
|
||||
background: rgba($color: #000000, $alpha: .2);
|
||||
color: white;
|
||||
font-size: $title-size-sm - 4;
|
||||
line-height: 40rpx;
|
||||
padding: 0 15rpx;
|
||||
display: inline-block;
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
}
|
||||
.chat-item-article{
|
||||
position: relative;
|
||||
padding: 10rpx ($padding + 110) 0;
|
||||
overflow: hidden;
|
||||
min-height: 40px;
|
||||
.chat-msg{
|
||||
overflow: hidden;
|
||||
.chat-msg-text{
|
||||
display: inline-block;
|
||||
padding: ($padding - 10) $padding;
|
||||
color: $text-color;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
.chat-status{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
text-align: right;
|
||||
&.hide{
|
||||
color: $text-gray-m;
|
||||
}
|
||||
}
|
||||
.chat-avatar{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
&.left{
|
||||
.chat-avatar{
|
||||
left: $margin;
|
||||
}
|
||||
.chat-msg{
|
||||
.chat-msg-text{
|
||||
background-color: white;
|
||||
border-radius: 0 $radius*2 $radius*2 $radius*2;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
.chat-avatar{
|
||||
right: $margin;
|
||||
}
|
||||
.chat-msg{
|
||||
text-align: right;
|
||||
.chat-msg-text{
|
||||
border-radius: $radius*2 0 $radius*2 $radius*2;
|
||||
background: $main-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 140rpx;
|
||||
padding: 20rpx ($padding + 150rpx) 40rpx $padding;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
.chat-input{
|
||||
background: $window-color;
|
||||
height: 80rpx;
|
||||
border-radius: $radius-lg;
|
||||
font-size: $title-size-m;
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chat-push[size='mini']{
|
||||
position: absolute;
|
||||
right: $margin;
|
||||
top: 20rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 120rpx;
|
||||
background: $main-color;
|
||||
color: white;
|
||||
border-radius: $radius-lg;
|
||||
font-size: $title-size-m;
|
||||
font-weight: bold;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user