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

群聊的基础页面

Browse Source
This commit is contained in:
Jason.Chen
2022-02-10 10:22:43 +08:00
parent 699c178bd7
commit e2243bcc99
22 changed files with 940 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
pages/im/components/conversationGroup.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<view>
<view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
:data-item="item" @longpress="onLongPress" @click="toDetail(item)">
<view class="avatar">
<u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
<u-avatar text="群" shape="square" size="44" />
</view>
<view class="content u-border-bottom">
<view class="header">
<view class="name">群组名称</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" :user="item.latestMessage.userInfo" />
</view>
</view>
<view class="shade" @click="hidePop" v-show="showPop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
{{item}}
</view>
</view>
</view>
</view>
</template>
<script>
import messagePreview from './messagePreview'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
export default {
props: {
conversations: {
type: Array,
default: function() {
return []
}
}
},
components: {
messagePreview
},
data() {
return {
/* 窗口尺寸 */
winSize: {},
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ['置顶聊天', '删除该聊天'],
/* 弹窗定位样式 */
popStyle: "",
pickedItem: {},
}
},
computed: {
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
}
},
methods: {
// 隐藏功能菜单
hidePop() {
this.showPop = false
this.pickedItem = {}
setTimeout(() => {
this.showShade = false
}, 250)
},
// 点击会话功能菜单
pickerMenu(e) {
const index = Number(e.currentTarget.dataset.index)
if (index == 0) {
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
.pickedItem.isTop)
} else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
}
this.$emit('refresh')
im.setNotifyBadge()
this.hidePop()
},
// 长按会话，展示功能菜单
onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) {
style = `bottom:${this.winSize.height-touches.clientY}px;`
} else {
style = `top:${touches.clientY}px;`
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:${this.winSize.witdh-touches.clientX}px`
} else {
style += `left:${touches.clientX}px`
}
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
this.popStyle = style
this.pickedItem = item
this.$nextTick(() => {
setTimeout(() => {
this.showPop = true;
}, 10)
})
},
toDetail(item) {
uni.navigateTo({
url: '/pages/im/group/chat?targetId=' + item.targetId
})
}
}
}
</script>
<style lang="scss" scoped>
.message {
background: white;
padding: 20rpx 0 0 20rpx;
position: relative;
display: flex;
&.is-top {
background: $window-color;
border-bottom: #e8e8e8;
}
.avatar {
position: relative;
.u-badge {
z-index: 998;
}
}
.content {
margin-left: 30rpx;
width: calc(100% - 46px);
box-sizing: border-box;
position: relative;
.header {
display: flex;
justify-content: space-between;
.name {
font-size: $title-size + 2;
color: #454545;
color: #454545;
}
.time {
font-size: $title-size-sm;
color: $text-gray-m;
position: absolute;
right: 30rpx;
}
}
}
}
/* 遮罩 */
.shade {
position: fixed;
width: 100%;
height: 100%;
.pop {
position: fixed;
z-index: 101;
width: 200rpx;
box-sizing: border-box;
font-size: 28rpx;
text-align: left;
color: #333;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
line-height: 80rpx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform: scale(0, 0);
&.show {
transform: scale(1, 1);
}
&>view {
padding: 0 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
-webkit-touch-callout: none;
&:active {
background-color: #f3f3f3;
}
}
}
}
</style>

216
pages/im/components/conversationPrivate.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<view>
<view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
:data-item="item" @longpress="onLongPress" @click="toDetail(item)">
<view class="avatar" @click="toFriend(item.targetId)">
<u-badge max="99" shape="horn" absolute :offset="[-5, -8]"
:value="item.unreadMessageCount" />
<u-avatar :src="friend(item.targetId).portraitUrl" shape="square" size="44" />
</view>
<view class="content u-border-bottom">
<view class="header">
<view class="name">{{ friend(item.targetId).name }}</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" />
</view>
</view>
<view class="shade" @click="hidePop" v-show="showPop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
{{item}}
</view>
</view>
</view>
</view>
</template>
<script>
import messagePreview from './messagePreview'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
export default {
props: {
conversations: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
/* 窗口尺寸 */
winSize: {},
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ['置顶聊天', '删除该聊天'],
/* 弹窗定位样式 */
popStyle: "",
pickedItem: {},
}
},
components: {
messagePreview
},
computed: {
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
}
},
methods: {
// 隐藏功能菜单
hidePop() {
this.showPop = false
this.pickedItem = {}
setTimeout(() => {
this.showShade = false
}, 250)
},
// 点击会话功能菜单
pickerMenu(e) {
const index = Number(e.currentTarget.dataset.index)
if (index == 0) {
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
.pickedItem.isTop)
} else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
}
this.$emit('refresh')
im.setNotifyBadge()
this.hidePop()
},
// 长按会话，展示功能菜单
onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) {
style = `bottom:${this.winSize.height-touches.clientY}px;`
} else {
style = `top:${touches.clientY}px;`
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:${this.winSize.witdh-touches.clientX}px`
} else {
style += `left:${touches.clientX}px`
}
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
this.popStyle = style
this.pickedItem = item
this.$nextTick(() => {
setTimeout(() => {
this.showPop = true;
}, 10)
})
},
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
this.hidePop()
uni.navigateTo({
url: '/pages/im/private/chat?targetId=' + item.targetId
})
},
toFriend(targetId) {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + targetId
})
}
}
}
</script>
<style lang="scss" scoped>
.message {
background: white;
padding: 20rpx 0 0 20rpx;
position: relative;
display: flex;
&.is-top {
background: $window-color;
border-bottom: #e8e8e8;
}
.avatar {
position: relative;
.u-badge {
z-index: 998;
}
}
.content {
margin-left: 30rpx;
width: calc(100% - 46px);
box-sizing: border-box;
position: relative;
.header {
display: flex;
justify-content: space-between;
.name {
font-size: $title-size + 2;
color: #454545;
color: #454545;
}
.time {
font-size: $title-size-sm;
color: $text-gray-m;
position: absolute;
right: 30rpx;
}
}
}
}
/* 遮罩 */
.shade {
position: fixed;
width: 100%;
height: 100%;
.pop {
position: fixed;
z-index: 101;
width: 200rpx;
box-sizing: border-box;
font-size: 28rpx;
text-align: left;
color: #333;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
line-height: 80rpx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform: scale(0, 0);
&.show {
transform: scale(1, 1);
}
&>view {
padding: 0 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
-webkit-touch-callout: none;
&:active {
background-color: #f3f3f3;
}
}
}
}
</style>

54
pages/im/components/messagePreview.nvue
View File

@@ -1,28 +1,28 @@
<template>
<view>
<view v-if="msg.objectName=='RC:TxtMsg'">
{{ msg.content || '' }}
<view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
<text v-if="user.name">{{ user.name }}:</text>{{ msg.content || '' }}
</view>
<view v-if="msg.objectName=='RC:HQVCMsg'">
[语音]
<view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
<text v-if="user.name">{{ user.name }}:</text>[语音]
</view>
<view v-if="msg.objectName=='RC:ImgMsg'">
[图片]
<view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
<text v-if="user.name">{{ user.name }}:</text>[图片]
</view>
<view v-if="msg.objectName=='RC:GIFMsg'">
[表情]
<view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
<text v-if="user.name">{{ user.name }}:</text>[表情]
</view>
<view v-if="msg.objectName=='RC:FileMsg'">
[文件]
<view class="preview" v-if="msg.objectName=='RC:FileMsg'">
<text v-if="user.name">{{ user.name }}:</text>[文件]
</view>
<view v-if="msg.objectName=='RC:LBSMsg'">
[位置]
<view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
<text v-if="user.name">{{ user.name }}:</text>[位置]
</view>
<view v-if="msg.objectName=='RC:AudioMsg'">
[语音通话]
<view class="preview" v-if="msg.objectName=='RC:AudioMsg'">
<text v-if="user.name">{{ user.name }}:</text>[语音通话]
</view>
<view v-if="msg.objectName=='RC:VideoMsg'">
[视频通话]
<view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
<text v-if="user.name">{{ user.name }}:</text>[视频通话]
</view>
</view>
</template>
@@ -33,11 +33,29 @@
msg: {
type: Object,
default: {}
},
user: {
type: Object,
default: function() {
return {
name: ''
}
}
}
}
}
</script>
<style>
<style lang="scss" scoped>
.preview {
word-break: break-all;
color: $text-gray-m;
padding-top: $padding - 20;
padding-bottom: $padding;
font-size: $title-size-m;
height: 32rpx;
line-height: 32rpx;
width: 520rpx;
@extend .nowrap;
}
</style>

84
pages/im/components/sentMessageBar.nvue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<view class="">
<!-- footer -->
<view class="footer">
<view class="msg-type" @click="changeMessageType">
<image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
</image>
<image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
</image>
</view>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
@success="onSuccess" />
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
@success="onSuccess" />
<view class="msg-type msg-popups" @click="scrollBottom('msgPopups')">
<image class="icon" src="@/static/icon/popups-icon.png"></image>
</view>
</view>
<!-- 弹出层 -->
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
@success="() => {showPopups = false, onSuccess()}"></sent-popups>
</view>
</template>
<script>
import sentText from '../components/sentText'
import sentVoice from '../components/sentVoice'
import sentPopups from '../components/sentPopups'
export default {
props: {
conversationType: {
type: Number,
default: 0
},
targetId: {
type: String,
default: ''
}
},
components: {
sentText,
sentVoice,
sentPopups
},
data() {
return {
chatType: 1, // 0 语音，1 文本
showPopups: false
}
},
methods: {
// 切换聊天类型，语音/文本
changeMessageType() {
this.chatType = this.chatType === 1 ? 0 : 1
},
onSuccess() {
this.$emit('onSuccess')
}
}
}
</script>
<style lang="scss" scoped>
.footer {
background: white;
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
}
}
</style>

23
pages/im/components/sentPopups.nvue
View File

@@ -63,6 +63,11 @@
default: ''
}
},
computed: {
user() {
return this.$store.getters.sender
}
},
methods: {
singleCall(e) {
uni.showToast({
@@ -81,10 +86,11 @@
count: 9,
sourceType: ['album'],
success: res => {
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0], (
res) => {
this.success()
})
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
this.user, (
res) => {
this.success()
})
}
})
break;
@@ -92,10 +98,11 @@
uni.chooseImage({
sourceType: ['camera'],
success: res => {
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0], (
res) => {
this.success()
})
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
this.user, (
res) => {
this.success()
})
}
})
break;

66
pages/im/components/sentText.nvue
View File

@@ -1,15 +1,7 @@
<template>
<view class="sent--text">
<input
class="input"
type="text"
@focus="focus"
@blur="blur"
v-model="inputTxt"
confirm-type="send"
@confirm="sent"
cursor-spacing="10"
/>
<input class="input" type="text" @focus="focus" @blur="blur" v-model="inputTxt" confirm-type="send"
@confirm="sent" cursor-spacing="10" />
<!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
</view>
</template>
@@ -36,6 +28,9 @@
computed: {
disabled() {
return this.inputTxt.length === 0
},
user() {
return this.$store.getters.sender
}
},
created() {
@@ -55,18 +50,18 @@
sent() {
if (!this.disabled) {
RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
im.sentText(this.conversationType, this.targetId, this.inputTxt, this.user, () => {
this.$emit('success')
this.inputTxt = ''
})
}
},
focus() {
this.$emit('focus')
},
blur() {
this.$emit('blur')
}
},
focus() {
this.$emit('focus')
},
blur() {
this.$emit('blur')
}
}
}
</script>
@@ -75,30 +70,15 @@
.sent--text {
display: flex;
flex-direction: row;
justify-content: space-between;
.input {
background: #F3F6FB;
height: 70rpx;
width: 500rpx;
border-radius: 10rpx;
margin-right: 15rpx;
padding: 0 20rpx;
}
// .button {
// border: none;
// background: #34CE98;
// color: white;
// width: 120rpx;
// line-height: 70rpx;
// text-align: center;
// border-radius: 10rpx;
// font-size: 30rpx;
// font-weight: bold;
// }
// .button[disabled] {
// background-color: #555555;
// }
justify-content: space-between;
.input {
background: #F3F6FB;
height: 70rpx;
width: 500rpx;
border-radius: 10rpx;
margin-right: 15rpx;
padding: 0 20rpx;
}
}
</style>

7
pages/im/components/sentVoice.nvue
View File

@@ -35,6 +35,11 @@
recorderManager: null
}
},
computed: {
user() {
return this.$store.getters.sender
}
},
created() {
this.recorderManager = uni.getRecorderManager()
},
@@ -81,7 +86,7 @@
this.recorderManager.onStop(res => {
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
this
.recordTime), () => {
.recordTime), this.user, () => {
setTimeout(() => {
this.$emit('success')
}, 500)

23
pages/im/components/showImage.nvue
View File

@@ -1,7 +1,10 @@
<template>
<view class="msg--image" :class="guest ? 'right': 'left'">
<image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
</view>
<template>
<view class="">
<text class="name" v-if="!guest && name">{{ name }}</text>
<view class="msg--image" :class="guest ? 'right': 'left'">
<image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
</view>
</view>
</template>
<script>
@@ -23,6 +26,10 @@
guest: {
type: Boolean,
default: true
},
name: {
type: String,
default: ''
}
},
methods: {
@@ -38,7 +45,13 @@
}
</script>
<style scoped lang="scss">
<style scoped lang="scss">
.name {
font-size: 24rpx;
line-height: 34rpx;
color: $text-gray-m;
}
.msg--image {
padding: 20rpx;

39
pages/im/components/showText.nvue
View File

@@ -1,5 +1,6 @@
<template>
<view class="msg--text">
<text class="name" v-if="!guest && name">{{ name }}</text>
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
</view>
</template>
@@ -12,6 +13,10 @@
type: Object,
default: {}
},
name: {
type: String,
default: ''
},
guest: {
type: Boolean,
default: true
@@ -21,21 +26,29 @@
</script>
<style scoped lang="scss">
.im--text {
max-width: 400rpx;
padding: 20rpx;
font-size: 28rpx;
line-height: 40rpx;
&.left {
border-radius: 0 20rpx 20rpx 20rpx;
background: white;
.msg--text {
.name {
font-size: 24rpx;
line-height: 34rpx;
color: $text-gray-m;
}
&.right {
border-radius: 20rpx 0 20rpx 20rpx;
background: $main-color;
color: white;
.im--text {
max-width: 500rpx;
padding: 20rpx;
line-height: 44rpx;
font-size: 32rpx;
&.left {
border-radius: 0 20rpx 20rpx 20rpx;
background: white;
}
&.right {
border-radius: 20rpx 0 20rpx 20rpx;
background: $main-color;
color: white;
}
}
}
</style>

27
pages/im/components/showVoice.nvue
View File

@@ -1,9 +1,12 @@
<template>
<view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
<image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<text class="duration">{{msg.duration}}"</text>
<image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
</view>
<template>
<view class="">
<text class="name" v-if="!guest && name">{{ name }}</text>
<view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
<image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<text class="duration">{{msg.duration}}"</text>
<image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
</view>
</view>
</template>
<script>
@@ -20,6 +23,10 @@
duration: 0
}
}
},
name: {
type: String,
default: ''
},
guest: {
type: Boolean,
@@ -55,7 +62,13 @@
}
</script>
<style scoped lang="scss">
<style scoped lang="scss">
.name {
font-size: 24rpx;
line-height: 34rpx;
color: $text-gray-m;
}
.msg--voice {
flex-direction: row;
justify-content: space-between;

171
pages/im/group/chat.nvue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<view class="group--chat">
<list class="body" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<u-avatar class="avatar" size="36" text="Ad" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="item.content.userInfo.name" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="item.content.userInfo.name" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="item.content.userInfo.name" />
</view>
</view>
</cell>
<cell class="cell-footer" ref="chatBottom"></cell>
</list>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getMessageList()" />
</view>
</template>
<script>
import {
timeCustomCN
} from '@/utils/filters.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import showVoice from '../components/showVoice'
import showImage from '../components/showImage'
import showText from '../components/showText'
import sentMessageBar from '../components/sentMessageBar'
const ChatList = uni.requireNativePlugin('dom')
export default {
components: {
showVoice,
showImage,
showText,
sentMessageBar
},
data() {
return {
targetId: '',
conversationType: 3,
messages: []
}
},
onLoad(e) {
this.targetId = e.targetId
this.initMessageList()
uni.$on('onReceiveGroupMessage', (msg) => {
if (msg.targetId == this.targetId) {
this.initMessageList()
}
})
},
methods: {
initMessageList() {
this.getMessageList()
// 清理当前会话，未读消息数量
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
// 发送消息已读状态给对方
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
// 更新badge提醒数量
im.setNotifyBadge()
},
// 获取消息列表
getMessageList() {
im.getMessageList(
this.conversationType,
this.targetId,
new Date().getTime(),
20,
true,
(messages) => {
console.log('获取到的消息', messages);
this.messages = messages.reverse()
this.scrollBottom()
})
},
// 滚动到底部
scrollBottom(type) {
if (type === 'msgPopups') {
this.showPopups = !this.showPopups
}
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
offset: 0,
animated: false
})
}, 50)
}
}
}
</script>
<style lang="scss" scoped>
.group--chat {
background: $window-color;
flex: 1;
.body {
flex: 1;
.cell {
padding: 10rpx 30rpx;
.cell-item {
width: 690rpx;
justify-content: flex-start;
&.left {
flex-direction: row;
}
&.right {
flex-direction: row-reverse;
.state {
flex-direction: row;
justify-content: flex-end;
}
}
.avatar {
width: 78rpx;
height: 78rpx;
background-color: white;
border-radius: 10rpx;
}
.msg {
margin: 0 20rpx;
.user {
font-size: 18rpx;
line-height: 40rpx;
}
}
}
.cell-footer {
height: 20rpx;
}
}
}
.footer {
background: white;
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
}
}
}
</style>

11
pages/im/group/index.vue
View File

@@ -1,11 +0,0 @@
<template>
<view class="">
</view>
</template>
<script>
</script>
<style>
</style>

276
pages/im/index.vue
View File

@@ -5,16 +5,15 @@
<view class="custom-header">
<view class="header-flex">
<view class="tabs">
<view class="item show">
<view :class="['item', {'active': showType == 0}]" @click="showPrivate">
私聊
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="privateUnread" />
</view>
<view class="item" @click="onNav('', {})">
<view :class="['item', {'active': showType == 1}]" @click="showGroup">
群聊
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="groupUnread" />
</view>
</view>
<view class="btns">
<view class="item" @click="scanQrCode">
<uni-icons color="#555" type="scan" size="22" />
@@ -26,39 +25,13 @@
</view>
</view>
</view>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
<!-- content -->
<view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1">
<view class="vertical null-list">
<u-empty mode="message" textColor="#999" text="暂无好友消息" />
</view>
</block>
<block v-else>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
<view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
@click="toDetail(item)" @longpress="onLongPress" :data-item="item">
<view class="avatar" @click="toFriend(item.targetId)">
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
:value="item.unreadMessageCount" />
<u-avatar :src="friend(item.targetId).portraitUrl" shape="square" size="44" />
</view>
<view class="content u-border-bottom">
<view class="header">
<view class="name">{{ friend(item.targetId).name }}</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" />
</view>
</view>
<view class="shade" @click="hidePop" v-show="showPop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
{{item}}
</view>
</view>
</view>
</block>
<view v-if="$store.state.token !== ''">
<conversation-private v-show="showType == 0" @refresh="getPrivateConversationList()"
:conversations="conversations" />
<conversation-group v-show="showType == 1" @refresh="getGroupConversationList()"
:conversations="groupConversations" />
</view>
<!-- 未登录 -->
<view v-else class="vertical null-list">
@@ -75,67 +48,52 @@
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import messagePreview from './components/messagePreview'
import {
getImToken
} from '@/apis/interfaces/im.js'
import conversationPrivate from './components/conversationPrivate'
import conversationGroup from './components/conversationGroup'
export default {
data() {
return {
isShown: true, // 当前页面显示状态
showType: 1, // 0 单聊，1 群聊
conversations: [], // 会话列表
groupConversations: [],
connection: 0,
/* 窗口尺寸 */
winSize: {},
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ['置顶聊天', '删除该聊天'],
/* 弹窗定位样式 */
popStyle: "",
pickedItem: {},
privateUnread: 0,
groupUnread: 0,
hasNewFriends: 0
}
},
components: {
messagePreview
},
computed: {
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
}
conversationPrivate,
conversationGroup
},
onLoad() {
// 好友申请数量
// 好友申请数量
this.checkNewFriendPending()
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
})
uni.$on('onContactNotification', this.checkNewFriendPending)
},
onShow() {
onShow() {
if (this.$store.state.token !== '') {
this.getConversationList()
}
this.getPrivateConversationList()
this.getGroupConversationList()
}
// 监听新消息
uni.$on('onReceiveMessage', (msg) => {
console.log('收到消息，刷新列表');
this.getConversationList()
// todo ，不知道这个获取未读数量的，有没有办法能获取私聊的，还有群组的
// RongIMLib.getTotalUnreadCount(({
// count
// }) => {
// this.privateUnread = count
// })
})
uni.$on('onReceivePrivateMessage', (msg) => {
this.getPrivateConversationList()
})
uni.$on('onReceiveGroupMessage', (msg) => {
this.getGroupConversationList()
})
this.isShown = true
},
onHide() {
uni.$off('onReceiveMessage')
uni.$off('onReceivePrivateMessage')
uni.$off('onReceiveGroupMessage')
this.isShown = false
},
onNavigationBarButtonTap(e) {
@@ -154,6 +112,14 @@
}
},
methods: {
showPrivate() {
console.log('切换到单聊');
this.showType = 0
},
showGroup() {
console.log('切换到群聊');
this.showType = 1
},
checkNewFriendPending() {
// 获取是否有新的好友申请
RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
@@ -164,52 +130,6 @@
}
})
},
// 隐藏功能菜单
hidePop() {
this.showPop = false
this.pickedItem = {}
setTimeout(() => {
this.showShade = false
}, 250)
},
// 点击会话功能菜单
pickerMenu(e) {
const index = Number(e.currentTarget.dataset.index)
if (index == 0) {
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
.pickedItem.isTop)
} else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
}
im.setNotifyBadge()
this.getConversationList()
this.hidePop()
},
// 长按会话，展示功能菜单
onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) {
style = `bottom:${this.winSize.height-touches.clientY}px;`
} else {
style = `top:${touches.clientY}px;`
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:${this.winSize.witdh-touches.clientX}px`
} else {
style += `left:${touches.clientX}px`
}
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
this.popStyle = style
this.pickedItem = item
this.$nextTick(() => {
setTimeout(() => {
this.showPop = true;
}, 10)
})
},
// 检查登录
toLogin() {
if (this.$store.state.token === '') {
@@ -219,7 +139,8 @@
}
return true
},
getConversationList() {
// 获取私聊的会话列表
getPrivateConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
@@ -228,16 +149,14 @@
}
})
},
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
this.hidePop()
uni.navigateTo({
url: '/pages/im/private/chat?targetId=' + item.targetId
})
},
toFriend(targetId) {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + targetId
// 获取群组会话列表
getGroupConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList([RongIMLib.ConversationType.GROUP], count, timestamp, (res) => {
if (res.code === 0) {
this.groupConversations = res.conversations
}
})
},
// 点击按钮
@@ -306,7 +225,7 @@
margin: 0;
}
&.show {
&.active {
background: rgba($color: $main-color, $alpha: .1);
color: $main-color;
font-weight: bold;
@@ -346,105 +265,6 @@
box-sizing: border-box;
}
}
.message {
background: white;
padding: 20rpx 0 0 20rpx;
position: relative;
display: flex;
&.is-top {
background: $window-color;
border-bottom: #e8e8e8;
}
.avatar {
position: relative;
.u-badge {
z-index: 998;
}
}
.content {
margin-left: 30rpx;
width: calc(100% - 46px);
box-sizing: border-box;
position: relative;
.header {
display: flex;
justify-content: space-between;
.name {
font-size: $title-size + 2;
color: #454545;
color: #454545;
}
.time {
font-size: $title-size-sm;
color: $text-gray-m;
position: absolute;
right: 30rpx;
}
}
.preview {
word-break: break-all;
color: $text-gray-m;
padding-top: $padding - 20;
padding-bottom: $padding;
font-size: $title-size-m;
height: 32rpx;
line-height: 32rpx;
width: 500rpx;
@extend .nowrap;
}
}
}
}
/* 遮罩 */
.shade {
position: fixed;
width: 100%;
height: 100%;
.pop {
position: fixed;
z-index: 101;
width: 200rpx;
box-sizing: border-box;
font-size: 28rpx;
text-align: left;
color: #333;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
line-height: 80rpx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform: scale(0, 0);
&.show {
transform: scale(1, 1);
}
&>view {
padding: 0 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
-webkit-touch-callout: none;
&:active {
background-color: #f3f3f3;
}
}
}
}
.u-border-bottom {

62
pages/im/private/chat.nvue
View File

@@ -24,25 +24,7 @@
</cell>
<cell class="cell-footer" ref="chatBottom"></cell>
</list>
<!-- footer -->
<view class="footer">
<view class="msg-type" @click="changeMessageType">
<image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
</image>
<image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
</image>
</view>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
@success="getMessageList" />
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
@success="getMessageList" />
<view class="msg-type msg-popups" @click="scrollBottom('msgPopups')">
<image class="icon" src="@/static/icon/popups-icon.png"></image>
</view>
</view>
<!-- 弹出层 -->
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
@success="() => {showPopups = false, getMessageList()}"></sent-popups>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getMessageList()" />
</view>
</template>
@@ -55,9 +37,7 @@
import showVoice from '../components/showVoice'
import showImage from '../components/showImage'
import showText from '../components/showText'
import sentText from '../components/sentText'
import sentVoice from '../components/sentVoice'
import sentPopups from '../components/sentPopups'
import sentMessageBar from '../components/sentMessageBar'
const ChatList = uni.requireNativePlugin('dom')
@@ -71,19 +51,14 @@
name: '',
userId: '',
portraitUrl: ''
},
chatType: 1, // 0 语音，1 文本
showPopups: false,
inputFocus: false // 输入框是否获得了焦点
}
}
},
components: {
components: {
sentMessageBar,
showVoice,
showImage,
showText,
sentText,
sentVoice,
sentPopups
showText
},
onLoad(e) {
this.targetId = e.targetId
@@ -100,7 +75,7 @@
}
})
// 监听收到新消息，判断是否是当前会话，更新会话内容
uni.$on('onReceiveMessage', (msg) => {
uni.$on('onReceivePrivateMessage', (msg) => {
if (msg.targetId == this.targetId) {
this.initMessageList()
}
@@ -119,10 +94,6 @@
customCN(val) {
return timeCustomCN(val)
},
// 切换聊天类型，语音/文本
changeMessageType() {
this.chatType = this.chatType === 1 ? 0 : 1
},
// 获取消息列表
getMessageList() {
im.getMessageList(
@@ -232,24 +203,5 @@
}
}
}
.footer {
background: white;
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
}
}
}
</style>