添加移除玩家UI

src/components/PlayerSeats.vue

@@ -10,6 +10,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  removePlayer: {
+    type: Function,
+    default: () => {},
+  },
 });
 const seats = new Array(props.total).fill(1);
 </script>
@@ -36,11 +40,19 @@ const seats = new Array(props.total).fill(1);
       }}</text>
       <text v-else :style="{ color: '#fff9' }">虚位以待</text>
       <view v-if="index === 0" class="founder">管理员</view>
-      <image
+      <!-- <image
         :src="`../static/player-${index + 1}.png`"
         mode="widthFix"
         class="player-bg"
-      />
+      /> -->
+      <button
+        v-if="index > 0 && players[index]"
+        hover-class="none"
+        class="remove-player"
+        @click="() => removePlayer(players[index])"
+      >
+        <image src="../static/close-white.png" mode="widthFix" />
+      </button>
     </view>
   </view>
 </template>
@@ -106,11 +118,11 @@ const seats = new Array(props.total).fill(1);
   border-top-left-radius: 10px;
   border-bottom-right-radius: 10px;
 }
-.player-bg {
+/* .player-bg {
   position: absolute;
   width: 52px;
   right: 0;
-}
+} */
 .player-unknow {
   width: 40px;
   height: 40px;
@@ -125,4 +137,20 @@ const seats = new Array(props.total).fill(1);
 .player-unknow > image {
   width: 40%;
 }
+.remove-player {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 10rpx;
+  right: 0;
+}
+.remove-player > image {
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+}
 </style>

src/pages/battle-room.vue

@@ -177,6 +177,8 @@ const exitRoom = async () => {
   uni.navigateBack();
 };
 
+const removePlayer = async (player) => {};
+
 onShareAppMessage(() => {
   return {
     title: "邀请您进入房间对战",
@@ -250,7 +252,7 @@ onBeforeUnmount(() => {
           </view>
           <image src="../static/versus.png" mode="widthFix" />
           <view
-            v-if="opponent.id"
+            v-if="!opponent.id"
             class="player"
             :style="{ transform: 'translateY(60px)' }"
           >
@@ -259,17 +261,19 @@ onBeforeUnmount(() => {
               opponent.ready ? "已准备" : ""
             }}</text>
             <text>{{ opponent.name }}</text>
+            <button
+              hover-class="none"
+              class="remove-player"
+              @click="() => removePlayer(opponent)"
+            >
+              <image src="../static/close-white.png" mode="widthFix" />
+            </button>
           </view>
           <view class="no-player" v-else>
             <image src="../static/question-mark.png" mode="widthFix" />
           </view>
         </view>
       </view>
-      <PlayerSeats
-        v-if="battleType === 2"
-        :total="room.count || 10"
-        :players="players"
-      />
       <block v-if="battleType === 1 && room.count >= 4">
         <view class="all-players">
           <image
@@ -290,6 +294,15 @@ onBeforeUnmount(() => {
             <view v-for="(item, index) in players" :key="index">
               <Avatar v-if="item.id" :src="item.avatar" :size="36" />
               <text v-if="owner.id === item.id">管理员</text>
+              <button
+                v-if="owner.id !== item.id && item.id"
+                hover-class="none"
+                class="remove-player"
+                @click="() => removePlayer(item)"
+                :style="{ top: '-10rpx', right: '-10rpx' }"
+              >
+                <image src="../static/close-white.png" mode="widthFix" />
+              </button>
             </view>
           </view>
         </view>
@@ -342,6 +355,11 @@ onBeforeUnmount(() => {
           </view>
         </view>
       </block>
+      <PlayerSeats
+        v-if="battleType === 2"
+        :total="room.count || 10"
+        :players="players"
+      />
       <view>
         <!-- <SButton
           v-if="user.id === owner.id && battleType === 1 && room.count === 2"
@@ -367,7 +385,7 @@ onBeforeUnmount(() => {
         <SButton :disabled="ready" :onClick="getReady">{{
           allReady.value ? "即将进入对局..." : "我准备好了"
         }}</SButton>
-        <!-- <text class="tips">创建者点击下一步，所有人即可进入游戏。</text> -->
+        <text class="tips">所有人准备后自动开始游戏。</text>
       </view>
     </view>
     <!-- <SModal
@@ -443,6 +461,7 @@ onBeforeUnmount(() => {
   transform: translateY(-60px);
   color: #fff;
   font-size: 14px;
+  position: relative;
 }
 .player > image {
   width: 70px;
@@ -476,6 +495,22 @@ onBeforeUnmount(() => {
   border: 1rpx solid #a3793f66 !important;
   color: #fed847 !important;
 }
+.remove-player {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(0deg, #996c29b8 0%, #201e1aaf 100%);
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.remove-player > image {
+  width: 90%;
+  height: 90%;
+}
 .team-mode > view > image:nth-child(2) {
   width: 120px;
 }