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

2022-02-22 16:48:49 +08:00
parent ab35229331
commit 01627f6794
11 changed files with 171 additions and 117 deletions
--- a/pages/im/components/showMessageCell.vue
+++ b/pages/im/components/showMessageCell.vue
@@ -0,0 +1,110 @@
+<template>
+    <view class="">
+        <view class="notify" v-if="message.objectName === 'RC:GrpNtf'">{{ message.content.message }}</view>
+        <view class="notify" v-else-if="message.objectName === 'RC:RcNtf'">
+            {{ contact(message.senderUserId).name }} 撤回了一条消息
+        </view>
+        <view v-else :class="['cell-item', message.messageDirection == 1 ? 'right' : 'left']">
+            <u-avatar class="avatar" @click="toUser(message)" :size="avatarSize" shape="square"
+                :src="contact(message.senderUserId).portraitUrl" />
+            <view class="msg">
+                <show-text v-if="message.objectName === 'RC:TxtMsg'" :message="message" :isGroup="isGroup" />
+                <show-voice v-else-if="message.objectName === 'RC:HQVCMsg'" :message="message" :isGroup="isGroup" />
+                <show-image v-else-if="message.objectName === 'RC:ImgMsg'" :message="message" :isGroup="isGroup" />
+                <show-call v-else-if="message.objectName === 'RC:InfoNtf'" :message="message" :isGroup="isGroup" />
+                <view v-else class="">
+                    [未处理的消息类型 {{ message.objectName }}]
+                </view>
+            </view>
+            <!-- <view class="time">{{ item.sentTime|timeCustomCN }}</view> 时间判断，最好是隔一段时间没有消息才展示一个 -->
+        </view>
+    </view>
+</template>
+
+<script>
+    import showVoice from './show/showVoice'
+    import showImage from './show/showImage'
+    import showText from './show/showText'
+    import showCall from './show/showCall'
+    import utils from '@/utils/index.js'
+
+    export default {
+        components: {
+            showCall,
+            showVoice,
+            showImage,
+            showText
+        },
+        props: {
+            message: {
+                type: Object,
+                default: function() {
+                    return {}
+                }
+            },
+            isGroup: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data() {
+            return {
+                avatarRpx: 84
+            }
+        },
+        computed: {
+            avatarSize() {
+                return utils.rpx2px(this.avatarRpx)
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
+        methods: {
+            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
+                    })
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .notify {
+        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;
+        }
+    }
+</style>