fix:踢出功能二次确认弹窗完成

This commit is contained in:
2026-05-07 14:31:17 +08:00
parent 972d817629
commit 7c8fd9395b

View File

@@ -6,6 +6,7 @@ import PlayerSeats from "@/components/PlayerSeats.vue";
import GuideTwo from "@/components/GuideTwo.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import {
getRoomAPI,
destroyRoomAPI,
@@ -199,8 +200,32 @@ const exitRoom = async () => {
uni.navigateBack();
};
const removePlayer = async (player) => {
await kickPlayerAPI(roomNumber.value, player.id);
/** 待确认踢出的玩家信息 */
const playerToKick = ref(null);
/** 控制踢出确认弹窗的显示状态 */
const showKickConfirm = ref(false);
/**
* 点击踢出按钮,弹出二次确认弹窗
* @param {object} player - 被踢的玩家信息
*/
const removePlayer = (player) => {
playerToKick.value = player;
showKickConfirm.value = true;
};
/** 确认踢出:调用 API 并关闭弹窗 */
const confirmKick = async () => {
if (!playerToKick.value) return;
await kickPlayerAPI(roomNumber.value, playerToKick.value.id);
showKickConfirm.value = false;
playerToKick.value = null;
};
/** 取消踢出:关闭弹窗 */
const cancelKick = () => {
showKickConfirm.value = false;
playerToKick.value = null;
};
const canClick = computed(() => {
@@ -361,6 +386,20 @@ onBeforeUnmount(() => {
</view>
</view>
</Container>
<!-- 踢出玩家二次确认弹窗不传 onClose屏蔽 X 关闭按钮 -->
<ScreenHint :show="showKickConfirm">
<view class="kick-confirm">
<!-- 弹窗标题玩家名字高亮显示 -->
<text class="kick-confirm__title">
是否把<text style="color: #F7D550">{{ playerToKick && playerToKick.name }}</text>移出房间
</text>
<!-- 按钮区确认在左取消在右 -->
<view class="kick-confirm__btns">
<button hover-class="none" class="kick-confirm__btn kick-confirm__btn--confirm" @click="confirmKick">确定</button>
<button hover-class="none" class="kick-confirm__btn kick-confirm__btn--cancel" @click="cancelKick">取消</button>
</view>
</view>
</ScreenHint>
</template>
<style scoped>
@@ -463,6 +502,66 @@ onBeforeUnmount(() => {
color: #fed847 !important;
}
/* 踢出确认弹窗内容 */
.kick-confirm {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx 30rpx;
color: #fff;
}
.kick-confirm__title {
font-size: 30rpx;
font-weight: 500;
text-align: center;
line-height: 1.5;
/* 标题与按钮区间距 */
margin-bottom: 58rpx;
}
.kick-confirm__btns {
display: flex;
/* 两个按钮间距 */
gap: 16rpx;
}
/* 按钮公共基础样式:固定宽高与圆角 */
.kick-confirm__btn {
font-size: 28rpx;
width: 232rpx;
height: 70rpx;
border-radius: 44rpx;
line-height: 70rpx;
display: flex;
align-items: center;
justify-content: center;
}
/* 取消按钮:白色半透明背景(用 rgba 避免 opacity 平铺到文字) */
.kick-confirm__btn--cancel {
background: rgba(255, 255, 255, 0.2);
border: none;
color: #FFFFFF;
font-weight: 500;
font-size: 28rpx;
text-align: center;
border-radius: 44rpx;
}
.kick-confirm__btn--cancel::after {
border: none;
}
/* 确认按钮:黄色实心背景 */
.kick-confirm__btn--confirm {
background: #FED847;
border: none;
color: #000000;
font-weight: 500;
font-size: 28rpx;
text-align: center;
border-radius: 44rpx;
}
.kick-confirm__btn--confirm::after {
border: none;
}
.remove-player {
width: 40rpx;
height: 40rpx;