组件整理

2022-02-24 10:06:33 +08:00
parent a7dccde63a
commit 32e3e0ef30
4 changed files with 2 additions and 3 deletions
--- a/pages/im/components/conversation/messageCell.vue
+++ b/pages/im/components/conversation/messageCell.vue
@@ -0,0 +1,95 @@
+<template>
+    <view class="message--cell">
+        <view class="avatar">
+            <u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
+            <u-avatar :src="contact(item.targetId).portraitUrl" shape="square" :size="avatarSize" />
+        </view>
+        <view class="content">
+            <view class="header">
+                <view class="name">
+                    {{ contact(item.targetId).name }}
+                    <text v-if="item.conversationType === 3" class='group'>[群]</text>
+                </view>
+                <view class="time">{{ item.sentTime|timeCustomCN }}</view>
+            </view>
+            <message-preview class="preview" :msg="item.latestMessage" :draft="item.draft"
+                :conversationType="item.conversationType" :user="item.latestMessage.userInfo" />
+        </view>
+    </view>
+</template>
+
+<script>
+    import messagePreview from './messagePreview'
+    import utils from '@/utils/index.js'
+    import imBase from '../../mixins/imBase.js'
+
+    export default {
+        mixins: [
+            imBase
+        ],
+        props: {
+            item: {
+                type: Object,
+                default: function() {
+                    return {}
+                }
+            }
+        },
+        components: {
+            messagePreview
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .message--cell {
+        display: flex;
+        padding: 20rpx 10rpx 0 30rpx;
+
+        .avatar {
+            position: relative;
+            padding-top: 5rpx;
+
+            .u-badge {
+                z-index: 998;
+            }
+        }
+
+        .content {
+            margin-left: 30rpx;
+            box-sizing: border-box;
+            position: relative;
+            flex: 1;
+            border-bottom-width: 0.5px !important;
+            border-color: #eee !important;
+            border-bottom-style: solid;
+
+            .header {
+                display: flex;
+                justify-content: space-between;
+
+                .name {
+                    font-size: $title-size + 2;
+                    color: #454545;
+
+                    .group {
+                        color: $main-color;
+                        font-size: $title-size-m - 4;
+                        margin-left: 4px;
+                        position: relative;
+                        top: -4rpx;
+                    }
+                }
+
+                .time {
+                    font-size: $title-size-sm - 3;
+                    color: $text-gray-m;
+                    position: absolute;
+                    right: 30rpx;
+                    padding-top: 4rpx;
+                    font-weight: normal;
+                }
+            }
+        }
+    }
+</style>