🎨 优化群成员显示效果

app/group.go

@@ -25,6 +25,19 @@ func GetGroupUsers(ctx *gin.Context) {
 		ctx.String(http.StatusInternalServerError, "查询失败: %s", err.Error())
 		return
 	}
-	// 暂时先就这样写着，跑通了再改
-	ctx.JSON(http.StatusOK, records)
+
+	result := map[string]any{
+		"records": records,
+	}
+	// 循环数据，统计健在成员
+	var isOkCount int
+	for _, record := range records {
+		if record.IsMember {
+			isOkCount++
+		}
+	}
+	result["isOkCount"] = isOkCount
+
+	// 暂时先就这样写着，跑通了再改
+	ctx.JSON(http.StatusOK, result)
 }

main.go

@@ -79,7 +79,7 @@ func main() {
 	})
 	// 初始化路由
 	router.Init(app)
-	if err := app.Run(":8080"); err != nil {
+	if err := app.Run(":18080"); err != nil {
 		log.Panicf("服务启动失败：%v", err)
 	}
 }

views/groupuser.html

@@ -1,6 +1,9 @@
 <dialog id="groupUserModal" class="modal">
   <div class="modal-box w-11/12 max-w-7xl">
+    <div class="flex">
       <h3 class="font-bold text-lg" id="groupUserModalName">我是群名称</h3>
+      <h3 class="font-bold text-lg ml-5" id="groupUserCount">(健在成员100人)</h3>
+    </div>
     <div class="divider divider-warning">成员列表</div>
     <table class="table table-zebra">
       <thead>

views/static/js/index.js

@@ -162,12 +162,18 @@ function getGroupUsers(groupId, groupName) {
       groupId: groupId
     }
   }).then(function (response) {
-        // console.log(`返回结果: ${JSON.stringify(response)}`);
+    // console.log(`返回结果: ${JSON.stringify(response.data)}`);
     // 渲染群成员列表
-        const groupUsers = response.data
+    const groupUsers = response.data.records;
+    const groupUserCount = response.data.isOkCount;
+
+    // 设置成员总数
+    const groupUserCountTag = document.getElementById("groupUserCount");
+    groupUserCountTag.innerHTML = `健在成员: ${groupUserCount}人`
+
     // 循环渲染数据
     groupUsers.forEach((groupUser, i) => {
-            console.log(groupUser)
+      // console.log(groupUser)
       const {wxid, nickname, isMember, isAdmin, joinTime, lastActive, leaveTime, skipChatRank} = groupUser;
 
       let row = tbody.insertRow(i);