merge

apis/interfaces/im.js

@@ -259,7 +259,7 @@ const removeGroupAdmin = (groupId, userId) => {
  */
 const transferGroupOwner = (groupId, userId) => {
     return request({
-        method: 'DELETE',
+        method: 'POST',
         url: 'im/groups/' + groupId + '/owner/' + userId
     })
 }

manifest.json

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

pages.json

@@ -390,7 +390,7 @@
             "path": "pages/im/friends/index",
             "name": "imFriends",
             "style": {
-                "navigationBarTitleText": "我的好友",
+                "navigationBarTitleText": "通讯录",
                 "app-plus": {
                     "titleNView": {
                         "type": "default",
@@ -429,7 +429,9 @@
             "path": "pages/im/friends/mine",
             "name": "imFriendsMine",
             "style": {
-                "navigationBarTitleText": "我的资料"
+                "navigationBarTitleText": "我的二维码",
+                "navigationBarBackgroundColor": "#34CE98",
+                "navigationBarTextStyle": "white"
             }
         },
         {

pages/im/components/connectionStatus.vue

@@ -0,0 +1,67 @@
+<template>
+        <u-alert type="warning" v-if="connection != 0" :description="description" show-icon />
+</template>
+
+<script>
+    export default {
+        props: {
+            connection: {
+                type: Number,
+                default: 0
+            }
+        },
+        computed: {
+            description() {
+                return this.connectionStatusMap.filter(item => item.index == this.connection)[0].text
+            }
+        },
+        data() {
+            return {
+                connectionStatusMap: [{
+                        index: -1,
+                        text: '网络不可用'
+                    },
+                    {
+                        index: 0,
+                        text: '连接成功'
+                    },
+                    {
+                        index: 1,
+                        text: '连接中'
+                    },
+                    {
+                        index: 2,
+                        text: '未连接'
+                    },
+                    {
+                        index: 3,
+                        text: '用户账号在其它设备登录'
+                    },
+                    {
+                        index: 4,
+                        text: 'TOKEN过期'
+                    },
+                    {
+                        index: 6,
+                        text: '用户被禁用'
+                    },
+                    {
+                        index: 12,
+                        text: '退出登录'
+                    },
+                    {
+                        index: 13,
+                        text: '连接暂时被挂起'
+                    },
+                    {
+                        index: 14,
+                        text: '连接超时'
+                    },
+                ],
+            }
+        }
+    }
+</script>
+
+<style>
+</style>

pages/im/components/conversationList.vue

@@ -46,6 +46,16 @@
             }
         },
 
+        created() {
+            uni.getSystemInfo({
+                success: (e) => {
+                    this.winSize = {
+                        width: e.windowWidth,
+                        height: e.windowHeight
+                    }
+                }
+            })
+        },
         methods: {
             // 隐藏功能菜单
             hidePop() {
@@ -79,12 +89,15 @@
                 } else {
                     style = `top:${touches.clientY}px;`
                 }
-                if (touches.clientX > (this.winSize.witdh / 2)) {
+
-                    style += `right:${this.winSize.witdh-touches.clientX}px`
+                if (touches.clientX > (this.winSize.width / 2)) {
+                    style += `right:${this.winSize.width-touches.clientX}px`
                 } else {
                     style += `left:${touches.clientX}px`
                 }
 
+
+
                 this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
                 this.popStyle = style
                 this.pickedItem = item

pages/im/components/friendApplyCell.vue

@@ -1,20 +1,15 @@
 <template>
-    <view class="apply--cell u-border-bottom">
+    <view class="apply--cell">
         <view class="avatar">
-            <u-avatar :src="user.portraitUrl" shape="square" size="46" />
+            <u-avatar :src="user.portraitUrl || require('@/static/user/cover.png')" shape="square" size="46" />
         </view>
         <view class="info">
-            <view class="name">
+            <view class="name"> {{ user.name }}</view>
-                {{ user.name }}
+            <view class="message"> {{ message.message!=='null' ? message.message : '听说你很优秀，想认识下你~' }} </view>
         </view>
-            <view class="message">
-                {{ message.message }}
-            </view>
-        </view>
-
         <view class="action">
-            <u-button type="success" size="mini" @click="resolve">通过</u-button>
+            <u-button class="u-button" size="default" type="success" @click="resolve">通过</u-button>
-            <u-button type="warning" size="mini" @click="reject">拒绝</u-button>
+            <u-button class="u-button" size="default" type="warning" @click="reject">拒绝</u-button>
         </view>
     </view>
 </template>
@@ -46,6 +41,7 @@
                         icon: 'none',
                         title: '通过好友申请'
                     })
+                    uni.navigateBack({})
                 }).catch(err => {
                     uni.showToast({
                         icon: 'none',
@@ -85,6 +81,7 @@
         display: flex;
         padding: $padding;
         align-items: center;
+        border-bottom: solid 1rpx #f9f9f9;
 
         .info {
             flex: 1;
@@ -103,9 +100,19 @@
 
         .action {
             justify-content: space-between;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            box-sizing: border-box;
+
+            .u-button {
+                padding: 10rpx 20rpx !important;
+                font-size: $title-size-m;
+                height: 60rpx !important;
+            }
 
             .u-button+.u-button {
-                margin-top: 10rpx;
+                margin-left: 10rpx;
             }
         }
     }

pages/im/components/friendApplyList.vue

@@ -8,7 +8,7 @@
                 <view class="right">
                     <view class="title">
                         <view class="name">{{ item.name }}</view>
-                        <view class="des">{{ item.latestMessage.message }}</view>
+                        <view class="des">{{ item.latestMessage.message || '--' }}</view>
                     </view>
                     <view class="agress-btn">
                         <span v-if="isAgree" @click="action('agree', item)">通过</span>
@@ -105,6 +105,7 @@ export default {
         .agress-btn {
             display: flex;
             color: #fff;
+            font-size: $title-size-m;
             span {
                 display: inline-block;
                 padding: 6rpx 14rpx;

pages/im/components/friendSearchList.vue

@@ -0,0 +1,139 @@
+<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="item.portraitUrl || require('@/static/user/cover.png')" shape="square" size="44" />
+                </view>
+                <view class="right">
+                    <view class="title">
+                        <view class="name">{{ item.name }}</view>
+                        <view class="des">{{ item.address }}</view>
+                    </view>
+                    <view class="agress-btn">
+                        <span v-if="isApply && item.friendship !=='accepted'" @click="action('apply', item)">查看</span>
+                        <span class="isFri" v-if="isApply && item.friendship ==='accepted'" @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;
+                    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 - 2;
+                    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/groupUserList.vue

@@ -0,0 +1,331 @@
+<template>
+    <view class="member--list">
+        <view class="users">
+            <view :class="['user', {'active': item.targetId === currentUser.targetId}]" @longpress="showAction(item)"
+                v-for="(item, index) in users" :key="index" @click="toUser(item)">
+                <view class="avatar">
+                    <u-avatar :size="avatarSize" shape="square" :src="contact(item.targetId).portraitUrl" />
+                    <view class="admin" v-if="item.is_admin === 1">管理</view>
+                    <view class="owner" v-if="item.is_admin === 2">群主</view>
+                </view>
+                <view class="name">{{ item.name }}</view>
+            </view>
+            <view class="user" v-if="isAdmin">
+                <u-avatar @click="inviteUser" :size="avatarSize" shape="square" icon="plus" bgColor="#f9f9f9" color="#c7c7c7" />
+                <view class="name">邀请好友</view>
+            </view>
+        </view>
+
+        <view class="loadmore">
+            <u-icon name="arrow-right" @click="loadMore" v-if="members > users.length" color="#999" labelColor="#999"
+                label="查看更多群成员" labelPos="left" :labelSize="labelSize" :size="iconSize" />
+        </view>
+
+        <u-action-sheet :actions="actionMap" :title="actionTitle" cancelText="取消" @close="hideAction"
+            @select="handleAction" :show="actionShow" />
+    </view>
+</template>
+
+<script>
+    import {
+        getGroupUsers,
+        getGroupBase,
+        removeGroupUser,
+        setGroupAdmin,
+        removeGroupAdmin,
+        transferGroupOwner
+    } from '@/apis/interfaces/im.js'
+    import utils from '@/utils/index.js'
+
+    export default {
+        props: {
+            targetId: {
+                type: String,
+                default: ''
+            },
+            count: {
+                type: Number,
+                default: 0
+            }
+        },
+        data() {
+            return {
+                users: [],
+                isOwner: false,
+                isAdmin: false,
+                adminUid: 0,
+                members: 0,
+                actionShow: false,
+                actionMap: [],
+                actionTitle: '',
+                currentUser: {},
+                avatarSize: 45,
+                labelSize: 14,
+                iconSize: 14
+            }
+        },
+        computed: {
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
+        created() {
+            this.avatarSize = utils.rpx2px(90)
+            this.labelSize = utils.rpx2px(24)
+            this.iconSize = utils.rpx2px(26)
+        },
+        mounted() {
+            this.initGroupInfo()
+            getGroupUsers(this.targetId, this.count).then(res => {
+                this.users = res
+                res.map(item => {
+                    this.$store.dispatch('updateContact', item)
+                })
+            })
+        },
+        methods: {
+            initGroupInfo() {
+                getGroupBase(this.targetId).then(res => {
+                    this.isOwner = res.is_owner
+                    this.isAdmin = res.is_admin
+                    this.adminUid = res.user_id
+                    this.members = res.members
+                })
+            },
+            initUsers() {
+                getGroupUsers(this.targetId, this.count).then(res => {
+                    this.users = res
+                })
+            },
+            hideAction(item) {
+                this.actionShow = false
+            },
+            showAction(item) {
+                this.currentUser = item
+                this.actionTitle = item.name
+                // 只有管理员以上才会弹窗
+                if (this.isAdmin) {
+                    if (this.isOwner) {
+                        if (!item.is_admin) {
+                            this.actionMap = [{
+                                key: 0,
+                                name: '移除成员',
+                                disabled: false
+                            }, {
+                                key: 1,
+                                name: '设置管理',
+                                disabled: false
+                            }, {
+                                key: 2,
+                                name: '转移群主',
+                                disabled: false
+                            }]
+                        } else {
+                            this.actionMap = [{
+                                key: 0,
+                                name: '移除成员',
+                                disabled: false
+                            }, {
+                                key: 4,
+                                name: '取消管理',
+                                disabled: false
+                            }, {
+                                key: 2,
+                                name: '转移群主',
+                                disabled: false
+                            }]
+                        }
+                    } else {
+                        this.actionMap = [{
+                            key: 0,
+                            name: '移除成员',
+                            disabled: false
+                        }]
+                    }
+                    this.actionShow = true
+                }
+            },
+            handleAction(e) {
+                switch (e.key) {
+                    case 0:
+                        removeGroupUser(this.targetId, this.currentUser.targetId).then(res => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '成员移除成功'
+                            })
+                        }).catch(err => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: err.message
+                            })
+                        }).finally(() => {
+                            this.initUsers()
+                        })
+                        break;
+                    case 1:
+                        setGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '设置管理成功'
+                            })
+                        }).catch(err => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: err.message
+                            })
+                        }).finally(() => {
+                            this.initUsers()
+                        })
+                        break;
+                    case 4:
+                        removeGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: '取消管理员成功'
+                            })
+                        }).catch(err => {
+                            uni.showToast({
+                                icon: 'none',
+                                title: err.message
+                            })
+                        }).finally(() => {
+                            this.initUsers()
+                        })
+                        break;
+                    case 2:
+                        uni.showModal({
+                            title: '转让群主',
+                            content: '这个操作不可逆转，确定要转让群主身份么？',
+                            success: (res) => {
+                                if (res.confirm) {
+                                    console.log(this.targetId, this.currentUser.targetId);
+                                    transferGroupOwner(this.targetId, this.currentUser.targetId).then(
+                                        res => {
+                                            uni.showToast({
+                                                icon: 'none',
+                                                title: '群主转让成功'
+                                            })
+                                        }).catch(err => {
+                                        uni.showToast({
+                                            icon: 'none',
+                                            title: err.message
+                                        })
+                                    }).finally(() => {
+                                        this.initUsers()
+                                        this.initGroupInfo()
+                                    })
+                                }
+                            }
+                        })
+                        break;
+                }
+            },
+            inviteUser() {
+                uni.navigateTo({
+                    url: '/pages/im/group/invite?targetId=' + this.targetId
+                })
+            },
+            loadMore() {
+                uni.navigateTo({
+                    url: '/pages/im/group/users?targetId=' + this.targetId
+                })
+            },
+            toUser(item) {
+                if (item.targetId == this.$store.getters.sender.userId) {
+                    uni.navigateTo({
+                        url: '/pages/im/friends/mine?targetId=' + item.targetId
+                    })
+                } else {
+                    uni.navigateTo({
+                        url: '/pages/im/friends/info?targetId=' + item.targetId
+                    })
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .users {
+        flex-direction: row;
+        flex-wrap: wrap;
+        display: flex;
+        padding: 20rpx 0;
+
+        .user {
+            width: 126rpx;
+            margin-left: 20rpx;
+            margin-bottom: 20rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            &.active {
+                background-color: $window-color;
+            }
+
+            .avatar {
+                border-radius: 0 8rpx 0 0;
+                position: relative;
+                width: 90rpx;
+                height: 90rpx;
+                overflow: hidden;
+
+                .admin {
+                    position: absolute;
+                    background-color: $main-color;
+                    transform: rotate(45deg);
+                    color: #ffffff;
+                    font-size: 16rpx;
+                    width: 100rpx;
+                    padding-top: 30rpx;
+                    text-align: center;
+                    right: -45rpx;
+                    top: -20rpx;
+                }
+
+                .owner {
+                    position: absolute;
+                    background-color: $text-price;
+                    transform: rotate(45deg);
+                    color: #ffffff;
+                    font-size: 16rpx;
+                    width: 100rpx;
+                    padding-top: 30rpx;
+                    text-align: center;
+                    right: -45rpx;
+                    top: -20rpx;
+                }
+
+            }
+
+            .name {
+                color: 20rpx;
+                width: 126rpx;
+                padding-top: 6rpx;
+                text-align: center;
+                font-size: 22rpx !important;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                word-break: break-word;
+                color: $text-gray-m !important;
+            }
+
+        }
+    }
+
+    .loadmore {
+        font-size: 26rpx;
+        color: $text-gray-m;
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+    }
+</style>

pages/im/components/messageCell.vue

@@ -6,8 +6,7 @@
         </view>
         <view class="content">
             <view class="header">
-                <view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3"
+                <view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3" class='qun'>[群]</text></view>
-                        class='qun'>[群]</text></view>
                 <view class="time">{{ item.sentTime|timeCustomCN }}</view>
             </view>
             <message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
@@ -44,7 +43,7 @@
 <style lang="scss" scoped>
     .message--cell {
         display: flex;
-        padding: 20rpx 0 0 20rpx;
+        padding: 20rpx 10rpx 0 30rpx;
 
         .avatar {
             position: relative;
@@ -60,8 +59,9 @@
             position: relative;
             flex: 1;
             
+
             border-bottom-width: 0.5px !important;
-            border-color: $u-border-color !important;
+            border-color: #f9f9f9 !important;
             border-bottom-style: solid;
 
             .header {
@@ -76,16 +76,20 @@
 
                     .qun {
                         color: $main-color;
-                        font-size: $title-size-m;
+                        font-size: $title-size-m - 4;
                         margin-left: 4px;
+                        position: relative;
+                        top: -4rpx;
                     }
                 }
 
                 .time {
-                    font-size: $title-size-sm;
+                    font-size: $title-size-sm - 3;
                     color: $text-gray-m;
                     position: absolute;
                     right: 30rpx;
+                    padding-top: 4rpx;
+                    font-weight: normal;
                 }
             }
         }

pages/im/components/messagePreview.vue

@@ -1,28 +1,31 @@
 <template>
     <view>
         <view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
-            <text v-if="conversationType == 3">{{ user.name }}: </text>{{ msg.content || '' }}
+            <text v-if="conversationType == 3">{{ user.name }}：</text>{{ msg.content || '' }}
         </view>
         <view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
-            <text v-if="conversationType == 3">{{ user.name }}: </text>[语音]
+            <text v-if="conversationType == 3">{{ user.name }}：</text>[语音]
         </view>
         <view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
-            <text v-if="conversationType == 3">{{ user.name }}: </text>[图片]
+            <text v-if="conversationType == 3">{{ user.name }}：</text>[图片]
         </view>
         <view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
-            <text v-if="conversationType == 3">{{ user.name }}: </text>[表情]
+            <text v-if="conversationType == 3">{{ user.name }}：</text>[表情]
         </view>
         <view class="preview" v-if="msg.objectName=='RC:FileMsg'">
-            <text v-if="conversationType == 3">{{ user.name }}: </text>[文件]
+            <text v-if="conversationType == 3">{{ user.name }}：</text>[文件]
         </view>
         <view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
-            <text v-if="conversationType == 3">{{ user.name }}: </text>[位置]
+            <text v-if="conversationType == 3">{{ user.name }}：</text>[位置]
         </view>
         <view class="preview" v-if="msg.objectName=='RC:AudioMsg'">
-            <text v-if="conversationType == 3">{{ user.name }}: </text>[语音通话]
+            <text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
         </view>
         <view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
-            <text v-if="conversationType == 3">{{ user.name }}: </text>[视频通话]
+            <text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
+        </view>
+        <view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
+            [{{ msg.message }}]
         </view>
     </view>
 </template>
@@ -54,9 +57,9 @@
     .preview {
         word-break: break-all;
         color: $text-gray-m;
-        padding-top: $padding - 20;
+        padding-top: 6rpx;
         padding-bottom: $padding;
-        font-size: $title-size-m;
+        font-size: $title-size-m - 2;
         height: 32rpx;
         line-height: 32rpx;
         width: 520rpx;

pages/im/components/sentMessageBar.vue

@@ -3,22 +3,15 @@
         <!-- footer -->
         <view class="footer">
             <view class="msg-type" @click="changeMessageType">
-                <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
+                <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix" />
-                </image>
+                <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix" />
-                <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
-                </image>
-            </view>
-            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
-                @success="onSuccess" />
-            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
-                @success="onSuccess" @focus="onHidePopus" />
-            <view class="msg-type msg-popups" @click="() => { showPopups = !showPopups, onHidePopus }">
-                <image class="icon" src="@/static/icon/popups-icon.png"></image>
             </view>
+            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
+            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
+            <view class="msg-type msg-popups" @click="showPopups = !showPopups"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
         </view>
         <!-- 弹出层 -->
-        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
+        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
-            @success="() => {showPopups = false, onSuccess()}"></sent-popups>
     </view>
 </template>
 

pages/im/components/sentPopups.vue

@@ -8,7 +8,7 @@
             <image class="icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
             <text class="text">拍摄</text>
         </view>
-        <view class="item" @click="onPopupsItem('video')">
+        <view class="item" @click="onPopupsItem('video')" v-if="conversationType == 1">
             <image class="icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
             <text class="text">视频通话</text>
         </view>
@@ -33,6 +33,7 @@
 
 <script>
     import im from '@/utils/im/index.js'
+    import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
 
     export default {
         data() {
@@ -64,20 +65,15 @@
             }
         },
         computed: {
-            user() {
+            sender() {
                 return this.$store.getters.sender
             }
         },
         methods: {
             singleCall(e) {
-                uni.showToast({
+                uni.navigateTo({
-                    icon: 'none',
+                    url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
-                    title: '功能正在开发中'
                 })
-                // CallLib.startSingleCall(this.targetId, e.type, '');
-                // uni.redirectTo({
-                //     url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
-                // })
             },
             onPopupsItem(type) {
                 switch (type) {
@@ -87,8 +83,7 @@
                             sourceType: ['album'],
                             success: res => {
                                 im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
-                                    this.user, (
+                                    this.sender, (res) => {
-                                        res) => {
                                         this.success()
                                     })
                             }
@@ -99,8 +94,7 @@
                             sourceType: ['camera'],
                             success: res => {
                                 im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
-                                    this.user, (
+                                    this.sender, (res) => {
-                                        res) => {
                                         this.success()
                                     })
                             }

pages/im/components/sentText.vue

@@ -29,7 +29,7 @@
             disabled() {
                 return this.inputTxt.length === 0
             },
-            user() {
+            sender() {
                 return this.$store.getters.sender
             }
         },
@@ -55,7 +55,7 @@
             sent() {
                 if (!this.disabled) {
                     RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
-                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.user, () => {
+                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
                         this.$emit('success')
                         this.inputTxt = ''
                     })

pages/im/components/sentVoice.vue

@@ -36,7 +36,7 @@
             }
         },
         computed: {
-            user() {
+            sender() {
                 return this.$store.getters.sender
             }
         },
@@ -85,8 +85,7 @@
                 // 监听录音结束
                 this.recorderManager.onStop(res => {
                     im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
-                        this
+                        this.recordTime), this.sender, () => {
-                        .recordTime), this.user, () => {
                         setTimeout(() => {
                             this.$emit('success')
                         }, 500)

pages/im/friends/index.vue

@@ -1,7 +1,7 @@
 <template>
     <view>
         <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
-            <view class="friend-flex u-border-bottom" @click="toPending">
+            <view class="friend-flex" @click="toPending">
                 <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
                 <u-badge max="99" absolute :offset="[23, 20]" :value="pendingCount" />
                 <view class="info">新的朋友</view>
@@ -12,22 +12,21 @@
             </view>
             <block v-if="friends.length > 0">
                 <u-index-item v-for="(item, fkey) in friends" :key="fkey">
-                    <u-index-anchor :text="indexs[fkey]" bgColor="#F3F6FB" height="20" size="12" color="#666">
+                    <u-index-anchor :text="indexs[fkey]" bgColor="#ededed" height="20" size="12" color="#666"
-                    </u-index-anchor>
+                        style="padding:10rpx 30rpx" />
-
+                    <view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
-                    <view v-for="(friendItem, index) in item" :key="index" class="friend-flex u-border-bottom"
                         @click="toFriend(friendItem.targetId)">
-                        <u-avatar size="40" shape="square" :src="contact(friendItem.targetId).portraitUrl" />
+                        <u-avatar class="avatar-img" size="40" shape="square"
+                            :src="contact(friendItem.targetId).portraitUrl" />
                         <view class="info">
                             <view class="name">{{ contact(friendItem.targetId).name }}</view>
-                            <view class="address">{{ friendItem.address }}</view>
+                            <!-- <view class="address">Hash:{{ friendItem.address }}</view> -->
                         </view>
                     </view>
                 </u-index-item>
             </block>
             <block v-else>
-                <u-empty class="pages-null" mode="data" text="暂无好友">
+                <u-empty class="pages-null" mode="data" text="暂无好友" />
-                </u-empty>
             </block>
         </u-index-list>
     </view>
@@ -57,13 +56,7 @@
         onLoad() {
             this.getFriendList()
             this.checkNewFriendPending()
-            uni.$on('onContactNotification', () => {
+            uni.$on('onContactNotification', this.checkNewFriendPending)
-                this.checkNewFriendPending()
-                this.getFriendList()
-            })
-        },
-        onUnload() {
-            uni.$off('onContactNotification')
         },
         methods: {
             getFriendList() {
@@ -97,9 +90,18 @@
             },
             // 新朋友
             toPending() {
+                if (this.pendingCount > 0) {
                     uni.navigateTo({
                         url: '/pages/im/friends/pending'
                     });
+                } else {
+                    uni.showToast({
+                        title: ` 暂无好友申请 ~ `,
+                        icon: "none",
+                        mask: true,
+                        duration: 3000
+                    })
+                }
             }
         },
         onNavigationBarButtonTap(e) {
@@ -119,26 +121,51 @@
     // 好友列表
     .friend-flex {
         position: relative;
-        padding: 20rpx $padding;
+        padding: 0 $padding 0 $padding;
         display: flex;
         flex-direction: row;
         align-items: center;
+        box-sizing: border-box;
+
+        .avatar-img {
+            box-shadow: 0 0 20rpx rgba($color: $main-color, $alpha: 0.2);
+        }
 
         .info {
             flex: 1;
             margin-left: $padding;
+            border-bottom: solid 1rpx #f9f9f9;
+            height: 120rpx;
+            line-height: 120rpx;
 
             .name {
-                font-size: $title-size + 2;
+                font-size: $title-size;
-                font-size: $title-size + 2;
                 color: #454545 !important;
                 @extend .nowrap;
             }
 
             .address {
                 color: $text-gray-m;
-                font-size: $title-size-m - 5;
+                font-size: $title-size-m - 3;
+                padding-top: 10rpx;
+                word-break: break-word;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: 600rpx;
             }
         }
     }
+
+    .list-cell {
+        display: flex;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 10px 24rpx;
+        overflow: hidden;
+        color: #323233;
+        font-size: 14px;
+        line-height: 24px;
+        background-color: #fff;
+    }
 </style>

pages/im/friends/info.vue

@@ -6,7 +6,7 @@
                 bg-color="#fff"></u-avatar>
             <view class="info-text">
                 <view class="nickname">{{ userInfo.name }}</view>
-                <view class="address" @longpress="copyAddress">地址：{{ userInfo.address }}</view>
+                <view class="address" @longpress="copyAddress">Hash：{{ userInfo.address }}</view>
             </view>
         </view>
         <!-- 用户资料 -->
@@ -19,7 +19,7 @@
             </view>
         </view>
 
-        <block v-if="userInfo.is_friend">
+        <block v-if="userInfo.friendship ==='accepted'">
             <view class="info-btns">
                 <view class="item u-border-bottom" @click="setRemark">
                     <label>设置备注</label>
@@ -83,7 +83,11 @@
     } from '@/apis/interfaces/im.js'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
-
+    // friendship: ''    没有好友关系
+    // accepted    好友
+    // pending  申请中
+    // denied 拒绝 
+    // blocked 黑名单
     export default {
         data() {
             return {
@@ -108,6 +112,7 @@
         onLoad(e) {
             this.targetId = e.targetId
             getFriendInfo(e.targetId).then(res => {
+                console.log(res, "获取朋友的信息")
                 this.userInfo = res
                 // 获取到用户信息之后，去检查一下要不要更新
                 this.$store.dispatch('updateContact', res)
@@ -198,17 +203,23 @@
             toBeFriend() {
                 pedingFriend(this.targetId).then(res => {
                         uni.showToast({
-                            title: '申请成功',
+                            title: `  申请成功,等待审核  `,
-                            icon: 'none'
+                            icon: 'none',
+                            duration: 3000,
+                            mask: true
                         });
-
                     })
                     .catch(err => {
+                        // if(err.status_code === 6001){
+                        //     this.userInfo.friendship = 'accepted'
+                        // }else{
                             uni.showToast({
                                 icon: 'error',
                                 title: err.message,
-                            duration: 2000
+                                duration: 2000,
+                                mask: true
                             })
+                        // }
                     })
             },
             singleCall(e) {

pages/im/friends/mine.vue

@@ -1,32 +1,20 @@
 <template>
-    <view class="content">
+    <view class="friend-ewm-content">
+        <view class="bg"></view>
         <!-- 用户信息 -->
         <view class="info-flex">
-            <u-avatar :src="infoObj.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
+            <view class="info-flex-item">
-            <view class="info-text">
+                <u-avatar :src="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="address">{{infoObj.address}}</view>
-            </view>
-        </view>
-        <!-- 用户身份 -->
-        <view class="info-btns">
-            <view class="item">
-                <label>性别</label>
-                <view class="text" v-if="infoObj.gender === 0">保密</view>
-                <view class="text" v-if="infoObj.gender === 1">男</view>
-                <view class="text" v-if="infoObj.gender === 2">女</view>
-            </view>
-            <view class="item">
-                <label>地址</label>
-                <view class="text">{{infoObj.address}}</view>
-            </view>
-        </view>
-        <!-- 二维码 -->
                 <view class="info-code">
-            <uqrcode class="info-code-src" :size="198" :text="qrContent" />
+                    <uqrcode class="info-code-src" :size="160" :text="qrContent" />
-            <view class="info-code-text">
+                    <view class="info-code-text">扫描二维码加我ZH大健康好友</view>
-                <view>ZH-HEALTH扫一扫上面的二维码</view>
+                </view>
-                <view>添加我的好友</view>
+                <u-icon class="download" :name="require('@/static/imgs/copy-333.png')" size="14" :bold="true"
+                    @click="copy" :label="'应用下载:'+ downUrl" labelPos="left" labelSize="14" space="6"
+                    labelColor="#26a377" />
+                <view class="copy" @click="copy"> 复制地址 </view>
             </view>
         </view>
     </view>
@@ -48,6 +36,7 @@
                     gender: 0,
                     hash: ''
                 },
+                downUrl: 'http://www.baidu.com',
                 qrContent: 'ADDFRIEND|'
             }
         },
@@ -58,131 +47,115 @@
             })
         },
         methods: {
-
+            copy() {
+                uni.setClipboardData({
+                    data: this.downUrl,
+                    success: function() {
+                        uni.showToast({
+                            title: ` 下载链接已复制到剪贴板 `,
+                            icon: 'none',
+                            position:'bottom',
+                            mask: true,
+                            duration: 2000
+                        })
+                    }
+                });
+            }
         }
     }
 </script>
 
 <style lang="scss" scoped>
-    .content {
+    .friend-ewm-content {
-        background: $window-color;
+        background: #fff;
         min-height: 100vh;
-        padding-top: $padding;
         box-sizing: border-box;
 
+        .bg {
+            background-color: red;
+            width: 100%;
+            height: 340rpx;
+            background-color: $main-color;
+        }
+
+        // 用户信息
+        .info-flex {
+            padding: $padding 0;
+            // margin: 0 $margin;
+            background: white;
+            border-radius: 50rpx 50rpx 0 0;
+            position: relative;
+            top: -100rpx;
+
+
+            .info-flex-item {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                box-sizing: border-box;
+                position: relative;
+                top: -160rpx;
+
+                .avatar {
+                    // padding: 14rpx; 
+                    border-radius: 10rpx;
+                    background-color: #fff;
+                    border: solid 14rpx rgba($color: #fff, $alpha:1);
+                }
+
+                .nickname {
+                    line-height: 80rpx;
+                    font-size: $title-size + 5;
+                    color: $text-color;
+                    font-weight: 600;
+                }
+
+                .address {
+                    line-height: 60rpx;
+                    font-size: $title-size-m + 2;
+                    color: $text-gray;
+                    text-align: left;
+                    @extend .nowrap;
+                }
+
                 .info-code {
                     background: white;
                     margin: 0 $margin;
                     border-radius: $radius;
-            padding: $padding*3 $padding $padding;
+                    padding: $padding * 1.4 $padding $padding;
                     text-align: center;
 
                     &-src {
                         display: inline-block;
+                        border-radius: 10rpx;
+                        border: solid 20rpx rgba($color: #f9f9f9, $alpha:1);
+                        background-color: #fff;
+                        padding: 14rpx;
                     }
 
                     &-text {
                         text-align: center;
                         color: $text-gray;
-                font-size: $title-size-sm;
+                        font-size: $title-size-m + 1;
                         line-height: 40rpx;
-                padding: $padding 0;
+                        padding: 8rpx 0 $padding 0;
                     }
                 }
 
-        // 用户信息
+                .download {
-        .info-flex {
+                    background-color: #f9f9fb;
-            padding: $padding;
+                    padding: 20rpx 30rpx 10rpx 30rpx;
-            margin: 0 $margin;
+                    border-radius: 10rpx;
-            display: flex;
-            background: white;
-            border-radius: $radius;
-
-            .info-text {
-                width: calc(100% - 50px);
-                padding-left: $padding;
-                box-sizing: border-box;
-
-                .nickname {
-                    line-height: 30px;
-                    font-size: $title-size + 6;
-                    color: $text-color;
-                    text-align: left;
                 }
 
-                .address {
+                .copy {
-                    line-height: 20px;
+                    font-size: $title-size + 4;
-                    font-size: $title-size-sm;
-                    color: $text-gray;
-                    text-align: left;
-                    @extend .nowrap;
-                }
-            }
-        }
-
-        // footer
-        .footer {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: $padding*2 $padding;
-            display: flex;
-            justify-content: space-around;
-
-            .footer-item {
-                margin: 0 $margin/2;
-
-                .icon {
-                    background: $main-color;
-                    width: 88rpx;
-                    height: 88rpx;
-                    line-height: 88rpx;
-                    display: inline-block;
-                    border-radius: 50%;
-
-                    .icon-u {
-                        margin-top: calc((88rpx/2) - 13px);
-                        margin-left: calc((88rpx/2) - 13px);
-                    }
-                }
-
-                .text {
                     color: $main-color;
-                    font-size: $title-size-m;
+                    background-color: rgba($color: $main-color, $alpha: .1);
-                    text-align: center;
+                    padding: 20rpx 100rpx;
-                    padding-top: 10rpx;
+                    border-radius: 50rpx;
-                }
+                    margin-top: 40rpx;
-            }
-        }
-
-        // btns
-        .info-btns {
-            background: white;
-            margin: $margin;
-            border-radius: $radius;
-
-            .item {
-                line-height: 100rpx;
-                border-bottom: solid 1rpx $border-color;
-                display: flex;
-                padding: 0 $padding;
-                justify-content: space-between;
-                font-size: $title-size-lg;
-
-                &:last-child {
-                    border-bottom: none;
-                }
-
-                label {
-                    width: 200rpx;
-                }
-
-                .text {
-                    width: calc(100% - 200rpx);
-                    color: $text-gray-m;
-                    text-align: right;
-                    @extend .nowrap;
                 }
             }
         }

pages/im/friends/pending.vue

@@ -29,9 +29,6 @@
             this.getPendingList()
             uni.$on('onContactNotification', this.getPendingList)
         },
-        onUnload() {
-            uni.$off('onContactNotification')
-        },
         methods: {
             getPendingList() {
                 im.getPendingList((pendings) => {

pages/im/friends/search.vue

@@ -31,7 +31,7 @@
         searchFriend,
         pedingFriend
     } from '@/apis/interfaces/im.js';
-    import applyFriend from '../components/friendApplyList.vue';
+    import applyFriend from '../components/friendSearchList.vue';
     export default {
         components: {
             applyFriend
@@ -45,9 +45,15 @@
         },
         methods: {
             search() {
+                 // friendship: ''    没有好友关系
+                 // accepted    好友
+                 // pending  申请中
+                 // denied 拒绝 
+                 // blocked 黑名单
                 searchFriend(this.searchValue)
                     .then(res => {
                         this.searchResult = res;
+                        console.log(res)
                     })
                     .catch(err => {
                         uni.showToast({
@@ -58,7 +64,7 @@
             },
             action(e) {
                 uni.navigateTo({
-                    url: '/pages/im/friends/info?targetId=' + e.item.userId
+                    url: '/pages/im/friends/info?targetId=' + e.item.targetId
                 })
             }
         }

pages/im/group/apply.vue

@@ -1,21 +1,23 @@
 <template>
-    <view class="apply">
+    <view class="apply" v-if="loaded">
-        <u-avatar :src="group.cover" size="128" shape="square"></u-avatar>
+        <u-avatar :src="group.cover || require('@/static/user/cover.png')" size="128" shape="square" />
         <view class="name">
             {{ group.name }}
         </view>
 
-        <u-button v-if="group.can_join" @click="applyGroup" text="申请加群" :disabled="disabled" color="#34CE98" />
+        <u-button class="apply-btn" v-if="group.can_join" @click="applyGroup" text="申请加群" :disabled="disabled"
+            color="#34CE98" />
         <view class="" v-else>
             <view class="" v-if="group.is_full">群已满员</view>
             <view class="" v-if="group.deny_apply">禁止申请</view>
-            <u-button v-if="group.state === 'accepted'" color="#34CE98" text="进入群聊" @click="toGroupChat" />
+            <u-button class="apply-btn2" v-if="group.state === 'accepted'" color="#34CE98" text="进入群聊"
+                @click="toGroupChat" />
         </view>
 
         <u-modal negativeTop="300" :show="modalShow" title="申请原因" showCancelButton @cancel="onHideModal"
             @confirm="onJoinGroup">
             <view class="slot-content">
-                <u--input placeholder="申请原因" border="surround" focus v-model="message"></u--input>
+                <u--input placeholder="申请原因" border="surround" focus v-model="message" />
             </view>
         </u-modal>
     </view>
@@ -34,14 +36,24 @@
                 group: {},
                 modalShow: false,
                 message: '',
-                disabled: false
+                disabled: false,
+                loaded: false
             }
         },
         onLoad(e) {
+            console.log(e, 'e。。。。。。')
             this.targetId = e.targetId
+            // this.targetId = "TG2"
             joinGroupPre(this.targetId).then(res => {
-                console.log(res);
                 this.group = res
+                this.loaded = true
+            }).catch(err => {
+                uni.showToast({
+                    title: err.message,
+                    icon: 'none',
+                    mask: true,
+                    duration: 3000
+                })
             })
         },
         methods: {
@@ -62,8 +74,13 @@
                     console.log('申请结果', res);
                     uni.showToast({
                         icon: 'none',
-                        title: '申请成功'
+                        title: '申请成功',
+                        duration:2000,
+                        mast:true
                     })
+                    setTimeout(() => {
+                        this.$Router.back()
+                    }, 2000)
                 }).catch(err => {
                     uni.showToast({
                         icon: 'none',
@@ -82,10 +99,27 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        width: 100%;
+        min-height: 100vh;
+        background-color: $window-color;
 
         .u-avatar {
-            width: 200rpx;
+            margin-top: 60rpx;
-            height: 200rpx;
+            width: 180rpx;
+            height: 180rpx;
+        }
+
+        .name {
+            margin: 40rpx 0;
+            font-size: $title-size + 2;
+        }
+
+        .apply-btn {
+            width: 80%;
+            font-size: $title-size;
+        }
+        .apply-btn2{   
+            padding: 0 100rpx;
         }
     }
 </style>

pages/im/group/chat.vue

@@ -1,23 +1,24 @@
 <template>
     <view class="group--chat">
-        <list class="body" :show-scrollbar="false" @click="onScroll">
+        <scroll-view class="body" :show-scrollbar="false">
-            <cell class="cell" v-for="(item, index) in messages" :key="index">
+            <view class="cell" v-for="(item, index) in messages" :key="index">
-                <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
+                <view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
+                <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
                     <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
-                        :src="item.content.userInfo.portraitUrl" />
+                        :src="contact(item.senderUserId).portraitUrl" />
                     <view class="msg">
                         <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" :name="item.content.userInfo.name" />
+                            :msg="item.content" :name="contact(item.senderUserId).name" />
                         <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" :name="item.content.userInfo.name" />
+                            :msg="item.content" :name="contact(item.senderUserId).name" />
                         <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
-                            :msg="item.content" :name="item.content.userInfo.name" />
+                            :msg="item.content" :name="contact(item.senderUserId).name" />
                     </view>
                 </view>
-            </cell>
+            </view>
-            <cell class="cell-footer" ref="chatBottom"></cell>
+            <view class="cell-footer" ref="chatBottom"></view>
-        </list>
+        </scroll-view>
-        <sent-message-bar ref="messageBar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
+        <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
     </view>
 </template>
 
@@ -25,6 +26,9 @@
     import {
         timeCustomCN
     } from '@/utils/filters.js'
+    import {
+        getGroupBase
+    } from '@/apis/interfaces/im.js'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
     import im from '@/utils/im/index.js'
     import showVoice from '../components/showVoice'
@@ -53,13 +57,18 @@
         },
         computed: {
             latestMessage() {
-                if (this.messages.length > 1) {
+                if (this.messages.length) {
                     return this.messages[this.messages.length - 1]
                 } else {
                     return {
                         sentTime: 0
                     }
                 }
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
             }
         },
         onLoad(e) {
@@ -68,12 +77,21 @@
             uni.setNavigationBarTitle({
                 title: this.groupInfo.name
             })
+            // 获取群成员数量
+            getGroupBase(this.targetId).then(res => {
+                uni.setNavigationBarTitle({
+                    title: this.groupInfo.name + `(${res.members})`
+                })
+            })
+            // 获取历史消息列表
             this.getMessageList()
+            // 监听收到本群的消息，追加消息
             uni.$on('onReceiveMessage', (msg) => {
                 if (msg.targetId == this.targetId) {
                     this.getNewMessage()
                 }
             })
+            // 清理聊天记录
             uni.$once('cleanGroupMessage', this.getMessageList)
         },
         onNavigationBarButtonTap() {
@@ -81,10 +99,15 @@
                 url: '/pages/im/group/info?targetId=' + this.targetId
             })
         },
+<<<<<<< HEAD:pages/im/group/chat.nvue
         methods: {
             onScroll(e){
                 this.$refs.messageBar.onHidePopus()
             },
+=======
+        methods: {
+            // 转到好友资料页面
+>>>>>>> 6c0feb9cb60e7c756df3bbe34e36fbe467b90d27:pages/im/group/chat.vue
             toUser(item) {
                 if (item.senderUserId == '__system__') {
                     return
@@ -104,7 +127,7 @@
                     this.conversationType,
                     this.targetId,
                     this.latestMessage.sentTime,
-                    1,
+                    10,
                     false,
                     (messages) => {
                         this.messages = this.messages.concat(messages)
@@ -151,15 +174,24 @@
 <style lang="scss" scoped>
     .group--chat {
         background: $window-color;
-        flex: 1;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
 
         .body {
+            overflow: scroll;
             flex: 1;
 
             .cell {
                 padding: 10rpx 30rpx;
 
+                .cell-system {
+                    text-align: center;
+                }
+
                 .cell-item {
+                    display: flex;
+                    flex-direction: row;
                     width: 690rpx;
                     justify-content: flex-start;
                     align-items: flex-start;

pages/im/group/index.vue

@@ -1,12 +1,13 @@
 <template>
-    <view>
+    <view class="group">
-        <view v-for="(item, index) in groups" :key="index" class="friend-flex u-border-bottom"
+        <view class="title"> 群聊 </view>
-            @click="toGroup(item.targetId)">
+        <view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
-            <u-avatar size="40" shape="square" :src="contact(item.targetId).portraitUrl" />
+            <u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
             <view class="info">
                 <view class="name">{{ item.name }}</view>
             </view>
         </view>
+        <view class="group-count"> {{groups.length}}个群聊 </view>
         <u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
             @confirm="onCreateGroup">
             <view class="slot-content">
@@ -42,6 +43,7 @@
         },
         onLoad() {
             this.initData()
+            uni.$on('onGroupDismiss', this.initData)
         },
         methods: {
             initData() {
@@ -63,13 +65,14 @@
                     uni.showToast({
                         title: '创建成功'
                     })
-                    this.initData()
-                    this.onHideModal()
                 }).catch(err => {
                     uni.showToast({
                         icon: 'none',
-                        title: err
+                        title: err.message
                     })
+                }).finally(() => {
+                    this.initData()
+                    this.onHideModal()
                 })
             },
             toGroup(targetId) {
@@ -82,6 +85,24 @@
 </script>
 
 <style lang="scss" scoped>
+    .group {
+        min-height: 100vh;
+        background-color: $window-color;
+        .title{
+            font-size: $title-size-m;
+            color: $text-gray-m;
+            padding: 10rpx $padding;
+        }
+        .group-count{
+            text-align: center;
+            font-size: $title-size;
+            color: $text-gray;
+            background-color: #fff;
+            padding: 10rpx $padding $padding $padding;
+            font-weight: normal;
+        }
+    }
+
     // 好友列表
     .friend-flex {
         position: relative;
@@ -89,14 +110,17 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        background-color: #fff;
+
 
         .info {
             flex: 1;
-            margin-left: $padding;
+            margin-left: $padding + 10;
+            border-bottom: solid 1rpx #f9f9f9;
+            padding-bottom: $padding;
 
             .name {
-                font-size: $title-size + 2;
+                font-size: $title-size + 1;
-                font-size: $title-size + 2;
                 color: #454545 !important;
             }
 

pages/im/group/info.vue

@@ -1,53 +1,37 @@
 <template>
     <view class="container">
         <view class="members u-border-bottom">
-            <view class="users">
+            <group-user-list :targetId="targetId" :count="14" />
-                <view :class="['user', {'active': item.targetId == currentUser.targetId}]"
-                    v-for="(item, index) in users" :key="index" @click="toUser(item)"
-                    @longpress="showUserActionSheet(item)">
-                    <u-avatar size="44" shape="square" :src="item.portraitUrl">
-                    </u-avatar>
-                    <view class="name">{{ item.name }}</view>
-                </view>
-                <view class="user" v-if="group.can_invite">
-                    <u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee"
-                        color="#999999"></u-avatar>
-                    <view class="name">邀请好友</view>
-                </view>
         </view>
 
-            <view @click="loadMore" v-if="members > users.length" class="loadmore">查看更多群成员 ></view>
+        <u-cell-group class="cells" :border="false" >
-        </view>
+            <u-cell :border="false" class="u-border-bottom" isLink title="群公告" :label="announcement" @click="toAnnouncement" />
-
+            <u-cell :border="false" class="u-border-bottom" isLink title="二维码" @click="showGroupQrCode" />
-        <u-cell-group class="cells">
+            <u-cell :border="false" class="u-border-bottom" title="聊天置顶">
-            <u-cell isLink title="群公告" :label="announcement" @click="toAnnouncement"></u-cell>
+                <u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop" />
-            <u-cell isLink title="二维码" @click="showGroupQrCode"></u-cell>
-            <u-cell title="聊天置顶">
-                <u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch>
             </u-cell>
-            <u-cell title="免打扰">
+            <u-cell class="u-border-bottom" :border="false" title="免打扰">
-                <u-switch slot="value" size="20" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
+                <u-switch slot="value" size="20" v-model="status" activeColor="#34CE98" @change="setStatus" />
             </u-cell>
         </u-cell-group>
 
-        <u-cell-group class="cells" v-if="group.is_admin">
+        <u-cell-group class="cells" v-if="group.is_admin" :border="false">
-            <u-cell isLink title="修改群聊名称" :value="groupName" @click="onGroupName"></u-cell>
+            <u-cell :border="false" class="u-border-bottom" isLink title="修改群聊名称" :value="groupName" @click="onGroupName" />
-            <u-cell isLink title="修改群头像">
+            <u-cell :border="false" class="u-border-bottom" isLink title="修改群头像" @click="onGroupAvatar">
-                <u-avatar slot="value" size="25" shape="square" @click="onGroupAvatar" :src="group.cover"></u-avatar>
+                <u-avatar slot="value" size="25" shape="square" :src="group.cover" />
             </u-cell>
-            <u-cell 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 u-border-top" v-if="loaded">
+        <view class="cells actions" v-if="loaded">
             <view class="action u-border-bottom" @click="onClean">清空聊天记录</view>
             <view class="action u-border-bottom" v-if="group.is_owner" @click="onDismiss">解散群聊</view>
             <view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view>
         </view>
 
-        <u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal"
+        <u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal" @confirm="onChangeGroupName">
-            @confirm="onChangeGroupName">
             <view class="slot-content">
-                <u--input placeholder="群名称" border="surround" focus v-model="groupName"></u--input>
+                <u--input placeholder="群名称" border="surround" focus v-model="groupName" />
             </view>
         </u-modal>
 
@@ -57,13 +41,7 @@
             </view>
         </u-modal>
 
-        <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions"
+        <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions" @close="showActions=false" />
-            @close="showActions=false">
-        </u-action-sheet>
-
-        <u-action-sheet @select="handleUserAction" :actions="userActionMap" cancelText="取消" :show="showUserAction"
-            @close="hideUserAction">
-        </u-action-sheet>
     </view>
 </template>
 
@@ -72,27 +50,24 @@
         getGroupInfo,
         updateGroup,
         quitGroup,
-        removeGroupUser,
+        dismissGroup
-        setGroupAdmin,
-        removeGroupAdmin,
-        dismissGroup,
-        transferGroupOwner,
-        getGroupUsers
     } from '@/apis/interfaces/im.js'
     import {
         uploads
     } from '@/apis/interfaces/uploading'
     import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import groupUserList from '../components/groupUserList'
 
     export default {
+        components: {
+            groupUserList
+        },
         data() {
             return {
                 targetId: '',
                 group: {},
                 conversationType: 3,
                 announcement: '',
-                users: [],
-                members: 0,
                 status: false,
                 isTop: false,
                 loaded: false,
@@ -102,24 +77,7 @@
                 qrContent: 'JOINGROUP|',
                 joinType: '',
                 joinTypeMap: [],
-                showActions: false,
+                showActions: false
-                showUserAction: false,
-                userActionMap: [{
-                        key: 0,
-                        name: '移除成员',
-                        disabled: false
-                    }, {
-                        key: 1,
-                        name: '设置管理',
-                        disabled: true
-                    },
-                    {
-                        key: 2,
-                        name: '转移群主',
-                        disabled: true
-                    }
-                ],
-                currentUser: {}
             }
         },
         onLoad(e) {
@@ -139,18 +97,12 @@
                 }
             })
             this.initData()
-            this.initUsers()
             uni.$on('groupAnnouncementCreated', this.initData)
         },
         onUnload() {
             uni.$off('groupAnnouncementCreated')
         },
         methods: {
-            initUsers() {
-                getGroupUsers(this.targetId, 14).then(res => {
-                    this.users = res
-                })
-            },
             initData() {
                 getGroupInfo(this.targetId).then(res => {
                     this.group = res.group
@@ -190,27 +142,6 @@
                     })
                 })
             },
-            toUser(item) {
-                if (item.targetId == this.$store.getters.sender.userId) {
-                    uni.navigateTo({
-                        url: '/pages/im/friends/mine?targetId=' + item.targetId
-                    })
-                } else {
-                    uni.navigateTo({
-                        url: '/pages/im/friends/info?targetId=' + item.targetId
-                    })
-                }
-            },
-            inviteUser() {
-                uni.navigateTo({
-                    url: '/pages/im/group/invite?targetId=' + this.targetId
-                })
-            },
-            loadMore() {
-                uni.navigateTo({
-                    url: '/pages/im/group/users?targetId=' + this.targetId
-                })
-            },
             toAnnouncement() {
                 uni.navigateTo({
                     url: '/pages/im/group/announcement?targetId=' + this.targetId
@@ -339,6 +270,7 @@
                     success: (res) => {
                         if (res.confirm) {
                             dismissGroup(this.targetId).then(res => {
+                                console.log('解散群', res);
                                 uni.showToast({
                                     icon: 'none',
                                     title: '解散成功'
@@ -373,73 +305,6 @@
                         }
                     }
                 })
-            },
-            showUserActionSheet(item) {
-                this.currentUser = item
-                // 只有管理员以上才会弹窗
-                if (this.group.is_admin) {
-                    if (this.group.is_owner) {
-                        this.userActionMap.map((item) => {
-                            item.disabled = false
-                            return item
-                        })
-                    }
-                    this.showUserAction = true
-                }
-            },
-            hideUserAction() {
-                this.currentUser = {}
-                this.showUserAction = false
-            },
-            handleUserAction(e) {
-                switch (e.key) {
-                    case 0:
-                        removeGroupUser(this.targetId, this.currentUser.targetId).then(res => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '成员移除成功'
-                            })
-                        }).catch(err => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: err.message
-                            })
-                        }).finally(() => {
-                            this.initUsers()
-                        })
-                        break;
-                    case 1:
-                        setGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '设置管理成功'
-                            })
-                        }).catch(err => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: err.message
-                            })
-                        }).finally(() => {
-                            this.initUsers()
-                        })
-                        break;
-                    case 2:
-                        transferGroupOwner(this.targetId, this.currentUser.targetId).then(res => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '群主转让成功'
-                            })
-                        }).catch(err => {
-                            uni.showToast({
-                                icon: 'none',
-                                title: err.message
-                            })
-                        }).finally(() => {
-                            this.initUsers()
-                            this.initData()
-                        })
-                        break;
-                }
             }
         }
     }
@@ -459,44 +324,6 @@
     .members {
         background-color: white;
         padding-bottom: 40rpx;
-
-        .users {
-            flex-direction: row;
-            flex-wrap: wrap;
-            display: flex;
-            padding: 20rpx 0;
-
-            .user {
-                width: 126rpx;
-                margin-left: 20rpx;
-                margin-bottom: 20rpx;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-
-                &.active {
-                    background-color: $window-color;
-                }
-
-                .name {
-                    color: $text-gray-m;
-                    width: 126rpx;
-                    text-align: center;
-                    font-size: 26rpx;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    word-break: break-word;
-                }
-            }
-        }
-
-        .loadmore {
-            font-size: 26rpx;
-            color: $text-gray-m;
-            text-align: center;
-        }
     }
 
     .actions {
@@ -509,4 +336,9 @@
             justify-content: center;
         }
     }
+
+    .u-border-bottom {
+        border-bottom: solid 1rpx #f9f9f9 !important;
+    }
+    
 </style>

pages/im/group/invite.vue

@@ -1,21 +1,137 @@
 <template>
-    <view class="">
+    <view>
-
+        <button type="default" @click="onInvite">确定</button>
+        <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]" bgColor="#ededed" height="20" size="12" color="#666"
+                        style="padding:10rpx 30rpx" />
+                    <view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
+                        @click="addContact(friendItem.targetId)">
+                        <u-checkbox :name="friendItem.targetId" shape="circle" />
+                        <u-avatar class="avatar-img" size="40" shape="square"
+                            :src="contact(friendItem.targetId).portraitUrl" />
+                        <view class="info">
+                            <view class="name">{{ contact(friendItem.targetId).name }}</view>
+                            <!-- <view class="address">Hash:{{ friendItem.address }}</view> -->
+                        </view>
+                    </view>
+                </u-index-item>
+            </u-checkbox-group>
+        </u-index-list>
     </view>
 </template>
 
 <script>
+    import {
+        getFriendsLetter,
+        inviteGroupUser
+    } from '@/apis/interfaces/im';
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
     export default {
         data() {
             return {
-                targetId: ''
+                targetId: '',
+                indexs: [],
+                friends: [],
+                checkboxValue: []
+            };
+        },
+        computed: {
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
             }
         },
         onLoad(e) {
             this.targetId = e.targetId
+            this.getFriendList()
+        },
+        methods: {
+            getFriendList() {
+                getFriendsLetter().then(res => {
+                    this.indexs = res.indexList
+                    this.friends = res.itemArr
+                })
+            },
+            addContact(targetId) {
+                if (!this.checkboxValue.find(item => item == targetId)) {
+                    this.checkboxValue.push(targetId)
+                } else {
+                    const index = this.checkboxValue.findIndex(item => item == targetId)
+                    this.checkboxValue = this.checkboxValue.splice(index, 1)
+                }
+            },
+            onInvite() {
+                inviteGroupUser(this.targetId, this.checkboxValue).then(res => {
+                    uni.navigateBack()
+                }).catch(err => {
+                    uni.showToast({
+                        icon: 'none',
+                        title: err.message
+                    })
+                })
+            }
         }
     }
 </script>
 
-<style>
+<style lang="scss" scoped>
+    // 页面空
+    .pages-null {
+        height: 70vh;
+    }
+
+    // 好友列表
+    .friend-flex {
+        position: relative;
+        padding: 0 $padding 0 $padding;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        box-sizing: border-box;
+
+        .avatar-img {
+            box-shadow: 0 0 20rpx rgba($color: $main-color, $alpha: 0.2);
+        }
+
+        .info {
+            flex: 1;
+            margin-left: $padding;
+            border-bottom: solid 1rpx #f9f9f9;
+            height: 120rpx;
+            line-height: 120rpx;
+
+            .name {
+                font-size: $title-size;
+                color: #454545 !important;
+                @extend .nowrap;
+            }
+
+            .address {
+                color: $text-gray-m;
+                font-size: $title-size-m - 3;
+                padding-top: 10rpx;
+                word-break: break-word;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: 600rpx;
+            }
+        }
+    }
+
+    .list-cell {
+        display: flex;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 10px 24rpx;
+        overflow: hidden;
+        color: #323233;
+        font-size: 14px;
+        line-height: 24px;
+        background-color: #fff;
+    }
 </style>

pages/im/group/users.vue

@@ -1,164 +1,24 @@
 <template>
-    <view class="members">
+    <group-user-list :targetId="targetId" />
-        <view class="users">
-            <view class="user" v-if="isAdmin">
-                <u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee" color="#999999">
-                </u-avatar>
-                <view class="name">邀请好友</view>
-            </view>
-            <view :class="['user', {'active': item.targetId == currentUser.targetId}]" @longpress="showAction(item)"
-                v-for="(item, index) in members" :key="index" @click="toUser(item)">
-                <u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
-                <view class="name">{{ item.name }}</view>
-            </view>
-        </view>
-        <view class="loadmore">成员总数（{{ members.length }}）</view>
-
-        <u-action-sheet :actions="userActions" :title="actionTitle" cancelText="取消" @close="hideAction"
-            @select="doAction" :show="actionShow">
-        </u-action-sheet>
-    </view>
 </template>
 
 <script>
-    import {
+    import groupUserList from '../components/groupUserList'
-        getGroupBase,
-        getGroupUsers
-    } from '@/apis/interfaces/im.js'
-
     export default {
+        components: {
+            groupUserList
+        },
         data() {
             return {
                 targetId: '',
-                members: [],
-                isOwner: false,
-                isAdmin: false,
-                actionShow: false,
-                userActions: [{
-                        type: 0,
-                        name: '设置管理员',
-                        disabled: false
-                    },
-                    {
-                        type: 1,
-                        name: '解除管理员',
-                        disabled: false
-                    },
-                    {
-                        type: 2,
-                        name: '移除成员',
-                        disabled: false
-                    }
-                ],
-                actionTitle: '',
-                currentUser: {}
             }
         },
         onLoad(e) {
             this.targetId = e.targetId
-            getGroupBase(this.targetId).then(res => {
-                this.isOwner = res.is_owner
-                this.isAdmin = res.is_admin
-                if (this.isOwner) {
-                    this.userActions.push({
-                        type: 3,
-                        name: '转移群主',
-                        disabled: false
-                    })
-                }
-            })
-            this.getUserList()
-        },
-        methods: {
-            getUserList() {
-                getGroupUsers(this.targetId).then(res => {
-                    this.members = res
-                })
-            },
-            toUser(item) {
-                uni.navigateTo({
-                    url: '/pages/im/friends/info?targetId=' + item.targetId
-                })
-            },
-            showAction(item) {
-                this.currentUser = item
-                this.actionTitle = item.name
-                this.actionShow = true
-                // 根据当前用户，是不是管理，来控制按钮的可用性
-                this.userActions[0].disabled = true
-            },
-            hideAction(item) {
-                this.actionShow = false
-                this.actionTitle = ''
-                this.currentUser = {}
-                this.userActions[0].disabled = false
-                this.userActions[1].disabled = false
-            },
-            doAction(e) {
-                switch (e.type) {
-                    case 0:
-                        // 设置管理
-                        break;
-                    case 1:
-                        // 取消管理
-                        break;
-                    case 2:
-                        // 移除成员
-                        break;
-                    case 3:
-                        // 转移管理员
-                        break;
-                }
-                this.getUserList()
-            },
-            inviteUser() {
-
-            }
         }
     }
 </script>
 
 <style lang="scss" scoped>
-    .members {
-        background-color: white;
-        padding-bottom: 40rpx;
 
-        .users {
-            flex-direction: row;
-            flex-wrap: wrap;
-            display: flex;
-            padding: 20rpx 0;
-
-            .user {
-                width: 126rpx;
-                margin-left: 20rpx;
-                margin-bottom: 20rpx;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-
-                &.active {
-                    background-color: $window-color;
-                }
-
-                .name {
-                    color: $text-gray-m;
-                    width: 126rpx;
-                    text-align: center;
-                    font-size: 26rpx;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    word-break: break-word;
-                }
-            }
-        }
-
-        .loadmore {
-            font-size: 26rpx;
-            color: $text-gray-m;
-            text-align: center;
-        }
-    }
 </style>

pages/im/index.vue

@@ -18,10 +18,9 @@
                 </view>
             </view>
         </view>
-        <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
         <!-- content -->
         <view v-if="$store.state.token !== ''">
-            <view @click="onDemo">临时测试用</view>
+            <connection-status :connection="connection" />
             <conversation-list @refresh="getConversationList()" :conversations="conversations" />
         </view>
         <!-- 未登录 -->
@@ -40,6 +39,7 @@
     import im from '@/utils/im/index.js'
     import userAuth from '@/public/userAuth'
     import conversationList from './components/conversationList'
+    import connectionStatus from './components/connectionStatus'
 
     export default {
         data() {
@@ -50,20 +50,24 @@
             }
         },
         components: {
-            conversationList
+            conversationList,
+            connectionStatus
         },
         onLoad() {
             // 好友申请数量
             this.checkNewFriendPending()
-            uni.$on('onConnectionStatusChange', (status) => {
+            // 监听新的好友申请
-                this.connection = status
+            uni.$on('onContactNotification', () => {
+                this.checkNewFriendPending()
             })
-            uni.$on('onContactNotification', this.checkNewFriendPending)
         },
         onShow() {
             if (this.$store.state.token !== '') {
                 this.getConversationList()
             }
+            uni.$on('onConnectionStatusChange', (status) => {
+                this.connection = status
+            })
             // 监听新消息
             uni.$on('onReceiveMessage', (msg) => {
                 this.getConversationList()
@@ -97,9 +101,12 @@
             getConversationList() {
                 const count = 1000
                 const timestamp = 0
-                RongIMLib.getConversationList([1, 3], count, timestamp, (res) => {
+                RongIMLib.getConversationList([1, 3], count, timestamp, ({
-                    if (res.code === 0) {
+                    code,
-                        this.conversations = res.conversations
+                    conversations
+                }) => {
+                    if (code === 0) {
+                        this.conversations = conversations
                     }
                 })
             },
@@ -137,9 +144,9 @@
 <style lang="scss" scoped>
     // contents
     .contents {
-        background-color: $window-color;
+        background-color: #fff;
         min-height: 100vh;
-        padding-top: 90rpx + 20rpx;
+        padding-top: 90rpx + 6rpx;
         box-sizing: border-box;
 
         .custom-header {

pages/im/private/call.nvue

@@ -10,11 +10,8 @@
 
         <view class="status" v-if="!connected || mediaType == 0">
             <view class="remote">
-                <u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96"
+                <u-avatar :src="contact(targetId).portraitUrl" shape="square" size="96" bgColor="#fff" />
-                    bgColor="#fff" />
+                <view><text class="nickname">{{ contact(targetId).name }}</text></view>
-                <u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square"
-                    :text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor />
-                <view><text class="nickname">{{userInfo.name}}</text></view>
                 <view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
                 <view v-if="connected"><text class="mediaType">已接通</text></view>
                 <view v-else><text class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</text></view>
@@ -52,17 +49,14 @@
 </template>
 
 <script>
-    import {
-        getFriendInfo
-    } from '@/apis/interfaces/im.js'
     import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
+    import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
 
     export default {
         data() {
             return {
                 targetId: '',
                 mediaType: 0, // 0 语音  1 视频
-                userInfo: {},
                 isOut: false,
                 connected: false,
                 micStatus: false,
@@ -74,9 +68,9 @@
         onLoad(e) {
             this.targetId = e.targetId
             this.mediaType = e.mediaType
-            getFriendInfo(this.targetId).then(res => {
+            // 进入页面开启外呼
-                this.userInfo = res
+            CallLib.startSingleCall(this.targetId, this.mediaType, '');
-            })
+            // 响铃
             this.startRing()
             // 监听通话链接状态
             uni.$once('onCallConnected', this.onCallConnected)
@@ -87,6 +81,9 @@
             uni.$once('onRemoteUserJoined', () => {
                 this.remoteRinging = false
             })
+        },
+        beforeDestroy() {
+
         },
         computed: {
             windowWidth() {
@@ -94,6 +91,11 @@
             },
             windowHeight() {
                 return uni.getSystemInfoSync().windowHeight
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
             }
         },
         methods: {
@@ -117,10 +119,8 @@
                 if (this.mediaType == 1) {
                     const session = CallLib.getCurrentCallSession()
                     setTimeout(() => {
-                        CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0,
+                        CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
-                            false)
+                        CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
-                        CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0,
-                            true)
                     }, 200)
                 }
             },
@@ -130,9 +130,7 @@
 
                 setTimeout(() => {
                     this.downRing()
-                    uni.switchTab({
+                    uni.navigateBack()
-                        url: '/pages/im/index'
-                    })
                 }, 200);
             },
             toHome() {

pages/im/private/chat.vue

@@ -1,14 +1,12 @@
 <template>
     <view class="chat">
         <!-- chat -->
-        <list class="body" :show-scrollbar="false">
+        <scroll-view class="body" scroll-y>
-            <cell class="cell" v-for="(item, index) in messages" :key="index">
+            <view class="cell" v-for="(item, index) in messages" :key="index">
-                <view class="time">
+                <view class="time">{{ customCN(item.sentTime) }}</view>
-                    <text class="text">{{ customCN(item.sentTime) }}</text>
+                <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
-                </view>
+                    <u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, item.messageDirection)"
-                <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
+                        :src="contact(item.senderUserId).portraitUrl" />
-                    <u-avatar class="avatar" size="36" shape="square" @click="showUser(targetId, item.messageDirection)"
-                        :src="userInfo.portraitUrl" />
                     <view class="msg">
                         <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
                             :msg="item.content" />
@@ -17,13 +15,14 @@
                         <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
                             :msg="item.content" />
                         <view class="state" v-if="item.messageDirection == 1">
-                            <text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
+                            <text
+                                :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
                         </view>
                     </view>
                 </view>
-            </cell>
+            </view>
-            <cell class="cell-footer" ref="chatBottom"></cell>
+            <view class="cell-footer" ref="chatBottom"></view>
-        </list>
+        </scroll-view>
         <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
     </view>
 </template>
@@ -62,20 +61,25 @@
         },
         computed: {
             latestMessage() {
-                if (this.messages.length > 1) {
+                if (this.messages.length) {
                     return this.messages[this.messages.length - 1]
                 } else {
                     return {
                         sentTime: 0
                     }
                 }
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
             }
         },
         onLoad(e) {
             this.targetId = e.targetId
             this.userInfo = this.$store.getters.contactInfo(this.targetId)
             uni.setNavigationBarTitle({
-                title: this.userInfo.name
+                title: this.contact(this.targetId).name
             })
             // 获取消息列表
             this.getMessageList()
@@ -113,6 +117,7 @@
                     1,
                     false,
                     (messages) => {
+                        console.log(messages);
                         this.messages = this.messages.concat(messages)
                         this.scrollBottom()
                     })
@@ -126,6 +131,7 @@
                     100,
                     true,
                     (messages) => {
+                        console.log(messages);
                         this.messages = messages.reverse()
                         this.scrollBottom()
                     })
@@ -164,34 +170,28 @@
     /* 窗口 */
     .chat {
         background: $window-color;
-        flex: 1;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
 
         .body {
             flex: 1;
+            overflow: scroll;
 
             .cell {
                 padding: 10rpx 30rpx;
 
                 .time {
-                    justify-content: center;
+                    text-align: center;
-                    align-items: center;
-                    padding-bottom: 20rpx;
-
-                    .text {
-                        background: #fff;
                     font-size: 24rpx;
                     color: #666;
-                        line-height: 40rpx;
-                        padding: 0 20rpx;
-                        border-radius: 10rpx;
-                    }
                 }
 
                 .cell-item {
+                    display: flex;
                     width: 690rpx;
                     justify-content: flex-start;
 
-
                     &.left {
                         flex-direction: row;
                     }
@@ -212,8 +212,13 @@
                             padding-top: 10rpx;
 
                             .state-text {
-                                font-size: 24rpx;
+                                font-size: $title-size-m - 2;
-                                color: #666;
+                                color: rgba($color: $main-color, $alpha: 0.3)
+                            }
+
+                            .state-text-active {
+                                font-size: $title-size-m - 2;
+                                color: #cecece;
                             }
                         }
                     }

pages/user/index.vue

@@ -260,7 +260,9 @@
                     success: function() {
                         uni.showToast({
                             title: '复制成功',
-                            icon: 'none'
+                            icon: 'none',
+                            mask:true,
+                            duration:2000
                         })
                     }
                 });

public/userAuth.js

@@ -109,8 +109,7 @@ class userAuth {
                             .access_token)
                         // 在这里，登录成功，链接IM服务
                         getImToken().then(res => {
-                            console.log('在这获取IM-TOKEN', res);
+                            im.connect(res.token, res.userInfo, () => {})
-                            im.connect(res.token, res.userInfo)
                         })
                         resolve()
                     }).catch(err => {

store/modules/im.js

@@ -12,6 +12,7 @@ export default {
         contactInfo: (state) => (targetId) => {
             if (state.contacts[targetId]) {
                 const info = state.contacts[targetId]
+                
                 return {
                     name: info.name,
                     hash: info.hash,
@@ -21,7 +22,7 @@ export default {
                 return {
                     name: '',
                     hash: '',
-                    portraitUrl: ''
+                    portraitUrl: require('@/static/user/cover.png')
                 }
             }
         },
@@ -68,7 +69,6 @@ export default {
                     // 没有数据，直接新增一条
                     dispatch('initContact', contactInfo)
                 } else if (contactInfo.hash != result[0].hash) {
-                    commit('updateContactInfo', contactInfo)
                     if (contactInfo.portraitUrl && contactInfo.portraitUrl != result[0].portraitUrl) {
                         saveAvatar(contactInfo, (savedFilePath) => {
                             const info = {
@@ -80,7 +80,7 @@ export default {
                             }
                             model.update('targetId="' + contactInfo.targetId + '"', info, (err,
                                 res) => {
-                                console.log('UPDATE AVATAR, ERR', err);
+                                console.log('UPDATE AVATAR, ERR', err, info);
                             })
                             commit('updateContactInfo', info)
                         })
@@ -93,8 +93,9 @@ export default {
                             localAvatar: result[0].localAvatar
                         }
                         model.update('targetId="' + contactInfo.targetId + '"', info, (err, res) => {
-                            console.log('UPDATE NAME, ERR', err);
+                            console.log('UPDATE NAME, ERR', err, info);
                         })
+                        commit('updateContactInfo', info)
                     }
                 } else {
                     console.log('updateContact, 无操作');

uni.scss

@@ -37,7 +37,7 @@ $uni-bg-color-hover:#f1f1f1;//点击状态颜色
 $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
 
 /* 边框颜色 */
-$uni-border-color:#c8c7cc;
+$uni-border-color:#f9f9f9;
 
 /* 尺寸变量 */
 

utils/im/index.js

@@ -12,12 +12,15 @@ import {
 
 const initIm = (KEY) => {
     RongIMLib.init(KEY)
-    // CallLib.init()
+    CallLib.init()
-    addListeners()
+    listeners.imLibListeners()
+    listeners.callLibListeners()
     // 初始化的时候 自动链接
     if (store.getters.getToken !== '') {
         getImToken().then(res => {
-            connect(res.token, res.userInfo, () => {})
+            connect(res.token, res.userInfo, (res) => {
+                console.log('IM.CONNECT', res);
+            })
         })
     }
 }
@@ -59,7 +62,7 @@ const connect = (token, userInfo, callback) => {
         // 设置未读消息数量
         setNotifyBadge()
         // 首次运行获取好友列表
-        const FK = 'ZHK_' + userInfo.targetId
+        const FK = 'ZHKD_' + userInfo.targetId
 
         uni.getStorage({
             key: FK,
@@ -100,125 +103,6 @@ const disconnect = () => {
     })
 }
 
-// 允许通知的消息类型，触发更新消息列表操作
-const notifyMsgTypes = [
-    'RC:TxtMsg',
-    'RC:VcMsg',
-    'RC:HQVCMsg',
-    'RC:ImgMsg',
-    'RC:GIFMsg',
-    'RC:ImgTextMsg',
-    'RC:FileMsg',
-    'RC:LBSMsg',
-    'RC:SightMsg',
-    'RC:ReferenceMsg',
-    'RC:CombineMsg',
-]
-
-function inArray(search, array) {
-    for (var i in array) {
-        if (array[i] == search) {
-            return true
-        }
-    }
-    return false
-}
-
-const addListeners = () => {
-    // 添加连接状态监听函数 
-    RongIMLib.addConnectionStatusListener((res) => {
-        console.log('连接状态监听', res.data.status)
-        uni.$emit('onConnectionStatusChange', res.data.status)
-    })
-    // 添加消息监听函数
-    RongIMLib.addReceiveMessageListener((res) => {
-        const message = res.data.message
-        console.log('收到消息', message)
-        if (inArray(message.objectName, notifyMsgTypes)) {
-            if (!store.getters.contactIsExist(message.targetId)) {
-                getUserInfo(message.targetId).then(res => {
-                    store.dispatch('initContact', res)
-                }).catch(err => {
-                    console.log('ERR', err)
-                })
-            }
-            newMessage(message)
-        } else if (message.objectName === RongIMLib.ObjectName.ProfileNotification) {
-            store.dispatch('updateContact', JSON.parse(message.content.data))
-            // 调用完更新之后，删除这条消息
-            RongIMLib.deleteMessagesByIds([message.messageId], ({
-                code
-            }) => {
-                console.log('消息删除结果', code)
-            })
-        } else if (message.objectName === RongIMLib.ObjectName.ContactNotification) {
-            // 触发一个新好友的通知事件
-            uni.$emit('onContactNotification', message.content)
-        }
-    })
-
-    // 监听消息回执
-    RongIMLib.addReadReceiptReceivedListener(({
-        data
-    }) => {
-        uni.$emit('onReadReceiptReceived', data)
-    })
-
-    // 音视频通话相关的
-    // 监听通话呼入
-    // CallLib.onCallReceived(({
-    //     data
-    // }) => {
-    //     uni.navigateTo({
-    //         url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
-    //             data.mediaType
-    //     })
-    // })
-    // // 通话建立成功
-    // CallLib.onCallConnected(() => {
-    //     uni.$emit('onCallConnected')
-    // })
-    // // 外呼
-    // CallLib.onCallOutgoing((res) => {
-    //     uni.$emit('onCallOutgoing')
-    // })
-    // // 远端响铃
-    // CallLib.onRemoteUserRinging((res) => {
-    //     uni.$emit('onRemoteUserRinging')
-    // })
-    // // 远端加入
-    // CallLib.onRemoteUserJoined((res) => {
-    //     uni.$emit('onRemoteUserJoined')
-    // })
-    // // 断开链接
-    // CallLib.onCallDisconnected((res) => {
-    //     console.log('断开链接', res)
-    //     uni.$emit('onCallDisconnected')
-    // })
-    // // 远端挂断
-    // CallLib.onRemoteUserLeft((res) => {
-    //     console.log('远端离开', res)
-    //     uni.$emit('onRemoteUserLeft')
-    // })
-}
-
-// 维护消息列表，检查是否需要通知声音，设置新消息提醒的数量
-const newMessage = (msg) => {
-    RongIMLib.getConversationNotificationStatus(msg.conversationType, msg.targetId, ({
-        code,
-        status
-    }) => {
-        if (code === 0) {
-            if (status) {
-                uni.vibrateLong()
-                triTone()
-            }
-        }
-    })
-    setNotifyBadge()
-    uni.$emit('onReceiveMessage', msg)
-}
-
 // 播放状态
 let tipState = false
 
@@ -240,6 +124,7 @@ const triTone = () => {
 export default {
     initIm,
     connect,
+    disconnect,
     setNotifyBadge,
     ...message
 }

utils/im/listeners.js

@@ -0,0 +1,141 @@
+import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
+import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+import store from '@/store/index.js'
+import im from "@/utils/im/index.js"
+import utils from '../index.js'
+import {
+    getUserInfo
+} from '@/apis/interfaces/im.js'
+
+// 维护消息列表，检查是否需要通知声音，设置新消息提醒的数量
+const onReceiveMessage = (message) => {
+    IMLib.getConversationNotificationStatus(message.conversationType, message.targetId, ({
+        code,
+        status
+    }) => {
+        if (code === 0) {
+            if (status) {
+                // triTone()
+            }
+        }
+    })
+    im.setNotifyBadge()
+    uni.$emit('onReceiveMessage', message)
+}
+
+// 允许通知的消息类型，触发更新消息列表操作,提示音
+const notifyMsgTypes = [
+    IMLib.ObjectName.Text,
+    IMLib.ObjectName.File,
+    IMLib.ObjectName.Image,
+    IMLib.ObjectName.GIF,
+    IMLib.ObjectName.Location,
+    IMLib.ObjectName.Voice,
+    IMLib.ObjectName.HQVoice,
+    IMLib.ObjectName.Sight,
+    IMLib.ObjectName.Text,
+    IMLib.ObjectName.Text,
+    IMLib.ObjectName.Text
+]
+
+const imLibListeners = () => {
+    // 添加连接状态监听函数 
+    IMLib.addConnectionStatusListener((res) => {
+        console.log('连接状态监听', res.data.status)
+        uni.$emit('onConnectionStatusChange', res.data.status)
+    })
+    // 添加消息监听函数
+    IMLib.addReceiveMessageListener((res) => {
+        const message = res.data.message
+        console.error('[收到消息]', message)
+        if (utils.inArray(message.objectName, notifyMsgTypes)) {
+            if (!store.getters.contactIsExist(message.targetId)) {
+                getUserInfo(message.targetId).then(res => {
+                    store.dispatch('initContact', res)
+                }).catch(err => {
+                    console.error('getUserInfo ERR', err)
+                })
+            }
+            if (!store.getters.contactIsExist(message.senderUserId)) {
+                getUserInfo(message.senderUserId).then(res => {
+                    store.dispatch('initContact', res)
+                }).catch(err => {
+                    console.error('getUserInfo ERR', err)
+                })
+            }
+            onReceiveMessage(message)
+        } else if (message.objectName === IMLib.ObjectName.ProfileNotification) {
+            // 更新会话信息
+            store.dispatch('updateContact', JSON.parse(message.content.data))
+            // 调用完更新之后，删除这条消息
+            IMLib.deleteMessagesByIds([message.messageId])
+        } else if (message.objectName === IMLib.ObjectName.ContactNotification) {
+            // 触发一个新好友的通知事件
+            uni.$emit('onContactNotification', message)
+        } else if (message.objectName === IMLib.ObjectName.GroupNotification) {
+            // 解散群
+            if (message.content.operation === 'Dismiss') {
+                IMLib.cleanHistoryMessages(message.conversationType, message.targetId, message.sentTime,
+                    false)
+                // 解散了就删了吧
+                IMLib.removeConversation(message.conversationType, message.targetId)
+                uni.$emit('onGroupDismiss', message.targetId)
+            }
+            uni.$emit('onReceiveMessage', message)
+        }
+    })
+
+    // 监听消息回执
+    IMLib.addReadReceiptReceivedListener(({
+        data
+    }) => {
+        uni.$emit('onReadReceiptReceived', data)
+    })
+}
+
+const callLibListeners = () => {
+    // 音视频通话相关的
+    // 监听通话呼入
+    CallLib.onCallReceived(({
+        data
+    }) => {
+        console.log('onCallReceived');
+        uni.navigateTo({
+            url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
+                data.mediaType
+        })
+    })
+    // 通话建立成功
+    CallLib.onCallConnected(() => {
+        uni.$emit('onCallConnected')
+    })
+    // 外呼
+    CallLib.onCallOutgoing((res) => {
+        console.log('onCallOutgoing', res);
+        uni.$emit('onCallOutgoing')
+    })
+    // 远端响铃
+    CallLib.onRemoteUserRinging((res) => {
+        uni.$emit('onRemoteUserRinging')
+    })
+    // 远端加入
+    CallLib.onRemoteUserJoined((res) => {
+        console.log('远端接听');
+        uni.$emit('onRemoteUserJoined')
+    })
+    // 断开链接
+    CallLib.onCallDisconnected((res) => {
+        console.log('断开链接', res)
+        uni.$emit('onCallDisconnected')
+    })
+    // 远端挂断
+    CallLib.onRemoteUserLeft((res) => {
+        console.log('远端离开', res)
+        uni.$emit('onRemoteUserLeft')
+    })
+}
+
+export default {
+    imLibListeners,
+    callLibListeners
+}

utils/im/message.js

@@ -15,7 +15,8 @@ const getMessageList = (conversationType, targetId, timeStamp, count, isForward,
         'RC:LBSMsg',
         'RC:SightMsg',
         'RC:ReferenceMsg',
-        'RC:CombineMsg'
+        'RC:CombineMsg',
+        'RC:GrpNtf'
     ]
 
     RongIMLib.getHistoryMessagesByTimestamp(
@@ -151,14 +152,15 @@ const sentImage = (conversationType, targetId, imageUrl, user, callback) => {
     })
 }
 
-const sentGif = (conversationType, targetId, gifUrl, time, callback) => {
+const sentGif = (conversationType, targetId, gifUrl, time, user, callback) => {
     const msg = {
         conversationType: conversationType,
         targetId: String(targetId),
         content: {
             objectName: 'RC:GIFMsg',
             local: 'file:///' + plus.io.convertLocalFileSystemURL(gifUrl),
-            duration: time
+            duration: time,
+            userInfo: user
         }
     }
     RongIMLib.sendMediaMessage(msg, {
@@ -177,14 +179,15 @@ const sentGif = (conversationType, targetId, gifUrl, time, callback) => {
     })
 }
 
-const sendFile = (conversationType, targetId, fileUrl, time, callback) => {
+const sendFile = (conversationType, targetId, fileUrl, time, user, callback) => {
     const msg = {
         conversationType: conversationType,
         targetId: String(targetId),
         content: {
             objectName: 'RC:FileMsg',
             local: 'file:///' + plus.io.convertLocalFileSystemURL(fileUrl),
-            duration: time
+            duration: time,
+            userInfo: user
         }
     }
     RongIMLib.sendMediaMessage(msg, {

utils/index.js

@@ -1,6 +1,17 @@
 import env from './conf/env.js'
 
 export default {
+    inArray: (search, array) => {
+        for (var i in array) {
+            if (array[i] == search) {
+                return true
+            }
+        }
+        return false
+    },
+    rpx2px: (rpx) => {
+        return rpx / 750 * uni.getSystemInfoSync().windowWidth
+    },
     checkPhone: (phone) => {
         let re = /^[0-9]+.?[0-9]*/;
         if (phone.length === 11) {
@@ -73,7 +84,6 @@ export default {
                 let days = Math.abs(currentDate.getTime() - valDate.getTime()) / (1000 * 60 * 60 * 24);
                 return Math.ceil(days) + '天前';
             }
-
         }
     },
     timeStamp(timestamp, formats) {