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 { export default {
onLaunch: function() { onLaunch: function() {
im.initIm('lmxuhwaglu76d') im.initIm('lmxuhwaglu76d')
return;
//#ifdef APP-PLUS //#ifdef APP-PLUS
// 获取系统版本号 // 获取系统版本号
getVersions({ getVersions({

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

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

225
pages/im/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="content"> <view class="container">
<view v-if="$store.state.token != ''"> <view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1"> <block v-if="conversations.length < 1">
<view class="vertical null-list"> <view class="vertical null-list">
@@ -11,24 +11,25 @@
</view> </view>
</block> </block>
<block v-else> <block v-else>
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)"> <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
<view class="mssage-action">
<block v-if="!friend(item.targetId).portraitUrl"> <view v-for="(item, index) in conversations" :key="index" class="message" @click="toDetail(item)">
<u-avatar clsss="mssage-action-cover" size="44" <view class="avatar">
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
font-size="14" randomBgColor></u-avatar> :value="item.unreadMessageCount" />
</block> <u-avatar size="44" v-if="!friend(item.targetId).portraitUrl"
<block v-else> :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
<u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44"> font-size="14" randomBgColor></u-avatar>
</u-avatar> <u-avatar v-else :src="friend(item.targetId).portraitUrl" size="44">
</block> </u-avatar>
<view class="mssage-action-content"> </view>
<view class="mssage-header">
<view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view> <view class="content">
<view class="header-time">{{ item.sentTime|timeCustomCN }}</view> <view class="header">
</view> <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="mssage-msg">{{ item.latestMessage.content }}</view> <view class="time">{{ item.targetId }} | {{ item.sentTime|timeCustomCN }}</view>
</view> </view>
<view class="preview">{{ item.latestMessage.content || '&nbsp;' }}</view>
</view> </view>
</view> </view>
</block> </block>
@@ -58,6 +59,7 @@
isShown: true, // 当前页面显示状态 isShown: true, // 当前页面显示状态
conversations: [], // 会话列表 conversations: [], // 会话列表
isImToken: '', // 是否已鉴权 isImToken: '', // 是否已鉴权
connection: 0
} }
}, },
computed: { computed: {
@@ -75,7 +77,7 @@
this.isImToken = res.token this.isImToken = res.token
this.getConversationList() this.getConversationList()
}) })
} }
this.getConversationList() this.getConversationList()
this.isShown = true this.isShown = true
} }
@@ -90,19 +92,22 @@
icon: 'none' icon: 'none'
}) })
} }
if (e.index == 1) { if (e.index == 1) {
if(this.toLogin()){ if (this.toLogin()) {
this.$Router.push({ this.$Router.push({
name: 'imFriends' name: 'imFriends'
}) })
} }
} }
}, },
watch: { watch: {
'$store.getters.newMessage': function(n, o) { '$store.getters.newMessage': function(n, o) {
if (this.isShown) { if (this.isShown) {
this.getConversationList() this.getConversationList()
} }
},
'$store.getters.connection': function(n, o) {
this.connection = n
} }
}, },
methods: { methods: {
@@ -123,7 +128,8 @@
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型 const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
RongIMLib.getConversationList(undefined, count, timestamp, (res) => { RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
if (res.code === 0 && res.conversations.length > 0) { if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations this.conversations = res.conversations
console.log(this.conversations);
} }
}) })
}, },
@@ -139,9 +145,10 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .container {
background-color: $window-color; background-color: $window-color;
min-height: 100vh; min-height: 100vh;
padding-bottom: 200px;
.null-list { .null-list {
height: 100vh; height: 100vh;
@@ -159,64 +166,128 @@
} }
} }
.mssage-box { .message {
position: relative;
display: flex;
background: white; background: white;
padding: 24rpx 24rpx 20rpx 24rpx;
.mssage-action { .avatar {
position: relative; position: relative;
padding: 20rpx $padding;
&::after { .u-badge {
position: absolute; z-index: 999;
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;
}
} }
} }
&-item:last-child { .content {
.mssage-action::after { margin-left: 16rpx;
display: none; 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> </style>

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

@@ -1,6 +1,7 @@
<template> <template>
<view class="chat-content"> <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" v-for="(item,index) in messages" :key="index" :id="'chatId_'+index">
<view class="chat-item-time"> <view class="chat-item-time">
@@ -14,12 +15,12 @@
<view class="chat-status" :class="{'hide': item.sentStatus == 50}" <view class="chat-status" :class="{'hide': item.sentStatus == 50}"
v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view> v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
<view class="chat-avatar"> <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 v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"></u-avatar> @click="showFriend(targetId)"></u-avatar>
<u-avatar v-else :src="$store.getters.sender.portraitUrl"/> <u-avatar v-else @click="showMine" :src="$store.getters.sender.portraitUrl" />
</view> </view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<view class="chat-footer"> <view class="chat-footer">
@@ -151,15 +152,15 @@
this.inputTxt = '' this.inputTxt = ''
}) })
}, },
showFriend() { showFriend(targetId) {
// uni.navigateTo({ uni.navigateTo({
// url: '/pages/im/friends/info?targetId=' + this.targetId url: '/pages/im/friends/info?targetId=' + targetId
// }) })
}, },
showMine() { showMine() {
// uni.navigateTo({ uni.navigateTo({
// url: '/pages/im/friends/mine' url: '/pages/im/friends/mine'
// }) })
}, },
scrollBottom() { scrollBottom() {
this.$nextTick(function() { this.$nextTick(function() {

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

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

23
store/modules/im.js
View File

@@ -4,12 +4,17 @@ export default {
state: { state: {
newMsg: {}, newMsg: {},
friends: {}, friends: {},
sender: {} sender: {},
// IM连接状态，0是正常
connection: 0
}, },
getters: { getters: {
newMessage(state) { newMessage(state) {
return state.newMsg return state.newMsg
}, },
connection(state) {
return state.connection
},
friends(state) { friends(state) {
return state.friends return state.friends
}, },
@@ -17,8 +22,8 @@ export default {
if (state.friends[targetId]) { if (state.friends[targetId]) {
return state.friends[targetId] return state.friends[targetId]
} else { } else {
console.log('没找到,， 死循环了，得处理 todo', targetId); console.log('没找到,死循环了，得处理 todo', targetId);
im.syncUserInfo(targetId) // im.syncUserInfo(targetId)
return { return {
name: '', name: '',
address: '', address: '',
@@ -43,9 +48,15 @@ export default {
}, },
SET_state_sender(state, userInfo) { SET_state_sender(state, userInfo) {
state.sender = userInfo state.sender = userInfo
},
SET_connection_status(state, status) {
state.connection = status
} }
}, },
actions: { actions: {
updateConnectionStatus({commit}, status) {
commit('SET_connection_status', status)
},
newMessage({ newMessage({
commit commit
}, msg) { }, msg) {
@@ -63,7 +74,6 @@ export default {
const model = uni.model.friendModel const model = uni.model.friendModel
model.find('userId=' + userInfo.userId, (err, user) => { model.find('userId=' + userInfo.userId, (err, user) => {
if (!err && user.length == 0) { if (!err && user.length == 0) {
console.log('哪里更新的 ', 1);
saveAvatar(userInfo, (savedFilePath) => { saveAvatar(userInfo, (savedFilePath) => {
model.insert({ model.insert({
userId: userInfo.userId, userId: userInfo.userId,
@@ -76,7 +86,6 @@ export default {
commit('updateFriends', userInfo) commit('updateFriends', userInfo)
}) })
} else if (!err && user[0].hash != userInfo.hash) { } else if (!err && user[0].hash != userInfo.hash) {
console.log('哪里更新的 ', 2);
saveAvatar(userInfo, (savedFilePath) => { saveAvatar(userInfo, (savedFilePath) => {
model.update('userId=' + userInfo.userId, { model.update('userId=' + userInfo.userId, {
name: userInfo.name, name: userInfo.name,
@@ -98,7 +107,7 @@ export default {
commit('updateFriends', userInfo) commit('updateFriends', userInfo)
}) })
} else { } 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-sm:12px;
$uni-font-size-base:14px; $uni-font-size-base:14px;
$uni-font-size-lg:16; $uni-font-size-lg:16px;
/* 图片尺寸 */ /* 图片尺寸 */
$uni-img-size-sm:20px; $uni-img-size-sm:20px;

3
utils/im/index.js
View File

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