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

pages/im/components/show/showCall.vue

@@ -0,0 +1,82 @@
+<template>
+    <view class="msg--call">
+        <view class="name" v-if="!guest && name">{{ name }}</view>
+        <view class="im--text" :class="guest ? 'right': 'left'">
+            <u-icon name="camera" size="22" v-if="message.mediaType == 1"
+                :label="message.connected ? '通话时长：' + duration : '未接通'" />
+            <u-icon name="phone" size="22" v-else :label="message.connected ? '通话时长：' + duration : '未接通'" />
+        </view>
+    </view>
+</template>
+
+<script>
+    import utils from '@/utils/index.js'
+    import moment from 'moment'
+    
+    export default {
+        name: 'showText',
+        props: {
+            msg: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            name: {
+                type: String,
+                default: ''
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        },
+        computed: {
+            message() {
+                return JSON.parse(this.msg.message)
+            },
+            duration() {
+                if (this.message.duration > 3600) {
+                    return moment.utc(this.message.duration * 1000).format('HH:mm:ss')
+                } else {
+                    return moment.utc(this.message.duration * 1000).format('mm:ss')
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .msg--call {
+        .name {
+            font-size: 26rpx;
+            color: $text-gray-m;
+            display: inline-block;
+        }
+
+        .im--text {
+            max-width: 508rpx;
+            padding: 20rpx;
+            line-height: 46rpx;
+            font-size: 32rpx;
+            color: $text-color;
+            display: flex;
+            flex-direction: row;
+
+            &.left {
+                border-radius: 0 20rpx 20rpx 20rpx;
+                background: white;
+            }
+
+            &.right {
+                border-radius: 20rpx 0 20rpx 20rpx;
+                background: $main-color;
+                color: white;
+
+                .u-icon {
+                    color: white;
+                }
+            }
+        }
+    }
+</style>