From ddee1e906b476d8a99876173da678d1e160ca4dd 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, 23 Feb 2025 13:59:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=A4=E6=98=93=E5=9C=88=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E5=AD=A6=E9=99=A2=E5=88=97=E8=A1=A8=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/circle.js                             |  11 +-
 .../circle/data/components/studentList.vue    | 184 ++++++++++++++++--
 .../circle/detail/components/forbidSpeak.vue  |   3 +-
 .../circle/detail/components/privateChat.vue  |   5 +-
 src/views/circle/detail/index.vue             |   6 +
 5 files changed, 185 insertions(+), 24 deletions(-)

diff --git a/src/api/circle.js b/src/api/circle.js
index ee173ba..c91db59 100644
--- a/src/api/circle.js
+++ b/src/api/circle.js
@@ -146,7 +146,6 @@ export function setNotice(data) {
 
 // 后台查询交易圈统计
 export function getCircleStatistics(data) {
-  debugger;
   return request({
     url: "/admin/group/collect/query",
     method: "post",
@@ -156,10 +155,18 @@ export function getCircleStatistics(data) {
 
 // 后台查询交易圈当日统计
 export function getCurrentDayCircleData(data) {
-  debugger;
   return request({
     url: "/admin/group/collect/queryToday",
     method: "post",
     data
   });
 }
+
+// 后台查询学院列表
+export function getListCustomer(data) {
+  return request({
+    url: "/admin/group/college/listCustomer",
+    method: "post",
+    data
+  });
+}
diff --git a/src/views/circle/data/components/studentList.vue b/src/views/circle/data/components/studentList.vue
index a84e144..b4046ce 100644
--- a/src/views/circle/data/components/studentList.vue
+++ b/src/views/circle/data/components/studentList.vue
@@ -10,20 +10,41 @@
       >
         <el-form-item label="">
           <el-input
-            v-model="formInline.user"
-            placeholder="请输入uid或者昵称"
+            v-model="formInline.userId"
+            placeholder="请输入id"
+            clearable
           />
         </el-form-item>
         <el-form-item label="">
-          <el-select v-model="formInline.region" placeholder="选择在期状态">
-            <el-option label="区域一" value="shanghai" />
-            <el-option label="区域二" value="beijing" />
+          <el-input
+            v-model="formInline.nickName"
+            placeholder="请输入昵称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="">
+          <el-select
+            v-model="formInline.isOnline"
+            placeholder="选择在线状态"
+            clearable
+          >
+            <el-option label="在线" value="1" />
+            <el-option label="不在线" value="2" />
           </el-select>
         </el-form-item>
         <el-form-item label="">
-          <el-select v-model="formInline.region" placeholder="选择禁言状态">
-            <el-option label="区域一" value="shanghai" />
-            <el-option label="区域二" value="beijing" />
+          <el-select
+            v-model="formInline.commentBlackStatus"
+            placeholder="选择禁言状态"
+            clearable
+          >
+            <el-option
+              v-for="(value, key) in commentBlackStatusOption"
+              :key="key"
+              :label="value"
+              :value="key"
+            />
+            <!-- <el-option label="未禁言" value="2" /> -->
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -34,38 +55,157 @@
         <el-table-column prop="date" label="头像" width="180">
           <template slot-scope="scope">
             <img
-              src=""
+              :src="scope.row.headPicUrl"
               style="max-width: 50x;max-height: 50px;"
               alt=""
               srcset=""
-            >
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="userId" label="uid" width="180" />
+        <el-table-column prop="joinTime" label="加入时间" />
+        <el-table-column prop="expireTime" label="到期时间" />
+        <el-table-column prop="" label="状态">
+          <template slot-scope="scope">
+            {{ customerStatusOption[scope.row.customerStatus] }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="禁言状态">
+          <template slot-scope="scope">
+            {{ commentBlackStatusOption[scope.row.commentBlackStatus] }}
           </template>
         </el-table-column>
-        <el-table-column prop="name" label="uid" width="180" />
-        <el-table-column prop="address" label="加入时间" />
-        <el-table-column prop="address" label="到期时间" />
-        <el-table-column prop="address" label="状态" />
-        <el-table-column prop="address" label="禁言状态" />
         <el-table-column fixed="right" label="操作" width="100">
           <template slot-scope="scope">
-            <el-button type="text" size="small">私聊</el-button>
-            <el-button type="text" size="small">禁言</el-button>
+            <el-button type="text" size="small"> 私聊</el-button>
+            <el-button type="text" size="small">{{
+              scope.row.commentBlackStatus === 2 ? "禁言" : "取消禁言"
+            }}</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
+    <div class="pagination-wrap">
+      <!-- 分页器 -->
+      <el-pagination
+        style="margin-top: 50px;"
+        :current-page="formInline.current"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="formInline.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="sizeChange"
+        @current-change="pageChange"
+      />
+    </div>
+    <forbidSpeak
+      ref="forbidSpeakRef"
+      :product-type="41"
+      :product-id="groupId"
+      :scope="2"
+      @callback="forbidSpeakCallback"
+    />
   </div>
 </template>
 <script>
+import { removeCommentBlack } from "@/api/videoLive";
+import { getListCustomer } from "@/api/circle";
+import forbidSpeak from "../../detail/components/forbidSpeak.vue";
 export default {
+  components: { forbidSpeak },
   data() {
     return {
-      formInline: {},
-      tableData: [{}]
+      commentBlackStatusOption: {
+        1: "禁言中",
+        2: "未禁言"
+      },
+      customerStatusOption: {
+        1: "在期",
+        2: "已到期",
+        3: "即将到期",
+        4: "新学员"
+      },
+      groupId: this.$route.query.id,
+      formInline: {
+        userId: "",
+        nickName: "",
+        isOnline: "",
+        commentBlackStatus: "",
+        size: 10,
+        current: 1
+      },
+      tableData: [],
+      total: 0,
+      clickItem: {}
     };
   },
   methods: {
-    onSubmit() {}
+    onSubmit() {
+      this.formInline.current = 1;
+      this.getListCustomer();
+    },
+    // 分页器
+    sizeChange(e) {
+      this.formInline.current = 1;
+      this.size = e;
+      this.getListCustomer();
+    },
+    pageChange(e) {
+      this.formInline.current = e;
+      this.getListCustomer();
+    },
+    async getListCustomer() {
+      const ret = await getListCustomer(this.formInline);
+      if (ret && ret.code === 0) {
+        this.tableData = ret.data.list;
+        this.total = ret.data.total;
+      }
+    },
+    prohibition(item) {
+      if (item.commentBlackStatus === 1) {
+        this.$confirm(`您确定取消禁言?`, {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            removeCommentBlack({
+              userPhone: item.userId,
+              productId: this.groupId,
+              productType: 41
+            }).then(res => {
+              if (res.code === 0) {
+                this.$message({
+                  message: "取消禁言成功",
+                  showClose: false,
+                  type: "success"
+                });
+                this.msgUserIdsObj[item.userId].forEach(item => {
+                  item.isForbidden = 2;
+                });
+                this.modifyStateCallback({
+                  userId: item.userId,
+                  isForbidden: 2,
+                  modifyType: 2
+                });
+              }
+            });
+          })
+          .catch(() => {});
+      } else {
+        this.clickItem = item;
+        const forbidSpeakRef = this.$refs.forbidSpeakRef;
+        forbidSpeakRef.dialogFormVisible = true;
+        forbidSpeakRef.formProhibition.userName = item.nickName;
+        forbidSpeakRef.formProhibition.phone = item.userId;
+        forbidSpeakRef.formProhibition.content = "";
+      }
+    },
+    forbidSpeakCallback(userId) {
+      this.clickItem[userId].forEach(item => {
+        item.commentBlackStatus = 1;
+      });
+    }
   }
 };
 </script>
@@ -80,4 +220,8 @@ export default {
 .table-area {
   padding: 20px;
 }
+.pagination-wrap {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>
diff --git a/src/views/circle/detail/components/forbidSpeak.vue b/src/views/circle/detail/components/forbidSpeak.vue
index 7e6cb1f..fc5dcb3 100644
--- a/src/views/circle/detail/components/forbidSpeak.vue
+++ b/src/views/circle/detail/components/forbidSpeak.vue
@@ -25,12 +25,13 @@ import { addCommentBlack } from "@/api/videoLive";
 export default {
   props: {
     productId: {
-      type: Number
+      type: Number | String
     },
     productType: {
       type: Number
     },
     scope: {
+      // 范围类型 1产品 2产品类型 3全局
       type: Number
     }
   },
diff --git a/src/views/circle/detail/components/privateChat.vue b/src/views/circle/detail/components/privateChat.vue
index 1444c83..e952ec4 100644
--- a/src/views/circle/detail/components/privateChat.vue
+++ b/src/views/circle/detail/components/privateChat.vue
@@ -5,7 +5,7 @@
         <el-button size="mini" type="primary" @click="closePrivateChat"
           >返回群聊</el-button
         >
-        <h5>{{ userInfo.userName }}</h5>
+        <h5>{{ userInfo.privateUserName }}（{{ userInfo.privateUserId }}）</h5>
       </div>
       <div>私聊中</div>
     </div>
@@ -63,6 +63,9 @@ export default {
     align-items: center;
     h5 {
       margin: 0 0 0 10px;
+      font-size: 14px;
+      color: #999;
+      font-weight: normal;
     }
   }
   p {
diff --git a/src/views/circle/detail/index.vue b/src/views/circle/detail/index.vue
index cad1ee3..185a6f7 100644
--- a/src/views/circle/detail/index.vue
+++ b/src/views/circle/detail/index.vue
@@ -126,6 +126,7 @@
           </div>
           <newsList
             v-for="(item, index) in msgTabs"
+            :key="index"
             v-show="msgType === item.id"
             :ref="`newsListRef${item.id}`"
             :group-id="detail.id"
@@ -278,6 +279,11 @@ export default {
     ...mapGetters(["user"])
   },
   async created() {
+    if (this.$route.query.chatType === "2") {
+      this.chatType = Number(this.$route.query.chatType);
+      this.privateUserInfo.privateUserId = this.$route.query.privateUserId;
+      this.privateUserInfo.privateUserName = this.$route.query.privateUserName;
+    }
     await this.getCircleDetail();
     this.getCircleList();
   },