公告，群资料

apis/interfaces/im.js

@@ -113,7 +113,7 @@ const getGroupInfo = (groupId) => {
  */
 const getGroupBase = (groupId) => {
     return request({
-        url: 'im/groups/' + groupId+ '/base'
+        url: 'im/groups/' + groupId + '/base'
     })
 }
 
@@ -188,6 +188,16 @@ const quitGroup = (groupId) => {
     })
 }
 
+/**
+ * 解散群聊
+ */
+const dismissGroup = (groupId) => {
+    return request({
+        method: 'DELETE',
+        url: 'im/groups/' + groupId
+    })
+}
+
 export {
     getImToken,
     deleteFriend,
@@ -211,5 +221,6 @@ export {
     deleteGroupAnnouncement,
     searchGroup,
     joinGroup,
-    quitGroup
+    quitGroup,
+    dismissGroup
 }

pages/im/group/announceCreate.vue

@@ -2,7 +2,7 @@
     <view class="create">
         <u--textarea v-model="content" count height="200" maxlength="200" placeholder="请输入公告内容"></u--textarea>
 
-        <u-button type="primary" text="发布" @click="onCreate"></u-button>
+        <u-button type="primary" text="发布" :disabled="disabled" @click="onCreate" color="#34CE98"></u-button>
     </view>
 </template>
 
@@ -21,6 +21,11 @@
         onLoad(e) {
             this.targetId = e.targetId
         },
+        computed: {
+            disabled() {
+                return this.content.length == 0 || this.content.length > 200
+            }
+        },
         methods: {
             onCreate() {
                 createGroupAnnouncement(this.targetId, this.content).then(res => {

pages/im/group/announcement.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="announce">
         <u-skeleton rows="2" :loading="loading" avatar :rows="5">
-            <view v-for="(item,index) in announcements" :key="index">
+            <view v-for="(item,index) in announcements" :key="index" class="item">
                 <view class="header">
                     <u-avatar :src="item.user.portraitUrl"></u-avatar>
                     <view class="user">
@@ -63,32 +63,48 @@
                 })
             },
             onDelete(aId) {
+                uni.showModal({
+                    title: '删除公告',
+                    success: (res) => {
+                        if (res.confirm) {
                             deleteGroupAnnouncement(this.targetId, aId).then(res => {
+                                uni.showToast({
+                                    icon: 'none',
+                                    title: '删除成功'
+                                })
                                 this.initData()
                             })
                         }
                     }
+                })
+            }
+        }
     }
 </script>
 
 <style lang="scss" scoped>
     .announce {
-        padding: $padding;
+        padding: 0 $padding $padding $padding;
+
+        .item {
+            border-bottom: solid 1rpx #f9f9f9 !important;
+            padding-top: $padding;
 
             .header {
                 display: flex;
                 flex-direction: row;
+                align-items: center;
 
                 .user {
                     margin-left: $padding;
                     flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
 
-                .name {
+                    .name {}
-                    line-height: 44rpx;
-                }
 
                     .time {
-                    margin-top: 15rpx;
                         font-size: 24rpx;
                         color: $text-gray-m;
                     }
@@ -96,7 +112,7 @@
 
                 .delete {
                     color: $text-price;
-                font-size: 32rpx;
+                    font-size: 28rpx;
                 }
             }
 
@@ -105,4 +121,5 @@
                 font-size: 34rpx;
             }
         }
+    }
 </style>

pages/im/group/info.vue

@@ -39,9 +39,10 @@
             <view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view>
         </view>
 
-        <u-modal :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal" @confirm="onChangeGroupName">
+        <u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal"
+            @confirm="onChangeGroupName">
             <view class="slot-content">
-                <u--input placeholder="群名称" border="surround" v-model="groupName"></u--input>
+                <u--input placeholder="群名称" border="surround" focus v-model="groupName"></u--input>
             </view>
         </u-modal>
     </view>
@@ -50,7 +51,9 @@
 <script>
     import {
         getGroupInfo,
-        updateGroup
+        updateGroup,
+        quitGroup,
+        dismissGroup
     } from '@/apis/interfaces/im.js'
     import {
         uploads
@@ -101,6 +104,11 @@
                     this.announcement = res.announcement
                     this.members = res.members
                     this.loaded = true
+                }).catch(err => {
+                    uni.showToast({
+                        icon: 'none',
+                        title: '群不存在'
+                    })
                 })
             },
             setStatus() {
@@ -140,8 +148,10 @@
             },
             onGroupName() {
                 this.modalShow = true
+                console.log(this.$refs.groupNameRef);
             },
             onChangeGroupName() {
+                if (this.groupName != this.group.name) {
                     updateGroup(this.targetId, {
                         name: this.groupName
                     }).then(res => {
@@ -151,6 +161,12 @@
                             title: '群名称修改成功'
                         })
                     })
+                } else {
+                    uni.showToast({
+                        icon: 'none',
+                        title: '无修改'
+                    })
+                }
             },
             onHideModal() {
                 this.modalShow = false
@@ -174,19 +190,47 @@
                 })
             },
             onDismiss() {
+                uni.showModal({
+                    title: '解散群聊',
+                    success: (res) => {
+                        if (res.confirm) {
+                            dismissGroup(this.targetId).then(res => {
                                 uni.showToast({
                                     icon: 'none',
-                    title: '开发中'
+                                    title: '解散成功'
+                                })
+                                uni.switchTab({
+                                    url: '/pages/im/index'
+                                })
+                            })
+                        }
+                    }
                 })
             },
             onQuite() {
+                uni.showModal({
+                    title: '退出群聊',
+                    success: (res) => {
+                        if (res.confirm) {
+                            quitGroup(this.targetId).then(res => {
                                 uni.showToast({
                                     icon: 'none',
-                    title: '开发中'
+                                    title: '退出群聊成功'
+                                })
+                                uni.switchTab({
+                                    url: '/pages/im/index'
+                                })
+                            })
+                        }
+                    }
                 })
             },
             // 修改群头像
             onGroupAvatar() {
+                uni.showToast({
+                    icon: 'none',
+                    title: '正在打开相册'
+                })
                 uni.chooseImage({
                     count: 1,
                     sizeType: ['original'],
@@ -222,6 +266,9 @@
                                 icon: 'none'
                             })
                         })
+                    },
+                    fail: (err) => {
+                        console.log(err);
                     }
                 })
             }