TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

rename

Browse Source
This commit is contained in:
Jason.Chen
2022-01-20 16:15:24 +08:00
parent 93a20f2d3d
commit 088327eaff
14 changed files with 348 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
pages/im/private/index.vue
View File

@@ -1,33 +1,34 @@
<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>
<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 v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"></u-avatar>
<u-avatar v-else :src="$store.getters.sender.portraitUrl"/>
</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>
@@ -74,7 +75,7 @@
this.getMessageList()
// 监听消息回执
RongIMLib.addReadReceiptReceivedListener((result) => {
RongIMLib.addReadReceiptReceivedListener((result) => {
const res = result.data.message
if (res.targetId == this.targetId) {
this.getMessageList()
@@ -87,18 +88,23 @@
computed: {
showSendButton() {
return this.inputTxt.length > 0
},
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
}
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.navigateTo({
url: '/pages/im/private/setting?targetId=' + this.targetId +
'&conversationType=' + this.conversationType
if (e.index == 0) {
uni.navigateTo({
url: '/pages/im/private/setting?targetId=' + this.targetId +
'&conversationType=' + this.conversationType
})
}
},
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)
@@ -132,7 +138,7 @@
({
code,
messages
}) => {
}) => {
if (code === 0) {
this.messages = messages.reverse()
this.scrollBottom()
@@ -147,14 +153,14 @@
})
},
showFriend() {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + this.targetId
})
// uni.navigateTo({
// url: '/pages/im/friends/info?targetId=' + this.targetId
// })
},
showMine() {
uni.navigateTo({
url: '/pages/im/friends/mine'
})
// uni.navigateTo({
// url: '/pages/im/friends/mine'
// })
},
scrollBottom() {
this.$nextTick(function() {
@@ -180,117 +186,135 @@
</script>
<style lang="scss" scoped>
.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;
}
}
}
}
.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>