群聊的基础页面

pages/im/group/chat.nvue

@@ -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>

pages/im/group/index.vue

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