视频通话时长转换

pages/im/components/messagePreview.vue

@@ -22,10 +22,10 @@
             <view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
                 <text v-if="conversationType == 3">{{ user.name }}：</text>[位置]
             </view>
-            <view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType=='0'">
+            <view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType==0">
                 <text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
             </view>
-            <view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType=='1'">
+            <view class="preview" v-if="msg.objectName=='RC:InfoNtf' && JSON.parse(msg.message).mediaType==1">
                 <text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
             </view>
             <view class="preview" v-if="msg.objectName=='RC:GrpNtf'">

pages/im/components/showCall.vue

@@ -1,29 +1,18 @@
 <template>
-    <view class="msg--text">
-        <text class="name" v-if="!guest && name">{{ name }}</text>
-        <view>
-            <text class="im--text" :class="guest ? 'right': 'left'" v-if="message.mediaType == '1'">
-                <u-icon name="camera" /> {{ message.connected ? '通话时长' + message.duration : '未接通' }}
-            </text>
-            <text class="im--text" :class="guest ? 'right': 'left'" v-else>
-                <u-icon name="phone" /> {{ message.connected ? '通话时长' + message.duration : '未接通' }}
-            </text>
+    <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>
-<!--  msg 
-{
-    "message": "1",
-    "objectName": "RC:InfoNtf",
-    "userInfo": {
-        "userId": "10051",
-        "name": "Jason.电信",
-        "extra": "",
-        "portraitUrl": "http://storage.zh.shangkelian.cn/uploads/2022/02/16/29b13f5301694721ad7acd8b8b67bbd9.jpg"
-    }
-}
- -->
+
 <script>
+    import utils from '@/utils/index.js'
+    import moment from 'moment'
+    
     export default {
         name: 'showText',
         props: {
@@ -45,16 +34,20 @@
         computed: {
             message() {
                 return JSON.parse(this.msg.message)
-            }
-        },
-        mounted() {
-            console.log(this.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--text {
+    .msg--call {
         .name {
             font-size: 26rpx;
             color: $text-gray-m;
@@ -67,8 +60,8 @@
             line-height: 46rpx;
             font-size: 32rpx;
             color: $text-color;
-            display: inline-block;
-            word-break: break-all;
+            display: flex;
+            flex-direction: row;
 
             &.left {
                 border-radius: 0 20rpx 20rpx 20rpx;
@@ -79,6 +72,10 @@
                 border-radius: 20rpx 0 20rpx 20rpx;
                 background: $main-color;
                 color: white;
+
+                .u-icon {
+                    color: white;
+                }
             }
         }
     }