fix:踢出功能二次确认弹窗完成
This commit is contained in:
@@ -6,6 +6,7 @@ import PlayerSeats from "@/components/PlayerSeats.vue";
|
|||||||
import GuideTwo from "@/components/GuideTwo.vue";
|
import GuideTwo from "@/components/GuideTwo.vue";
|
||||||
import SButton from "@/components/SButton.vue";
|
import SButton from "@/components/SButton.vue";
|
||||||
import Avatar from "@/components/Avatar.vue";
|
import Avatar from "@/components/Avatar.vue";
|
||||||
|
import ScreenHint from "@/components/ScreenHint.vue";
|
||||||
import {
|
import {
|
||||||
getRoomAPI,
|
getRoomAPI,
|
||||||
destroyRoomAPI,
|
destroyRoomAPI,
|
||||||
@@ -199,8 +200,32 @@ const exitRoom = async () => {
|
|||||||
uni.navigateBack();
|
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(() => {
|
const canClick = computed(() => {
|
||||||
@@ -361,6 +386,20 @@ onBeforeUnmount(() => {
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</Container>
|
</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>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -463,6 +502,66 @@ onBeforeUnmount(() => {
|
|||||||
color: #fed847 !important;
|
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 {
|
.remove-player {
|
||||||
width: 40rpx;
|
width: 40rpx;
|
||||||
height: 40rpx;
|
height: 40rpx;
|
||||||
|
|||||||
Reference in New Issue
Block a user