音视频组件展示

pages/im/components/show/showCall.vue

@@ -1,47 +1,55 @@
 <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 class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+        <view class="im--text" :class="isRemote ? 'left': 'right'">
+            <u-icon name="camera" size="22" v-if="msg.mediaType == 1" :label="label" />
+            <u-icon name="phone" size="22" v-else :label="label" />
         </view>
     </view>
 </template>
 
 <script>
-    import utils from '@/utils/index.js'
-    import moment from 'moment'
-    
+    import utils from '@/utils/index.js'
+    import moment from 'moment'
+
     export default {
         name: 'showText',
         props: {
-            msg: {
+            message: {
                 type: Object,
                 default: () => {
                     return {}
                 }
             },
-            name: {
-                type: String,
-                default: ''
-            },
-            guest: {
+            isGroup: {
                 type: Boolean,
-                default: true
+                default: false
             }
         },
-        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')
-                }
-            }
+        mounted() {
+        },
+        computed: {
+            msg() {
+                return JSON.parse(this.message.content.message)
+            },
+            label() {
+                return this.msg.connected ? '通话时长：' + duration : '未接通'
+            },
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            },
+            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>