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

调整聊天窗口

Browse Source
This commit is contained in:
唐明明
2022-01-28 14:57:39 +08:00
parent b0f2a8f1ab 112ad7ceaf
commit e6f8c28a2b
17 changed files with 1524 additions and 1129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
pages/im/index.vue
View File

@@ -29,17 +29,14 @@
</view>
</block>
<block v-else>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true" />
<view v-for="(item, index) in conversations" :key="index"
:class="['message', 'u-border-bottom', { 'is-top': item.isTop }]" @tap="toDetail(item)"
:class="['message', { 'is-top': item.isTop }]" @tap="toDetail(item)"
@longpress="onLongPress" :data-item="item">
<view class="avatar">
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
:value="item.unreadMessageCount" />
<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square"
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="16" randomBgColor></u-avatar>
<u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
<u-avatar :src="friend(item.targetId).portraitUrl || require('@/static/user/cover.png')" shape="square" size="46" />
</view>
<view class="content">
<view class="header">
@@ -56,7 +53,7 @@
{{item}}
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 未登录 -->
@@ -74,7 +71,9 @@
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import { getImToken } from '@/apis/interfaces/im.js'
import {
getImToken
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
@@ -99,13 +98,20 @@
}
}
},
onLoad() {
if (this.isShown) {
uni.$on('onReceiveMessage', (msg) => {
console.log(msg);
this.getConversationList()
})
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
})
}
},
onShow() {
if (this.$store.state.token !== '') {
getImToken().then(res => {
im.connect(res.token, res.userInfo, () => {
this.getConversationList()
})
})
this.getConversationList()
}
this.isShown = true
},
@@ -127,16 +133,6 @@
}
}
},
watch: {
'$store.getters.newMessage': function(n, o) {
if (this.isShown) {
this.getConversationList()
}
},
'$store.getters.connection': function(n, o) {
this.connection = n
}
},
methods: {
hidePop() {
this.showPop = false
@@ -203,9 +199,10 @@
toDetail(item) {
this.hidePop()
uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType
})
url: '/pages/im/private/chat?targetId=' + item.targetId + '&conversationType=' + item.conversationType
})
// url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item.conversationType
},
// 点击按钮
onNav(name, params) {
@@ -226,10 +223,8 @@
scanQrCode() {
uni.scanCode({
success: (res) => {
// "result": "ADDFRIEND|10010",
if (res.scanType == 'QR_CODE') {
res.result.substr(0, 10) == 'ADDFRIEND|'
// 跳转到添加好友页面
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
})
@@ -293,7 +288,7 @@
.contents {
background-color: $window-color;
min-height: 100vh;
padding-top: 90rpx;
padding-top: 90rpx + 20rpx;
box-sizing: border-box;
.null-list {
@@ -314,14 +309,15 @@
.message {
background: white;
padding: 20rpx 30rpx;
padding: 30rpx 0 0 30rpx;
position: relative;
display: flex;
&.u-border-bottom {}
&.is-top {
background: $window-color;
border-bottom: #e8e8e8;
// background-color: rgba($color: $main-color, $alpha: 0.02);
}
.avatar {
@@ -333,28 +329,39 @@
}
.content {
padding-left: 30rpx;
width: calc(100% - 44px);
margin-left: 30rpx;
width: calc(100% - 46px);
box-sizing: border-box;
border-bottom: solid 1rpx #f3f3f3;
position: relative;
.header {
display: flex;
justify-content: space-between;
.name {
font-size: $title-size + 4;
font-size: $title-size + 2;
color: #454545;
color: #454545;
}
.time {
font-size: $title-size-sm;
color: $text-gray;
color: $text-gray-m;
position: absolute;
right: 30rpx;
}
}
.preview {
word-break: break-all;
color: $text-gray;
font-size: $title-size-sm;
color: $text-gray-m;
padding-top: $padding - 20;
padding-bottom: $padding;
font-size: $title-size-m;
height: 40rpx;
line-height: 40rpx;
width: 500rpx;
@extend .nowrap;
}
}
@@ -410,4 +417,7 @@
}
}
}
.u-border-bottom{
border-bottom: solid 1rpx #f9f9f9 !important;
}
</style>