视频通话时长转换

2022-02-21 15:46:05 +08:00
parent 1be73f5bbb
commit 883f32f54c
4 changed files with 60 additions and 67 deletions
--- a/pages/im/components/messagePreview.vue
+++ b/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'">
--- a/pages/im/components/showCall.vue
+++ b/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;
+                }
            }
        }
    }
--- a/pages/im/private/call.nvue
+++ b/pages/im/private/call.nvue
@@ -75,18 +75,19 @@
                // 关闭扬声器
                volumeOff: false,
                // 通话时长
-                duration: 0
+                duration: 0,
+                interval: null
            }
        },
        onLoad(e) {
            this.avatarSize = utils.rpx2px(200)
            this.targetId = e.targetId
            this.mediaType = e.mediaType
-            this.isCall = Boolean(e.isCall)
+            this.isCall = Boolean(e.isCall)
            // 进入页面开启外呼
            if (this.isCall) {
                CallLib.startSingleCall(this.targetId, this.mediaType, '');
-                if (this.mediaType == '1') {
+                if (this.mediaType == 1) {
                    const session = CallLib.getCurrentCallSession()
                    setTimeout(() => {
                        CallLib.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0, false)
@@ -107,7 +108,6 @@
            this.bigVideoStyle = {
                width: this.windowWidth + 'px',
                height: this.windowHeight + 'px',
-                // backgroundImage: `url("${this.contact(this.targetId).portraitUrl}")`
            }
            this.movableAreaStyle = {
                width: this.windowWidth + 'px',
@@ -131,8 +131,8 @@
            }
        },
        methods: {
-            afterHangup() {
-                const conversationType = IMLib.ConversationType.PRIVATE // 会话类型
+            afterHangup() {
+                clearInterval(this.interval)
                const targetId = this.targetId
                const sentStatus = 30
                const messageContent = {
@@ -144,19 +144,12 @@
                        duration: this.duration
                    })
                }
-                const sentTime = 0 // 消息的发送时间
-                IMLib.insertOutgoingMessage(conversationType, targetId, sentStatus, messageContent, sentTime,
-                    ({
-                        code,
-                        message
-                    }) => {
-                        console.log(code);
-                        // 插入消息成功
-                        if (code === 0) {
-                            console.log(message)
-                        }
-                    }
-                )
+                const sentTime = 0
+                if (this.isCall) {
+                    IMLib.insertOutgoingMessage(1, targetId, sentStatus, messageContent, sentTime)
+                } else {
+                    IMLib.insertIncomingMessage(1, targetId, targetId, sentStatus, messageContent, sentTime)
+                }
                uni.$emit('onReceiveMessage', {
                    targetId: this.targetId
                })
@@ -180,34 +173,37 @@
                // 设置链接状态
                this.connected = true
                // 视频通话，才开摄像头
-                if (this.mediaType == '1') {
+                if (this.mediaType == 1) {
                    const session = CallLib.getCurrentCallSession()
                    setTimeout(() => {
                        CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
                        CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
                    }, 200)
-                }
+                }
+                this.interval = setInterval(() => {
+                    this.duration++
+                }, 1000)
            },
            // 切换主屏显示人
            changeMine() {
-                if (this.isCall) {
-                    const session = CallLib.getCurrentCallSession()
-                    setTimeout(() => {
-                        CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
-                        CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
-                    }, 200)
-                } else {
-                    const session = CallLib.getCurrentCallSession()
-                    setTimeout(() => {
-                        CallLib.setVideoView(session.targetId, this.$refs.smallVideoView.ref, 0, true)
-                        CallLib.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0, false)
-                    }, 200)
-                }
-                this.isCall = !this.isCall
+                // if (this.isCall) {
+                //     const session = CallLib.getCurrentCallSession()
+                //     setTimeout(() => {
+                //         CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
+                //         CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
+                //     }, 200)
+                // } else {
+                //     const session = CallLib.getCurrentCallSession()
+                //     setTimeout(() => {
+                //         CallLib.setVideoView(session.targetId, this.$refs.smallVideoView.ref, 0, true)
+                //         CallLib.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0, false)
+                //     }, 200)
+                // }
+                // this.isCall = !this.isCall
            },
            hangup() {
-                this.afterHangup()
                CallLib.hangup()
+                this.afterHangup()
                this.stopRing()

                setTimeout(() => {
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -95,7 +95,7 @@
                }
            })
            // 监听收到新消息，判断是否是当前会话，更新会话内容
-            uni.$on('onReceiveMessage', (msg) => {
+            uni.$on('onReceiveMessage', (msg) => {
                if (msg.targetId == this.targetId) {
                    this.getNewMessage()
                }