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

【更新】IM页面逻辑完善

Browse Source
This commit is contained in:
Jason.Chen
2022-01-21 12:15:45 +08:00
parent 92c6b37229
commit 21bee49729
8 changed files with 430 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
App.vue
View File

@@ -5,6 +5,7 @@
export default {
onLaunch: function() {
im.initIm('lmxuhwaglu76d')
return;
//#ifdef APP-PLUS
// 获取系统版本号
getVersions({

199
pages/im/friends/info.vue
View File

@@ -1,28 +1,29 @@
<template>
<view class="content">
<!-- 用户信息 -->
<view class="user-info">
<u-avatar
src="https://cdn.uviewui.com/uview/album/1.jpg"
size="58"
></u-avatar>
<view class="nickname">{{ userInfo.name }}</view>
<view class="sex">
<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
<!-- <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag> -->
</view>
</view>
<view class="user-lists">
<view class="content">
<!-- 用户信息 -->
<view class="user-info">
<u-avatar :src="userInfo.portraitUrl" size="100"></u-avatar>
<view class="nickname">{{ userInfo.name }}</view>
<!-- <view class="sex">
<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
<u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag>
</view> -->
<view class="address">
{{ userInfo.address}}
</view>
</view>
<!-- <view class="user-lists">
<view class="user-lists-item">
<label>地区</label>
<text>黑龙江 哈尔滨</text>
</view>
</view>
<!-- 发送消息 -->
<view class="info-footer">
<button class="open-btn" @click="toPrivate">发送消息</button>
</view>
</view>
</view> -->
<!-- 发送消息 -->
<view class="info-footer">
<button class="open-btn" @click="toPrivate">发送消息</button>
</view>
</view>
</template>
<script>
@@ -33,18 +34,24 @@
export default {
data() {
return {
targetId: '',
userInfo: {}
}
},
onLoad(e) {
this.targetId = e.targetId
getUserInfo(e.targetId).then(res => {
this.userInfo = res
uni.setNavigationBarTitle({
title: res.name
})
})
},
methods: {
toPrivate() {
uni.navigateTo({
url: '/pages/im/private/index?targetId=10047&conversationType=1'
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
})
}
}
@@ -52,71 +59,87 @@
</script>
<style lang="scss" scoped>
.content{
min-height: 100vh;
background: $window-color;
}
// 用户信息
.user-info{
padding: $padding*3 $padding;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
.nickname{
font-size: 42rpx;
padding-top: $padding;
color: $text-color;
}
.sex{
padding-top: $padding/2;
text{
font-size: $title-size-sm;
background: #303133;
padding: 0 10rpx;
color: white;
border-radius: $radius-m;
line-height: 30rpx;
display: inline-block;
}
}
}
.user-lists{
margin-top: $margin;
background: white;
.user-lists-item{
padding: 0 $padding;
display: flex;
justify-content: space-between;
line-height: 90rpx;
font-size: $title-size-lg;
label{
color: $text-color;
}
text{
color: $text-gray;
}
}
}
// 发送消息
.info-footer{
padding: $padding;
width: 100%;
box-sizing: border-box;
.open-btn{
width: 100%;
height: 90rpx;
line-height: 90rpx;
background: $main-color;
border-radius: $radius-lg;
padding: 0;
margin: 0;
color: white;
font-size: $title-size;
&::after{
display: none;
}
}
}
.content {
min-height: 100vh;
background: $window-color;
}
// 用户信息
.user-info {
padding: $padding*3 $padding;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
.nickname {
font-size: 42rpx;
padding-top: $padding;
}
.address {
line-height: 64rpx;
font-size: 26rpx;
color: $text-gray;
}
.sex {
padding-top: $padding/2;
text {
font-size: $title-size-sm;
background: #303133;
padding: 0 10rpx;
color: white;
border-radius: $radius-m;
line-height: 30rpx;
display: inline-block;
}
}
}
.user-lists {
margin-top: $margin;
background: white;
.user-lists-item {
padding: 0 $padding;
display: flex;
justify-content: space-between;
line-height: 90rpx;
font-size: $title-size-lg;
label {
color: $text-color;
}
text {
color: $text-gray;
}
}
}
// 发送消息
.info-footer {
padding: $padding;
width: 100%;
box-sizing: border-box;
.open-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
background: $main-color;
border-radius: $radius-lg;
padding: 0;
margin: 0;
color: white;
font-size: $title-size;
&::after {
display: none;
}
}
}
</style>

217
pages/im/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="content">
<view class="container">
<view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1">
<view class="vertical null-list">
@@ -11,24 +11,25 @@
</view>
</block>
<block v-else>
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
<view class="mssage-action">
<block v-if="!friend(item.targetId).portraitUrl">
<u-avatar clsss="mssage-action-cover" size="44"
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="14" randomBgColor></u-avatar>
</block>
<block v-else>
<u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
</u-avatar>
</block>
<view class="mssage-action-content">
<view class="mssage-header">
<view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="header-time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<view class="mssage-msg">{{ item.latestMessage.content }}</view>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
<view v-for="(item, index) in conversations" :key="index" class="message" @click="toDetail(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"
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="14" randomBgColor></u-avatar>
<u-avatar v-else :src="friend(item.targetId).portraitUrl" size="44">
</u-avatar>
</view>
<view class="content">
<view class="header">
<view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="time">{{ item.targetId }} | {{ item.sentTime|timeCustomCN }}</view>
</view>
<view class="preview">{{ item.latestMessage.content || '&nbsp;' }}</view>
</view>
</view>
</block>
@@ -58,6 +59,7 @@
isShown: true, // 当前页面显示状态
conversations: [], // 会话列表
isImToken: '', // 是否已鉴权
connection: 0
}
},
computed: {
@@ -91,11 +93,11 @@
})
}
if (e.index == 1) {
if(this.toLogin()){
this.$Router.push({
name: 'imFriends'
})
}
if (this.toLogin()) {
this.$Router.push({
name: 'imFriends'
})
}
}
},
watch: {
@@ -103,6 +105,9 @@
if (this.isShown) {
this.getConversationList()
}
},
'$store.getters.connection': function(n, o) {
this.connection = n
}
},
methods: {
@@ -124,6 +129,7 @@
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations
console.log(this.conversations);
}
})
},
@@ -139,9 +145,10 @@
</script>
<style lang="scss" scoped>
.content {
.container {
background-color: $window-color;
min-height: 100vh;
padding-bottom: 200px;
.null-list {
height: 100vh;
@@ -159,64 +166,128 @@
}
}
.mssage-box {
.message {
position: relative;
display: flex;
background: white;
padding: 24rpx 24rpx 20rpx 24rpx;
.mssage-action {
.avatar {
position: relative;
padding: 20rpx $padding;
&::after {
position: absolute;
left: $padding + 108;
right: 0;
bottom: 0;
content: " ";
height: 1rpx;
background: $border-color;
}
&-content {
position: absolute;
top: 20rpx;
height: 44px;
left: $padding + 108;
right: $margin;
display: flex;
flex-direction: column;
justify-content: center;
.mssage-header {
display: flex;
font-size: $title-size;
line-height: 40rpx;
justify-content: space-between;
.header-name {
flex: 1;
@extend .nowrap;
}
.header-time {
padding-left: $padding;
font-size: $title-size-sm - 2;
color: $text-gray;
}
}
.mssage-msg {
font-size: $title-size-sm - 2;
color: $text-gray;
@extend .nowrap;
}
.u-badge {
z-index: 999;
}
}
&-item:last-child {
.mssage-action::after {
display: none;
.content {
margin-left: 16rpx;
flex: 1;
.header {
display: flex;
justify-content: space-between;
.name {
font-size: 36rpx
}
.time {
font-size: 24rpx;
color: $text-gray;
}
}
.preview {
width: 520rpx;
word-break: break-all;
color: $text-gray;
font-size: 26rpx;
@extend .nowrap;
}
}
}
.message:not(:last-child) {
&::after {
position: absolute;
left: $padding + 108;
right: 0;
bottom: 0;
content: " ";
height: 1rpx;
background: $border-color;
}
}
// .message-box:not(:last-child) {
// .message-action {
// &::after {
// position: absolute;
// left: $padding + 108;
// right: 0;
// bottom: 0;
// content: " ";
// height: 1rpx;
// background: $border-color;
// }
// }
// }
// .message-box {
// background: white;
// .message-action {
// position: relative;
// padding: 20rpx $padding;
// .message-avatar {
// position: relative;
// background: red;
// }
// &-content {
// position: absolute;
// top: 20rpx;
// height: 44px;
// left: $padding + 108;
// right: $margin;
// display: flex;
// flex-direction: column;
// justify-content: center;
// .message-header {
// display: flex;
// font-size: $title-size;
// line-height: 40rpx;
// justify-content: space-between;
// .header-name {
// flex: 1;
// @extend .nowrap;
// }
// .header-time {
// padding-left: $padding;
// font-size: $title-size-sm - 2;
// color: $text-gray;
// }
// }
// .message-msg {
// font-size: $title-size-sm - 2;
// color: $text-gray;
// @extend .nowrap;
// }
// }
// }
// &-item:last-child {
// .message-action::after {
// display: none;
// }
// }
// }
}
</style>

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

@@ -1,6 +1,7 @@
<template>
<view class="chat-content">
<scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID" :scroll-with-animation="false">
<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">
@@ -14,9 +15,9 @@
<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"/>
<u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"
@click="showFriend(targetId)"></u-avatar>
<u-avatar v-else @click="showMine" :src="$store.getters.sender.portraitUrl" />
</view>
</view>
</view>
@@ -151,15 +152,15 @@
this.inputTxt = ''
})
},
showFriend() {
// uni.navigateTo({
// url: '/pages/im/friends/info?targetId=' + this.targetId
// })
showFriend(targetId) {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + targetId
})
},
showMine() {
// uni.navigateTo({
// url: '/pages/im/friends/mine'
// })
uni.navigateTo({
url: '/pages/im/friends/mine'
})
},
scrollBottom() {
this.$nextTick(function() {

177
pages/im/private/setting.vue
View File

@@ -1,39 +1,41 @@
<template>
<view class="content">
<!-- 聊天信息 -->
<view class="set-user">
<u-avatar
src="https://cdn.uviewui.com/uview/album/1.jpg"
size="48"
></u-avatar>
<view class="set-user-nickname">唐明明</view>
</view>
<!-- 聊天设置 -->
<view class="set-group">
<view class="group-flex">
<label>消息免打扰</label>
<u-switch activeColor="#34CE98" size="22"></u-switch>
</view>
<view class="group-flex">
<label>置顶会话</label>
<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
</view>
</view>
<view class="set-group">
<view class="group-flex" @click="cleanConversation">
<label>清空聊天记录</label>
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
</view>
</view>
</view>
<view class="content">
<!-- 聊天信息 -->
<view class="set-user" @click="showFriend">
<u-avatar :src="userInfo.portraitUrl" size="48"></u-avatar>
<view class="set-user-nickname">{{ userInfo.name }}</view>
</view>
<!-- 聊天设置 -->
<view class="set-group">
<view class="group-flex">
<label>消息免打扰</label>
<u-switch activeColor="#34CE98" size="22"></u-switch>
</view>
<view class="group-flex">
<label>置顶会话</label>
<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
</view>
</view>
<view class="set-group">
<view class="group-flex" @click="cleanConversation">
<label>清空聊天记录</label>
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
</view>
</view>
</view>
</template>
<script>
import * as RongIMLib from '@rongcloud/imlib-uni'
import {
getUserInfo
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
userInfo: {},
targetId: '',
conversationType: 1,
isTop: false,
@@ -44,6 +46,11 @@
this.targetId = e.targetId
this.conversationType = e.conversationType
getUserInfo(e.targetId).then(res => {
console.log(res);
this.userInfo = res
})
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
@@ -57,6 +64,11 @@
})
},
methods: {
showFriend() {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + this.targetId
})
},
setStatus() {
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
status
@@ -77,9 +89,20 @@
},
// 清空聊天记录
cleanConversation() {
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({code}) => {
if (code === 0) {
console.log('chenggong ');
uni.showModal({
title: '清空聊天记录',
success: (res) => {
if (res.confirm) {
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({
code
}) => {
if (code === 0) {
uni.showToast({
title: '聊天记录已清空'
})
}
})
}
}
})
}
@@ -88,48 +111,54 @@
</script>
<style lang="scss" scoped>
.content{
min-height: 100vh;
background: $window-color;
// 用户信息
.set-user{
background: white;
padding: $padding;
display: flex;
align-items: center;
.set-user-nickname{
padding-left: $padding;
flex: 1;
line-height: 70rpx;
font-size: $title-size + 6;
}
}
// 聊天设置
.set-group{
margin: $margin 0;
background: white;
.group-flex{
position: relative;
display: flex;
justify-content: space-between;
height: 90rpx;
line-height: 90rpx;
padding: 0 $padding;
font-size: $title-size;
align-items: center;
&::after{
content: " ";
position: absolute;
left: $margin;
right: 0;
bottom: 0;
height: 1rpx;
background-color: $border-color;
}
&:last-child::after{
display: none;
}
}
}
}
.content {
min-height: 100vh;
background: $window-color;
// 用户信息
.set-user {
background: white;
padding: $padding;
display: flex;
align-items: center;
.set-user-nickname {
padding-left: $padding;
flex: 1;
line-height: 70rpx;
font-size: $title-size + 6;
}
}
// 聊天设置
.set-group {
margin: $margin 0;
background: white;
.group-flex {
position: relative;
display: flex;
justify-content: space-between;
height: 90rpx;
line-height: 90rpx;
padding: 0 $padding;
font-size: $title-size;
align-items: center;
&::after {
content: " ";
position: absolute;
left: $margin;
right: 0;
bottom: 0;
height: 1rpx;
background-color: $border-color;
}
&:last-child::after {
display: none;
}
}
}
}
</style>

21
store/modules/im.js
View File

@@ -4,12 +4,17 @@ export default {
state: {
newMsg: {},
friends: {},
sender: {}
sender: {},
// IM连接状态，0是正常
connection: 0
},
getters: {
newMessage(state) {
return state.newMsg
},
connection(state) {
return state.connection
},
friends(state) {
return state.friends
},
@@ -17,8 +22,8 @@ export default {
if (state.friends[targetId]) {
return state.friends[targetId]
} else {
console.log('没找到,， 死循环了，得处理 todo', targetId);
im.syncUserInfo(targetId)
console.log('没找到,死循环了，得处理 todo', targetId);
// im.syncUserInfo(targetId)
return {
name: '',
address: '',
@@ -43,9 +48,15 @@ export default {
},
SET_state_sender(state, userInfo) {
state.sender = userInfo
},
SET_connection_status(state, status) {
state.connection = status
}
},
actions: {
updateConnectionStatus({commit}, status) {
commit('SET_connection_status', status)
},
newMessage({
commit
}, msg) {
@@ -63,7 +74,6 @@ export default {
const model = uni.model.friendModel
model.find('userId=' + userInfo.userId, (err, user) => {
if (!err && user.length == 0) {
console.log('哪里更新的 ', 1);
saveAvatar(userInfo, (savedFilePath) => {
model.insert({
userId: userInfo.userId,
@@ -76,7 +86,6 @@ export default {
commit('updateFriends', userInfo)
})
} else if (!err && user[0].hash != userInfo.hash) {
console.log('哪里更新的 ', 2);
saveAvatar(userInfo, (savedFilePath) => {
model.update('userId=' + userInfo.userId, {
name: userInfo.name,
@@ -98,7 +107,7 @@ export default {
commit('updateFriends', userInfo)
})
} else {
console.log('不需要有动作', user[0]);
console.log('不用操作', user[0]);
}
})
}

2
uni.scss
View File

@@ -44,7 +44,7 @@ $uni-border-color:#c8c7cc;
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
$uni-font-size-lg:16px;
/* 图片尺寸 */
$uni-img-size-sm:20px;

1
utils/im/index.js
View File

@@ -62,6 +62,7 @@ const addListeners = () => {
// 添加连接状态监听函数
RongIMLib.addConnectionStatusListener((res) => {
console.log('连接状态监', res.data.status);
store.dispatch('updateConnectionStatus', res.data.status)
})
// 添加消息监听函数
RongIMLib.addReceiveMessageListener((res) => {