merge

App.vue

@@ -12,7 +12,7 @@
             // 获取系统版本号
             getVersions({
                 platform: plus.os.name,
-                version: plus.runtime.versionCode
+                version: plus.runtime.version
             }).then(res => {
                 if (res.update) {
                     uni.showModal({

apis/interfaces/im.js

@@ -315,14 +315,15 @@ export {
     getGroupAnnouncement,
     createGroupAnnouncement,
     deleteGroupAnnouncement,
-    topGroupAnnouncement,
+    topGroupAnnouncement,
     searchGroup,
     joinGroupPre,
     joinGroup,
     quitGroup,
     dismissGroup,
     inviteGroupUser,
-    removeGroupUser,
+    removeGroupUser,
+    transferGroupOwner,
     setGroupAdmin,
     removeGroupAdmin,
     groupMakeSure, //  通过审核

manifest.json

@@ -2,8 +2,8 @@
     "name" : "ZH-HEALTH",
     "appid" : "__UNI__C29473D",
     "description" : "ZH-HEALTH，您手上的健康管理专家",
-    "versionName" : "1.0.13",
-    "versionCode" : 113,
+    "versionName" : "1.0.17",
+    "versionCode" : 100,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

pages/im/components/conversation/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"
@@ -19,8 +21,12 @@
 <script>
     import messagePreview from './messagePreview'
     import utils from '@/utils/index.js'
+    import imBase from '../../mixins/imBase.js'
 
     export default {
+        mixins: [
+            imBase
+        ],
         props: {
             item: {
                 type: Object,
@@ -29,21 +35,6 @@
                 }
             }
         },
-        data() {
-            return {
-                avatarRpx: 84
-            }
-        },
-        computed: {
-            avatarSize() {
-                return utils.rpx2px(this.avatarRpx)
-            },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            }
-        },
         components: {
             messagePreview
         }
@@ -80,10 +71,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;

pages/im/components/conversationList.vue

@@ -1,23 +1,24 @@
 <template>
     <view>
-        <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop, 'is-active': pickedItem.targetId == item.targetId }]"
-            :data-item="item" @longpress="onLongPress" @click="toDetail(item)">
-            <message-cell :item="item" />
-        </view>
-        <view class="shade" @click="hidePop" v-show="showPop">
+        <view class="shade" @click="hidePop" @touchmove="hidePop" v-show="showPop">
             <view class="pop" :style="popStyle" :class="{'show':showPop}">
-                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
-                    {{item}}
+                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(index)">
+                    {{ item }}
                 </view>
             </view>
         </view>
+        <view v-for="(item, index) in conversations" :key="index"
+            :class="['message', { 'is-top': item.isTop, 'is-active': pickedItem.targetId == item.targetId }]"
+            :data-item="item" @longpress="onLongPress" @click="toDetail(item)">
+            <message-cell :item="item" />
+        </view>
     </view>
 </template>
 
 <script>
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
-    import messageCell from './messageCell'
+    import messageCell from './conversation/messageCell'
 
     export default {
         props: {
@@ -65,15 +66,13 @@
                 }, 250)
             },
             // 点击会话功能菜单
-            pickerMenu(e) {
-                const index = Number(e.currentTarget.dataset.index)
-
+            pickerMenu(index) {
                 if (index == 0) {
                     RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
                         .pickedItem.isTop)
                 } else if (index == 1) {
                     RongIMLib.clearMessagesUnreadStatus(this.pickedItem.conversationType, this.pickedItem.targetId, this
-                        .pickedItem.sentTime)
+                        .pickedItem.sentTime)
                 } else {
                     RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
                     RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
@@ -130,10 +129,10 @@
 
         &.is-top {
             background: $window-color;
-        }
-        
-        &.is-active {
-            background: #F8FAFF;
+        }
+
+        &.is-active {
+            background: #F8FAFF;
         }
     }
 
@@ -142,8 +141,10 @@
         position: fixed;
         width: 100%;
         height: 100%;
+        z-index: 999;
 
-        .pop {
+        .pop {
+            border-radius: 10rpx;
             position: fixed;
             z-index: 101;
             width: 200rpx;

pages/im/components/friendApplyCell.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="apply--cell">
         <view class="avatar">
-            <u-avatar :src="user.portraitUrl || require('@/static/user/cover.png')" shape="square" size="46" />
+            <u-avatar :src="user.portraitUrl || require('@/static/user/cover.png')" shape="square" :size="avatarSize" />
         </view>
         <view class="info">
             <view class="name"> {{ user.name }}</view>
@@ -20,8 +20,12 @@
         resolveFriend,
         rejectFriend
     } from '@/apis/interfaces/im.js'
+    import imBase from '../mixins/imBase.js'
 
     export default {
+        mixins: [
+            imBase
+        ],
         props: {
             message: {
                 type: Object,
@@ -36,7 +40,6 @@
         methods: {
             resolve() {
                 resolveFriend(this.message.sourceUserId).then(res => {
-                    this.clearMessages()
                     uni.showToast({
                         icon: 'none',
                         title: '通过好友申请'
@@ -47,6 +50,8 @@
                         icon: 'none',
                         title: err.message
                     })
+                }).finally(() => {
+                    this.clearMessages()
                 })
             },
             reject() {
@@ -70,7 +75,9 @@
             clearMessages() {
                 RongIMLib.deleteMessages(RongIMLib.ConversationType.SYSTEM, this.message.sourceUserId)
                 this.$emit('success')
-                uni.$emit('onContactNotification')
+                uni.$emit('onNewContactConversation')
+                uni.$emit('onNewContactFriends')
+                uni.$emit('onNewContactPendings')
             }
         }
     }

pages/im/components/friendApplyList.vue

@@ -1,126 +1,147 @@
-<template>
-    <view class="friend-apply">
-        <block v-for="(item, index) in lists" v-if="lists.length > 0" :key="index">
-            <view class="lists">
-                <view class="" style="width: 100rpx;height: 100rpx;">
-                    <u-avatar :src="JSON.parse(item.latestMessage.extra).portraitUrl" shape="square" size="44" />
-                </view>
-                <view class="right">
-                    <view class="title">
-                        <view class="name">{{ item.name }}</view>
-                        <view class="des">{{ item.latestMessage.message || '--' }}</view>
-                    </view>
-                    <view class="agress-btn">
-                        <span v-if="isAgree" @click="action('agree', item)">通过</span>
-                        <span v-if="isAgree" @click="action('reject', item)">拒绝</span>
-                        <span v-if="isApply && !item.is_friend" @click="action('apply', item)">查看</span>
-                        <span class="isFri" v-if="isApply && item.is_friend" @click="action('isFriend', item)">已是好友</span>
-                    </view>
-                </view>
-            </view>
-        </block>
-    </view>
-</template>
-
-<script>
-export default {
-    name: 'friend-apply-reject-agree',
-    props: {
-        lists: {
-            type: Array,
-            default: []
-        },
-        isAgree: {
-            type: Boolean,
-            default: false
-        },
-        isReject: {
-            type: Boolean,
-            default: false
-        },
-        isApply: {
-            type: Boolean,
-            default: false
-        }
-    },
-    created() {
-        console.log(this.lists);
-    },
-    methods: {
-        action(type, item) {
-            if (type === 'isFriend') {
-                // ，后期可以跳转到信息介绍页面，先留在这里
-                return uni.showToast({ title: '已是好友，无需重复添加', icon: 'none', duration:2000});
-            }
-            this.$emit('action', { type, item });
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.lists {
-    padding: 0 $padding;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    box-sizing: border-box;
-    font-size: $title-size;
-    color: $text-gray;
-
-    .cover {
-        background-color: #ffffff;
-    }
-    .right {
-        width: 570rpx;
-        margin-left: $margin - 10;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        padding: $padding 0;
-        border-bottom: solid 1rpx #f9f9f9;
-        .title {
-            width: 370rpx;
-            .name {
-                width: 100%;
-                color: $text-color;
-                font-size: $title-size + 2;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .des {
-                width: 100%;
-                flex: 1;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                font-size: $title-size-m;
-                margin-top: $margin - 10;
-                color: $text-gray-m;
-            }
-        }
-        .agress-btn {
-            display: flex;
-            color: #fff;
-            font-size: $title-size-m;
-            span {
-                display: inline-block;
-                padding: 6rpx 14rpx;
-                background-color: $text-price;
-                border-radius: 10rpx;
-            }
-            span:nth-child(1) {
-                background-color: $main-color;
-                margin-right: 10rpx;
-            }
-            .isFri {
-                background-color: #f9f9f9 !important;
-                color: #666;
-            }
-        }
-    }
-}
+<template>
+    <view class="friend-apply">
+        <block v-for="(item, index) in lists" v-if="lists.length > 0" :key="index">
+            <view class="lists">
+                <view class="" style="width: 100rpx;height: 100rpx;">
+                    <u-avatar :src="JSON.parse(item.latestMessage.extra).portraitUrl" shape="square" :size="avatarSize" />
+                </view>
+                <view class="right">
+                    <view class="title">
+                        <view class="name">{{ item.name }}</view>
+                        <view class="des">{{ item.latestMessage.message || '--' }}</view>
+                    </view>
+                    <view class="agress-btn">
+                        <span v-if="isAgree" @click="action('agree', item)">通过</span>
+                        <span v-if="isAgree" @click="action('reject', item)">拒绝</span>
+                        <span v-if="isApply && !item.is_friend" @click="action('apply', item)">查看</span>
+                        <span class="isFri" v-if="isApply && item.is_friend"
+                            @click="action('isFriend', item)">已是好友</span>
+                    </view>
+                </view>
+            </view>
+        </block>
+    </view>
+</template>
+
+<script>
+    import imBase from '../mixins/imBase.js'
+    
+    export default {
+        mixins:[
+            imBase
+        ],
+        name: 'friend-apply-reject-agree',
+        props: {
+            lists: {
+                type: Array,
+                default: []
+            },
+            isAgree: {
+                type: Boolean,
+                default: false
+            },
+            isReject: {
+                type: Boolean,
+                default: false
+            },
+            isApply: {
+                type: Boolean,
+                default: false
+            }
+        },
+        created() {
+            console.log(this.lists);
+        },
+        methods: {
+            action(type, item) {
+                if (type === 'isFriend') {
+                    // ，后期可以跳转到信息介绍页面，先留在这里
+                    return uni.showToast({
+                        title: '已是好友，无需重复添加',
+                        icon: 'none',
+                        duration: 2000
+                    });
+                }
+                this.$emit('action', {
+                    type,
+                    item
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .lists {
+        padding: 0 $padding;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        box-sizing: border-box;
+        font-size: $title-size;
+        color: $text-gray;
+
+        .cover {
+            background-color: #ffffff;
+        }
+
+        .right {
+            width: 570rpx;
+            margin-left: $margin - 10;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            padding: $padding 0;
+            border-bottom: solid 1rpx #f9f9f9;
+
+            .title {
+                width: 370rpx;
+
+                .name {
+                    width: 100%;
+                    color: $text-color;
+                    font-size: $title-size + 2;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                .des {
+                    width: 100%;
+                    flex: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-size: $title-size-m;
+                    margin-top: $margin - 10;
+                    color: $text-gray-m;
+                }
+            }
+
+            .agress-btn {
+                display: flex;
+                color: #fff;
+                font-size: $title-size-m;
+
+                span {
+                    display: inline-block;
+                    padding: 6rpx 14rpx;
+                    background-color: $text-price;
+                    border-radius: 10rpx;
+                }
+
+                span:nth-child(1) {
+                    background-color: $main-color;
+                    margin-right: 10rpx;
+                }
+
+                .isFri {
+                    background-color: #f9f9f9 !important;
+                    color: #666;
+                }
+            }
+        }
+    }
 </style>

pages/im/components/friendSearchList.vue

@@ -3,7 +3,7 @@
         <block v-for="(item, index) in lists" v-if="lists.length > 0" :key="index">
             <view class="lists">
                 <view class="" style="width: 100rpx;height: 100rpx;">
-                    <u-avatar :src="item.portraitUrl || require('@/static/user/cover.png')" shape="square" size="44" />
+                    <u-avatar :src="item.portraitUrl || require('@/static/user/cover.png')" shape="square" :size="avatarSize" />
                 </view>
                 <view class="right">
                     <view class="title">
@@ -21,7 +21,12 @@
 </template>
 
 <script>
+    import imBase from '../mixins/imBase.js'
+    
     export default {
+        mixins: [
+            imBase
+        ],
         name: 'friend-apply-reject-agree',
         props: {
             lists: {

pages/im/components/groupUserList.vue

@@ -38,8 +38,12 @@
         transferGroupOwner
     } from '@/apis/interfaces/im.js'
     import utils from '@/utils/index.js'
-
-    export default {
+    import imBase from '../mixins/imBase.js'
+    
+    export default {
+        mixins: [
+            imBase
+        ],
         props: {
             targetId: {
                 type: String,
@@ -54,36 +58,27 @@
             return {
                 users: [],
                 isOwner: false,
-                isAdmin: false,
-                canInvite:false,//  是否可以开启邀请
+                isAdmin: false,
+                canInvite: false, //  是否可以开启邀请
                 adminUid: 0,
                 members: 0,
                 actionShow: false,
                 actionMap: [],
                 actionTitle: '',
                 currentUser: {},
-                avatarSize: 45,
+                avatarSize: 40,
                 labelSize: 14,
                 iconSize: 14
-
-            }
-        },
-        computed: {
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
             }
         },
         created() {
-            this.avatarSize = utils.rpx2px(90)
+            this.avatarSize = utils.rpx2px(84)
             this.labelSize = utils.rpx2px(24)
             this.iconSize = utils.rpx2px(26)
         },
         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 +91,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
                 })
             },
@@ -109,7 +104,10 @@
             hideAction(item) {
                 this.actionShow = false
             },
-            showAction(item) {
+            showAction(item) {
+                if (item.is_admin == 2) {
+                    return
+                }
                 this.currentUser = item
                 this.actionTitle = item.name
                 // 只有管理员以上才会弹窗
@@ -278,7 +276,6 @@
                 border-radius: 0 8rpx 0 0;
                 position: relative;
                 width: 84rpx;
-                height: 84rpx;
                 overflow: hidden;
 
                 .admin {

pages/im/components/sent/sentPopups.vue

@@ -33,9 +33,12 @@
 
 <script>
     import im from '@/utils/im/index.js'
-    import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
+    import imBase from '../../mixins/imBase.js'
 
     export default {
+        mixins: [
+            imBase
+        ],
         data() {
             return {
                 callActions: [{
@@ -64,15 +67,11 @@
                 default: ''
             }
         },
-        computed: {
-            sender() {
-                return this.$store.getters.sender
-            }
-        },
         methods: {
             singleCall(e) {
                 uni.navigateTo({
-                    url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type + '&isCall=true'
+                    url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type +
+                        '&isCall=true'
                 })
             },
             onPopupsItem(type) {
@@ -140,13 +139,14 @@
 <style lang="scss" scoped>
     .sent--popups {
         background: white;
-        padding: 30rpx 15rpx;
-        display: flex;
+        padding: 30rpx 15rpx;
+        display: flex;
         flex-wrap: wrap;
         flex-direction: row;
+
         .item {
             width: 150rpx;
-            margin: 15rpx;
+            margin: 15rpx;
             text-align: center;
         }
 

pages/im/components/sent/sentText.vue

@@ -8,8 +8,12 @@
 <script>
     import im from '@/utils/im/index.js'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import imBase from '../../mixins/imBase.js'
 
     export default {
+        mixins: [
+            imBase
+        ],
         props: {
             conversationType: {
                 type: Number,
@@ -23,9 +27,6 @@
         computed: {
             disabled() {
                 return this.inputTxt.length === 0
-            },
-            sender() {
-                return this.$store.getters.sender
             }
         },
         mounted() {
@@ -41,17 +42,17 @@
         },
         data() {
             return {
-                focusState: false,
+                focusState: false,
                 inputTxt: ''
             }
         },
         methods: {
             sent() {
-                if (!this.disabled) {
-                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
+                if (!this.disabled) {
+                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
                         RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
                         this.$emit('success')
-                        this.inputTxt = ''
+                        this.inputTxt = ''
                     })
                 }
             },
@@ -71,11 +72,10 @@
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-
         .input {
             background: #F3F6FB;
             height: 70rpx;
-            width: 500rpx;
+            width: 460rpx;
             border-radius: 10rpx;
             margin-right: 15rpx;
             padding: 0 20rpx;

pages/im/components/sent/sentVoice.vue

@@ -0,0 +1,292 @@
+<template>
+    <view class="send--voice">
+        <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord" @touchmove="touchmove">
+            <text class="button">按住说话</text>
+        </view>
+        <!-- 录音层 -->
+        <view class="lay" v-if="showRecordTip">
+            <view class="lay-header">
+                <view class="modal">
+                    <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
+                    <text class="text">录音中 {{recordTime}} s</text>
+                </view>
+            </view>
+            <view class="lay-toast">上滑取消</view>
+            <view class="lay-footer">
+                <image class="lay-footer-icon videoFlicker" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+                <view class="lay-footer-text">松开发送</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import im from '@/utils/im/index.js'
+    import permision from '@/utils/permission.js'
+    import imBase from '../../mixins/imBase.js'
+    
+    export default {
+        mixins: [
+            imBase
+        ],
+        props: {
+            conversationType: {
+                type: Number,
+                default: 0
+            },
+            targetId: {
+                type: String,
+                default: ''
+            }
+        },
+        data() {
+            return {
+                showRecordTip: false,
+                recordTime: 60,
+                interval: 0,
+                maxRecordTime: 60,
+                recorderManager: null,
+                mp3AudioSrc: null,
+                isMoveCancel: false,
+                isBetaPlay: false, // 暂时无用
+                startOffsetTop: 0
+            }
+        },
+        computed: {
+            sender() {
+                return this.$store.getters.sender
+            }
+        },
+        created() {
+            this.recorderManager = uni.getRecorderManager()
+        },
+        methods: {
+            // 检查安卓录制权限
+            async getAndroidPermission() {
+                return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
+            },
+            // 录制语音消息
+            startRecord(e) {
+                this.getAndroidPermission().then(code => {
+                    switch (code) {
+                        case 1:
+                            this.startOffsetTop = e.target.offsetTop
+                            this.showRecordTip = true
+                            this.recorderManager.start()
+                            this.interval = setInterval(() => {
+                                this.recordTime -= 1
+                                if (this.recordTime === 0) {
+                                    this.stopRecord()
+                                }
+                            }, 1000)
+                            break;
+                        case 0:
+                            uni.showToast({
+                                title: '暂无麦克风权限，请前往应用设置开启麦克风',
+                                icon: 'none'
+                            })
+                            break;
+                        case -1:
+                            uni.showToast({
+                                title: '应用权限错误',
+                                icon: 'none'
+                            })
+                            break;
+                    }
+                })
+            },
+            // 结束录音
+            stopRecord(e) {
+                if (!this.showRecordTip) return
+                // 延迟500毫秒结束录音
+                setTimeout(()=> {
+                    this.recorderManager.stop()
+                    clearInterval(this.interval)
+                    // 监听录音结束
+                    this.recorderManager.onStop(res => {
+                        if(this.isMoveCancel) {
+                            this.isMoveCancel = false
+                            return
+                        }
+                        
+                        console.log(this.maxRecordTime - this.recordTime)
+                        
+                        if((this.maxRecordTime - this.recordTime) <= 0){
+                            uni.showToast({
+                                title: '说话时间太短',
+                                icon : 'none',
+                            })
+                            this.showRecordTip = false
+                            return
+                        }
+                        this.mp3AudioSrc = res.tempFilePath
+                        this.showRecordTip = false
+                        this.senVoice()
+                    })
+                },500)
+            },
+            // 发送语音消息
+            senVoice(){
+                if(this.mp3AudioSrc === null) {
+                    uni.showToast({
+                        title: '发送失败, 暂无音频信息',
+                        icon : 'none'
+                    })
+                    return
+                }
+                im.sentVoice(this.conversationType, this.targetId, this.mp3AudioSrc, (this.maxRecordTime -
+                    this.recordTime), this.sender, () => {
+                    this.recordTime = this.maxRecordTime
+                    this.mp3AudioSrc = null
+                    setTimeout(() => {
+                        this.$emit('success')
+                    }, 500)
+                })
+            },
+            // 移动按钮
+            touchmove(e){
+                if(this.startOffsetTop - e.changedTouches[0].pageY > 100){
+                    if(this.showRecordTip){
+                        this.isMoveCancel = true
+                        this.showRecordTip = false
+                        this.recorderManager.stop()
+                        clearInterval(this.interval)
+                        this.recordTime = this.maxRecordTime
+                        this.mp3AudioSrc = null
+                        return
+                    }
+                }
+            },
+            // 试听语音
+            startPlay() {
+                let betaAudio = uni.createInnerAudioContext()
+                betaAudio.src = this.mp3AudioSrc;
+                // 在播放中
+                if(this.isBetaPlay){
+                    betaAudio.stop()
+                    betaAudio.onStop(() => {
+                        this.isBetaPlay = false;
+                        betaAudio.destroy()
+                    })
+                    return
+                }
+                // 监听音频播放中
+                betaAudio.play()
+                betaAudio.onPlay(() => {
+                    this.isBetaPlay = true;
+                })
+                // 监听音频结束
+                betaAudio.onEnded(() => {
+                    this.isBetaPlay = false;
+                    betaAudio.destroy()
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+    @keyframes playFlicker {
+        0% {
+            opacity: 1;
+        }
+
+        50% {
+            opacity: .5;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .videoFlicker {
+        animation: playFlicker 1s infinite;
+    }
+</style>
+
+<style scoped lang="scss">
+    .send--voice {
+        .voice {
+            display: flex;
+            background: $window-color;
+            height: 70rpx;
+            line-height: 70rpx;
+            justify-content: center;
+            align-items: center;
+            width: 500rpx;
+            border-radius: 10rpx;
+            margin-right: 15rpx;
+
+            .button {
+                font-size: 30rpx;
+                color: #333;
+            }
+        }
+        .lay{
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 9;
+            background: rgba($color: #000000, $alpha: .5);
+            height: 100vh;
+            width: 100vw;
+            box-sizing: border-box;
+            .lay-header{
+                height: calc(100vh - 140px);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .modal {
+                    display: flex;
+                    background: rgba(0, 0, 0, .6);
+                    position: fixed;
+                    height: 200rpx;
+                    width: 300rpx;
+                    border-radius: 10rpx;
+                    z-index: 99;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    .icon {
+                        width: 88rpx;
+                        height: 88rpx;
+                    }
+                
+                    .text {
+                        font-size: 28rpx;
+                        color: #FFFFFF;
+                    }
+                }
+            }
+            .lay-toast{
+                text-align: center;
+                color: rgba($color: #fff, $alpha: .8);
+                font-size: 28rpx;
+            }
+            .lay-footer{
+                background-color: white;
+                height: 100px;
+                border-radius: 50% 50% 0 0;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                align-items: center;
+                .lay-footer-icon{
+                    width: 58rpx;
+                    height: 58rpx;
+                }
+                .lay-footer-text{
+                    line-height: 40rpx;
+                    color: gray;
+                    font-size: 28rpx;
+                }
+            }
+        }
+    }
+</style>

pages/im/components/sentMessageBar.vue

@@ -16,9 +16,9 @@
 </template>
 
 <script>
-    import sentText from './sentText'
-    import sentVoice from './sentVoice'
-    import sentPopups from './sentPopups'
+    import sentText from './sent/sentText'
+    import sentVoice from './sent/sentVoice'
+    import sentPopups from './sent/sentPopups'
 
     export default {
         props: {

pages/im/components/sentVoice.vue

@@ -1,143 +0,0 @@
-<template>
-    <view class="send--voice">
-        <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
-            <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>
-</template>
-
-<script>
-    import im from '@/utils/im/index.js'
-    import permision from '@/utils/permission.js'
-
-    export default {
-        props: {
-            conversationType: {
-                type: Number,
-                default: 0
-            },
-            targetId: {
-                type: String,
-                default: ''
-            }
-        },
-        data() {
-            return {
-                showRecordTip: false,
-                recordTime: 60,
-                interval: 0,
-                maxRecordTime: 60,
-                recorderManager: null
-            }
-        },
-        computed: {
-            sender() {
-                return this.$store.getters.sender
-            }
-        },
-        created() {
-            this.recorderManager = uni.getRecorderManager()
-        },
-        methods: {
-            // 检查安卓录制权限
-            async getAndroidPermission() {
-                return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
-            },
-            // 录制语音消息
-            startRecord() {
-                this.getAndroidPermission().then(code => {
-                    switch (code) {
-                        case 1:
-                            this.showRecordTip = true
-                            this.recorderManager.start()
-                            this.interval = setInterval(() => {
-                                this.recordTime -= 1
-                                if (this.recordTime === 0) {
-                                    this.stopRecord()
-                                }
-                            }, 1000)
-                            break;
-                        case 0:
-                            uni.showToast({
-                                title: '暂无麦克风权限，请前往应用设置开启麦克风',
-                                icon: 'none'
-                            })
-                            break;
-                        case -1:
-                            uni.showToast({
-                                title: '应用权限错误',
-                                icon: 'none'
-                            })
-                            break;
-                    }
-                })
-            },
-            // 结束录音
-            stopRecord(e) {
-                if (!this.showRecordTip) return
-                this.recorderManager.stop()
-                clearInterval(this.interval)
-                // 监听录音结束
-                this.recorderManager.onStop(res => {
-                    im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
-                        this.recordTime), this.sender, () => {
-                        setTimeout(() => {
-                            this.$emit('success')
-                        }, 500)
-                    })
-                    this.recordTime = this.maxRecordTime
-                    this.showRecordTip = false
-                })
-            },
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    .send--voice {
-        .voice {
-            display: flex;
-            background: $window-color;
-            height: 70rpx;
-            line-height: 70rpx;
-            justify-content: center;
-            align-items: center;
-            width: 500rpx;
-            border-radius: 10rpx;
-            margin-right: 15rpx;
-            .button {
-                font-size: 30rpx;
-                color: #333;
-            }
-        }
-
-        .modal {
-            display: flex;
-            background: rgba(0, 0, 0, .6);
-            position: fixed;
-            height: 200rpx;
-            width: 300rpx;
-            border-radius: 10rpx;
-            z-index: 99;
-            top: 550rpx;
-            left: 225rpx;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            .icon {
-                width: 88rpx;
-                height: 88rpx;
-            }
-
-            .text {
-                font-size: 28rpx;
-                color: #FFFFFF;
-            }
-        }
-    }
-</style>

pages/im/components/show/showCall.vue

@@ -10,9 +10,13 @@
 
 <script>
     import utils from '@/utils/index.js'
-    import moment from 'moment'
+    import moment from 'moment'
+    import imBase from '../../mixins/imBase.js'
 
-    export default {
+    export default {
+        mixins: [
+            imBase
+        ],
         name: 'showText',
         props: {
             message: {
@@ -38,11 +42,6 @@
             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')

pages/im/components/show/showImage.vue

@@ -14,8 +14,12 @@
 <script>
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import messageState from './messageState'
-
-    export default {
+    import imBase from '../../mixins/imBase.js'
+    
+    export default {
+        mixins: [
+            imBase
+        ],
         name: 'showImage',
         props: {
             message: {
@@ -38,51 +42,30 @@
             },
             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);
-                        }
-                    })
+                if (this.content.local && this.content.local.indexOf('///data/user/') < 0) {
+                    this.showImage(this.content.local)
                 } else {
-                    RongIMLib.downloadMediaMessage(this.messageId, {
+                    this.showImage(this.content.remote)
+                    RongIMLib.downloadMediaMessage(this.message.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);
                         },
                         error: (errorCode, messageId) => {
-                            console.log('errorCode', errorCode);
+                            uni.showToast({
+                                icon: 'none',
+                                title: errorCode
+                            })
                         }
                     })
                 }

pages/im/components/show/showText.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="msg--text">
         <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
-
+
         <view class="">
             <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
             <view :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
@@ -11,9 +11,13 @@
 
 <script>
     import messageState from './messageState'
+    import imBase from '../../mixins/imBase.js'
 
     export default {
         name: 'showText',
+        mixins: [
+            imBase,
+        ],
         props: {
             message: {
                 type: Object,
@@ -35,11 +39,6 @@
             },
             content() {
                 return this.message.content.content
-            },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
             }
         }
     }
@@ -58,7 +57,7 @@
         .text {
             box-sizing: border-box;
             max-width: 502rpx;
-            padding: 20rpx;
+            padding: 20rpx 24rpx;
             line-height: 46rpx;
             font-size: 32rpx;
             color: $text-color;

pages/im/components/show/showVoice.vue

@@ -23,8 +23,12 @@
 <script>
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import messageState from './messageState'
+    import imBase from '../../mixins/imBase.js'
 
     export default {
+        mixins: [
+            imBase
+        ],
         props: {
             message: {
                 type: Object,
@@ -54,11 +58,6 @@
             isRemote() {
                 return this.message.messageDirection == 2
             },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            },
             width() {
                 if (this.duration > 3) {
                     return (this.duration * 5) + 150
@@ -75,11 +74,6 @@
                 }
             })
         },
-
-        created() {
-            console.log(this.message.messageId)
-        },
-
         methods: {
             // 播放语音消息
             startPlay() {

pages/im/components/showMessageCell.vue

@@ -1,13 +1,17 @@
 <template>
     <view class="">
-        <view class="notify" v-if="message.objectName === 'RC:GrpNtf'">{{ message.content.message }}</view>
+        <view class="notify" v-if="message.objectName === 'RC:GrpNtf'">
+            {{ message.content.message }}
+            <text class="link" @click="toAnnounce(message)" v-if="message.content.operation == 'ANNOUNCEMENT'">点击查看
+            </text>
+        </view>
         <view class="notify" v-else-if="message.objectName === 'RC:RcNtf'">
             {{ contact(message.senderUserId).name }} 撤回了一条消息
         </view>
         <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" @longpress="backMessage">
+            <view class="msg" @longpress="messageAction($event, message)">
                 <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,14 +26,21 @@
 </template>
 
 <script>
+    import {
+        getGroupAnnouncement
+    } from '@/apis/interfaces/im.js'
     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'
     import showCall from './show/showCall'
     import utils from '@/utils/index.js'
+    import imBase from '../mixins/imBase.js'
 
     export default {
+        mixins: [
+            imBase
+        ],
         components: {
             showCall,
             showVoice,
@@ -48,22 +59,13 @@
                 default: false
             }
         },
-        data() {
-            return {
-                avatarRpx: 84
-            }
-        },
-        computed: {
-            avatarSize() {
-                return utils.rpx2px(this.avatarRpx)
-            },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            }
-        },
         methods: {
+            messageAction(event, message) {
+                this.$emit('messageAction', {
+                    event,
+                    message
+                })
+            },
             toUser(item) {
                 if (item.messageDirection == 1) {
                     uni.navigateTo({
@@ -75,39 +77,33 @@
                     })
                 }
             },
-            // 撤回消息测试
-            backMessage() {
-                if (this.$store.getters.sender.userId != this.message.senderUserId) {
+            // 跳转群公告
+            toAnnounce(message) {
+                if (message.content.extra) {
+                    getGroupAnnouncement(message.targetId, message.content.extra).then(res => {
+                        uni.navigateTo({
+                            url: '/pages/im/group/announceCreate?type=check&targetId=' + message
+                                .targetId + '&aId=' + message.content.extra
+                        })
+                    }).catch(err => {
+                        IMLib.deleteMessagesByIds([message.messageId], ({
+                            code
+                        }) => {
+                            if (code === 0) {
+                                uni.$emit('remove_message_' + message.targetId, message.messageId)
+                            }
+                        })
+                        uni.showToast({
+                            title: '公告不存在或已删除',
+                            icon: 'none',
+                        })
+                    })
+                } else {
                     uni.showToast({
                         icon: 'none',
-                        title: '不能撤回别人的消息'
+                        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
-                            })
-                        }
-                    }
-                )
             }
         }
     }
@@ -118,6 +114,11 @@
         text-align: center;
         font-size: 24rpx;
         color: #666;
+
+        .link {
+            color: $main-color;
+            margin-left: 10rpx;
+        }
     }
 
     .cell-item {

pages/im/friends/index.vue

@@ -2,12 +2,12 @@
     <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">
@@ -20,14 +20,15 @@
                             :src="contact(friendItem.targetId).portraitUrl" />
                         <view class="info">
                             <view class="name">{{ contact(friendItem.targetId).name }}</view>
-                            <!-- <view class="address">地址:{{ friendItem.address }}</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>
@@ -38,8 +39,12 @@
     } from '@/apis/interfaces/im';
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
-
-    export default {
+    import imBase from '../mixins/imBase.js'
+    
+    export default {
+        mixins: [
+            imBase
+        ],
         data() {
             return {
                 indexs: [],
@@ -55,9 +60,14 @@
             }
         },
         onLoad() {
+            uni.$on('onNewContactFriends', this.checkNewFriendPending)
+        },
+        onShow() {
             this.getFriendList()
             this.checkNewFriendPending()
-            uni.$on('onContactNotification', this.checkNewFriendPending)
+        },
+        onUnload() {
+            uni.$off("onNewContactFriends")
         },
         methods: {
             getFriendList() {
@@ -73,10 +83,7 @@
             },
             toGroup() {
                 uni.navigateTo({
-                    url: '/pages/im/group/index',
-                    fail(err) {
-                        console.log(err);
-                    }
+                    url: '/pages/im/group/index'
                 })
             },
             toFriend(targetId) {
@@ -86,24 +93,15 @@
             },
             // 新朋友
             toPending() {
-                // if (this.pendingCount > 0) {
                 uni.navigateTo({
                     url: '/pages/im/friends/pending'
-                });
-                // } else {
-                //     uni.showToast({
-                //         title: ` 暂无好友申请 ~ `,
-                //         icon: "none",
-                //         mask: true,
-                //         duration: 3000
-                //     })
-                // }
+                })
             }
         },
         onNavigationBarButtonTap(e) {
             uni.navigateTo({
                 url: '/pages/im/friends/search'
-            });
+            })
         }
     };
 </script>
@@ -172,4 +170,19 @@
         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>

pages/im/friends/info.vue

@@ -30,7 +30,7 @@
                     <u-icon name="arrow-right" color="#eee" size="16" />
                 </view>
                 <view class="item u-border-bottom">
-                    <label>聊天免打扰</label>
+                    <label>消息免打扰</label>
                     <u-switch size="22" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
                 </view>
                 <view class="item">
@@ -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'
                 })
             }
         }

pages/im/friends/mine.vue

@@ -4,7 +4,7 @@
         <!-- 用户信息 -->
         <view class="info-flex">
             <view class="info-flex-item">
-                <u-avatar :src="infoObj.portraitUrl" shape="square" size="210rpx" bg-color="#fff" class="avatar" />
+                <u-avatar :src="infoObj.portraitUrl" @click='previewImg(infoObj.portraitUrl)' shape="square" size="210rpx" bg-color="#fff" class="avatar" />
                 <view class="nickname">{{infoObj.name}}</view>
                 <view class="address">{{infoObj.address}}</view>
                 <view class="info-code">
@@ -23,7 +23,8 @@
 <script>
     import {
         getUserInfo
-    } from '@/apis/interfaces/im'
+    } from '@/apis/interfaces/im.js'
+    
     export default {
         data() {
             return {
@@ -46,7 +47,13 @@
                 this.infoObj = res
             })
         },
-        methods: {
+        methods: {
+            previewImg(item){
+                console.log(item)
+                uni.previewImage({
+                    urls:[item]
+                })
+            },
             copy() {
                 uni.setClipboardData({
                     data: this.downUrl,
@@ -99,7 +106,7 @@
 
                 .avatar {
                     // padding: 14rpx; 
-                    border-radius: 10rpx;
+                    border-radius: 20rpx;
                     background-color: #fff;
                     border: solid 14rpx rgba($color: #fff, $alpha:1);
                 }

pages/im/friends/pending.vue

@@ -2,7 +2,7 @@
     <view class="pending">
         <u-sticky>
             <view class="header-search" @click="$Router.push({ name: 'SearchFriend' })">
-                <u-search placeholder="输入手机号码搜索" height="74" searchIcon="search" inputAlign="center" bgColor="white"
+                <u-search placeholder="输入手机号码搜索" searchIcon="search" inputAlign="center" bgColor="white"
                     :disabled="true" :show-action="false" />
             </view>
         </u-sticky>
@@ -10,11 +10,11 @@
             <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>
+        </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>
@@ -29,21 +29,25 @@
         },
         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) => {
-                    if (pendings.length > 0) {
-                        this.bg = '#f9f9f9'
-                    } else {
-                        this.bg = '#fff'
+                im.getPendingList((pendings) => {
+                    console.log(pendings, 'res......')
+                    if (pendings.length > 0) {
+                        this.bg = '#f9f9f9'
+                    } else {
+                        this.bg = '#fff'
                     }
                     this.pendings = pendings
                 })
@@ -58,18 +62,18 @@
         background: $window-color;
     }
 
-    .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;
-        }
+    .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>

pages/im/friends/search.vue

@@ -8,17 +8,19 @@
 
 <template>
     <view class="search">
-        <!-- 搜索 、   -->
+        <!-- 搜索 -->
         <u-sticky>
             <view class="header-search">
-                <u-search placeholder="输入用户账号、手机号" height="74" searchIcon="search" @custom="search" v-model="searchValue" @search="search" bgColor="#f9f9f9" :focus="focused" />
+                <u-search placeholder="输入用户账号、手机号" searchIcon="search" @custom="search" v-model="searchValue"
+                    @search="search" bgColor="#F3F6FB" :focus="focused" />
             </view>
         </u-sticky>
         <block v-if="searchResult.length > 0">
             <applyFriend :lists="searchResult" :isApply="true" @action="action" />
         </block>
-        <view class="no-lists" v-else>
-            <u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
+        <view class="no-lists" v-if="searchResult.length === 0 && searchValue.length > 1">
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
+                :src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
             <span>暂无匹配内容~</span>
         </view>
     </view>
@@ -30,6 +32,7 @@
         pedingFriend
     } from '@/apis/interfaces/im.js';
     import applyFriend from '../components/friendSearchList.vue';
+
     export default {
         components: {
             applyFriend
@@ -41,13 +44,27 @@
                 focused: true
             };
         },
+        watch: {
+            searchValue(value) {
+                console.log(value.length, 'length...')
+                if (value.length > 1) {
+                    this.searchResult = []
+                    this.search()
+                    return
+                }
+                if(value.length === 0){
+                    this.searchResult = []
+                    return
+                }
+            }
+        },
         methods: {
             search() {
-                 // friendship: ''    没有好友关系
-                 // accepted    好友
-                 // pending  申请中
-                 // denied 拒绝 
-                 // blocked 黑名单
+                // friendship: ''    没有好友关系
+                // accepted    好友
+                // pending  申请中
+                // denied 拒绝 
+                // blocked 黑名单
                 searchFriend(this.searchValue)
                     .then(res => {
                         this.searchResult = res;
@@ -60,9 +77,9 @@
                         });
                     });
             },
-            action(e) {
-                uni.navigateTo({
-                    url: '/pages/im/friends/info?targetId=' + e.item.targetId
+            action(e) {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + e.item.targetId
                 })
             }
         }

pages/im/group/announceCreate.vue

@@ -1,13 +1,15 @@
 <template>
     <view class="create">
         <view class="create-title">公告内容</view>
-        <block v-if="type !== 'cheack'">
+
+        <block v-if="type === 'check'">
+            <view class="content"> {{content}} </view>
+        </block>
+
+        <block v-else>
             <u--textarea v-model="content" count height="240" maxlength="240" placeholder="请输入公告内容" />
             <u-button type="primary" text="发布" :disabled="disabled" @click="onCreate" color="#34CE98" />
         </block>
-        <block v-if="type === 'cheack'">
-            <view class="content-a"> {{content}} </view>
-        </block>
     </view>
 </template>
 
@@ -16,32 +18,42 @@
         createGroupAnnouncement,
         getGroupAnnouncement
     } from '@/apis/interfaces/im.js'
+    import onGroupDismiss from '../mixins/onGroupDismiss.js'
 
     export default {
+        mixins: [
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
                 content: '',
                 aId: '',
-                type: '' // check ' 查看详情'
+                type: '' // cheack ' 查看详情'
             }
         },
         onLoad(e) {
             this.targetId = e.targetId
-            if (e.type) {
-                this.type = e.type
-            }
-            if (e.aId) {
+            if (e.aId) {
+                this.type = e.type
+                uni.setNavigationBarTitle({
+                    title: '群公告'
+                })
                 this.aId = e.aId
                 getGroupAnnouncement(this.targetId, this.aId).then(res => {
-                    console.log(res.content)
                     this.content = res.content
                 }).catch(err => {
-                    uni.showToast({
-                        title: err.message,
-                        icon: 'none',
-                        mask: true
-                    })
+                    if (err.status_code == 404) {
+                        this.$nextTick(() => {
+                            uni.navigateBack()
+                        })
+                    } else {
+                        uni.showToast({
+                            title: err.message,
+                            icon: 'none',
+                            mask: true
+                        })
+                    }
                 })
             }
         },
@@ -95,7 +107,7 @@
             }
         }
 
-        .content-a {
+        .content {
             color: $text-color;
             font-size: $title-size;
             line-height: 1.7;

pages/im/group/announcement.vue

@@ -35,8 +35,14 @@
         deleteGroupAnnouncement,
         topGroupAnnouncement
     } from '@/apis/interfaces/im.js'
+    import onGroupDismiss from '../mixins/onGroupDismiss.js'
+    import imBase from '../mixins/imBase.js'
 
     export default {
+        mixins: [
+            imBase,
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
@@ -54,8 +60,8 @@
                     name: '置顶该公告',
                     disabled: false
                 }],
-                actionTitle: '请选择操作',
-                bg:'#fff'
+                actionTitle: '请选择操作',
+                bg: '#fff'
             }
         },
         onLoad(e) {
@@ -84,11 +90,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
@@ -115,7 +121,7 @@
             },
             tabA(id) {
                 uni.navigateTo({
-                    url: '/pages/im/group/announceCreate?type=cheack&targetId=' + this.targetId + '&aId=' + id
+                    url: '/pages/im/group/announceCreate?type=check&targetId=' + this.targetId + '&aId=' + id
                 })
             },
             onTop(aId) {
@@ -128,14 +134,6 @@
                     uni.$emit('updateAnnouncement')
                     this.initData()
                 })
-                // uni.showModal({
-                //     title: ' 置顶该公告',
-                //     success: (res) => {
-                //         if (res.confirm) {
-
-                //         }
-                //     }
-                // })
             },
             //  删除公告
             onDelete(aId) {
@@ -148,14 +146,6 @@
                     uni.$emit('updateAnnouncement')
                     this.initData()
                 })
-                //        uni.showModal({
-                //            title: '删除该公告',
-                //            success: (res) => {
-                //                if (res.confirm) {
-
-                //                }
-                //            }
-                //        })
             }
         }
     }
@@ -183,8 +173,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,8 +183,9 @@
                 align-items: center;
                 box-sizing: border-box;
                 font-size: $title-size-m;
-                color: $text-gray-m;
-                padding: 10rpx;
+                color: $text-gray-m;
+                padding: 20rpx 10rpx 10rpx 10rpx;
+                border-top: solid 1rpx #F9F9F9;
 
                 .name {
                     padding-left: 10rpx;
@@ -214,9 +205,7 @@
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 3;
                 overflow: hidden;
-                line-height: 1.5;
-                border-bottom: solid 1rpx  #F9F9F9;
-                padding-bottom: 20rpx;
+                line-height: 1.5;
 
                 span {
                     color: #fff;

pages/im/group/apply.vue

@@ -20,8 +20,14 @@
         joinGroupPre,
         joinGroup
     } from '@/apis/interfaces/im.js'
-
-    export default {
+    import onGroupDismiss from '../mixins/onGroupDismiss.js'
+    import imBase from '../mixins/imBase.js'
+    
+    export default {
+        mixins: [
+            imBase,
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
@@ -45,7 +51,7 @@
                     mask: true,
                     duration: 3000
                 })
-            })
+            })
         },
         methods: {
             toGroupChat() {

pages/im/group/chat.vue

@@ -2,10 +2,18 @@
     <view class="chat">
         <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
 
+        <view class="shade" @click="hidePop" v-show="showPop">
+            <view class="pop" :style="popStyle" :class="{'show':showPop}">
+                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(item)">
+                    {{ item }}
+                </view>
+            </view>
+        </view>
+
         <view class="body">
             <view class="scroll">
                 <view class="cell" v-for="(message, index) in messages" :key="index">
-                    <show-message-cell :message="message" isGroup />
+                    <show-message-cell :message="message" isGroup @messageAction="messageAction" />
                 </view>
             </view>
         </view>
@@ -21,8 +29,16 @@
     import sentMessageBar from '../components/sentMessageBar'
     import showMessageCell from '../components/showMessageCell'
     import utils from '@/utils/index.js'
+    import onGroupDismiss from '../mixins/onGroupDismiss.js'
+    import imBase from '../mixins/imBase.js'
+    import messageActions from '../mixins/messageActions.js'
 
     export default {
+        mixins: [
+            imBase,
+            onGroupDismiss,
+            messageActions
+        ],
         components: {
             sentMessageBar,
             showMessageCell
@@ -49,21 +65,16 @@
                 }
             }
         },
+        onShow() {
+            this.initGroupInfo()
+        },
         onLoad(e) {
             this.targetId = e.targetId
-            // 获取群成员数量
-            getGroupBase(this.targetId).then(res => {
-                uni.setNavigationBarTitle({
-                    title: res.name + `(${res.members})`
-                })
-            })
             // 获取历史消息列表
             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) {
@@ -88,20 +99,24 @@
             })
             // 清理聊天记录
             uni.$once('cleanGroupMessage', this.getMessageList)
-            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
-                        }
-                    })
-                }
+            uni.$on('onRecallMessage_' + this.targetId, (message) => {
+                this.messages = this.messages.map(item => {
+                    if (message.messageId == item.messageId) {
+                        return message
+                    } else {
+                        return item
+                    }
+                })
+            })
+            uni.$on('onRemoveMessage_' + this.targetId, (messageId) => {
+                this.messages = this.messages.filter(item => item.messageId != messageId)
             })
         },
         onUnload() {
-            uni.$off('onRecallMessage')
+            uni.$off('onRemoveMessage_' + this.targetId)
+            uni.$off('onReceiveMessage_' + this.targetId)
+            uni.$off('onUpdateProfile_' + this.targetId)
+            uni.$off('onRecallMessage_' + this.targetId)
             uni.$off('onReceiptRequest')
             uni.$off('onReceiptResponse')
         },
@@ -111,6 +126,14 @@
             })
         },
         methods: {
+            initGroupInfo() {
+                // 获取群信息，成员数量，设置标题
+                getGroupBase(this.targetId).then(res => {
+                    uni.setNavigationBarTitle({
+                        title: res.name + `(${res.members})`
+                    })
+                })
+            },
             onScroll(e) {
                 this.$refs.messageBar.onHidePopus()
             },
@@ -164,7 +187,7 @@
         },
         onHide() {
             // console.log(JSON.stringify(this.$refs))
-            this.$refs.voice.stopPlay()
+            // this.$refs.voice.stopPlay()
         }
     }
 </script>
@@ -197,4 +220,47 @@
             }
         }
     }
+
+    /* 遮罩 */
+    .shade {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        z-index: 999;
+
+        .pop {
+            border-radius: 10rpx;
+            position: fixed;
+            z-index: 101;
+            width: 200rpx;
+            box-sizing: border-box;
+            font-size: 28rpx;
+            text-align: left;
+            color: #333;
+            background-color: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            line-height: 80rpx;
+            transition: transform 0.15s ease-in-out 0s;
+            user-select: none;
+            -webkit-touch-callout: none;
+            transform: scale(0, 0);
+
+            &.show {
+                transform: scale(1, 1);
+            }
+
+            &>view {
+                padding: 0 20rpx;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                user-select: none;
+                -webkit-touch-callout: none;
+
+                &:active {
+                    background-color: #f3f3f3;
+                }
+            }
+        }
+    }
 </style>

pages/im/group/index.vue

@@ -3,16 +3,15 @@
         <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" />
+                <u-avatar size="36" shape="square" :src="contact(item.targetId).portraitUrl" />
                 <view class="info">
-                    <view class="name">{{ item.name }}</view>
+                    <view class="name">{{ item.name }}  <span class="total">共{{ item.members }} 成员</span></view>
                 </view>
             </view>
-            <view class="group-count"> {{groups.length}}个群聊 </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" />
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
             <span>空空如也~</span>
         </view>
         <u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
@@ -49,13 +48,14 @@
         onNavigationBarButtonTap() {
             this.createModal = true
         },
-        onLoad() {
+        onShow() {
             this.initData()
             uni.$on('onGroupDismiss', this.initData)
         },
         methods: {
             initData() {
-                getMyGroups().then((res) => {
+                getMyGroups().then((res) => {
+                    console.log(res,'res...')
                     if (res.length > 0) {
                         this.bg = '#f9f9f9'
                     } else {
@@ -137,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 {

pages/im/group/info.vue

@@ -9,12 +9,11 @@
                 <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>
-            <u-cell class="u-border-bottom" :border="false" title="免打扰">
+            <u-cell class="u-border-bottom" :border="false" title="消息免打扰">
                 <u-switch slot="value" size="20" v-model="status" activeColor="#34CE98" @change="setStatus" />
             </u-cell>
         </u-cell-group>
@@ -22,11 +21,10 @@
         <u-cell-group class="cells" v-if="group.is_admin" :border="false">
             <u-cell :border="false" class="u-border-bottom" isLink title="修改群聊名称" :value="groupName"
                 @click="onGroupName" />
-            <u-cell :border="false" class="u-border-bottom" isLink title="修改群头像" @click="onGroupAvatar">
+           <!-- <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> -->
+            <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="12" /> </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,18 @@
         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 '../mixins/onGroupDismiss.js'
+    import imBase from '../mixins/imBase.js'
+    
     export default {
         components: {
             groupUserList
-        },
+        },
+        mixins: [
+            imBase,
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
@@ -133,7 +131,6 @@
                         return item.key == res.join_type
                     })[0].name
                 }).catch(err => {
-                    console.log('getGroupInfo ERR', err);
                     uni.showToast({
                         icon: 'none',
                         title: '群不存在'

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,15 @@
         getGroupUsers
     } from '@/apis/interfaces/im';
     import utils from '@/utils/index.js'
-
+    import onGroupDismiss from '../mixins/onGroupDismiss.js'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import imBase from '../mixins/imBase.js'
 
     export default {
+        mixins: [
+            imBase,
+            onGroupDismiss
+        ],
         data() {
             return {
                 searchTxt: '',
@@ -60,13 +66,6 @@
                 selectValue: []
             };
         },
-        computed: {
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
-            }
-        },
         onLoad(e) {
             this.targetId = e.targetId
             this.getFriendList()
@@ -80,11 +79,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 +100,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 +121,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',

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'">
@@ -22,7 +22,7 @@
         <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>
+            <span>暂无群聊申请数据</span>
         </view>
     </view>
 </template>
@@ -34,9 +34,14 @@
     } 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 '../mixins/onGroupDismiss.js'
+    import imBase from '../mixins/imBase.js'
 
     export default {
+        mixins: [
+            imBase,
+            onGroupDismiss
+        ],
         data() {
             return {
                 targetId: '',
@@ -79,28 +84,27 @@
                             uni.$emit('groupInvitedUser')
                         }
                     })
-
                 }).catch(err => {
                     // uni.showToast({
                     //     title: err.message,
                     //     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 +157,7 @@
         }
 
     }
+
     .no-lists {
         padding-top: $padding * 5;
         display: flex;

pages/im/group/users.vue

@@ -4,7 +4,12 @@
 
 <script>
     import groupUserList from '../components/groupUserList'
+    import onGroupDismiss from '../mixins/onGroupDismiss.js'
+
     export default {
+        mixins: [
+            onGroupDismiss
+        ],
         components: {
             groupUserList
         },

pages/im/index.vue

@@ -46,7 +46,8 @@
             return {
                 conversations: [], // 会话列表
                 connection: 0,
-                hasNewFriends: 0
+                hasNewFriends: 0,
+                perPage: 200
             }
         },
         components: {
@@ -54,27 +55,35 @@
             connectionStatus
         },
         onLoad() {
-            // 好友申请数量
-            this.checkNewFriendPending()
             // 监听新的好友申请
-            uni.$on('onContactNotification', () => {
+            uni.$on('onNewContactConversation', () => {
+                console.log('更新好友申请数量');
+                // 更新好友申请数量
                 this.checkNewFriendPending()
             })
         },
         onShow() {
+            // 好友申请数量
+            this.checkNewFriendPending()
+
             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() {
@@ -91,11 +100,9 @@
                 }
                 return true
             },
-            // 获取私聊的会话列表
+            // 获取会话列表，最新的一千条
             getConversationList() {
-                const count = 1000
-                const timestamp = 0
-                RongIMLib.getConversationList([1, 3], count, timestamp, ({
+                RongIMLib.getConversationList([1, 3], this.perPage, 0, ({
                     code,
                     conversations
                 }) => {

pages/im/mixins/imBase.js

@@ -0,0 +1,17 @@
+import utils from '@/utils/index.js'
+
+export default {
+    computed: {
+        contact() {
+            return function(targetId) {
+                return this.$store.getters.contactInfo(targetId)
+            }
+        },
+        avatarSize() {
+            return utils.rpx2px(84)
+        },
+        sender() {
+            return this.$store.getters.sender
+        }
+    }
+}

pages/im/mixins/messageActions.js

@@ -0,0 +1,134 @@
+import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
+export default {
+    data() {
+        return {
+            winSize: {},
+            showPop: false,
+            /* 弹窗按钮列表 */
+            popButton: ['复制', '删除', '撤回'],
+            /* 弹窗定位样式 */
+            popStyle: "",
+            pickedItem: {}
+        }
+    },
+    onLoad() {
+        uni.getSystemInfo({
+            success: (e) => {
+                this.winSize = {
+                    width: e.windowWidth,
+                    height: e.windowHeight
+                }
+            }
+        })
+    },
+    methods: {
+        // 隐藏功能菜单
+        hidePop() {
+            this.showPop = false
+            this.pickedItem = {}
+            setTimeout(() => {
+                this.showShade = false
+            }, 250)
+        },
+        // 点击会话功能菜单
+        pickerMenu(e) {
+            const msg = this.pickedItem
+            console.log(msg);
+            switch (e) {
+                case '复制':
+                    uni.setClipboardData({
+                        data: msg.content.content
+                    })
+                    uni.showToast({
+                        icon: 'none',
+                        title: '复制成功'
+                    })
+                    break;
+                case '删除':
+                    IMLib.deleteMessagesByIds([msg.messageId], ({
+                        code
+                    }) => {
+                        if (code === 0) {
+                            uni.$emit('onRemoveMessage_' + msg.targetId, msg.messageId)
+                            uni.showToast({
+                                title: '消息删除成功',
+                                icon: 'none',
+                            })
+                        }
+                    })
+                    break;
+                case '撤回':
+                    const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
+                    IMLib.recallMessage(msg.messageId, pushContent,
+                        ({
+                            code,
+                            message
+                        }) => {
+                            if (code === 0) {
+                                uni.showToast({
+                                    icon: 'none',
+                                    title: '消息撤回成功'
+                                })
+                                IMLib.getMessage(msg.messageId, res => {
+                                    uni.$emit('onRecallMessage_' + msg.targetId, res.message)
+                                })
+                            } else {
+                                uni.showToast({
+                                    icon: 'none',
+                                    title: '撤回失败' + code
+                                })
+                            }
+                        }
+                    )
+                    break;
+            }
+            this.hidePop()
+        },
+        messageAction(e) {
+            let [touches, style, item] = [e.event.touches[0], "", e.message]
+
+            if (touches.clientY > (this.winSize.height / 2)) {
+                style = `bottom:${this.winSize.height-touches.clientY}px;`
+            } else {
+                style = `top:${touches.clientY}px;`
+            }
+
+            if (touches.clientX > (this.winSize.width / 2)) {
+                style += `right:${this.winSize.width-touches.clientX}px`
+            } else {
+                style += `left:${touches.clientX}px`
+            }
+
+            if (item.messageDirection == 2) {
+                if (item.objectName == 'RC:TxtMsg') {
+                    this.popButton = ['复制', '删除']
+                } else {
+                    this.popButton = ['删除']
+                }
+            } else {
+                if ((new Date()).getTime() - item.sentTime > 120 * 1000) {
+                    if (item.objectName == 'RC:TxtMsg') {
+                        this.popButton = ['复制', '删除']
+                    } else {
+                        this.popButton = ['删除']
+                    }
+                } else {
+                    if (item.objectName == 'RC:TxtMsg') {
+                        this.popButton = ['复制', '撤回']
+                    } else {
+                        this.popButton = ['删除']
+                    }
+                }
+            }
+
+            this.popStyle = style
+            this.pickedItem = item
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.showPop = true;
+                }, 10)
+            })
+        },
+    }
+}

pages/im/mixins/onGroupDismiss.js

@@ -0,0 +1,34 @@
+// 监听群解散的消息，直接跳转到会话列表页面
+export default {
+    data() {
+        return {
+            currentTargetId: ''
+        }
+    },
+    onLoad(e) {
+        this.currentTargetId = e.targetId
+
+        uni.$once('onGroupDismiss_' + e.targetId, () => {
+            uni.showToast({
+                icon: 'none',
+                title: '当前群已解散'
+            })
+            uni.switchTab({
+                url: '/pages/im/index'
+            })
+        })
+        uni.$once('onGroupRemoveYou_' + e.targetId, () => {
+            uni.showToast({
+                icon: 'none',
+                title: '您已被移出群聊'
+            })
+            uni.switchTab({
+                url: '/pages/im/index'
+            })
+        })
+    },
+    onUnload() {
+        uni.$off('onGroupDismiss_' + this.currentTargetId)
+        uni.$off('onGroupRemoveYou_' + this.currentTargetId)
+    }
+}

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
                 })
             },

pages/im/private/chat.vue

@@ -1,11 +1,20 @@
 <template>
     <view class="chat">
         <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+
+        <view class="shade" @click="hidePop" v-show="showPop">
+            <view class="pop" :style="popStyle" :class="{'show':showPop}">
+                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(item)">
+                    {{ item }}
+                </view>
+            </view>
+        </view>
+
         <!-- 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" @messageAction="messageAction" />
                 </view>
             </view>
         </view>
@@ -18,8 +27,14 @@
     import sentMessageBar from '../components/sentMessageBar'
     import showMessageCell from '../components/showMessageCell'
     import utils from '@/utils/index.js'
-
+    import imBase from '../mixins/imBase.js'
+    import messageActions from '../mixins/messageActions.js'
+    
     export default {
+        mixins: [
+            imBase,
+            messageActions
+        ],
         components: {
             sentMessageBar,
             showMessageCell
@@ -45,11 +60,6 @@
                         sentTime: 0
                     }
                 }
-            },
-            contact() {
-                return function(targetId) {
-                    return this.$store.getters.contactInfo(targetId)
-                }
             }
         },
         onLoad(e) {
@@ -60,6 +70,10 @@
             })
             // 获取消息列表
             this.getMessageList()
+            // 监听新消息
+            uni.$on('onReceiveMessage_' + this.targetId, (message) => {
+                this.getNewMessage()
+            })
             // 监听消息已读状态
             uni.$on('onReadReceiptReceived', (data) => {
                 if (data.targetId == this.targetId) {
@@ -72,25 +86,29 @@
                     })
                 }
             })
-            // 监听收到新消息，判断是否是当前会话，更新会话内容
-            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
-                        }
-                    })
-                }
+            uni.$on('onRecallMessage_' + this.targetId, (message) => {
+                this.messages = this.messages.map(item => {
+                    if (message.messageId == item.messageId) {
+                        return message
+                    } else {
+                        return item
+                    }
+                })
+            })
+            uni.$once('onUserDelete_' + this.targetId, () => {
+                uni.showToast({
+                    icon: 'none',
+                    title: '好友关系已解除'
+                })
+                uni.switchTab({
+                    url: '/pages/im/index'
+                })
             })
         },
-        onUnload() {
+        onUnload() {
+            uni.$off('onUserDelete_' + this.targetId)
+            uni.$off('onReceiveMessage_' + this.targetId)
+            uni.$off('onRecallMessage_' + this.targetId)
             uni.$off('onRecallMessage')
             uni.$off('onReadReceiptReceived')
         },
@@ -195,4 +213,47 @@
             }
         }
     }
+
+    /* 遮罩 */
+    .shade {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        z-index: 999;
+
+        .pop {
+            border-radius: 10rpx;
+            position: fixed;
+            z-index: 101;
+            width: 200rpx;
+            box-sizing: border-box;
+            font-size: 28rpx;
+            text-align: left;
+            color: #333;
+            background-color: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            line-height: 80rpx;
+            transition: transform 0.15s ease-in-out 0s;
+            user-select: none;
+            -webkit-touch-callout: none;
+            transform: scale(0, 0);
+
+            &.show {
+                transform: scale(1, 1);
+            }
+
+            &>view {
+                padding: 0 20rpx;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                user-select: none;
+                -webkit-touch-callout: none;
+
+                &:active {
+                    background-color: #f3f3f3;
+                }
+            }
+        }
+    }
 </style>

store/modules/im.js

@@ -76,7 +76,8 @@ export default {
                                 name: contactInfo.name,
                                 hash: contactInfo.hash,
                                 portraitUrl: contactInfo.portraitUrl,
-                                localAvatar: savedFilePath
+                                localAvatar: savedFilePath,
+                                type: contactInfo.type
                             }
                             model.update('targetId="' + contactInfo.targetId + '"', info, (err,
                                 res) => {
@@ -90,7 +91,8 @@ export default {
                             name: contactInfo.name,
                             hash: contactInfo.hash,
                             portraitUrl: contactInfo.portraitUrl,
-                            localAvatar: result[0].localAvatar
+                            localAvatar: result[0].localAvatar,
+                            type: contactInfo.type
                         }
                         model.update('targetId="' + contactInfo.targetId + '"', info, (err, res) => {
                             console.log('UPDATE NAME, ERR', err, info);
@@ -117,7 +119,8 @@ export default {
                         name: contactInfo.name,
                         hash: contactInfo.hash,
                         portraitUrl: contactInfo.portraitUrl,
-                        localAvatar: savedFilePath
+                        localAvatar: savedFilePath,
+                        type: contactInfo.type
                     }
                     model.insert(info, (err, res) => {})
                     // 保存头像后，更新信息
@@ -130,7 +133,8 @@ export default {
                     name: contactInfo.name,
                     hash: contactInfo.hash,
                     portraitUrl: contactInfo.portraitUrl,
-                    localAvatar: ''
+                    localAvatar: '',
+                    type: contactInfo.type
                 }
                 model.insert(info, (err, res) => {})
             }

utils/im/index.js

@@ -62,7 +62,7 @@ const connect = (token, userInfo, callback) => {
         // 设置未读消息数量
         setNotifyBadge()
         // 首次运行获取好友列表
-        const FK = 'ZHKD_' + userInfo.targetId
+        const FK = 'ZH_V_' + userInfo.targetId
 
         uni.getStorage({
             key: FK,

utils/im/listeners.js

@@ -20,7 +20,30 @@ 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 => {
+            console.log('targetId', res);
+            store.dispatch('initContact', res)
+        }).catch(err => {
+            console.error('getUserInfo ERR', err)
+        })
+    }
+    if (!store.getters.contactIsExist(message.senderUserId)) {
+        getUserInfo(message.senderUserId).then(res => {
+            console.log('senderUserId', message.senderUserId, res);
+            store.dispatch('initContact', res)
+        }).catch(err => {
+            console.error('getUserInfo ERR', err)
+        })
+    }
 }
 
 // 允许通知的消息类型，触发更新消息列表操作,提示音
@@ -32,10 +55,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,40 +68,54 @@ 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) {
-            // 更新会话信息
+            uni.$emit('onUpdateProfile_' + message.targetId)
+            // 更新联系人信息
             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)
+            if (message.content.operation === 'Request') {
+                // 触发一个新好友的通知事件，【会话列表，通讯录，新朋友】页面
+                uni.$emit('onNewContactConversation', message)
+                uni.$emit('onNewContactFriends', message)
+                uni.$emit('onNewContactPendings', message)
+            } else if (message.content.operation === 'Delete') {
+                IMLib.cleanHistoryMessages(1, message.targetId, message.sentTime, false)
+                // 解散了就删了吧
+                IMLib.removeConversation(1, message.targetId)
+                // 刷新会话列表
+                uni.$emit('onUserDelete_' + message.targetId)
+                uni.$emit('onReceiveMessage', message)
+            }
         } else if (message.objectName === IMLib.ObjectName.GroupNotification) {
             // 解散群
             if (message.content.operation === 'Dismiss') {
-                IMLib.cleanHistoryMessages(message.conversationType, message.targetId, message.sentTime,
+                IMLib.cleanHistoryMessages(3, message.targetId, message.sentTime,
                     false)
                 // 解散了就删了吧
-                IMLib.removeConversation(message.conversationType, message.targetId)
-                uni.$emit('onGroupDismiss', message.targetId)
+                IMLib.removeConversation(3, message.targetId)
+                // 发布群解散的消息
+                uni.$emit('onGroupDismiss')
+                uni.$emit('onGroupDismiss_' + message.targetId)
+            } else if (message.content.operation === 'REMOVE') {
+                // 要判断是否当前用户，然后把当前用户踢出到主页去， 删除聊天记录，会话列表
+                if (message.content.extra == store.getters.sender.userId) {
+                    IMLib.cleanHistoryMessages(3, message.targetId, message.sentTime,
+                        false)
+                    // 解散了就删了吧
+                    IMLib.removeConversation(3, message.targetId)
+                    // 为了更新群列表
+                    uni.$emit('onGroupDismiss')
+                    uni.$emit('onGroupRemoveYou_' + message.targetId)
+                }
+                uni.$emit('onReceiveMessage_' + message.targetId, message)
+                // 这个是为了更新消息列表页的
             }
+            // 触发刷新会话列表
             uni.$emit('onReceiveMessage', message)
         }
     })
@@ -93,10 +127,16 @@ 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(({
+        data
+    }) => {
+        IMLib.getMessage(data.messageId, ({
+            message
+        }) => {
+            console.error("消息撤回: ", message);
+            im.setNotifyBadge()
+            uni.$emit('onReceiveMessage', message)
+            uni.$emit('onRecallMessage_' + message.targetId, message)
         })
     })
     // 监听需要群聊消息回执
@@ -118,7 +158,7 @@ const imLibListeners = () => {
                 readers
             })
             // 在消息的扩展数据中，设置已读数量
-            IMLib.setMessageExtra(message.messageId, extra, (result) => {
+            IMLib.setMessageExtra(message.messageId, extra, (result) => {
                 message.extra = extra
                 uni.$emit('onReceiptResponse', message)
             })

utils/im/message.js

@@ -17,7 +17,7 @@ const getMessageList = (conversationType, targetId, timeStamp, count, isForward,
         'RC:ReferenceMsg',
         'RC:CombineMsg',
         'RC:GrpNtf',
-        'RC:InfoNtf',
+        'RC:InfoNtf',
         'RC:RcNtf'
     ]
 
@@ -127,7 +127,7 @@ const sentVoice = (conversationType, targetId, voiceUrl, time, user, callback) =
         content: {
             objectName: 'RC:HQVCMsg',
             local: 'file:///' + plus.io.convertLocalFileSystemURL(voiceUrl),
-            duration: time,
+            duration: time == 0 ? 1 : time,
             userInfo: user
         }
     }

utils/im/models.js

@@ -13,9 +13,13 @@ const contactModel = usqlite.model('contacts', {
         type: String,
         unique: true
     },
-    portraitUrl: String,
+    type: {
+        type: Number,
+        default: 0
+    },
+    portraitUrl: String,
     localAvatar: String
-})
+})
 
 export default {
     contactModel