diff --git a/App.vue b/App.vue
index 0aaec26..6445058 100644
--- a/App.vue
+++ b/App.vue
@@ -7,12 +7,12 @@
     export default {
         onLaunch: function() {
             im.initIm('lmxuhwaglu76d')
-            // return
+            return
             //#ifdef APP-PLUS
             // 获取系统版本号
             getVersions({
                 platform: plus.os.name,
-                version: plus.runtime.versionCode
+                version: plus.runtime.version
             }).then(res => {
                 if (res.update) {
                     uni.showModal({
diff --git a/manifest.json b/manifest.json
index 165af56..600220b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,8 +2,8 @@
     "name" : "ZH-HEALTH",
     "appid" : "__UNI__C29473D",
     "description" : "ZH-HEALTH，您手上的健康管理专家",
-    "versionName" : "1.0.2",
-    "versionCode" : 112,
+    "versionName" : "1.0.15",
+    "versionCode" : 113,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {
diff --git a/pages/im/components/friendApplyCell.vue b/pages/im/components/friendApplyCell.vue
index 74ecf13..65b89f6 100644
--- a/pages/im/components/friendApplyCell.vue
+++ b/pages/im/components/friendApplyCell.vue
@@ -35,7 +35,7 @@
         },
         methods: {
             resolve() {
-                resolveFriend(this.message.sourceUserId).then(res => {
+                resolveFriend(this.message.sourceUserId).then(res => {
                     this.clearMessages()
                     uni.showToast({
                         icon: 'none',
@@ -69,8 +69,10 @@
             // 不管是通过还是拒绝，都要把相关的信息清理
             clearMessages() {
                 RongIMLib.deleteMessages(RongIMLib.ConversationType.SYSTEM, this.message.sourceUserId)
-                this.$emit('success')
-                uni.$emit('onContactNotification')
+                this.$emit('success')
+                uni.$emit('onNewContactConversation', message)
+                uni.$emit('onNewContactFriends', message)
+                uni.$emit('onNewContactPendings', message)
             }
         }
     }
diff --git a/pages/im/components/groupUserList.vue b/pages/im/components/groupUserList.vue
index 112a4d0..3f95dfe 100644
--- a/pages/im/components/groupUserList.vue
+++ b/pages/im/components/groupUserList.vue
@@ -54,8 +54,8 @@
             return {
                 users: [],
                 isOwner: false,
-                isAdmin: false,
-                canInvite:false,//  是否可以开启邀请
+                isAdmin: false,
+                canInvite: false, //  是否可以开启邀请
                 adminUid: 0,
                 members: 0,
                 actionShow: false,
@@ -82,8 +82,7 @@
         },
         mounted() {
             this.initGroupInfo()
-            getGroupUsers(this.targetId, this.count).then(res => {
-                console.log("res..",res)
+            getGroupUsers(this.targetId, this.count).then(res => {
                 this.users = res
                 res.map(item => {
                     this.$store.dispatch('updateContact', item)
@@ -96,7 +95,7 @@
                     this.isOwner = res.is_owner
                     this.isAdmin = res.is_admin
                     this.adminUid = res.user_id
-                    this.members = res.members
+                    this.members = res.members
                     this.canInvite = res.can_invite
                 })
             },
diff --git a/pages/im/components/messageCell.vue b/pages/im/components/messageCell.vue
index df717cb..87ec20e 100644
--- a/pages/im/components/messageCell.vue
+++ b/pages/im/components/messageCell.vue
@@ -6,8 +6,10 @@
         </view>
         <view class="content">
             <view class="header">
-                <view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3"
-                        class='qun'>[群]</text></view>
+                <view class="name">
+                    {{ contact(item.targetId).name }}
+                    <text v-if="item.conversationType === 3" class='group'>[群]</text>
+                </view>
                 <view class="time">{{ item.sentTime|timeCustomCN }}</view>
             </view>
             <message-preview class="preview" :msg="item.latestMessage" :draft="item.draft"
@@ -80,10 +82,8 @@
                 .name {
                     font-size: $title-size + 2;
                     color: #454545;
-                    display: flex;
-                    align-items: center;
 
-                    .qun {
+                    .group {
                         color: $main-color;
                         font-size: $title-size-m - 4;
                         margin-left: 4px;
diff --git a/pages/im/components/sentVoice.vue b/pages/im/components/sentVoice.vue
index ae7a66d..a7b4abb 100644
--- a/pages/im/components/sentVoice.vue
+++ b/pages/im/components/sentVoice.vue
@@ -1,12 +1,14 @@
 <template>
     <view class="send--voice">
-        <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
+        <view class="voice" hover-class="chat-hover" @click="onShowLay">
             <text class="button">按住说话</text>
-        </view>
-        <!-- 录音中提示 -->
-        <view class="modal" v-if="showRecordTip">
-            <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
-            <text class="text">录音中 {{recordTime}} s</text>
+        </view>
+        <!-- 录音中提示 -->
+        <view class="voice--lay" v-if="showRecordTip" @touchstart="startRecord" @touchend="stopRecord">
+            <view class="modal">
+                <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
+                <text class="text">录音中 {{recordTime}} s</text>
+            </view>
         </view>
     </view>
 </template>
@@ -40,16 +42,24 @@
                 return this.$store.getters.sender
             }
         },
-        created() {
+        created() {
             this.recorderManager = uni.getRecorderManager()
         },
-        methods: {
+        methods: {
+            onShowLay(){
+                // this.showRecordTip = true
+                uni.vibrateShort({
+                    complete: com => {
+                        console.log(com)
+                    }
+                })
+            },
             // 检查安卓录制权限
             async getAndroidPermission() {
                 return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
             },
             // 录制语音消息
-            startRecord() {
+            startRecord() {
                 this.getAndroidPermission().then(code => {
                     switch (code) {
                         case 1:
@@ -114,6 +124,15 @@
                 font-size: 30rpx;
                 color: #333;
             }
+        }
+        
+        .voice--lay{
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background: rgba($color: #000000, $alpha: .2);
+            height: 100vh;
+            width: 100vw;
         }
 
         .modal {
diff --git a/pages/im/components/show/messageState.vue b/pages/im/components/show/messageState.vue
new file mode 100644
index 0000000..0d9b6aa
--- /dev/null
+++ b/pages/im/components/show/messageState.vue
@@ -0,0 +1,81 @@
+<template>
+    <view v-if="!isRemote">
+        <view class="state" v-if="isGroup">
+            <!-- 已发送 -->
+            <u-icon name="checkbox-mark" :size="iconSize" class="sent"
+                :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
+            <!-- 已阅读 -->
+            <text class="readers">{{ readers }}</text>
+        </view>
+        <view class="state" v-else>
+            <!-- 已发送 -->
+            <u-icon name="checkbox-mark" :size="iconSize" class="sent"
+                :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
+            <!-- 已阅读 -->
+            <u-icon name="checkbox-mark" :size="iconSize" class="receive"
+                :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
+        </view>
+    </view>
+</template>
+
+<script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import utils from '@/utils/index.js'
+
+    export default {
+        name: 'showText',
+        props: {
+            message: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            isGroup: {
+                type: Boolean,
+                default: false
+            },
+            isRemote: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            iconSize() {
+                return utils.rpx2px(28)
+            },
+            readers() {
+                if (this.message.extra) {
+                    return JSON.parse(this.message.extra).readers || 0
+                }
+                
+                return 0
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .state {
+        padding: 10rpx;
+        border-radius: 30rpx;
+        background-color: #ddd;
+        display: flex;
+        margin-right: 10rpx;
+
+        .sent {
+            z-index: 2;
+        }
+
+        .receive {
+            z-index: 1;
+            margin-left: -20rpx;
+        }
+
+        .readers {
+            font-size: 20rpx;
+            margin-left: -6rpx;
+            color: $text-gray-m;
+        }
+    }
+</style>
diff --git a/pages/im/components/show/showCall.vue b/pages/im/components/show/showCall.vue
index 7f08570..8e6f592 100644
--- a/pages/im/components/show/showCall.vue
+++ b/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>
diff --git a/pages/im/components/show/showImage.vue b/pages/im/components/show/showImage.vue
index 7654eb6..ca752d6 100644
--- a/pages/im/components/show/showImage.vue
+++ b/pages/im/components/show/showImage.vue
@@ -1,110 +1,106 @@
-<template>
-    <view class="">
-        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view class="msg--image" :class="isRemote ? 'left': 'right'">
-            <image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
-        </view>
-    </view>
-</template>
-
-<script>
-    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
-
-    export default {
-        name: 'showImage',
-        props: {
-            message: {
-                type: Object,
-                default: () => {
-                    return {}
-                }
-            },
-            isGroup: {
-                type: Boolean,
-                default: false
-            }
-        },
-        computed: {
-            isRemote() {
-                return this.message.messageDirection == 2
-            },
-            content() {
-                return this.message.content
-            },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            }
-        },
+<template>
+    <view class="msg--image">
+        <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
+
+        <view class="">
+            <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+            <view class="image" :class="isRemote ? 'left': 'right'">
+                <image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import messageState from './messageState'
+
+    export default {
+        name: 'showImage',
+        props: {
+            message: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            isGroup: {
+                type: Boolean,
+                default: false
+            }
+        },
+        components: {
+            messageState
+        },
+        computed: {
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            content() {
+                return this.message.content
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
         methods: {
+            showImage(path) {
+                uni.previewImage({
+                    urls: [
+                        path
+                    ]
+                })
+            },
             previewImage() {
-                if (this.content.local) {
-                    uni.previewImage({
-                        urls: [
-                            this.content.local
-                        ],
-                        success: (e) => {
-                            console.log(e);
-                        },
-                        fail: (er) => {
-                            console.log(er);
-                        }
-                    })
-                } else {
-                    RongIMLib.downloadMediaMessage(this.messageId, {
-                        success: (path) => {
-                            this.content.local = path
-                            uni.previewImage({
-                                urls: [
-                                    path
-                                ],
-                                success: (e) => {
-                                    console.log(e);
-                                },
-                                fail: (er) => {
-                                    console.log(er);
-                                }
-                            })
-                        },
-                        progress: (progress, messageId) => {
-                            console.log('progress', progress);
-                        },
-                        cancel: (messageId) => {
-                            console.log('cancel', messageId);
-                        },
+                if (this.content.local && this.content.local.indexOf('///data/user/') < 0) {
+                    this.showImage(this.content.local)
+                } else {
+                    RongIMLib.downloadMediaMessage(this.message.messageId, {
+                        success: (path) => {
+                            this.content.local = path
+                            this.showImage(path)
+                        },
                         error: (errorCode, messageId) => {
-                            console.log('errorCode', errorCode);
-                        }
-                    })
-                }
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    .name {
-        font-size: 24rpx;
-        color: $text-gray-m;
-    }
-
-    .msg--image {
-        .img {
-            width: 180rpx;
-        }
-
-        &.left {
-            .img {
-                border-radius: 0 10rpx 10rpx 10rpx;
-            }
-        }
-
-        &.right {
-            .img {
-                border-radius: 10rpx 0 10rpx 10rpx;
-            }
-        }
-
-    }
+                            uni.showToast({
+                                icon: 'none',
+                                title: errorCode
+                            })
+                        }
+                    })
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .msg--image {
+        display: flex;
+        align-items: flex-end;
+
+        .name {
+            font-size: 24rpx;
+            color: $text-gray-m;
+        }
+
+        .image {
+            .img {
+                width: 180rpx;
+            }
+
+            &.left {
+                .img {
+                    border-radius: 0 10rpx 10rpx 10rpx;
+                }
+            }
+
+            &.right {
+                .img {
+                    border-radius: 10rpx 0 10rpx 10rpx;
+                }
+            }
+        }
+    }
 </style>
diff --git a/pages/im/components/show/showText.vue b/pages/im/components/show/showText.vue
index f9a4927..768fefb 100644
--- a/pages/im/components/show/showText.vue
+++ b/pages/im/components/show/showText.vue
@@ -1,20 +1,16 @@
 <template>
     <view class="msg--text">
-        <view class="state" v-if="!isGroup && !isRemote">
-            <!-- 已发送 -->
-            <u-icon name="checkbox-mark" class="sent" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
-            <!-- 已阅读 -->
-            <u-icon name="checkbox-mark" class="receive" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
-        </view>
+        <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
+
         <view class="">
             <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-            <view @longpress="backMessage" :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
+            <view :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
         </view>
     </view>
 </template>
 
 <script>
-    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import messageState from './messageState'
 
     export default {
         name: 'showText',
@@ -30,6 +26,9 @@
                 default: false
             }
         },
+        components: {
+            messageState
+        },
         computed: {
             isRemote() {
                 return this.message.messageDirection == 2
@@ -42,42 +41,6 @@
                     return this.$store.getters.contactInfo(targetId)
                 }
             }
-        },
-        methods: {
-            // 撤回消息测试
-            backMessage() {
-                if (this.$store.getters.sender.userId != this.message.senderUserId) {
-                    uni.showToast({
-                        icon: 'none',
-                        title: '不能撤回别人的消息'
-                    })
-                    return
-                }
-                // 判断时间超过了多久 就不能撤回 TODO
-                // this.message.sentTime
-                const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
-                RongIMLib.recallMessage(this.message.messageId, pushContent,
-                    ({
-                        code,
-                        message
-                    }) => {
-                        if (code === 0) {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '消息撤回成功'
-                            })
-                            RongIMLib.getMessage(this.message.messageId, res => {
-                                uni.$emit('onRecallMessage', res.message)
-                            })
-                        } else {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '撤回失败' + code
-                            })
-                        }
-                    }
-                )
-            }
         }
     }
 </script>
@@ -87,24 +50,6 @@
         display: flex;
         align-items: flex-end;
 
-        .state {
-            padding: 10rpx;
-            border-radius: 30rpx;
-            width: 40rpx;
-            background-color: #ddd;
-            display: flex;
-            margin-right: 10rpx;
-
-            .sent {
-                z-index: 2;
-            }
-
-            .receive {
-                z-index: 1;
-                margin-left: -20rpx;
-            }
-        }
-
         .name {
             font-size: 24rpx;
             color: $text-gray-m;
diff --git a/pages/im/components/show/showVoice.vue b/pages/im/components/show/showVoice.vue
index 7f6fafc..b1a1240 100644
--- a/pages/im/components/show/showVoice.vue
+++ b/pages/im/components/show/showVoice.vue
@@ -1,22 +1,30 @@
 <template>
-    <view class="">
-        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view class="msg--voice">
-            <view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}" @click="startPlay">
-                <image v-if="isRemote" class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-                <image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }" src="@/static/icon/audio_white.png" mode="widthFix"></image>
-                <text class="duration">{{ duration }}"</text>
+    <view class="msg--voice">
+        <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
+
+        <view class="">
+            <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+            <view class="msg-voice">
+                <view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}"
+                    @click="startPlay">
+                    <image v-if="isRemote" class="icon"
+                        :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
+                        src="@/static/icon/audio_green.png" mode="widthFix"></image>
+                    <image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
+                        src="@/static/icon/audio_white.png" mode="widthFix"></image>
+                    <text class="duration">{{ duration }}"</text>
+                </view>
+                <u-badge isDot :show="message.content.local =='' && isRemote" />
             </view>
-            <u-badge isDot :show="message.content.local =='' && isRemote" />
         </view>
     </view>
 </template>
 
 <script>
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import messageState from './messageState'
 
     export default {
-        name: 'showVoice',
         props: {
             message: {
                 type: Object,
@@ -27,13 +35,16 @@
             isGroup: {
                 type: Boolean,
                 default: false
-            }
+            }
+        },
+        components: {
+            messageState
         },
         data() {
             return {
                 onPlay: false,
-                innerAC: null,
-                msgId  : null
+                innerAC: null,
+                msgId: null
             }
         },
         computed: {
@@ -47,13 +58,13 @@
                 return function(targetId) {
                     return this.$store.getters.contactInfo(targetId)
                 }
-            },
-            width() {
-                if (this.duration > 3) {
-                    return (this.duration * 5) + 150
-                } else {
-                    return 120
-                }
+            },
+            width() {
+                if (this.duration > 3) {
+                    return (this.duration * 5) + 150
+                } else {
+                    return 120
+                }
             }
         },
         mounted() {
@@ -63,12 +74,7 @@
                     this.stopPlay()
                 }
             })
-        },
-        
-        created() {
-            console.log(this.message.messageId)
-        },
-        
+        },
         methods: {
             // 播放语音消息
             startPlay() {
@@ -77,8 +83,9 @@
                     this.stopPlay()
                     return
                 }
+                this.onPlay = true
                 // 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
-                if (this.message.content.local) {
+                if (this.message.content.local && this.message.content.local.indexOf('///data/user/') < 0) {
                     this.playVoice(this.message.content.local)
                 } else {
                     RongIMLib.downloadMediaMessage(this.message.messageId, {
@@ -88,27 +95,27 @@
                         },
                         progress: (progress, messageId) => {},
                         cancel: (messageId) => {},
-                        error: (errorCode, messageId) => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '语音播放失败'
-                            })
+                        error: (errorCode, messageId) => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '语音播放失败'
+                            })
                         }
                     })
                 }
             },
-            playVoice(path) {
+            playVoice(path) {
                 console.log('准备播放', this.message.content);
                 this.innerAC = uni.createInnerAudioContext()
                 this.innerAC.src = path
-                this.innerAC.autoplay = false
-                this.msgId = this.message.messageId
-                this.innerAC.onCanplay(res => {
+                this.innerAC.autoplay = false
+                this.msgId = this.message.messageId
+                this.innerAC.onCanplay(res => {
+                    console.log('onCanplay')
                     this.innerAC.play()
-                })
-                
-                this.innerAC.onPlay(res => {
-                    this.onPlay = true
+                })
+                this.innerAC.onPlay(res => {
+                    console.log('onPlay')
                     uni.$emit('onVoiceMessagePlay', this.message.messageId)
                 })
                 this.innerAC.onEnded(res => {
@@ -117,11 +124,11 @@
                 this.innerAC.onStop(() => {
                     this.onPlay = false
                     this.innerAC.destroy()
-                    this.innerAC = null
-                    this.msgId   = null
+                    this.innerAC = null
+                    this.msgId = null
                     uni.$emit('onVoiceMessageStop', this.message.messageId)
                 })
-                this.innerAC.onError(err => {
+                this.innerAC.onError(err => {
                     uni.showToast({
                         icon: 'none',
                         title: '语音播放失败'
@@ -129,87 +136,111 @@
                 })
             },
             stopPlay() {
-                // 停止播放语音消息
                 if (this.innerAC) {
                     this.innerAC.stop()
                 }
             }
         }
     }
-</script>
-
-<style>
-    @keyframes playFlicker{
-        0%{
-            opacity: 1;
-        }
-        50%{
-            opacity: .5;
-        }
-        100%{
-            opacity: 1;
-        }
-    }
-    
-    .videoFlicker{
-        animation: playFlicker 1s infinite;
-    }
+</script>
+
+<style>
+    @keyframes playFlicker {
+        0% {
+            opacity: 1;
+        }
+
+        50% {
+            opacity: .5;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .videoFlicker {
+        animation: playFlicker 1s infinite;
+    }
 </style>
 
 <style scoped lang="scss">
-    .name {
-        font-size: 24rpx;
-        color: $text-gray-m;
-    }
-
     .msg--voice {
         display: flex;
-        align-items: center;
+        align-items: flex-end;
 
-        .u-badge {
-            margin-left: 20rpx;
+        .state {
+            padding: 10rpx;
+            border-radius: 30rpx;
+            width: 40rpx;
+            background-color: #ddd;
+            display: flex;
+            margin-right: 10rpx;
+
+            .sent {
+                z-index: 2;
+            }
+
+            .receive {
+                z-index: 1;
+                margin-left: -20rpx;
+            }
         }
 
-        .voice {
+        .name {
+            font-size: 24rpx;
+            color: $text-gray-m;
+        }
+
+        .msg-voice {
             display: flex;
-            flex-direction: row;
-            justify-content: space-between;
             align-items: center;
-            height: 84rpx;
-            padding: 0 30rpx;
-            box-sizing: border-box;
 
-            .icon {
-                width: 38rpx;
-                height: 38rpx;
+            .u-badge {
+                margin-left: 20rpx;
             }
 
-            &.left {
-                border-radius: 0 20rpx 20rpx 20rpx;
-                background: white;
+            .voice {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                height: 84rpx;
+                padding: 0 30rpx;
+                box-sizing: border-box;
 
-                &.onPlay {
-                    background-color: #EEEEEE;
+                .icon {
+                    width: 38rpx;
+                    height: 38rpx;
                 }
 
-                .duration {
-                    color: #333;
-                    font-size: 30rpx;
-                }
-            }
+                &.left {
+                    border-radius: 0 20rpx 20rpx 20rpx;
+                    background: white;
 
-            &.right {
-                border-radius: 20rpx 0 20rpx 20rpx;
-                background: $main-color;
-                flex-direction: row-reverse;
+                    &.onPlay {
+                        background-color: #EEEEEE;
+                    }
 
-                &.onPlay {
-                    background-color: darken($main-color, 10);
+                    .duration {
+                        color: #333;
+                        font-size: 30rpx;
+                    }
                 }
 
-                .duration {
-                    color: white;
-                    font-size: 30rpx;
+                &.right {
+                    border-radius: 20rpx 0 20rpx 20rpx;
+                    background: $main-color;
+                    flex-direction: row-reverse;
+
+                    &.onPlay {
+                        background-color: darken($main-color, 10);
+                    }
+
+                    .duration {
+                        color: white;
+                        font-size: 30rpx;
+                    }
                 }
             }
         }
diff --git a/pages/im/components/showMessageCell.vue b/pages/im/components/showMessageCell.vue
index 95c06f9..ec41398 100644
--- a/pages/im/components/showMessageCell.vue
+++ b/pages/im/components/showMessageCell.vue
@@ -7,7 +7,7 @@
         <view v-else :class="['cell-item', message.messageDirection == 1 ? 'right' : 'left']">
             <u-avatar class="avatar" @click="toUser(message)" :size="avatarSize" shape="square"
                 :src="contact(message.senderUserId).portraitUrl" />
-            <view class="msg">
+            <view class="msg" @longpress="backMessage">
                 <show-text v-if="message.objectName === 'RC:TxtMsg'" :message="message" :isGroup="isGroup" />
                 <show-voice v-else-if="message.objectName === 'RC:HQVCMsg'" :message="message" :isGroup="isGroup" />
                 <show-image v-else-if="message.objectName === 'RC:ImgMsg'" :message="message" :isGroup="isGroup" />
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+    import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import showVoice from './show/showVoice'
     import showImage from './show/showImage'
     import showText from './show/showText'
@@ -73,6 +74,40 @@
                         url: '/pages/im/friends/info?targetId=' + item.senderUserId
                     })
                 }
+            },
+            // 撤回消息测试
+            backMessage() {
+                if (this.$store.getters.sender.userId != this.message.senderUserId) {
+                    uni.showToast({
+                        icon: 'none',
+                        title: '不能撤回别人的消息'
+                    })
+                    return
+                }
+                // 判断时间超过了多久 就不能撤回 TODO
+                // this.message.sentTime
+                const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
+                IMLib.recallMessage(this.message.messageId, pushContent,
+                    ({
+                        code,
+                        message
+                    }) => {
+                        if (code === 0) {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '消息撤回成功'
+                            })
+                            IMLib.getMessage(this.message.messageId, res => {
+                                uni.$emit('onRecallMessage', res.message)
+                            })
+                        } else {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '撤回失败' + code
+                            })
+                        }
+                    }
+                )
             }
         }
     }
diff --git a/pages/im/friends/index.vue b/pages/im/friends/index.vue
index ec32d5a..7179b89 100644
--- a/pages/im/friends/index.vue
+++ b/pages/im/friends/index.vue
@@ -2,40 +2,33 @@
     <view>
         <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
             <view class="friend-flex" @click="toPending">
-                <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
+                <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')" />
                 <u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
                 <view class="info">新的朋友</view>
             </view>
             <view class="friend-flex" @click="toGroup">
-                <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
+                <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')" />
                 <view class="info">我的群聊</view>
             </view>
-            <block v-if="friends.length > 0">
+            <block v-if="friends.length > 0">   
                 <u-index-item v-for="(item, fkey) in friends" :key="fkey">
-                    <u-index-anchor :text="indexs[fkey]" bgColor="#f9f9f9" height="20" size="12" color="#666"
-                        class="anchor" />
-                    <view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
-                        @click="toFriend(friendItem.targetId)">
-                        <u-avatar class="avatar-img" size="40" shape="square"
-                            :src="contact(friendItem.targetId).portraitUrl" />
-                        <view class="info">
-                            <view class="name">{{ contact(friendItem.targetId).name }}</view>
-                            <!-- <view class="address">地址:{{ friendItem.address }}</view> -->
-                        </view>
+                    <u-index-anchor :text="indexs[fkey]" bgColor="#f9f9f9" height="20" size="12" color="#666" class="anchor" />
+                    <view v-for="(friendItem, index) in item" :key="index" class="friend-flex" @click="toFriend(friendItem.targetId)">
+                        <u-avatar class="avatar-img" size="40" shape="square" :src="contact(friendItem.targetId).portraitUrl" />
+                        <view class="info"> <view class="name">{{ contact(friendItem.targetId).name }}</view> </view>
                     </view>
                 </u-index-item>
             </block>
-            <block v-else>
-                <u-empty class="pages-null" mode="data" text="暂无好友" />
-            </block>
+            <view class="no-lists" v-else>
+                <u-image class="cover" radius="4" width="400rpx" height="400rpx" :src=" require('@/static/imgs/no-friend.png')" :lazy-load="true" />
+                <span>暂无好友列表~</span>
+            </view>
         </u-index-list>
     </view>
 </template>
 
 <script>
-    import {
-        getFriendsLetter
-    } from '@/apis/interfaces/im';
+    import {getFriendsLetter} from '@/apis/interfaces/im';
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
 
@@ -54,16 +47,20 @@
                 }
             }
         },
-        onLoad() {
+        onShow() {
             this.getFriendList()
             this.checkNewFriendPending()
             uni.$on('onContactNotification', this.checkNewFriendPending)
+        },
+        onUnload() {
+            uni.$off("onContactNotification")
         },
         methods: {
             getFriendList() {
-                getFriendsLetter().then(res => {
+                getFriendsLetter().then(res => {
+                    console.log(res)
                     this.indexs = res.indexList
-                    this.friends = res.itemArr
+                    this.friends = res.itemArr
                 })
             },
             checkNewFriendPending() {
@@ -86,18 +83,9 @@
             },
             // 新朋友
             toPending() {
-                // if (this.pendingCount > 0) {
                 uni.navigateTo({
                     url: '/pages/im/friends/pending'
                 });
-                // } else {
-                //     uni.showToast({
-                //         title: ` 暂无好友申请 ~ `,
-                //         icon: "none",
-                //         mask: true,
-                //         duration: 3000
-                //     })
-                // }
             }
         },
         onNavigationBarButtonTap(e) {
@@ -171,5 +159,19 @@
         font-size: 14px;
         line-height: 24px;
         background-color: #fff;
+    }
+    .no-lists {
+        padding-top: $padding * 3;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        font-size: $title-size-m;
+        color: $text-gray-m;
+    
+        span {
+            padding-top: $padding;
+        }
     }
 </style>
diff --git a/pages/im/friends/info.vue b/pages/im/friends/info.vue
index d1bec3d..328d6d2 100644
--- a/pages/im/friends/info.vue
+++ b/pages/im/friends/info.vue
@@ -113,7 +113,6 @@
         onLoad(e) {
             this.targetId = e.targetId
             getFriendInfo(e.targetId).then(res => {
-                console.log(res, "获取朋友的信息")
                 this.userInfo = res
                 // 获取到用户信息之后，去检查一下要不要更新
                 this.$store.dispatch('updateContact', res)
@@ -148,7 +147,7 @@
                 })
             },
             toPrivate() {
-                uni.redirectTo({
+                uni.navigateTo({
                     url: '/pages/im/private/chat?targetId=' + this.targetId
                 });
             },
@@ -209,7 +208,7 @@
                     })
                     return
                 }
-                pedingFriend(this.targetId, 'message').then(res => {
+                pedingFriend(this.targetId, '').then(res => {
                         uni.showToast({
                             title: `  申请成功,等待审核  `,
                             icon: 'none',
@@ -228,8 +227,9 @@
                     })
             },
             singleCall(e) {
-                uni.redirectTo({
-                    url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type + '&isCall=true'
+                uni.navigateTo({
+                    url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type +
+                        '&isCall=true'
                 })
             }
         }
diff --git a/pages/im/friends/pending.vue b/pages/im/friends/pending.vue
index e0d2212..57480ff 100644
--- a/pages/im/friends/pending.vue
+++ b/pages/im/friends/pending.vue
@@ -6,8 +6,15 @@
                     :disabled="true" :show-action="false" />
             </view>
         </u-sticky>
-        <view v-for="(item, index) in pendings" :key="index">
-            <apply-cell :message="item.latestMessage" @success="getPendingList" />
+        <block v-if="pendings.length > 0">
+            <view v-for="(item, index) in pendings" :key="index">
+                <apply-cell :message="item.latestMessage" @success="getPendingList" />
+            </view>
+        </block>
+        <view class="no-lists" v-else>
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
+                :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
+            <span> 暂无好友申请 ~ </span>
         </view>
     </view>
 </template>
@@ -15,23 +22,33 @@
 <script>
     import applyCell from '../components/friendApplyCell'
     import im from '@/utils/im/index.js'
-
+
     export default {
         components: {
             applyCell
         },
         data() {
             return {
-                pendings: []
+                pendings: [],
+                bg: '#fff'
             }
         },
-        onLoad() {
+        onShow() {
             this.getPendingList()
-            uni.$on('onContactNotification', this.getPendingList)
+            uni.$on('onNewContactPendings', this.getPendingList)
+        },
+        onUnload() {
+            uni.$off('onNewContactPendings')
         },
         methods: {
-            getPendingList() {
-                im.getPendingList((pendings) => {
+            getPendingList() {
+                im.getPendingList((pendings) => {
+                    console.log(pendings,'res......')
+                    if (pendings.length > 0) {
+                        this.bg = '#f9f9f9'
+                    } else {
+                        this.bg = '#fff'
+                    }
                     this.pendings = pendings
                 })
             }
@@ -45,18 +62,18 @@
         background: $window-color;
     }
 
-    .no-lists {
-        padding-top: $padding * 3;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        font-size: $title-size-m;
-        color: $text-gray-m;
-
-        span {
-            padding-top: $padding;
-        }
+    .no-lists {
+        padding-top: $padding * 5;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        font-size: $title-size-m;
+        color: $text-gray-m;
+    
+        span {
+            padding-top: $padding;
+        }
     }
 </style>
diff --git a/pages/im/group/announceCreate.vue b/pages/im/group/announceCreate.vue
index 783810a..fd05ae4 100644
--- a/pages/im/group/announceCreate.vue
+++ b/pages/im/group/announceCreate.vue
@@ -16,8 +16,12 @@
         createGroupAnnouncement,
         getGroupAnnouncement
     } from '@/apis/interfaces/im.js'
+    import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
 
     export default {
+        mixins: [
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
diff --git a/pages/im/group/announcement.vue b/pages/im/group/announcement.vue
index adceb9d..d45e9ac 100644
--- a/pages/im/group/announcement.vue
+++ b/pages/im/group/announcement.vue
@@ -35,8 +35,12 @@
         deleteGroupAnnouncement,
         topGroupAnnouncement
     } from '@/apis/interfaces/im.js'
+    import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
 
     export default {
+        mixins: [
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
@@ -54,8 +58,8 @@
                     name: '置顶该公告',
                     disabled: false
                 }],
-                actionTitle: '请选择操作',
-                bg:'#fff'
+                actionTitle: '请选择操作',
+                bg: '#fff'
             }
         },
         onLoad(e) {
@@ -84,11 +88,11 @@
         methods: {
             // 获取公告信息
             initData() {
-                getGroupAnnouncements(this.targetId).then(res => {
-                    if(res.length>0){
-                        this.bg = '#f9f9f9'
-                    }else{
-                        this.bg = '#fff'
+                getGroupAnnouncements(this.targetId).then(res => {
+                    if (res.length > 0) {
+                        this.bg = '#f9f9f9'
+                    } else {
+                        this.bg = '#fff'
                     }
                     this.announcements = res
                     this.loading = false
@@ -183,8 +187,8 @@
         .item {
             background-color: #fff;
             padding: $padding $padding + 10 10rpx $padding + 10;
-            border-bottom: $padding solid #f9f9f9;
-            
+            border-bottom: $padding solid #f9f9f9;
+
 
             .user {
                 display: flex;
@@ -193,7 +197,7 @@
                 align-items: center;
                 box-sizing: border-box;
                 font-size: $title-size-m;
-                color: $text-gray-m;
+                color: $text-gray-m;
                 padding: 10rpx;
 
                 .name {
@@ -214,8 +218,8 @@
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 3;
                 overflow: hidden;
-                line-height: 1.5;
-                border-bottom: solid 1rpx  #F9F9F9;
+                line-height: 1.5;
+                border-bottom: solid 1rpx #F9F9F9;
                 padding-bottom: 20rpx;
 
                 span {
diff --git a/pages/im/group/apply.vue b/pages/im/group/apply.vue
index 15ee523..b288b4f 100644
--- a/pages/im/group/apply.vue
+++ b/pages/im/group/apply.vue
@@ -20,8 +20,12 @@
         joinGroupPre,
         joinGroup
     } from '@/apis/interfaces/im.js'
-
-    export default {
+    import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
+    
+    export default {
+        mixins: [
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
@@ -45,7 +49,7 @@
                     mask: true,
                     duration: 3000
                 })
-            })
+            })
         },
         methods: {
             toGroupChat() {
diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index d351473..1fb05ce 100644
--- a/pages/im/group/chat.vue
+++ b/pages/im/group/chat.vue
@@ -21,8 +21,12 @@
     import sentMessageBar from '../components/sentMessageBar'
     import showMessageCell from '../components/showMessageCell'
     import utils from '@/utils/index.js'
-
-    export default {
+    import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
+    
+    export default {
+        mixins: [
+            onGroupDismiss
+        ],
         components: {
             sentMessageBar,
             showMessageCell
@@ -59,11 +63,9 @@
             })
             // 获取历史消息列表
             this.getMessageList()
-            // 监听收到本群的消息，追加消息
-            uni.$on('onReceiveMessage', (msg) => {
-                if (msg.targetId == this.targetId) {
-                    this.getNewMessage()
-                }
+            // 监听新消息
+            uni.$on('onReceiveMessage_' + this.targetId, (message) => {
+                this.getNewMessage()
             })
             uni.$on('onReceiptRequest', (msg) => {
                 if (msg.targetId == this.targetId) {
@@ -74,8 +76,17 @@
                     })
                 }
             })
+            // 群已读回执
             uni.$on('onReceiptResponse', (msg) => {
-                console.log('远端消息已读，本地获取有几个人读了', msg);
+                if (msg.targetId == this.targetId) {
+                    this.messages = this.messages.map(item => {
+                        if (msg.messageId == item.messageId) {
+                            return msg
+                        } else {
+                            return item
+                        }
+                    })
+                }
             })
             // 清理聊天记录
             uni.$once('cleanGroupMessage', this.getMessageList)
@@ -92,6 +103,7 @@
             })
         },
         onUnload() {
+            uni.$off('onReceiveMessage_' + this.targetId)
             uni.$off('onRecallMessage')
             uni.$off('onReceiptRequest')
             uni.$off('onReceiptResponse')
@@ -127,9 +139,17 @@
                     true,
                     (messages) => {
                         console.log('获取消息列表', messages);
-                        RongIMLib.sendReadReceiptResponse(3, this.targetId, messages, (res) => {
-                            console.error('发送群聊已读回执成功', res);
-                        })
+                        const msgs = messages.filter(item => item.receivedStatus == 0)
+                        console.log('未读消息', msgs);
+                        if (msgs.length) {
+                            RongIMLib.sendReadReceiptResponse(3, this.targetId, msgs, (res) => {
+                                console.error('发送群聊已读回执成功', res);
+                                msgs.map(item => {
+                                    RongIMLib.setMessageReceivedStatus(item.messageId, 1)
+                                })
+                            })
+                        }
+
                         this.messages = messages
                         this.scrollBottom()
                     })
@@ -144,10 +164,10 @@
                     im.setNotifyBadge()
                 }
             }
-        },
-        onHide() {
-            // console.log(JSON.stringify(this.$refs))
-            this.$refs.voice.stopPlay()
+        },
+        onHide() {
+            // console.log(JSON.stringify(this.$refs))
+            // this.$refs.voice.stopPlay()
         }
     }
 </script>
diff --git a/pages/im/group/index.vue b/pages/im/group/index.vue
index 9b94858..da337e4 100644
--- a/pages/im/group/index.vue
+++ b/pages/im/group/index.vue
@@ -1,13 +1,20 @@
 <template>
-    <view class="group">
-        <view class="title"> 群聊 </view>
-        <view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
-            <u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
-            <view class="info">
-                <view class="name">{{ item.name }}</view>
+    <view class="group" :style="`background-color:${bg};`">
+        <block v-if="groups.length > 0">
+            <view class="title"> 群聊 </view>
+            <view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
+                <u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
+                <view class="info">
+                    <view class="name">{{item.name}}  <span class="total">共10人</span></view>
+                </view>
             </view>
+            <view class="group-count"> {{groups.length}}个群聊 </view>
+        </block>
+        <view class="no-lists" v-else>
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
+                :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
+            <span>空空如也~</span>
         </view>
-        <view class="group-count"> {{groups.length}}个群聊 </view>
         <u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
             @confirm="onCreateGroup">
             <view class="slot-content">
@@ -28,7 +35,8 @@
             return {
                 groups: [],
                 createModal: false,
-                groupName: ''
+                groupName: '',
+                bg: '#fff'
             }
         },
         computed: {
@@ -41,13 +49,18 @@
         onNavigationBarButtonTap() {
             this.createModal = true
         },
-        onLoad() {
+        onShow() {
             this.initData()
             uni.$on('onGroupDismiss', this.initData)
         },
         methods: {
             initData() {
                 getMyGroups().then((res) => {
+                    if (res.length > 0) {
+                        this.bg = '#f9f9f9'
+                    } else {
+                        this.bg = '#fff'
+                    }
                     this.groups = res
                     res.map(item => {
                         this.$store.dispatch('updateContact', item)
@@ -88,12 +101,14 @@
     .group {
         min-height: 100vh;
         background-color: $window-color;
-        .title{
+
+        .title {
             font-size: $title-size-m;
             color: $text-gray-m;
             padding: 10rpx $padding;
         }
-        .group-count{
+
+        .group-count {
             text-align: center;
             font-size: $title-size;
             color: $text-gray;
@@ -122,6 +137,11 @@
             .name {
                 font-size: $title-size + 1;
                 color: #454545 !important;
+            }
+            .total{
+                color: $text-gray-m;
+                font-size: $title-size-m - 5;
+                padding-left: 10rpx;
             }
 
             .address {
@@ -130,4 +150,19 @@
             }
         }
     }
+
+    .no-lists {
+        padding-top: $padding * 5;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        font-size: $title-size-m;
+        color: $text-gray-m;
+
+        span {
+            padding-top: $padding;
+        }
+    }
 </style>
diff --git a/pages/im/group/info.vue b/pages/im/group/info.vue
index 47d99e3..bfabfe5 100644
--- a/pages/im/group/info.vue
+++ b/pages/im/group/info.vue
@@ -9,8 +9,7 @@
                 <view slot="label" class="announcement-label "> {{announcement}} </view>
             </u-cell>
             <u-cell :border="false" class="u-border-bottom" isLink title="二维码" @click="showGroupQrCode" />
-            <u-cell :border="false" class="u-border-bottom" v-if="group.can_makesure" isLink title="群聊邀请确认"
-                @click="showGroupsSure" />
+            <u-cell :border="false" class="u-border-bottom" v-if="group.can_makesure" isLink title="群聊邀请确认" @click="showGroupsSure" />
             <u-cell :border="false" class="u-border-bottom" title="聊天置顶">
                 <u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop" />
             </u-cell>
@@ -25,8 +24,7 @@
             <u-cell :border="false" class="u-border-bottom" isLink title="修改群头像" @click="onGroupAvatar">
                 <u-avatar slot="value" size="25" shape="square" :src="group.cover" />
             </u-cell>
-            <u-cell :border="false" class="u-border-bottom" isLink v-if="group.is_owner" title="准入方式" :value="joinType"
-                @click="onChangeJoinType" />
+            <u-cell :border="false" class="u-border-bottom" isLink v-if="group.is_owner" title="准入方式" :value="joinType" @click="onChangeJoinType" />
         </u-cell-group>
 
         <view class="cells actions" v-if="loaded">
@@ -35,21 +33,15 @@
             <view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view>
         </view>
 
-        <u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal"
-            @confirm="onChangeGroupName">
-            <view class="slot-content">
-                <u--input placeholder="群名称" border="surround" focus v-model="groupName" />
-            </view>
+        <u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal" @confirm="onChangeGroupName">
+            <view class="slot-content"> <u--input placeholder="群名称" border="surround" focus v-model="groupName" maxlength="14" /> </view>
         </u-modal>
 
         <u-modal :show="qrCodeShow" :title="group.name" @confirm="qrCodeShow = false">
-            <view class="slot-content">
-                <uqrcode class="info-code-src" :size="198" :text="qrContent" />
-            </view>
+            <view class="slot-content"> <uqrcode class="info-code-src" :size="198" :text="qrContent" /> </view>
         </u-modal>
 
-        <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions"
-            @close="showActions=false" />
+        <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions" @close="showActions=false" />
     </view>
 </template>
 
@@ -64,12 +56,16 @@
         uploads
     } from '@/apis/interfaces/uploading'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
-    import groupUserList from '../components/groupUserList'
+    import groupUserList from '../components/groupUserList'
+    import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
 
     export default {
         components: {
             groupUserList
-        },
+        },
+        mixins: [
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
@@ -133,7 +129,6 @@
                         return item.key == res.join_type
                     })[0].name
                 }).catch(err => {
-                    console.log('getGroupInfo ERR', err);
                     uni.showToast({
                         icon: 'none',
                         title: '群不存在'
diff --git a/pages/im/group/invite.vue b/pages/im/group/invite.vue
index 0356cab..54769f2 100644
--- a/pages/im/group/invite.vue
+++ b/pages/im/group/invite.vue
@@ -8,8 +8,9 @@
             <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
                 <u-checkbox-group v-if="friends.length > 0" v-model="checkboxValue" placement="column">
                     <u-index-item v-for="(item, fkey) in friends" :key="fkey">
-                        <u-index-anchor :text="indexs[fkey]" v-if="indexs[fkey]" bgColor="#f9f9f9f" height="20" size="12"
-                            color="#666" style="border:none !important;padding: 10rpx 30rpx;background-color: #f9f9f9 !important;" />
+                        <u-index-anchor :text="indexs[fkey]" v-if="indexs[fkey]" bgColor="#f9f9f9f" height="20"
+                            size="12" color="#666"
+                            style="border:none !important;padding: 10rpx 30rpx;background-color: #f9f9f9 !important;" />
                         <view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
                             @click="addContact(friendItem.targetId)">
                             <u-checkbox :name="friendItem.targetId" shape="circle" activeColor="#34ce98"
@@ -44,10 +45,13 @@
         getGroupUsers
     } from '@/apis/interfaces/im';
     import utils from '@/utils/index.js'
-
+    import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
 
     export default {
+        mixins: [
+            onGroupDismiss
+        ],
         data() {
             return {
                 searchTxt: '',
@@ -80,11 +84,11 @@
                         })
                         return resList
                     })
-                    this.indexs = this.orignalIndexs.map((t, i) => {
-                        if (this.friends[i].length > 0) {
-                            return t
-                        }
-                    })
+                    this.indexs = this.orignalIndexs.map((t, i) => {
+                        if (this.friends[i].length > 0) {
+                            return t
+                        }
+                    })
                 } else {
                     this.friends = this.orignalFriends
                     this.indexs = this.orignalIndexs
@@ -101,7 +105,7 @@
                     this.orignalIndexs = res.indexList
                 })
                 getGroupUsers(this.targetId).then(res => {
-                    res.map(res => {
+                    res.map(res => {
                         console.log(res)
                         this.checkboxValue.push(String(res.targetId))
                         this.selectValue.push(String(res.targetId))
@@ -122,17 +126,17 @@
                 }
 
             },
-            onInvite() {
-                console.log(this.checkboxValue,'userIds.....')
-                console.log(this.selectValue,'userIds.....')
-                let userIds = []
-                this.checkboxValue.filter(item=>{
-                    if(!utils.inArray(item, this.selectValue)){
-                        userIds.push(item)
-                    } 
-                })
+            onInvite() {
+                console.log(this.checkboxValue, 'userIds.....')
+                console.log(this.selectValue, 'userIds.....')
+                let userIds = []
+                this.checkboxValue.filter(item => {
+                    if (!utils.inArray(item, this.selectValue)) {
+                        userIds.push(item)
+                    }
+                })
                 // console.log(userIds)
-                inviteGroupUser(this.targetId, this.checkboxValue,userIds).then(res => {
+                inviteGroupUser(this.targetId, this.checkboxValue, userIds).then(res => {
                     uni.navigateBack({
                         delta: 1,
                         animationType: 'pop-out',
diff --git a/pages/im/group/reviewed.vue b/pages/im/group/reviewed.vue
index 2dd2b5b..8f09af0 100644
--- a/pages/im/group/reviewed.vue
+++ b/pages/im/group/reviewed.vue
@@ -3,7 +3,7 @@
     <view class="reviewed">
         <block v-if="pendings.length > 0">
             <view class="reviewed-item" v-for="(item, index) in pendings" :key="index">
-               <u-avatar class="avatar"
+                <u-avatar class="avatar"
                     :src="JSON.parse(item.content.extra).portraitUrl || require('@/static/user/cover.png')"
                     shape="square" size="46" />
                 <view style="flex:1;" v-if="item.content.operation == 'GroupPending'">
@@ -34,9 +34,12 @@
     } from "@/apis/interfaces/im.js"
     import im from '@/utils/im/message.js'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
-
+    import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
 
     export default {
+        mixins: [
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
@@ -86,21 +89,21 @@
                     //     icon: 'none',
                     //     mask: true,
                     //     duration: 2000
-                    // })
-                    RongIMLib.deleteMessagesByIds([latestMessageId], ({
-                        code
-                    }) => {
-                        console.log('code', code)
-                        if (code == 0) {
-                            uni.showToast({
-                                title:err.message,
-                                icon: 'none',
-                                mask: true,
-                                duration: 2000         
-                            })
-                            this.getList()
-                            uni.$emit('groupInvitedUser')
-                        }
+                    // })
+                    RongIMLib.deleteMessagesByIds([latestMessageId], ({
+                        code
+                    }) => {
+                        console.log('code', code)
+                        if (code == 0) {
+                            uni.showToast({
+                                title: err.message,
+                                icon: 'none',
+                                mask: true,
+                                duration: 2000
+                            })
+                            this.getList()
+                            uni.$emit('groupInvitedUser')
+                        }
                     })
                 })
                 // 直接调用通过或拒绝的接口
@@ -153,6 +156,7 @@
         }
 
     }
+
     .no-lists {
         padding-top: $padding * 5;
         display: flex;
diff --git a/pages/im/group/users.vue b/pages/im/group/users.vue
index f356d8b..0e81fc8 100644
--- a/pages/im/group/users.vue
+++ b/pages/im/group/users.vue
@@ -4,7 +4,12 @@
 
 <script>
     import groupUserList from '../components/groupUserList'
+    import onGroupDismiss from '@/utils/im/onGroupDismiss.js'
+
     export default {
+        mixins: [
+            onGroupDismiss
+        ],
         components: {
             groupUserList
         },
diff --git a/pages/im/index.vue b/pages/im/index.vue
index 3d6e68b..ef370a6 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -57,24 +57,28 @@
             // 好友申请数量
             this.checkNewFriendPending()
             // 监听新的好友申请
-            uni.$on('onContactNotification', () => {
-                this.checkNewFriendPending()
-            })
+            uni.$on('onNewContactConversation', this.checkNewFriendPending)
         },
         onShow() {
             if (this.$store.state.token !== '') {
                 this.getConversationList()
             }
-            uni.$on('onConnectionStatusChange', (status) => {
-                this.connection = status
-            })
             // 监听新消息
             uni.$on('onReceiveMessage', (msg) => {
                 this.getConversationList()
             })
+            // 监听网络状态变化
+            uni.$on('onConnectionStatusChange', (status) => {
+                this.connection = status
+                if (status == 0) {
+                    this.getConversationList()
+                }
+            })
         },
         onHide() {
+            // 页面隐藏的时候，不监听了，性能可能会好一点
             uni.$off('onReceiveMessage')
+            uni.$off('onConnectionStatusChange')
         },
         methods: {
             checkNewFriendPending() {
diff --git a/pages/im/private/call.nvue b/pages/im/private/call.nvue
index 85b5eba..bfb7884 100644
--- a/pages/im/private/call.nvue
+++ b/pages/im/private/call.nvue
@@ -150,7 +150,7 @@
                 } else {
                     IMLib.insertIncomingMessage(1, targetId, targetId, sentStatus, messageContent, sentTime)
                 }
-                uni.$emit('onReceiveMessage', {
+                uni.$emit('onReceiveMessage_' + this.targetId, {
                     targetId: this.targetId
                 })
             },
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index b8ca211..c1aeba8 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -4,8 +4,8 @@
         <!-- chat -->
         <view class="body">
             <view class="scroll">
-                <view class="cell" v-for="(message, index) in messages" :key="index">
-                    <show-message-cell :message="message" />
+                <view class="cell" v-for="(message, index) in messages" :key="index">
+                    <show-message-cell :message="message" />
                 </view>
             </view>
         </view>
@@ -60,6 +60,10 @@
             })
             // 获取消息列表
             this.getMessageList()
+            // 监听新消息
+            uni.$on('onReceiveMessage_' + this.targetId, (message) => {
+                this.getNewMessage()
+            })
             // 监听消息已读状态
             uni.$on('onReadReceiptReceived', (data) => {
                 if (data.targetId == this.targetId) {
@@ -72,14 +76,21 @@
                     })
                 }
             })
-            // 监听收到新消息，判断是否是当前会话，更新会话内容
-            uni.$on('onReceiveMessage', (msg) => {
-                if (msg.targetId == this.targetId) {
-                    this.getNewMessage()
+            uni.$on('onRecallMessage', (res) => {
+                if (res.targetId == this.targetId) {
+                    this.messages = this.messages.map(item => {
+                        if (res.messageId == item.messageId) {
+                            return res
+                        } else {
+                            return item
+                        }
+                    })
                 }
             })
         },
         onUnload() {
+            uni.$off('onReceiveMessage_' + this.targetId)
+            uni.$off('onRecallMessage')
             uni.$off('onReadReceiptReceived')
         },
         methods: {
diff --git a/static/.DS_Store b/static/.DS_Store
index a81ade7..d013e42 100644
Binary files a/static/.DS_Store and b/static/.DS_Store differ
diff --git a/utils/im/listeners.js b/utils/im/listeners.js
index 7b2d620..63e59e6 100644
--- a/utils/im/listeners.js
+++ b/utils/im/listeners.js
@@ -20,7 +20,28 @@ const onReceiveMessage = (message) => {
         }
     })
     im.setNotifyBadge()
+    // 发布全局事件，有新消息，刷新会话列表
     uni.$emit('onReceiveMessage', message)
+    // 这个是为了更新消息列表页的
+    uni.$emit('onReceiveMessage_' + message.targetId, message)
+}
+
+// 检测联系人信息，不存在的时候，从服务端获取
+const checkContactExists = (message) => {
+    if (!store.getters.contactIsExist(message.targetId)) {
+        getUserInfo(message.targetId).then(res => {
+            store.dispatch('initContact', res)
+        }).catch(err => {
+            console.error('getUserInfo ERR', err)
+        })
+    }
+    if (!store.getters.contactIsExist(message.senderUserId)) {
+        getUserInfo(message.senderUserId).then(res => {
+            store.dispatch('initContact', res)
+        }).catch(err => {
+            console.error('getUserInfo ERR', err)
+        })
+    }
 }
 
 // 允许通知的消息类型，触发更新消息列表操作,提示音
@@ -32,10 +53,7 @@ const notifyMsgTypes = [
     IMLib.ObjectName.Location,
     IMLib.ObjectName.Voice,
     IMLib.ObjectName.HQVoice,
-    IMLib.ObjectName.Sight,
-    IMLib.ObjectName.Text,
-    IMLib.ObjectName.Text,
-    IMLib.ObjectName.Text
+    IMLib.ObjectName.Sight
 ]
 
 const imLibListeners = () => {
@@ -48,31 +66,19 @@ const imLibListeners = () => {
     IMLib.addReceiveMessageListener((res) => {
         const message = res.data.message
         console.error('[收到消息]', message)
+        checkContactExists(message)
         if (utils.inArray(message.objectName, notifyMsgTypes)) {
-            if (!store.getters.contactIsExist(message.targetId)) {
-                getUserInfo(message.targetId).then(res => {
-                    store.dispatch('initContact', res)
-                }).catch(err => {
-                    console.error('getUserInfo ERR', err)
-                })
-            }
-            if (!store.getters.contactIsExist(message.senderUserId)) {
-                getUserInfo(message.senderUserId).then(res => {
-                    store.dispatch('initContact', res)
-                }).catch(err => {
-                    console.error('getUserInfo ERR', err)
-                })
-            }
             onReceiveMessage(message)
         } else if (message.objectName === IMLib.ObjectName.ProfileNotification) {
-            // 更新会话信息
+            // 更新联系人信息
             store.dispatch('updateContact', JSON.parse(message.content.data))
             // 调用完更新之后，删除这条消息
             IMLib.deleteMessagesByIds([message.messageId])
         } else if (message.objectName === IMLib.ObjectName.ContactNotification) {
-            console.error('触发一个新好友的通知事件', message);
-            // 触发一个新好友的通知事件
-            uni.$emit('onContactNotification', message)
+            // 触发一个新好友的通知事件，【会话列表，通讯录，新朋友】页面
+            uni.$emit('onNewContactConversation', message)
+            uni.$emit('onNewContactFriends', message)
+            uni.$emit('onNewContactPendings', message)
         } else if (message.objectName === IMLib.ObjectName.GroupNotification) {
             // 解散群
             if (message.content.operation === 'Dismiss') {
@@ -80,8 +86,11 @@ const imLibListeners = () => {
                     false)
                 // 解散了就删了吧
                 IMLib.removeConversation(message.conversationType, message.targetId)
-                uni.$emit('onGroupDismiss', message.targetId)
+                // 发布群解散的消息
+                uni.$emit('onGroupDismiss')
+                uni.$emit('onGroupDismiss_' + message.targetId)
             }
+            // 触发刷新会话列表
             uni.$emit('onReceiveMessage', message)
         }
     })
@@ -93,22 +102,36 @@ const imLibListeners = () => {
         uni.$emit('onReadReceiptReceived', data)
     })
     // 监听消息撤回操作
-    IMLib.addRecallMessageListener((res) => {
-        IMLib.getMessage(res.data.messageId, (res) => {
-            console.error("消息撤回: ", res.message);
-            uni.$emit('onRecallMessage', res.message)
+    IMLib.addRecallMessageListener((res) => {
+        IMLib.getMessage(res.data.messageId, (res) => {
+            console.error("消息撤回: ", res.message);
+            uni.$emit('onRecallMessage', res.message)
         })
     })
     // 监听需要群聊消息回执
     IMLib.addReceiptRequestListener(({
         data
-    }) => {
-        console.error('onReceiptRequested', data);
+    }) => {
         uni.$emit('onReceiptRequest', data)
     })
     // 群消息已读的回执
-    IMLib.addReceiptResponseListener((res) => {
-        console.error('onReceiptResponse', res);
+    IMLib.addReceiptResponseListener(({
+        data
+    }) => {
+        // 获取本地消息
+        IMLib.getMessageByUId(data.messageUId, ({
+            message
+        }) => {
+            const readers = Object.keys(data.users).length
+            const extra = JSON.stringify({
+                readers
+            })
+            // 在消息的扩展数据中，设置已读数量
+            IMLib.setMessageExtra(message.messageId, extra, (result) => {
+                message.extra = extra
+                uni.$emit('onReceiptResponse', message)
+            })
+        })
     })
 }
 
diff --git a/utils/im/onGroupDismiss.js b/utils/im/onGroupDismiss.js
new file mode 100644
index 0000000..4b6b607
--- /dev/null
+++ b/utils/im/onGroupDismiss.js
@@ -0,0 +1,16 @@
+// 监听群解散的消息，直接跳转到会话列表页面
+const onGroupDismiss = {
+    onLoad(e) {
+        uni.$once('onGroupDismiss_' + e.targetId, () => {
+            uni.showToast({
+                icon: 'none',
+                title: '当前群已解散'
+            })
+            uni.switchTab({
+                url: '/pages/im/index'
+            })
+        })
+    }
+}
+
+export default onGroupDismiss