From bde3379cb6aba3c64dc72c239f21a9c4229cb18e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kaizheng=28=E9=83=91=E5=87=AF=29?= <kaizheng@upchina.com>
Date: Sun, 2 Mar 2025 11:11:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/circle.js                             |   9 +
 src/utils/request.js                          |   2 +-
 .../{detail => }/components/forbidSpeak.vue   |   9 +
 .../circle/data/components/studentList.vue    |   2 +-
 .../detail/components/bannedUserList.vue      | 180 ++++++++++++++
 .../components/components/userItems.vue       | 220 ++++++++++++++++++
 .../circle/detail/components/newsList.vue     |   2 +-
 .../circle/detail/components/privateList.vue  |  57 +++--
 .../circle/detail/components/userList.vue     | 174 +++++---------
 .../detail/components/userLnteractList.vue    |  13 +-
 src/views/circle/detail/index.vue             |  12 +-
 11 files changed, 533 insertions(+), 147 deletions(-)
 rename src/views/circle/{detail => }/components/forbidSpeak.vue (91%)
 create mode 100644 src/views/circle/detail/components/bannedUserList.vue
 create mode 100644 src/views/circle/detail/components/components/userItems.vue

diff --git a/src/api/circle.js b/src/api/circle.js
index 42f2911..ef2d838 100644
--- a/src/api/circle.js
+++ b/src/api/circle.js
@@ -179,3 +179,12 @@ export function setMainPageParam(data) {
     data
   });
 }
+
+// 后台获取用户列表
+export function getCustomerList(data) {
+  return request({
+    url: "/admin/group/message/getCustomerList",
+    method: "post",
+    data
+  });
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 416c724..cc6432f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 import router from "@/router/routers";
-import { Notification, Message } from "element-ui";
+import { Notification, Message, MessageBox } from "element-ui";
 import store from "../store";
 import { getToken } from "@/utils/auth";
 import Config from "@/settings";
diff --git a/src/views/circle/detail/components/forbidSpeak.vue b/src/views/circle/components/forbidSpeak.vue
similarity index 91%
rename from src/views/circle/detail/components/forbidSpeak.vue
rename to src/views/circle/components/forbidSpeak.vue
index fc5dcb3..cd76b4a 100644
--- a/src/views/circle/detail/components/forbidSpeak.vue
+++ b/src/views/circle/components/forbidSpeak.vue
@@ -47,6 +47,15 @@ export default {
     };
   },
   methods: {
+    cancelProhibition() {
+      this.formProhibition = {
+        userName: "",
+        phone: "",
+        type: 0,
+        content: "无"
+      };
+      this.dialogFormVisible = false;
+    },
     submitProhibition() {
       if (![0, 1, 2].includes(this.formProhibition.type)) return;
       const data = {
diff --git a/src/views/circle/data/components/studentList.vue b/src/views/circle/data/components/studentList.vue
index b4046ce..2aa92e9 100644
--- a/src/views/circle/data/components/studentList.vue
+++ b/src/views/circle/data/components/studentList.vue
@@ -110,7 +110,7 @@
 <script>
 import { removeCommentBlack } from "@/api/videoLive";
 import { getListCustomer } from "@/api/circle";
-import forbidSpeak from "../../detail/components/forbidSpeak.vue";
+import forbidSpeak from "../../components/forbidSpeak.vue";
 export default {
   components: { forbidSpeak },
   data() {
diff --git a/src/views/circle/detail/components/bannedUserList.vue b/src/views/circle/detail/components/bannedUserList.vue
new file mode 100644
index 0000000..ffdee1b
--- /dev/null
+++ b/src/views/circle/detail/components/bannedUserList.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="list-wrap">
+    <div class="search">
+      <el-input
+        v-model="params.userName"
+        size="mini"
+        placeholder="请输入用户昵称"
+        clearable
+      />
+      <el-button type="primary" size="mini" @click="searchMsg">搜索</el-button>
+    </div>
+    <userItems
+      :group-id="groupId"
+      :list="list"
+      :loading="loading"
+      :has-next="hasNext"
+      @getList="getList"
+      @toPrivateChat="toPrivateChat"
+      @modifyStateCallback="modifyStateCallback"
+    />
+  </div>
+</template>
+<script>
+import { queryCommentBlackList } from "@/api/videoLive";
+import userItems from "./components/userItems.vue";
+export default {
+  components: {
+    userItems
+  },
+  props: {
+    groupId: {
+      type: Number,
+      default: null
+    },
+    modifyStateObj: {
+      // 修改了状态的对象
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      hasNext: true,
+      params: {
+        size: 10,
+        current: 1,
+        productId: this.groupId,
+        userName: "",
+        productType: 41,
+        status: 0,
+        userType: 3 // 作为何种角色访问 1:投顾 2:运营(非投顾) 3:忽略数据权限
+      },
+      list: [],
+      userIdsObj: {}
+    };
+  },
+  watch: {
+    groupId(value) {
+      this.params.productId = value;
+      this.params.userName = "";
+      this.searchMsg();
+    },
+    modifyStateObj(value) {
+      if (value.modifyType) {
+        this.searchMsg();
+      }
+    }
+  },
+  methods: {
+    modifyStateCallback(item) {
+      this.$emit("modifyStateCallback", item);
+    },
+    async getList() {
+      this.loading = true;
+      this.params.current++;
+      const ret = await queryCommentBlackList(this.params).catch(() => {
+        this.loading = false;
+      });
+
+      if (ret && ret.code === 0 && ret.data.list) {
+        const list = ret.data.list;
+        list.forEach(item => {
+          item.privateUserId = item.phone;
+          item.privateUserName = item.userName;
+          item.isForbidden = 1;
+          this.userIdsObj[item.privateUserId] = item;
+        });
+        this.list = this.list.concat(list);
+        this.hasNext = ret.data.list.length === this.params.size;
+      }
+      this.loading = false;
+    },
+    searchMsg() {
+      this.hasNext = true;
+      this.params.current = 0;
+      this.list = [];
+      this.getList();
+    },
+    toPrivateChat(item) {
+      this.$emit("toPrivateChat", item);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.list-wrap {
+  height: 600px;
+  overflow-y: scroll;
+}
+.search {
+  display: flex;
+  margin-bottom: 10px;
+  .el-input {
+    margin-right: 10px;
+  }
+}
+dl {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  padding: 10px;
+  dt {
+    padding: 10px 0;
+  }
+  dd {
+    margin: 0;
+    padding: 0;
+  }
+  dt,
+  dd {
+    display: flex;
+    border-bottom: 1px dashed #999;
+    & > div {
+      display: flex;
+      // flex-direction: column;
+      justify-content: center;
+      padding: 6px 0;
+      align-items: center;
+    }
+    & > div:nth-child(1) {
+      width: 60px;
+    }
+    & > div:nth-child(2) {
+      flex: 1;
+      text-align: center;
+    }
+    & > div:nth-child(3) {
+      width: 100px;
+      text-align: center;
+    }
+    & > div:nth-child(4) {
+      width: 100px;
+      text-align: center;
+    }
+    & > div:nth-child(5) {
+      display: block;
+      width: 60px;
+      text-align: right;
+      & > div {
+        text-align: right;
+      }
+    }
+    p {
+      font-size: 14px;
+      margin: 0;
+      line-height: 16px;
+    }
+    ::v-deep .el-button--medium {
+      padding: 4px 8px;
+    }
+    img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/src/views/circle/detail/components/components/userItems.vue b/src/views/circle/detail/components/components/userItems.vue
new file mode 100644
index 0000000..45a5852
--- /dev/null
+++ b/src/views/circle/detail/components/components/userItems.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="list">
+    <dl
+      v-infinite-scroll="getList"
+      :infinite-scroll-disabled="disabled"
+      infinite-scroll-immediate="false"
+    >
+      <dt>
+        <div>头像</div>
+        <div>uid</div>
+        <div>加入时间</div>
+        <div>到期时间</div>
+        <div>操作</div>
+      </dt>
+      <dd v-for="item in list" :key="item.id">
+        <div><img src="" alt="" /></div>
+        <div>
+          <div>
+            <p>{{ item.privateUserId }}</p>
+            <p>{{ item.privateUserName }}</p>
+          </div>
+        </div>
+        <div>
+          <p>数据缺失</p>
+        </div>
+        <div>
+          <p>数据缺失</p>
+        </div>
+        <div>
+          <div>
+            <el-link
+              type="success"
+              :underline="false"
+              @click="toPrivateChat(item)"
+              >私聊</el-link
+            >
+          </div>
+          <div>
+            <el-link type="success" @click="prohibition(item)">{{
+              item.isForbidden === 1 ? "取消禁言" : "禁言"
+            }}</el-link>
+          </div>
+        </div>
+      </dd>
+    </dl>
+    <p v-if="loading" class="load-tip">加载中...</p>
+    <p v-if="!hasNext" class="load-tip">没有更多了...</p>
+    <p v-else-if="!loading && hasNext" class="load-tip">下拉加载更多...</p>
+    <forbidSpeak
+      ref="forbidSpeakRef"
+      :product-type="41"
+      :product-id="groupId"
+      :scope="2"
+      @callback="forbidSpeakCallback"
+    />
+  </div>
+</template>
+<script>
+import { removeCommentBlack } from "@/api/videoLive";
+import forbidSpeak from "../../../components/forbidSpeak.vue";
+export default {
+  components: { forbidSpeak },
+  props: {
+    groupId: {
+      type: Number,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    hasNext: {
+      type: Boolean,
+      default: true
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentUserObj: {} // 当前操作的用户
+    };
+  },
+  computed: {
+    disabled() {
+      return this.loading || !this.hasNext;
+    }
+  },
+  methods: {
+    modifyStateCallback(item) {
+      this.$emit("modifyStateCallback", item);
+    },
+    prohibition(item) {
+      if (item.isForbidden === 1) {
+        this.$confirm(`您确定取消禁言?`, {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            removeCommentBlack({
+              userPhone: item.privateUserId,
+              productId: this.groupId,
+              productType: 41
+            }).then(res => {
+              if (res.code === 0) {
+                this.$message({
+                  message: "取消禁言成功",
+                  showClose: false,
+                  type: "success"
+                });
+                item.isForbidden = 2;
+                this.modifyStateCallback({
+                  userId: item.privateUserId,
+                  isForbidden: 2,
+                  modifyType: 2
+                });
+              }
+            });
+          })
+          .catch(() => {});
+      } else {
+        this.currentUserObj = item;
+        const forbidSpeakRef = this.$refs.forbidSpeakRef;
+        forbidSpeakRef.dialogFormVisible = true;
+        forbidSpeakRef.formProhibition.userName = item.privateUserName;
+        forbidSpeakRef.formProhibition.phone = item.privateUserId;
+        forbidSpeakRef.formProhibition.content = item.content;
+      }
+    },
+    forbidSpeakCallback() {
+      this.currentUserObj.isForbidden = 1;
+      this.modifyStateCallback({
+        userId: this.currentUserObj.privateUserId,
+        isForbidden: 1,
+        modifyType: 2
+      });
+    },
+    getList() {
+      this.$emit("getList");
+    },
+    toPrivateChat(item) {
+      this.$emit("toPrivateChat", item);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.list {
+  background: #fff;
+}
+dl {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  padding: 10px;
+  dt {
+    padding: 10px 0;
+  }
+  dd {
+    margin: 0;
+    padding: 0;
+  }
+  dt,
+  dd {
+    display: flex;
+    border-bottom: 1px dashed #999;
+    & > div {
+      display: flex;
+      // flex-direction: column;
+      justify-content: center;
+      padding: 6px 0;
+      align-items: center;
+    }
+    & > div:nth-child(1) {
+      width: 60px;
+    }
+    & > div:nth-child(2) {
+      flex: 1;
+      text-align: center;
+    }
+    & > div:nth-child(3) {
+      width: 100px;
+      text-align: center;
+    }
+    & > div:nth-child(4) {
+      width: 100px;
+      text-align: center;
+    }
+    & > div:nth-child(5) {
+      display: block;
+      width: 60px;
+      text-align: right;
+      & > div {
+        text-align: right;
+      }
+    }
+    p {
+      font-size: 14px;
+      margin: 0;
+      line-height: 20px;
+    }
+    ::v-deep .el-button--medium {
+      padding: 4px 8px;
+    }
+    img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+    }
+  }
+}
+.load-tip {
+  text-align: center;
+  line-height: 50px;
+}
+</style>
diff --git a/src/views/circle/detail/components/newsList.vue b/src/views/circle/detail/components/newsList.vue
index 27de62f..be31b26 100644
--- a/src/views/circle/detail/components/newsList.vue
+++ b/src/views/circle/detail/components/newsList.vue
@@ -3,7 +3,7 @@
     <ul
       v-infinite-scroll="getMessageList"
       class="news-list"
-      infinite-scroll-disabled="disabled"
+      :infinite-scroll-disabled="disabled"
       infinite-scroll-immediate="false"
     >
       <li v-for="item in list" :key="item.id">
diff --git a/src/views/circle/detail/components/privateList.vue b/src/views/circle/detail/components/privateList.vue
index 1d8dc45..11e5fe7 100644
--- a/src/views/circle/detail/components/privateList.vue
+++ b/src/views/circle/detail/components/privateList.vue
@@ -5,10 +5,16 @@
         v-model.trim="keyword"
         size="mini"
         placeholder="请输入用户昵称"
+        clearable
       />
       <el-button type="primary" size="mini" @click="searchMsg">搜索</el-button>
     </div>
-    <ul>
+    <ul
+      v-infinite-scroll="getPrivateChatList"
+      class="news-list"
+      :infinite-scroll-disabled="disabled"
+      infinite-scroll-immediate="false"
+    >
       <li
         v-for="item in filterList"
         :key="item.id"
@@ -34,7 +40,9 @@
         </div>
       </li>
     </ul>
-    <p v-if="!loading" class="load-tip">没有更多了...</p>
+    <p v-if="loading" class="load-tip">加载中...</p>
+    <p v-if="!hasNext" class="load-tip">没有更多了...</p>
+    <p v-else-if="!loading && hasNext" class="load-tip">下拉加载更多...</p>
   </div>
 </template>
 <script>
@@ -64,12 +72,24 @@ export default {
       userIdsMsgObj: {}, // 已用户id未key
       filterList: [],
       list: [],
+      params: {
+        current: 0,
+        id: null,
+        size: 10
+      },
       keyword: "",
-      loading: false
+      loading: false,
+      hasNext: true
     };
   },
+  computed: {
+    disabled() {
+      return this.loading || !this.hasNext;
+    }
+  },
   watch: {
-    groupId() {
+    groupId(value) {
+      this.params.id = value;
       this.keyword = "";
       this.getPrivateChatList();
     },
@@ -95,33 +115,36 @@ export default {
     },
     async getPrivateChatList() {
       this.loading = true;
-      const ret = await getPrivateChatList({
-        id: this.groupId
-      }).catch(() => {
+      this.params.current++;
+      const ret = await getPrivateChatList(this.params).catch(() => {
         this.loading = false;
       });
-      if (ret && ret.code === 0) {
-        this.list = ret.data.sort((x, y) => {
+      if (ret && ret.code === 0 && ret.data.list) {
+        let list = ret.data.list;
+        list = ret.data.list.sort((x, y) => {
           return (
             new Date(y.createTime).getTime() - new Date(x.createTime).getTime()
           );
         });
-        this.list.forEach(item => {
+        list.forEach(item => {
           this.userIdsMsgObj[item.privateUserId] = item;
         });
+        this.list = this.list.concat(list);
         this.filterList = this.list;
+        this.hasNext = ret.data.list.length === this.params.size;
       }
       this.loading = false;
     },
     async searchMsg() {
+      this.params.current = 0;
       await this.getPrivateChatList();
-      if (this.keyword) {
-        this.filterList = this.list.filter(item => {
-          const userName =
-            item.userType !== 2 ? item.privateUserName : item.userName;
-          return userName.includes(this.keyword);
-        });
-      }
+      // if (this.keyword) {
+      //   this.filterList = this.list.filter(item => {
+      //     const userName =
+      //       item.userType !== 2 ? item.privateUserName : item.userName;
+      //     return userName.includes(this.keyword);
+      //   });
+      // }
     }
   }
 };
diff --git a/src/views/circle/detail/components/userList.vue b/src/views/circle/detail/components/userList.vue
index 9555923..33aae47 100644
--- a/src/views/circle/detail/components/userList.vue
+++ b/src/views/circle/detail/components/userList.vue
@@ -1,158 +1,95 @@
 <template>
   <div class="list-wrap">
     <div class="search">
-      <el-input v-model="userName" size="mini" placeholder="请输入用户昵称" />
+      <el-input
+        v-model="params.userName"
+        size="mini"
+        placeholder="请输入用户昵称"
+        clearable
+      />
       <el-button type="primary" size="mini" @click="searchMsg">搜索</el-button>
     </div>
-    <dl
-      v-infinite-scroll="getList"
-      infinite-scroll-disabled="disabled"
-      infinite-scroll-immediate="false"
-    >
-      <dt>
-        <div>头像</div>
-        <div>uid</div>
-        <div>加入时间</div>
-        <div>到期时间</div>
-        <div>操作</div>
-      </dt>
-      <dd v-for="(item, index) in list" :key="item.id">
-        <div><img src="" alt="" /></div>
-        <div>
-          <!-- <p>{{ item.phone }}</p> -->
-          <p>{{ item.userName }}</p>
-        </div>
-        <div>
-          <p>数据缺失</p>
-        </div>
-        <div>
-          <p>数据缺失</p>
-        </div>
-        <div>
-          <div>
-            <el-link type="success" :underline="false">私聊</el-link>
-          </div>
-          <div>
-            <el-link v-if="type === 1" type="success" :underline="false"
-              >根据用户的禁言状态来显示禁言还是取消禁言</el-link
-            >
-            <el-link
-              v-else-if="type === 2"
-              type="success"
-              :underline="false"
-              @click="setCommentBlack(2, item)"
-              >取消禁言</el-link
-            >
-          </div>
-        </div>
-      </dd>
-    </dl>
-    <p v-if="loading" class="load-tip">加载中...</p>
-    <p v-if="!hasNext" class="load-tip">没有更多了...</p>
-    <p v-else-if="!loading && hasNext" class="load-tip">下拉加载更多...</p>
+    <userItems
+      :group-id="groupId"
+      :list="list"
+      :loading="loading"
+      :has-next="hasNext"
+      @getList="getList"
+      @toPrivateChat="toPrivateChat"
+      @modifyStateCallback="modifyStateCallback"
+    />
   </div>
 </template>
 <script>
-import {
-  queryCommentBlackList,
-  addCommentBlack,
-  removeCommentBlack
-} from "@/api/videoLive";
+import { getCustomerList } from "@/api/circle";
+import userItems from "./components/userItems.vue";
 export default {
+  components: {
+    userItems
+  },
   props: {
     groupId: {
-      type: Number
-    },
-    type: {
       type: Number,
-      default: 1 // 1：用户列表  2：禁言列表
+      default: null
     },
     modifyStateObj: {
       // 修改了状态的对象
-      type: Object
+      type: Object,
+      default: () => {}
     }
   },
   data() {
     return {
       loading: true,
       hasNext: true,
-      userName: "",
-      list: []
+      params: {
+        userName: "",
+        current: 0,
+        id: null,
+        size: 10
+      },
+      list: [],
+      userIdsObj: {}
     };
   },
   watch: {
-    groupId() {
-      this.userName = "";
+    groupId(value) {
+      this.params.id = value;
+      this.params.userName = "";
       this.searchMsg();
     },
     modifyStateObj(value) {
-      debugger;
-      if (value.modifyType === 2 && value.isForbidden === 2) {
-        this.list = this.list.filter(citem => value.userId !== citem.phone);
-        !this.list.lenght && this.searchMsg();
+      // modifyType: 1审核通过 2禁言操作 isForbidden: 是否被禁言 1是 2否
+      if (value.modifyType === 2 && this.userIdsObj[value.userId]) {
+        this.userIdsObj[value.userId].isForbidden = value.isForbidden;
       }
     }
   },
   methods: {
-    setCommentBlack(type, item) {
-      if (type === 1) {
-        // 禁言
-      } else {
-        // 取消禁言
-        this.$confirm(`您确定取消禁言?`, {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            removeCommentBlack({
-              userPhone: item.phone,
-              productId: item.productId,
-              productType: 41 // 41 交易圈
-            }).then(res => {
-              if (res.code === 0) {
-                this.$message({
-                  message: "取消禁言成功",
-                  showClose: false,
-                  type: "success"
-                });
-                this.list = this.list.filter(
-                  citem => item.phone !== citem.phone
-                );
-                !this.list.lenght && this.searchMsg();
-                this.$emit("modifyStateCallback", {
-                  userId: item.phone,
-                  isForbidden: 2,
-                  modifyType: 2
-                });
-              }
-            });
-          })
-          .catch(() => {});
-      }
+    modifyStateCallback(item) {
+      debugger;
+      this.$emit("modifyStateCallback", item);
     },
     async getList() {
-      if (this.type === 2) {
-        this.loading = true;
-        const ret = await queryCommentBlackList({
-          size: 10,
-          current: 1,
-          productId: this.groupId,
-          userName: this.userName,
-          productType: 41,
-          status: 0,
-          userType: 3 // 作为何种角色访问 1:投顾 2:运营(非投顾) 3:忽略数据权限
-        }).catch(() => {
-          this.loading = false;
-        });
-        if (ret && ret.code === 0) {
-          this.list = ret.data.list;
-          this.hasNext = ret.data.hasNext;
-        }
+      this.loading = true;
+      this.params.current++;
+      const ret = await getCustomerList(this.params).catch(() => {
         this.loading = false;
+      });
+
+      if (ret && ret.code === 0 && ret.data.list) {
+        const list = ret.data.list;
+        list.forEach(item => {
+          this.userIdsObj[item.privateUserId] = item;
+        });
+        this.list = this.list.concat(list);
+        this.hasNext = ret.data.list.length === this.params.size;
       }
+      this.loading = false;
     },
     searchMsg() {
+      this.hasNext = true;
+      this.params.current = 0;
       this.list = [];
       this.getList();
     },
@@ -166,7 +103,6 @@ export default {
 .list-wrap {
   height: 600px;
   overflow-y: scroll;
-  background: #fff;
 }
 .search {
   display: flex;
diff --git a/src/views/circle/detail/components/userLnteractList.vue b/src/views/circle/detail/components/userLnteractList.vue
index cf96046..1c91dd9 100644
--- a/src/views/circle/detail/components/userLnteractList.vue
+++ b/src/views/circle/detail/components/userLnteractList.vue
@@ -1,14 +1,19 @@
 <template>
   <div>
     <div class="search">
-      <el-input v-model="keyword" size="mini" placeholder="请输入用户昵称" />
+      <el-input
+        v-model="keyword"
+        size="mini"
+        placeholder="请输入用户昵称"
+        clearable
+      />
       <el-button type="primary" size="mini" @click="searchMsg">搜索</el-button>
     </div>
     <div class="news-list-wrap">
       <ul
         v-infinite-scroll="getMessageList"
         class="news-list"
-        infinite-scroll-disabled="disabled"
+        :infinite-scroll-disabled="disabled"
         infinite-scroll-immediate="false"
       >
         <li v-for="(item, index) in list" :key="index">
@@ -76,7 +81,7 @@
 <script>
 import { removeCommentBlack } from "@/api/videoLive";
 import { getMessageList, updateMessageStatus } from "@/api/circle.js";
-import forbidSpeak from "./forbidSpeak.vue";
+import forbidSpeak from "../../components/forbidSpeak.vue";
 export default {
   components: { forbidSpeak },
   props: {
@@ -228,7 +233,7 @@ export default {
         item.isForbidden = 1;
       });
       this.modifyStateCallback({
-        userId: item.userId,
+        userId: userId,
         isForbidden: 1,
         modifyType: 2
       });
diff --git a/src/views/circle/detail/index.vue b/src/views/circle/detail/index.vue
index bf670c7..8baf8dd 100644
--- a/src/views/circle/detail/index.vue
+++ b/src/views/circle/detail/index.vue
@@ -176,7 +176,7 @@
             v-show="userTabIndex === 0"
             :group-id="detail.id"
             :new-msg="newMsg"
-            :modifyStateObj="modifyStateObj"
+            :modify-state-obj="modifyStateObj"
             @setReplyMsg="setReplyMsg"
             @toPrivateChat="toPrivateChat"
             @modifyStateCallback="modifyStateCallback"
@@ -186,6 +186,7 @@
             :key="1"
             :group-id="detail.id"
             :type="1"
+            :modify-state-obj="modifyStateObj"
             @toPrivateChat="toPrivateChat"
             @modifyStateCallback="modifyStateCallback"
           />
@@ -195,13 +196,14 @@
             :private-new-msg="privateNewMsg"
             @toPrivateChat="toPrivateChat"
           />
-          <userList
+          <bannedUserList
             v-show="userTabIndex === 3"
             :key="2"
             :group-id="detail.id"
             :type="2"
-            :modifyStateObj="modifyStateObj"
+            :modify-state-obj="modifyStateObj"
             @modifyStateCallback="modifyStateCallback"
+            @toPrivateChat="toPrivateChat"
           />
         </div>
       </div>
@@ -240,6 +242,7 @@ import userList from "./components/userList.vue";
 import privateList from "./components/privateList";
 import messageSend from "./components/messageSend.vue";
 import privateChat from "./components/privateChat.vue";
+import bannedUserList from "./components/bannedUserList.vue";
 import { mapGetters } from "vuex";
 import webSocketConnect from "./mixins/webSocketConnect";
 export default {
@@ -249,7 +252,8 @@ export default {
     userList,
     privateList,
     messageSend,
-    privateChat
+    privateChat,
+    bannedUserList
   },
   mixins: [webSocketConnect],
   data() {