群组信息的页面间联动

pages/im/group/info.vue

@@ -11,9 +11,9 @@
                         color="#999999"></u-avatar>
                     <view class="name">邀请用户</view>
                 </view>
-            </view>
-            
-            <view @click="loadMore" class="loadmore">查看更多群成员</view>
+            </view>
+
+            <view @click="loadMore" class="loadmore">查看更多群成员 ></view>
         </view>
 
         <u-cell-group class="cells">
@@ -26,19 +26,19 @@
             </u-cell>
         </u-cell-group>
 
-        <u-cell-group class="cells" v-if="group.is_owner">
+        <u-cell-group class="cells" v-if="group.is_admin">
             <u-cell isLink title="修改群聊名称" :value="group.name" @click="onGroupName"></u-cell>
             <u-cell isLink title="修改群头像">
                 <u-avatar slot="value" size="24" shape="square" :src="group.cover"></u-avatar>
             </u-cell>
         </u-cell-group>
 
-        <view class="cells actions u-border-top">
+        <view class="cells actions u-border-top" 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>
-        
+        </view>
+
     </view>
 </template>
 
@@ -58,16 +58,11 @@
                 members: [],
                 status: false,
                 isTop: false,
+                loaded: false
             }
         },
         onLoad(e) {
             this.targetId = e.targetId
-            getGroupInfo(this.targetId).then(res => {
-                this.group = res.group
-                console.log(this.group);
-                this.announcement = res.announcement
-                this.members = res.members
-            })
             RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
                 status
             }) => {
@@ -80,9 +75,22 @@
                 if (code == 0) {
                     this.isTop = conversation.isTop
                 }
-            })
+            })
+            this.initData()
+            uni.$on('groupAnnouncementCreated', this.initData)
+        },
+        onUnload() {
+            uni.$off('groupAnnouncementCreated')
         },
         methods: {
+            initData() {
+                getGroupInfo(this.targetId).then(res => {
+                    this.group = res.group
+                    this.announcement = res.announcement
+                    this.members = res.members
+                    this.loaded = true
+                })
+            },
             setStatus() {
                 RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status,
                     ({
@@ -132,6 +140,7 @@
                                     icon: 'none',
                                     title: '清空成功'
                                 })
+                                uni.$emit('cleanGroupMessage')
                             })
                         }
                     }
@@ -178,23 +187,26 @@
                 width: 126rpx;
                 margin-left: 20rpx;
                 margin-bottom: 20rpx;
+                display: flex;
+                flex-direction: column;
                 justify-content: center;
                 align-items: center;
 
-                .name {
+                .name {
+                    color: $text-gray-m;
                     width: 126rpx;
                     text-align: center;
-                    font-size: 28rpx;
+                    font-size: 26rpx;
                     overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    word-break: break-word;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    word-break: break-word;
                 }
             }
         }
 
         .loadmore {
-            font-size: 28rpx;
+            font-size: 26rpx;
             color: $text-gray-m;
             text-align: center;
         }