优化消息发送函数，设定音视频通话的记录发送规则

pages/im/components/conversation/messagePreview.vue

@@ -7,33 +7,36 @@
             <view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
                 <text v-if="conversationType == 3">{{ user.name }}：</text>{{ msg.content || '' }}
             </view>
-            <view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
+            <view class="preview" v-else-if="msg.objectName=='RC:HQVCMsg'">
                 <text v-if="conversationType == 3">{{ user.name }}：</text>[语音]
             </view>
-            <view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
+            <view class="preview" v-else-if="msg.objectName=='RC:ImgMsg'">
                 <text v-if="conversationType == 3">{{ user.name }}：</text>[图片]
             </view>
-            <view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
+            <view class="preview" v-else-if="msg.objectName=='RC:GIFMsg'">
                 <text v-if="conversationType == 3">{{ user.name }}：</text>[表情]
             </view>
-            <view class="preview" v-if="msg.objectName=='RC:FileMsg'">
+            <view class="preview" v-else-if="msg.objectName=='RC:FileMsg'">
                 <text v-if="conversationType == 3">{{ user.name }}：</text>[文件]
             </view>
-            <view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
+            <view class="preview" v-else-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-else-if="msg.objectName=='RC:AudioMsg'">
                 <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-else-if="msg.objectName=='RC:VideoMsg'">
                 <text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
             </view>
-            <view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
+            <view class="preview" v-else-if="msg.objectName=='RC:GrpNtf'">
                 [{{ msg.message }}]
             </view>
-            <view class="preview" v-if="msg.objectName=='RC:RcNtf'">
+            <view class="preview" v-else-if="msg.objectName=='RC:RcNtf'">
                 <text v-if="conversationType == 3">{{ user.name }}：</text> 撤回了一条消息
             </view>
+            <view class="preview" v-else>
+                {{ msg.objectName }}
+            </view>
         </block>
     </view>
 </template>

pages/im/components/sent/sentPopups.vue

@@ -133,10 +133,12 @@
                     case 'location':
                         uni.chooseLocation({
                             success: (location) => {
-                                console.log(location);
+                                const thumbnail = ''
-                                im.sentLocation(this.conversationType, this.targetId, location).then(() => {
+                                // 通过 location 的经纬度，合成一张图片，再把图片的base64发送出去
-                                    this.success()
+                                im.sentLocation(this.conversationType, this.targetId, location, thumbnail)
-                                })
+                                    .then(() => {
+                                        this.success()
+                                    })
                             }
                         })
                         break;

pages/im/components/show/showAudio.vue

@@ -0,0 +1,84 @@
+<template>
+    <view class="msg--call">
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+        <view class="im--text" :class="isRemote ? 'left': 'right'">
+            <uni-icons type="phone" size="44rpx"  />
+            {{ label }}
+        </view>
+    </view>
+</template>
+
+<script>
+    import utils from '@/utils/index.js'
+    import moment from 'moment'
+    import imBase from '../../mixins/imBase.js'
+
+    export default {
+        mixins: [
+            imBase
+        ],
+        props: {
+            message: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            isGroup: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            label() {
+                return this.message.content.customFields.status == 1 ? '通话时长：' + duration : '未接通'
+            },
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            duration() {
+                if (this.message.content.customFields.duration > 3600) {
+                    return moment.utc(this.message.content.customFields.duration * 1000).format('HH:mm:ss')
+                } else {
+                    return moment.utc(this.message.content.customFields.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;
+            align-items: center;
+
+            &.left {
+                border-radius: 0 20rpx 20rpx 20rpx;
+                background: white;
+            }
+
+            &.right {
+                border-radius: 20rpx 0 20rpx 20rpx;
+                background: $main-color;
+                color: white;
+
+                .uni-icons {
+                    color: white !important;
+                }
+            }
+        }
+    }
+</style>

pages/im/components/show/showLocation.vue

@@ -7,9 +7,11 @@
             <view class="location" :class="isRemote ? 'left': 'right'" @click="showLocation">
                 <view class="location--name">
                     {{ content.customFields.name }}
+                </view>
+                <view class="location--address">
                     {{ content.customFields.address }}
                 </view>
-                <image class="map" :src="content.customFields.thumbnail" />
+                <image class="map" :src="require('@/static/imgs/map.jpeg')" mode="aspectFill" />
             </view>
         </view>
     </view>
@@ -82,10 +84,17 @@
             padding: 10rpx;
 
             .location--name {
+                font-size: 32rpx;
                 overflow: hidden;
                 word-break: break-all;
             }
             
+            .location--address {
+                padding-bottom: 10rpx;
+                font-size: 24rpx;
+                color: $text-gray-m;
+            }
+
             .map {
                 width: 400rpx;
                 height: 200rpx;

pages/im/components/show/showNormal.vue

@@ -1,11 +1,15 @@
 <template>
     <view class="">
         <show-location v-if="message.content.objectName == 'RC:LBSMsg'" :message="message" :isGroup="isGroup" />
+        <show-video v-else-if="message.content.objectName == 'RC:VideoMsg'" :message="message" :isGroup="isGroup" />
+        <show-audio v-else-if="message.content.objectName == 'RC:AudioMsg'" :message="message" :isGroup="isGroup" />
     </view>
 </template>
 
 <script>
     import showLocation from './showLocation'
+    import showAudio from './showAudio'
+    import showVideo from './showVideo'
 
     export default {
         props: {
@@ -21,7 +25,9 @@
             }
         },
         components: {
-            showLocation
+            showLocation,
+            showAudio,
+            showVideo
         }
     }
 </script>

pages/im/components/show/showVideo.vue

@@ -0,0 +1,84 @@
+<template>
+    <view class="msg--call">
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+        <view class="im--text" :class="isRemote ? 'left': 'right'">
+            <uni-icons type="videocam" size="44rpx"  />
+            {{ label }}
+        </view>
+    </view>
+</template>
+
+<script>
+    import utils from '@/utils/index.js'
+    import moment from 'moment'
+    import imBase from '../../mixins/imBase.js'
+
+    export default {
+        mixins: [
+            imBase
+        ],
+        props: {
+            message: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            isGroup: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            label() {
+                return this.message.content.customFields.status == 1 ? '通话时长：' + duration : '未接通'
+            },
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            duration() {
+                if (this.message.content.customFields.duration > 3600) {
+                    return moment.utc(this.message.content.customFields.duration * 1000).format('HH:mm:ss')
+                } else {
+                    return moment.utc(this.message.content.customFields.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;
+            align-items: center;
+
+            &.left {
+                border-radius: 0 20rpx 20rpx 20rpx;
+                background: white;
+            }
+
+            &.right {
+                border-radius: 20rpx 0 20rpx 20rpx;
+                background: $main-color;
+                color: white;
+
+                .uni-icons {
+                    color: white !important;
+                }
+            }
+        }
+    }
+</style>

pages/im/index.vue

@@ -55,6 +55,11 @@
             connectionStatus
         },
         onLoad() {
+            RongIMLib.getCurrentUserId(({
+                userId
+            }) => {
+                console.log('getCurrentUserId', userId);
+            })
             // 监听新的好友申请
             uni.$on('onNewContactConversation', () => {
                 console.log('更新好友申请数量');

pages/im/private/call.nvue

@@ -133,23 +133,7 @@
         methods: {
             afterHangup() {
                 clearInterval(this.interval)
-                const targetId = this.targetId
+                // duration: this.duration
-                const sentStatus = 30
-                const messageContent = {
-                    objectName: 'RC:InfoNtf',
-                    userInfo: this.$store.getters.sender,
-                    message: JSON.stringify({
-                        mediaType: this.mediaType,
-                        connected: this.connected,
-                        duration: this.duration
-                    })
-                }
-                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_' + this.targetId, {
                     targetId: this.targetId
                 })

utils/im/message.js

@@ -83,7 +83,7 @@ const getGroupPendinglist = (targetId, callback) => {
  */
 const sentText = (conversationType, targetId, content) => {
     return new Promise((resolve, reject) => {
-        const msg = {
+        const message = {
             conversationType: conversationType,
             targetId: String(targetId),
             content: {
@@ -93,24 +93,10 @@ const sentText = (conversationType, targetId, content) => {
             }
         }
 
-        RongIMLib.sendMessage(msg, ({
+        sendCommonMessage(message, (messageId) => {
-            code,
+            resolve(messageId)
-            messageId
+        }, (errCode) => {
-        }) => {
+            reject(errCode)
-            if (code === 0) {
-                if (conversationType == 3) {
-                    RongIMLib.sendReadReceiptRequest(messageId, (res) => {
-                        console.log('发送回执请求', res);
-                    })
-                }
-                resolve(messageId)
-            } else {
-                uni.showToast({
-                    icon: 'none',
-                    title: '发送失败' + code
-                })
-                reject(code)
-            }
         })
     })
 }
@@ -138,9 +124,7 @@ const sentVoice = (conversationType, targetId, voiceUrl, time) => {
         RongIMLib.sendMediaMessage(msg, {
             success: (messageId) => {
                 if (conversationType == 3) {
-                    RongIMLib.sendReadReceiptRequest(messageId, (res) => {
+                    RongIMLib.sendReadReceiptRequest(messageId)
-                        console.log('发送回执请求', res);
-                    })
                 }
                 resolve(messageId)
             },
@@ -171,9 +155,7 @@ const sentImage = (conversationType, targetId, imageUrl) => {
                 RongIMLib.sendMediaMessage(msg, {
                     success: (messageId) => {
                         if (conversationType == 3) {
-                            RongIMLib.sendReadReceiptRequest(messageId, (res) => {
+                            RongIMLib.sendReadReceiptRequest(messageId)
-                                console.log('发送回执请求', res);
-                            })
                         }
                         resolve(messageId)
                     },
@@ -203,9 +185,7 @@ const sentFile = (conversationType, targetId, fileUrl) => {
         RongIMLib.sendMediaMessage(msg, {
             success: (messageId) => {
                 if (conversationType == 3) {
-                    RongIMLib.sendReadReceiptRequest(messageId, (res) => {
+                    RongIMLib.sendReadReceiptRequest(messageId)
-                        console.log('发送回执请求', res);
-                    })
                 }
                 resolve(messageId)
             },
@@ -219,12 +199,11 @@ const sentFile = (conversationType, targetId, fileUrl) => {
 }
 
 // 发送地理位置
-const sentLocation = (conversationType, targetId, location) => {
+const sentLocation = (conversationType, targetId, location, thumbnail) => {
     return new Promise((resolve, reject) => {
-        const msg = {
+        const message = {
             conversationType: conversationType,
             targetId: String(targetId),
-            objectName: 'RC:LBSMsg',
             content: {
                 customType: 2,
                 objectName: 'RC:LBSMsg',
@@ -233,34 +212,98 @@ const sentLocation = (conversationType, targetId, location) => {
                     address: location.address,
                     latitude: Number(location.latitude),
                     longitude: Number(location.longitude),
-                    thumbnail: ''
+                    thumbnail: thumbnail
                 },
                 userInfo: store.getters.sender,
             }
         }
 
-        RongIMLib.sendMessage(msg, ({
+        sendCommonMessage(message, (messageId) => {
-            code,
+            resolve(messageId)
-            messageId
+        }, (errCode) => {
-        }) => {
+            reject(errCode)
-            if (code === 0) {
-                if (conversationType == 3) {
-                    RongIMLib.sendReadReceiptRequest(messageId, (res) => {
-                        console.log('发送回执请求', res);
-                    })
-                }
-                resolve(messageId)
-            } else {
-                uni.showToast({
-                    icon: 'none',
-                    title: '发送失败' + code
-                })
-                reject(code)
-            }
         })
     })
 }
 
+/**
+ * 发送视频通话结果
+ */
+const sentVideo = (conversationType, targetId, status, time) => {
+    return new Promise((resolve, reject) => {
+        const message = {
+            conversationType: conversationType,
+            targetId: String(targetId),
+            content: {
+                customType: 2,
+                objectName: 'RC:VideoMsg',
+                customFields: {
+                    status: status,
+                    duration: time
+                },
+                userInfo: store.getters.sender,
+            }
+        }
+
+        sendCommonMessage(message, (messageId) => {
+            resolve(messageId)
+        }, (errCode) => {
+            reject(errCode)
+        })
+    })
+}
+
+/**
+ * 发送语音通话结果
+ */
+const sentAudio = (conversationType, targetId, status, time) => {
+    return new Promise((resolve, reject) => {
+        const message = {
+            conversationType: conversationType,
+            targetId: String(targetId),
+            content: {
+                customType: 2,
+                objectName: 'RC:AudioMsg',
+                customFields: {
+                    status: status,
+                    duration: time
+                },
+                userInfo: store.getters.sender,
+            }
+        }
+
+        sendCommonMessage(message, (messageId) => {
+            resolve(messageId)
+        }, (errCode) => {
+            reject(errCode)
+        })
+    })
+}
+
+/**
+ * 发送普通消息
+ */
+const sendCommonMessage = (message, success, fail) => {
+    RongIMLib.sendMessage(message, ({
+        code,
+        messageId
+    }) => {
+        if (code === 0) {
+            if (message.conversationType == 3) {
+                RongIMLib.sendReadReceiptRequest(messageId)
+            }
+
+            success(messageId)
+        } else {
+            uni.showToast({
+                icon: 'none',
+                title: '发送失败' + code
+            })
+            fail(code)
+        }
+    })
+}
+
 export default {
     getMessageList,
     getPendingList,
@@ -269,5 +312,7 @@ export default {
     sentVoice,
     sentImage,
     sentFile,
-    sentLocation
+    sentLocation,
+    sentVideo,
+    sentAudio
 }