添加踢人接口

src/apis.js

@@ -558,3 +558,10 @@ export const getBattleAPI = async (battleId) => {
     id: battleId,
   });
 };
+
+export const kickPlayerAPI = (number, userId) => {
+  return request("POST", "/user/room/kicking", {
+    number,
+    userId,
+  });
+};

src/components/PlayerSeats.vue

@@ -80,6 +80,7 @@ const seats = new Array(props.total).fill(1);
   height: 100%;
   position: absolute;
   z-index: -1;
+  top: 0;
 }
 .avatar {
   display: flex;
@@ -110,7 +111,8 @@ const seats = new Array(props.total).fill(1);
 .founder {
   position: absolute;
   background-color: #fed847;
-  top: 6px;
+  top: 0;
+  left: 0;
   color: #000;
   font-size: 10px;
   padding: 2px 5px;

src/pages/battle-room.vue

@@ -14,6 +14,7 @@ import {
   startRoomAPI,
   chooseTeamAPI,
   getReadyAPI,
+  kickPlayerAPI,
 } from "@/apis";
 
 import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
@@ -43,6 +44,8 @@ async function refreshRoomData() {
   if (result.started) return;
   room.value = result;
   battleType.value = result.battleType;
+  owner.value = {};
+  opponent.value = {};
   const members = result.members || [];
   if (members.length === result.count) {
     allReady.value = members.every((m) => !!m.userInfo.state);
@@ -132,7 +135,17 @@ async function onReceiveMessage(message) {
       if (msg.constructor === MESSAGETYPES.UserEnterRoom) {
         refreshRoomData();
       } else if (msg.constructor === MESSAGETYPES.UserExitRoom) {
+        if (msg.userId === user.value.id) {
+          uni.showToast({
+            title: "你被踢出房间",
+            icon: "none",
+          });
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 1000);
+        } else {
           refreshRoomData();
+        }
       } else if (msg.constructor === MESSAGETYPES.TeamUpdate) {
         refreshRoomData();
       } else if (msg.constructor === MESSAGETYPES.SomeoneIsReady) {
@@ -176,7 +189,9 @@ const exitRoom = async () => {
   uni.navigateBack();
 };
 
-const removePlayer = async (player) => {};
+const removePlayer = async (player) => {
+  await kickPlayerAPI(roomNumber.value, player.id);
+};
 
 onShareAppMessage(() => {
   return {
@@ -262,6 +277,7 @@ onBeforeUnmount(() => {
             }}</text>
             <text>{{ opponent.name }}</text>
             <button
+              v-if="owner.id === user.id"
               hover-class="none"
               class="remove-player"
               @click="() => removePlayer(opponent)"
@@ -359,6 +375,7 @@ onBeforeUnmount(() => {
         v-if="battleType === 2"
         :total="room.count || 10"
         :players="players"
+        :removePlayer="removePlayer"
       />
       <view>
         <!-- <SButton
@@ -383,7 +400,11 @@ onBeforeUnmount(() => {
         >
         <SButton v-if="user.id !== owner.id" disabled>等待房主开启对战</SButton> -->
         <SButton :disabled="ready" :onClick="getReady">{{
-          allReady.value ? "即将进入对局..." : "我准备好了"
+          allReady.value
+            ? "即将进入对局..."
+            : owner.id === user.id
+            ? "开始对局"
+            : "我准备好了"
         }}</SButton>
         <text class="tips">所有人准备后自动开始游戏。</text>
       </view>