群准入规则，申请入群的基础过程

apis/interfaces/im.js

@@ -174,10 +174,22 @@ const searchGroup = (name) => {
     })
 }
 
-const joinGroup = (groupId) => {
+/**
+ * 加群前，获取的群信息
+ */
+const joinGroupPre = (groupId) => {
+    return request({
+        url: 'im/groups/' + groupId + '/join'
+    })
+}
+
+const joinGroup = (groupId, message) => {
     return request({
         method: 'POST',
-        url: 'im/groups/' + groupId + '/join'
+        url: 'im/groups/' + groupId + '/join',
+        data: {
+            message
+        }
     })
 }
 
@@ -187,9 +199,9 @@ const quitGroup = (groupId) => {
         url: 'im/groups/' + groupId + '/quit'
     })
 }
-
+
-/**
+/**
- * 解散群聊
+ * 解散群聊
  */
 const dismissGroup = (groupId) => {
     return request({
@@ -220,7 +232,8 @@ export {
     createGroupAnnouncement,
     deleteGroupAnnouncement,
     searchGroup,
+    joinGroupPre,
     joinGroup,
-    quitGroup,
+    quitGroup,
     dismissGroup
 }

pages.json

@@ -467,6 +467,13 @@
                     }
                 }
             }
+        },
+        {
+            "path": "pages/im/group/apply",
+            "name": "imGroupApply",
+            "style": {
+                "navigationBarTitleText": "申请加群"
+            }
         },
         {
             "path": "pages/im/group/info",

pages/im/group/apply.vue

@@ -0,0 +1,91 @@
+<template>
+    <view class="apply">
+        <u-avatar :src="group.cover" size="128" shape="square"></u-avatar>
+        <view class="name">
+            {{ group.name }}
+        </view>
+
+        <u-button 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" />
+        </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>
+            </view>
+        </u-modal>
+    </view>
+</template>
+
+<script>
+    import {
+        joinGroupPre,
+        joinGroup
+    } from '@/apis/interfaces/im.js'
+
+    export default {
+        data() {
+            return {
+                targetId: '',
+                group: {},
+                modalShow: false,
+                message: '',
+                disabled: false
+            }
+        },
+        onLoad(e) {
+            this.targetId = e.targetId
+            joinGroupPre(this.targetId).then(res => {
+                console.log(res);
+                this.group = res
+            })
+        },
+        methods: {
+            toGroupChat() {
+                uni.redirectTo({
+                    url: '/pages/im/group/chat?targetId=' + this.targetId
+                })
+            },
+            applyGroup() {
+                this.modalShow = true
+            },
+            onHideModal() {
+                this.message = ''
+                this.modalShow = false
+            },
+            onJoinGroup() {
+                joinGroup(this.targetId, this.message).then(res => {
+                    console.log('申请结果', res);
+                    uni.showToast({
+                        icon: 'none',
+                        title: '申请成功'
+                    })
+                }).catch(err => {
+                    uni.showToast({
+                        icon: 'none',
+                        title: err.message
+                    })
+                })
+                this.disabled = true
+                this.onHideModal()
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .apply {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .u-avatar {
+            width: 200rpx;
+            height: 200rpx;
+        }
+    }
+</style>

pages/im/group/info.vue

@@ -2,7 +2,7 @@
     <view class="container">
         <view class="members u-border-bottom">
             <view class="users">
-                <view class="user" v-for="(item, index) in members" :key="index" @click="toUser(item)">
+                <view class="user" v-for="(item, index) in users" :key="index" @click="toUser(item)">
                     <u-avatar size="44" shape="square" :src="item.portraitUrl"></u-avatar>
                     <view class="name">{{ item.name }}</view>
                 </view>
@@ -13,7 +13,7 @@
                 </view>
             </view>
 
-            <view @click="loadMore" class="loadmore">查看更多群成员 ></view>
+            <view @click="loadMore" v-if="members > users.length" class="loadmore">查看更多群成员 ></view>
         </view>
 
         <u-cell-group class="cells">
@@ -30,8 +30,9 @@
         <u-cell-group class="cells" v-if="group.is_admin">
             <u-cell isLink title="修改群聊名称" :value="groupName" @click="onGroupName"></u-cell>
             <u-cell isLink title="修改群头像">
-                <u-avatar slot="value" size="24" shape="square" @click="onGroupAvatar" :src="group.cover"></u-avatar>
+                <u-avatar slot="value" size="25" shape="square" @click="onGroupAvatar" :src="group.cover"></u-avatar>
             </u-cell>
+            <u-cell isLink v-if="group.is_owner" title="准入方式" :value="joinType" @click="onChangeJoinType"></u-cell>
         </u-cell-group>
 
         <view class="cells actions u-border-top" v-if="loaded">
@@ -52,6 +53,10 @@
                 <uqrcode class="info-code-src" :size="198" :text="qrContent" />
             </view>
         </u-modal>
+
+        <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions"
+            @close="showActions=false">
+        </u-action-sheet>
     </view>
 </template>
 
@@ -74,14 +79,17 @@
                 group: {},
                 conversationType: 3,
                 announcement: '',
-                members: [],
+                users: [],
                 status: false,
                 isTop: false,
                 loaded: false,
                 modalShow: false,
                 groupName: '',
                 qrCodeShow: false,
-                qrContent: 'JOINGROUP|'
+                qrContent: 'JOINGROUP|',
+                joinType: '',
+                joinTypeMap: [],
+                showActions: false
             }
         },
         onLoad(e) {
@@ -112,8 +120,16 @@
                     this.group = res.group
                     this.groupName = res.group.name
                     this.announcement = res.announcement
+                    this.users = res.users
                     this.members = res.members
                     this.loaded = true
+                    this.joinTypeMap = res.join_type_map.map(item => {
+                        if (item.key == res.join_type) {
+                            item.disabled = true
+                        }
+                        return item
+                    })
+                    this.joinType = res.join_type_map.filter(item => item.key == res.join_type)[0].name
                 }).catch(err => {
                     uni.showToast({
                         icon: 'none',
@@ -138,10 +154,16 @@
                     })
                 })
             },
-            toUser(item) {
+            toUser(item) {
-                uni.navigateTo({
+                if (item.targetId == this.$store.getters.sender.userId) {
-                    url: '/pages/im/friends/info?targetId=' + item.targetId
+                    uni.navigateTo({
-                })
+                        url: '/pages/im/friends/mine?targetId=' + item.targetId
+                    })
+                } else {
+                    uni.navigateTo({
+                        url: '/pages/im/friends/info?targetId=' + item.targetId
+                    })
+                }
             },
             inviteUser() {
 
@@ -185,6 +207,78 @@
                 this.modalShow = false
                 this.groupName = this.group.name
             },
+            // 修改群头像
+            onGroupAvatar() {
+                console.log('onGroupAvatar');
+                uni.chooseImage({
+                    count: 1,
+                    sourceType: ['album'],
+                    crop: {
+                        quality: 100,
+                        width: 128,
+                        height: 128,
+                        resize: true
+                    },
+                    success: res => {
+                        console.log(res);
+                        let path = res.tempFiles.map((val, index) => {
+                            return {
+                                name: 'uploads' + index,
+                                uri: val.path
+                            }
+                        })
+                        uploads(path).then(path => {
+                            updateGroup(this.targetId, {
+                                cover: path.path[0]
+                            }).then(res => {
+                                uni.showToast({
+                                    icon: 'none',
+                                    title: '群头像修改成功'
+                                })
+                                this.modalShow = false
+                                this.group.cover = path.url[0]
+                            })
+                        }).catch(err => {
+                            uni.showToast({
+                                title: err.message,
+                                icon: 'none'
+                            })
+                        })
+                    },
+                    fail: (err) => {
+                        console.log(err);
+                    }
+                })
+            },
+            onChangeJoinType() {
+                this.showActions = true
+            },
+            doAction(e) {
+                updateGroup(this.targetId, {
+                    join_type: e.key
+                }).then(res => {
+                    uni.showToast({
+                        icon: 'none',
+                        title: '修改成功'
+                    })
+                    this.joinTypeMap = this.joinTypeMap.map(item => {
+                        if (item.key == e.key) {
+                            item.disabled = true
+                        } else {
+                            item.disabled = false
+                        }
+                        return item
+                    })
+                    this.joinType = e.name
+                    this.showActions = false
+                }).catch(err => {
+                    console.log(err);
+                    uni.showToast({
+                        icon: 'error',
+                        title: err.message
+                    })
+                })
+            },
             onClean() {
                 uni.showModal({
                     title: '清空聊天记录',
@@ -237,53 +331,6 @@
                         }
                     }
                 })
-            },
-            // 修改群头像
-            onGroupAvatar() {
-                uni.showToast({
-                    icon: 'none',
-                    title: '正在打开相册'
-                })
-                uni.chooseImage({
-                    count: 1,
-                    sizeType: ['original'],
-                    sourceType: ['album'],
-                    crop: {
-                        quality: 100,
-                        width: 128,
-                        height: 128,
-                        resize: true
-                    },
-                    success: res => {
-                        console.log(res);
-                        let path = res.tempFiles.map((val, index) => {
-                            return {
-                                name: 'uploads' + index,
-                                uri: val.path
-                            }
-                        })
-                        uploads(path).then(path => {
-                            updateGroup(this.targetId, {
-                                cover: path.path[0]
-                            }).then(res => {
-                                uni.showToast({
-                                    icon: 'none',
-                                    title: '群头像修改成功'
-                                })
-                                this.modalShow = false
-                                this.group.cover = path.url[0]
-                            })
-                        }).catch(err => {
-                            uni.showToast({
-                                title: err.message,
-                                icon: 'none'
-                            })
-                        })
-                    },
-                    fail: (err) => {
-                        console.log(err);
-                    }
-                })
             }
         }
     }

pages/im/index.vue

@@ -72,10 +72,10 @@
             uni.$off('onReceiveMessage')
         },
         methods: {
-            checkNewFriendPending() {
+            checkNewFriendPending() {
-                im.getPendingList((pendings) => {
+                im.getPendingList((pendings) => {
-                    this.hasNewFriends = pendings.length
+                    this.hasNewFriends = pendings.length
-                })
+                })
             },
             // 检查登录
             toLogin() {
@@ -101,10 +101,19 @@
                 uni.scanCode({
                     success: (res) => {
                         if (res.scanType == 'QR_CODE') {
-                            res.result.substr(0, 10) == 'ADDFRIEND|'
+                            if (res.result.substr(0, 10) == 'ADDFRIEND|') {
-                            uni.navigateTo({
+                                uni.navigateTo({
-                                url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
+                                    url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
-                            })
+                                })
+                            } else if (res.result.substr(0, 10) == 'JOINGROUP|') {
+                                uni.navigateTo({
+                                    url: '/pages/im/group/apply?targetId=' + res.result.substr(10)
+                                })
+                            } else {
+                                uni.showToast({
+                                    title: '暂不支持的二维码'
+                                })
+                            }
                         }
                     }
                 })