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({

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

@@ -2,22 +2,23 @@
<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"
></u-avatar>
<view class="nickname">{{ userInfo.name }}</view> <view class="nickname">{{ userInfo.name }}</view>
<view class="sex"> <!-- <view class="sex">
<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag> <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> --> <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag>
</view> -->
<view class="address">
{{ userInfo.address}}
</view> </view>
</view> </view>
<view class="user-lists"> <!-- <view class="user-lists">
<view class="user-lists-item"> <view class="user-lists-item">
<label>地区</label> <label>地区</label>
<text>黑龙江 哈尔滨</text> <text>黑龙江 哈尔滨</text>
</view> </view>
</view> </view> -->
<!-- 发送消息 --> <!-- 发送消息 -->
<view class="info-footer"> <view class="info-footer">
<button class="open-btn" @click="toPrivate">发送消息</button> <button class="open-btn" @click="toPrivate">发送消息</button>
@@ -33,18 +34,24 @@
export default { export default {
data() { data() {
return { return {
targetId: '',
userInfo: {} userInfo: {}
} }
}, },
onLoad(e) { onLoad(e) {
this.targetId = e.targetId
getUserInfo(e.targetId).then(res => { getUserInfo(e.targetId).then(res => {
this.userInfo = res this.userInfo = res
uni.setNavigationBarTitle({
title: res.name
})
}) })
}, },
methods: { methods: {
toPrivate() { toPrivate() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/private/index?targetId=10047&conversationType=1' url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
}) })
} }
} }
@@ -52,26 +59,35 @@
</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{ .user-info {
padding: $padding*3 $padding; padding: $padding*3 $padding;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: white; background: white;
.nickname{
.nickname {
font-size: 42rpx; font-size: 42rpx;
padding-top: $padding; padding-top: $padding;
color: $text-color;
} }
.sex{
.address {
line-height: 64rpx;
font-size: 26rpx;
color: $text-gray;
}
.sex {
padding-top: $padding/2; padding-top: $padding/2;
text{
text {
font-size: $title-size-sm; font-size: $title-size-sm;
background: #303133; background: #303133;
padding: 0 10rpx; padding: 0 10rpx;
@@ -82,29 +98,35 @@
} }
} }
} }
.user-lists{
.user-lists {
margin-top: $margin; margin-top: $margin;
background: white; background: white;
.user-lists-item{
.user-lists-item {
padding: 0 $padding; padding: 0 $padding;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 90rpx; line-height: 90rpx;
font-size: $title-size-lg; font-size: $title-size-lg;
label{
label {
color: $text-color; color: $text-color;
} }
text{
text {
color: $text-gray; color: $text-gray;
} }
} }
} }
// 发送消息 // 发送消息
.info-footer{ .info-footer {
padding: $padding; padding: $padding;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
.open-btn{
.open-btn {
width: 100%; width: 100%;
height: 90rpx; height: 90rpx;
line-height: 90rpx; line-height: 90rpx;
@@ -114,7 +136,8 @@
margin: 0; margin: 0;
color: white; color: white;
font-size: $title-size; font-size: $title-size;
&::after{
&::after {
display: none; display: none;
} }
} }

191
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">
<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) : '未'" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="14" randomBgColor></u-avatar> font-size="14" randomBgColor></u-avatar>
</block> <u-avatar v-else :src="friend(item.targetId).portraitUrl" size="44">
<block v-else>
<u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
</u-avatar> </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>
<view class="mssage-msg">{{ item.latestMessage.content }}</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>
<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: {
@@ -91,7 +93,7 @@
}) })
} }
if (e.index == 1) { if (e.index == 1) {
if(this.toLogin()){ if (this.toLogin()) {
this.$Router.push({ this.$Router.push({
name: 'imFriends' name: 'imFriends'
}) })
@@ -103,6 +105,9 @@
if (this.isShown) { if (this.isShown) {
this.getConversationList() this.getConversationList()
} }
},
'$store.getters.connection': function(n, o) {
this.connection = n
} }
}, },
methods: { methods: {
@@ -124,6 +129,7 @@
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,13 +166,49 @@
} }
} }
.mssage-box { .message {
background: white;
.mssage-action {
position: relative; position: relative;
padding: 20rpx $padding; display: flex;
background: white;
padding: 24rpx 24rpx 20rpx 24rpx;
.avatar {
position: relative;
.u-badge {
z-index: 999;
}
}
.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 { &::after {
position: absolute; position: absolute;
left: $padding + 108; left: $padding + 108;
@@ -175,48 +218,76 @@
height: 1rpx; height: 1rpx;
background: $border-color; 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 { // .message-box:not(:last-child) {
padding-left: $padding;
font-size: $title-size-sm - 2;
color: $text-gray;
}
}
.mssage-msg { // .message-action {
font-size: $title-size-sm - 2; // &::after {
color: $text-gray; // position: absolute;
@extend .nowrap; // left: $padding + 108;
} // right: 0;
} // bottom: 0;
} // content: " ";
// height: 1rpx;
// background: $border-color;
// }
// }
// }
&-item:last-child { // .message-box {
.mssage-action::after { // background: white;
display: none;
} // .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>

23
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,9 +15,9 @@
<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>
@@ -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() {

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

@@ -1,12 +1,9 @@
<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"
></u-avatar>
<view class="set-user-nickname">唐明明</view>
</view> </view>
<!-- 聊天设置 --> <!-- 聊天设置 -->
<view class="set-group"> <view class="set-group">
@@ -30,10 +27,15 @@
<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
@@ -77,9 +89,20 @@
}, },
// 清空聊天记录 // 清空聊天记录
cleanConversation() { cleanConversation() {
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({code}) => { uni.showModal({
title: '清空聊天记录',
success: (res) => {
if (res.confirm) {
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({
code
}) => {
if (code === 0) { if (code === 0) {
console.log('chenggong '); uni.showToast({
title: '聊天记录已清空'
})
}
})
}
} }
}) })
} }
@@ -88,27 +111,31 @@
</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{ .set-user {
background: white; background: white;
padding: $padding; padding: $padding;
display: flex; display: flex;
align-items: center; align-items: center;
.set-user-nickname{
.set-user-nickname {
padding-left: $padding; padding-left: $padding;
flex: 1; flex: 1;
line-height: 70rpx; line-height: 70rpx;
font-size: $title-size + 6; font-size: $title-size + 6;
} }
} }
// 聊天设置 // 聊天设置
.set-group{ .set-group {
margin: $margin 0; margin: $margin 0;
background: white; background: white;
.group-flex{
.group-flex {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -117,7 +144,8 @@
padding: 0 $padding; padding: 0 $padding;
font-size: $title-size; font-size: $title-size;
align-items: center; align-items: center;
&::after{
&::after {
content: " "; content: " ";
position: absolute; position: absolute;
left: $margin; left: $margin;
@@ -126,7 +154,8 @@
height: 1rpx; height: 1rpx;
background-color: $border-color; background-color: $border-color;
} }
&:last-child::after{
&:last-child::after {
display: none; display: none;
} }
} }

21
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;

1
utils/im/index.js
View File

@@ -62,6 +62,7 @@ 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) => {