fix:踢出功能二次确认弹窗完成
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user