feat(group): (#525) 圈子管理员可以将成员加入或移出黑名单了

slimkit · Oct 9, 2018 · 9c3f736 · 9c3f736
1 parent 50731f7
commit 9c3f736
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 12 deletions.
diff --git a/src/api/group.js b/src/api/group.js
@@ -515,3 +515,29 @@ export function unpinnedPost(postId) {
   const url = `/plus-group/pinned/posts/${postId}/cancel`;
   return api.patch(url, {}, { validateStatus: s => s === 201 });
 }
+
+/**
+ * 将一个成员加入黑名单
+ * @author mutoe <[email protected]>
+ * @export
+ * @param {number} groupId
+ * @param {number} memberId
+ * @returns
+ */
+export function addToBlackList(groupId, memberId) {
+  const url = `/plus-group/groups/${groupId}/blacklist/${memberId}`;
+  return api.put(url, {}, { validateStatus: s => s === 201 });
+}
+
+/**
+ * 将一个成员移出黑名单
+ * @author mutoe <[email protected]>
+ * @export
+ * @param {number} groupId
+ * @param {number} memberId
+ * @returns
+ */
+export function moveoutBlackList(groupId, memberId) {
+  const url = `/plus-group/groups/${groupId}/blacklist/${memberId}`;
+  return api.delete(url, { validateStatus: s => s === 204 });
+}
diff --git a/src/page/group/components/GroupUserItem.vue b/src/page/group/components/GroupUserItem.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="c-group-user-item" @click="onUserClick">
-    <avatar :user="user" class="avatar"/>
-    <span class="name m-text-cut">{{ user.name }}</span>
-    <span v-if="member.role === 'founder'" class="founder">圈主</span>
-    <span v-if="member.role === 'administrator'" class="admin">管理员</span>
+    <div class="info">
+      <avatar :user="user" class="avatar"/>
+      <span class="name m-text-cut">{{ user.name }}</span>
+      <span v-if="member.role === 'founder'" class="founder">圈主</span>
+      <span v-if="member.role === 'administrator'" class="admin">管理员</span>
+    </div>
+    <div class="more" @click.stop="handleMore">
+      <svg class="m-style-svg m-svg-small"><use xlink:href="#icon-more"/></svg>
+    </div>
   </div>
 </template>
 
@@ -24,6 +29,9 @@ export default {
         name: "userDetail",
         params: { userId: this.user.id }
       });
+    },
+    handleMore() {
+      this.$emit("more");
     }
   }
 };
@@ -33,7 +41,7 @@ export default {
 .c-group-user-item {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   height: 134px;
   border-bottom: 1px solid @border-color;
   padding: 0 30px;

diff --git a/src/page/group/detail/GroupBlackList.vue b/src/page/group/detail/GroupBlackList.vue
@@ -14,7 +14,7 @@
       <h3>黑名单({{ blackList.length }})</h3>
       <ul>
         <li v-for="m in blackList" :key="m.id">
-          <group-user-item :member="m" />
+          <group-user-item :member="m" @more="onMoreClick(m.id)" />
         </li>
       </ul>
     </template>
@@ -24,6 +24,7 @@
 
 <script>
 import _ from "lodash";
+import bus from "@/bus";
 import SearchBar from "@/components/common/SearchBar.vue";
 import GroupUserItem from "../components/GroupUserItem.vue";
 
@@ -76,7 +77,23 @@ export default {
         type: "blacklist"
       });
       this.searchList = result;
-    }, 450)
+    }, 450),
+    onMoreClick(memberId) {
+      const actions = [];
+      actions.push({
+        text: "移出黑名单",
+        method: async () => {
+          await this.$store.dispatch("group/moveoutBlackList", {
+            groupId: this.groupId,
+            memberId
+          });
+          this.blackList = this.blackList.filter(m => m.id !== memberId);
+          this.$Message.success("操作成功");
+          this.fetchMembers();
+        }
+      });
+      bus.$emit("actionSheet", actions);
+    }
   }
 };
 </script>

diff --git a/src/page/group/detail/GroupDetail.vue b/src/page/group/detail/GroupDetail.vue
@@ -161,7 +161,7 @@
             <svg class="m-style-svg m-svg-small"><use xlink:href="#icon-arrow-right"/></svg>
           </span>
         </li>
-        <li @click="$router.push({name: 'groupBlackList'})">
+        <li v-if="isGroupManager" @click="$router.push({name: 'groupBlackList'})">
           <span>
             <svg class="m-style-svg m-svg-small"><use xlink:href="#icon-group-blacklist"/></svg>
             黑名单
@@ -316,6 +316,10 @@ export default {
     },
     isOwner() {
       return this.groupOwner.id === this.currentUser.id;
+    },
+    isGroupManager() {
+      const { role = "" } = this.group.joined || {};
+      return ["founder", "administrator"].includes(role);
     }
   },
   watch: {

diff --git a/src/page/group/detail/GroupMembers.vue b/src/page/group/detail/GroupMembers.vue
@@ -5,22 +5,22 @@
     <template v-if="keyword.length">
       <ul>
         <li v-for="m in searchList" :key="m.id">
-          <group-user-item :member="m" />
+          <group-user-item :member="m" @more="onMoreClick(m)" />
         </li>
       </ul>
     </template>
     <template v-else>
       <h3>圈管理({{ administrator.length }})</h3>
       <ul>
         <li v-for="m in administrator" :key="m.id">
-          <group-user-item :member="m" />
+          <group-user-item :member="m" @more="onMoreClick(m)" />
         </li>
       </ul>
 
       <h3>成员({{ member.length }})</h3>
       <ul>
         <li v-for="m in member" :key="m.id">
-          <group-user-item :member="m" />
+          <group-user-item :member="m" @more="onMoreClick(m)" />
         </li>
       </ul>
     </template>
@@ -30,6 +30,7 @@
 
 <script>
 import _ from "lodash";
+import bus from "@/bus";
 import SearchBar from "@/components/common/SearchBar.vue";
 import GroupUserItem from "../components/GroupUserItem.vue";
 
@@ -93,7 +94,34 @@ export default {
         name: keyword
       });
       this.searchList = result;
-    }, 600)
+    }, 600),
+    onMoreClick(member) {
+      const actions = [];
+      if (member.role === "member")
+        actions.push({
+          text: "加入黑名单",
+          method: () => {
+            const actions = [
+              {
+                text: "加入黑名单",
+                method: async () => {
+                  await this.$store.dispatch("group/addToBlackList", {
+                    groupId: this.groupId,
+                    memberId: member.id
+                  });
+                  this.member = this.member.filter(m => m.id !== member.id);
+                  this.$Message.success("操作成功");
+                  this.fetchMembers();
+                }
+              }
+            ];
+            setTimeout(() => {
+              bus.$emit("actionSheet", actions, "取消", "确认加入黑名单？");
+            }, 200);
+          }
+        });
+      if (actions.length) bus.$emit("actionSheet", actions);
+    }
   }
 };
 </script>

diff --git a/src/stores/module/group/actions.js b/src/stores/module/group/actions.js
@@ -207,5 +207,27 @@ export default {
     const { postId, commentId } = payload;
     const { data } = await api.deletePostComment(postId, commentId);
     return data;
+  },
+
+  /**
+   * 将某个成员加入黑名单
+   * @author mutoe <[email protected]>
+   * @returns
+   */
+  async addToBlackList(store, payload) {
+    const { groupId, memberId } = payload;
+    await api.addToBlackList(groupId, memberId);
+    return true;
+  },
+
+  /**
+   * 将某个成员移出黑名单
+   * @author mutoe <[email protected]>
+   * @returns
+   */
+  async moveoutBlackList(store, payload) {
+    const { groupId, memberId } = payload;
+    await api.moveoutBlackList(groupId, memberId);
+    return true;
   }
 };