消息列表组件化，统一私聊和群聊样式

pages/im/group/chat.vue

@@ -4,17 +4,8 @@
 
         <view class="body">
             <view class="scroll">
-                <view class="cell" v-for="(item, index) in messages" :key="index">
-                    <view class="time" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
-                    <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
-                        <u-avatar class="avatar" @click="toUser(item)" :size="avatarSize" shape="square"
-                            :src="contact(item.senderUserId).portraitUrl" />
-                        <view class="msg">
-                            <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" isGroup />
-                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" isGroup />
-                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" isGroup />
-                        </view>
-                    </view>
+                <view class="cell" v-for="(message, index) in messages" :key="index">
+                    <show-message-cell :message="message" isGroup />
                 </view>
             </view>
         </view>
@@ -22,26 +13,19 @@
 </template>
 
 <script>
-    import {
-        timeCustomCN
-    } from '@/utils/filters.js'
     import {
         getGroupBase
     } from '@/apis/interfaces/im.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'
+    import showMessageCell from '../components/showMessageCell'
     import utils from '@/utils/index.js'
 
     export default {
         components: {
-            showVoice,
-            showImage,
-            showText,
-            sentMessageBar
+            sentMessageBar,
+            showMessageCell
         },
         data() {
             return {
@@ -55,9 +39,6 @@
             }
         },
         computed: {
-            avatarSize() {
-                return utils.rpx2px(this.avatarRpx)
-            },
             latestMessage() {
                 if (this.messages.length) {
                     return this.messages[0]
@@ -66,11 +47,6 @@
                         sentTime: 0
                     }
                 }
-            },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
             }
         },
         onLoad(e) {
@@ -103,8 +79,20 @@
             })
             // 清理聊天记录
             uni.$once('cleanGroupMessage', this.getMessageList)
+            uni.$on('onRecallMessage', (res) => {
+                if (res.targetId == this.targetId) {
+                    this.messages = this.messages.map(item => {
+                        if (res.messageId == item.messageId) {
+                            return res
+                        } else {
+                            return item
+                        }
+                    })
+                }
+            })
         },
         onUnload() {
+            uni.$off('onRecallMessage')
             uni.$off('onReceiptRequest')
             uni.$off('onReceiptResponse')
         },
@@ -117,17 +105,6 @@
             onScroll(e) {
                 this.$refs.messageBar.onHidePopus()
             },
-            toUser(item) {
-                if (item.messageDirection == 1) {
-                    uni.navigateTo({
-                        url: '/pages/im/friends/mine?targetId=' + item.senderUserId
-                    })
-                } else {
-                    uni.navigateTo({
-                        url: '/pages/im/friends/info?targetId=' + item.senderUserId
-                    })
-                }
-            },
             getNewMessage() {
                 im.getMessageList(
                     this.conversationType,
@@ -149,6 +126,7 @@
                     20,
                     true,
                     (messages) => {
+                        console.log('获取消息列表', messages);
                         RongIMLib.sendReadReceiptResponse(3, this.targetId, messages, (res) => {
                             console.error('发送群聊已读回执成功', res);
                         })
@@ -193,38 +171,7 @@
                 .cell {
                     padding: 10rpx 20rpx;
 
-                    .time {
-                        text-align: center;
-                        font-size: 24rpx;
-                        color: #666;
-                    }
 
-                    .cell-item {
-                        display: flex;
-                        width: 710rpx;
-                        justify-content: flex-start;
-
-                        &.left {
-                            flex-direction: row;
-                        }
-
-                        &.right {
-                            flex-direction: row-reverse;
-
-                            .state {
-                                flex-direction: row;
-                                justify-content: flex-end;
-                            }
-                        }
-
-                        .msg {
-                            margin: 0 20rpx;
-                        }
-                    }
-
-                    .cell-footer {
-                        height: 20rpx;
-                    }
                 }
             }
         }