IM,群组相关页面

apis/interfaces/im.js

@@ -99,12 +99,29 @@ const getMyGroups = () => {
     })
 }
 
+/**
+ * 获取群信息，包含基础信息和 14 个用户
+ */
 const getGroupInfo = (groupId) => {
     return request({
         url: 'im/groups/' + groupId
     })
 }
 
+const getGroupUsers = (groupId) => {
+    return request({
+        url: 'im/groups/' + groupId + '/users'
+    })
+}
+
+const getGroupAnnouncements = (groupId) => {
+    return request({
+        url: 'im/groups/' + groupId + '/announcements'
+    })
+}
+/**
+ * 创建群聊
+ */
 const createGroup = (data) => {
     return request({
         method: 'POST',
@@ -113,6 +130,37 @@ const createGroup = (data) => {
     })
 }
 
+const updateGroup = (groupId, data) => {
+   return request({
+       method: 'PUT',
+       url: 'im/groups/' + groupId,
+       data: data
+   }) 
+}
+
+/**
+ * 搜索群聊
+ */
+const searchGroup = (name) => {
+    return request({
+        url: 'im/groups/search?name=' + name
+    })
+}
+
+const joinGroup = (groupId) => {
+    return request({
+        method: 'POST',
+        url: 'im/groups/' + groupId + '/join'
+    })
+}
+
+const quitGroup = (groupId) => {
+    return request({
+        method: 'POST',
+        url: 'im/groups/' + groupId + '/quit'
+    })
+}
+
 export {
     getImToken,
     deleteFriend,
@@ -127,5 +175,11 @@ export {
     pedingFriend,
     getMyGroups,
     createGroup,
-    getGroupInfo
+    updateGroup,
+    getGroupInfo,
+    getGroupUsers,
+    getGroupAnnouncements,
+    searchGroup,
+    joinGroup,
+    quitGroup
 }

pages.json

@@ -427,7 +427,7 @@
             "path": "pages/im/friends/info",
             "name": "imFriendsInfo",
             "style": {
-                "navigationBarTitleText": "好友资料",
+                "navigationBarTitleText": "用户资料",
                 "navigationBarBackgroundColor": "#FFFFFF"
             }
         },
@@ -490,6 +490,20 @@
                 "navigationBarTitleText": "创建群聊"
             }
         },
+        {
+            "path": "pages/im/group/users",
+            "name": "imGroupUsers",
+            "style": {
+                "navigationBarTitleText": "群成员"
+            }
+        },
+        {
+            "path": "pages/im/group/announcement",
+            "name": "imGroupAnnouncement",
+            "style": {
+                "navigationBarTitleText": "群公告"
+            }
+        },
         {
             "path": "pages/wallet/add",
             "name": "WalletAdd",

pages/im/friends/info.vue

@@ -106,6 +106,7 @@
             }
         },
         onLoad(e) {
+            console.log(e);
             this.targetId = e.targetId
             getFriendInfo(e.targetId).then(res => {
                 this.userInfo = res

pages/im/group/announcement.nvue

@@ -0,0 +1,32 @@
+<template>
+    <view>
+        <view v-for="(item,index) in announcements" :key="index">
+            {{ item.content }}
+        </view>
+    </view>
+</template>
+
+<script>
+    import {
+        getGroupAnnouncements
+    } from '@/apis/interfaces/im.js'
+
+    export default {
+        data() {
+            return {
+                targetId: '',
+                announcements: []
+            }
+        },
+        onLoad(e) {
+            this.targetId = e.targetId
+            getGroupAnnouncements(this.targetId).then(res => {
+                this.announcements = res
+            })
+        }
+    }
+</script>
+
+<style>
+
+</style>

pages/im/group/chat.nvue

@@ -3,7 +3,7 @@
         <list class="body" :show-scrollbar="false">
             <cell class="cell" v-for="(item, index) in messages" :key="index">
                 <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
-                    <u-avatar class="avatar" size="36" shape="square" :src="item.content.userInfo.portraitUrl" />
+                    <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square" :src="item.content.userInfo.portraitUrl" />
                     <view class="msg">
                         <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
                             :msg="item.content" :name="item.content.userInfo.name" />
@@ -72,6 +72,12 @@
             })
         },
         methods: {
+            toUser(item) {
+                console.log(item);
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + item.senderUserId
+                })
+            },
             // 获取消息列表
             getMessageList() {
                 im.getMessageList(

pages/im/group/info.nvue

@@ -1,24 +1,40 @@
 <template>
     <view>
-        <view class="">
+        <view class="members">
-
+            <view class="users">
+                <view class="user" v-for="(item, index) in members" :key="index" @click="toUser(item)">
+                    <u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
+                    <text class="name">{{ item.name }}</text>
+                </view>
+                <view class="user">
+                    <u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee" color="#999999"></u-avatar>
+                    <text class="name">邀请用户</text>
                 </view>
-        <view>
-            查看更多群成员
             </view>
 
-        群聊名称
+            <view class="">
-        群公告
+                <text @click="loadMore" class="loadmore">查看更多群成员</text>
+            </view>
+        </view>
 
-        <view class="">
+        <u-cell-group>
-            置顶
+            <u-cell isLink title="群聊名称" :value="group.name"></u-cell>
+            <u-cell isLink title="群公告" :label="announcement"></u-cell>
+            <u-cell isLink title="聊天置顶"></u-cell>
+            <u-cell isLink title="免打扰"></u-cell>
+        </u-cell-group>
+
+        <view class="actions u-border-top">
+            <view class="u-border-bottom">
+                <text>清空聊天记录</text>
+            </view>
+            <view class="u-border-bottom">
+                <text>删除并退出</text>
+            </view>
+            <view class="u-border-bottom" v-if="group.is_owner">
+                <text>解散群聊</text>
             </view>
-        <view class="">
-            免打扰
         </view>
-        清空聊天记录
-        删除并退出
-        解散群聊
     </view>
 </template>
 
@@ -32,21 +48,77 @@
             return {
                 targetId: '',
                 group: {},
+                announcement: '',
                 members: []
             }
         },
         onLoad(e) {
             this.targetId = e.targetId
             getGroupInfo(this.targetId).then(res => {
-                this.info = res.group
+                this.group = res.group
+                this.announcement = res.announcement
                 this.members = res.members
-            }).catch(err => {
-                console.log(err);
             })
+        },
+        methods: {
+            toUser(item) {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + item.targetId
+                })
+            },
+            inviteUser() {
+                
+            },
+            loadMore() {
+                uni.navigateTo({
+                    url: '/pages/im/group/users?targetId=' + this.targetId
+                })
+            },
+            toAnnouncement() {
+                uni.navigateTo({
+                    url: '/pages/im/group/announcement?targetId=' + this.targetId
+                })
+            }
         }
     }
 </script>
 
-<style>
+<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;
+                justify-content: center;
+                align-items: center;
+
+                .name {
+                    width: 126rpx;
+                    text-align: center;
+                    font-size: 28rpx;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+
+        .loadmore {
+            font-size: 28rpx;
+            color: $text-gray-m;
+            text-align: center;
+        }
+    }
+    
+    .actions {
+        margin-top: $padding;
+    }
 </style>

pages/im/group/users.nvue

@@ -0,0 +1,68 @@
+<template>
+    <view class="members">
+        <view class="users">
+            <view class="user" v-for="(item, index) in members" :key="index" @click="toUser(item)">
+                <u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
+                <text class="name">{{ item.name }}</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import {
+        getGroupUsers
+    } from '@/apis/interfaces/im.js'
+
+    export default {
+        data() {
+            return {
+                targetId: '',
+                members: []
+            }
+        },
+        onLoad(e) {
+            this.targetId = e.targetId
+            getGroupUsers(this.targetId).then(res => {
+                this.members = res
+            })
+        },
+        methods: {
+            toUser(item) {
+                uni.navigateTo({
+                    url: '/pages/im/friends/info?targetId=' + item.targetId
+                })
+            }
+        }
+    }
+</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;
+                justify-content: center;
+                align-items: center;
+
+                .name {
+                    width: 126rpx;
+                    text-align: center;
+                    font-size: 28rpx;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+    }
+</style>

pages/im/index.vue

@@ -98,7 +98,6 @@
                 RongIMLib.getConversationList([1, 3], count, timestamp, (res) => {
                     if (res.code === 0) {
                         this.conversations = res.conversations
-                        console.log(res.conversations);
                     }
                 })
             },

router/index.js

@@ -4,9 +4,9 @@ import {
 } from 'uni-simple-router';
 import store from '@/store/index'
 
-// #ifdef APP-NVUE
 // CALL 页面，必须是nvue，但是NVUE 不支持webpack的 ROUTES 注入
 // https://github.com/SilurianYang/uni-read-pages/issues/20
+// #ifdef APP-NVUE
 const ROUTES = [{
     'path': '/pages/im/private/call',
     'name': 'imPrivateCall'
@@ -25,8 +25,13 @@ const ROUTES = [{
 },{
     'path': '/pages/im/group/create',
     'name': 'imGroupCreate'
+},{
+    'path': '/pages/im/group/users',
+    'name': 'imGroupUsers'
+},{
+    'path': '/pages/im/group/announcement',
+    'name': 'imGroupAnnouncement'
 }]
-
 // #endif
 
 const router = createRouter({