159 lines
3.5 KiB
Vue
159 lines
3.5 KiB
Vue
<script setup>
|
||
import { ref } from "vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
import { joinRoomAPI, createRoomAPI } from "@/apis";
|
||
|
||
const props = defineProps({
|
||
onConfirm: {
|
||
type: Function,
|
||
default: () => {},
|
||
},
|
||
});
|
||
|
||
const battleMode = ref(1);
|
||
const step = ref(1);
|
||
const loading = ref(false);
|
||
const roomNumber = ref("");
|
||
|
||
const createRoom = async () => {
|
||
if (loading.value === true) return;
|
||
loading.value = true;
|
||
const result = await createRoomAPI(
|
||
battleMode.value,
|
||
battleMode.value === 1 ? 2 : 10
|
||
);
|
||
if (result.number) roomNumber.value = result.number;
|
||
step.value = 2;
|
||
loading.value = false;
|
||
};
|
||
const enterRoom = async () => {
|
||
step.value = 1;
|
||
props.onConfirm();
|
||
await joinRoomAPI(roomNumber.value);
|
||
uni.navigateTo({
|
||
url: `/pages/battle-room?roomNumber=${roomNumber.value}`,
|
||
});
|
||
};
|
||
|
||
const setClipboardData = () => {
|
||
uni.setClipboardData({
|
||
data: roomNumber.value,
|
||
success() {
|
||
uni.showToast({ title: "复制成功" });
|
||
},
|
||
});
|
||
};
|
||
</script>
|
||
<template>
|
||
<view class="container">
|
||
<image
|
||
v-if="step === 1"
|
||
src="../static/choose-battle-mode.png"
|
||
mode="widthFix"
|
||
/>
|
||
<view v-if="step === 1" class="create-options">
|
||
<view
|
||
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 1 }"
|
||
@click="() => (battleMode = 1)"
|
||
>
|
||
<text>对抗模式（1V1）</text>
|
||
</view>
|
||
<view
|
||
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 2 }"
|
||
@click="() => (battleMode = 2)"
|
||
>
|
||
<text>乱斗模式（3-10人）</text>
|
||
</view>
|
||
<view class="battle-btn battle-close">
|
||
<text>对抗模式（2V2）</text>
|
||
<text>敬请期待</text>
|
||
</view>
|
||
<view class="battle-btn battle-close">
|
||
<text>对抗模式（3V3）</text>
|
||
<text>敬请期待</text>
|
||
</view>
|
||
</view>
|
||
<SButton v-if="step === 1" :onClick="createRoom">下一步</SButton>
|
||
<view v-if="step === 2" class="room-info">
|
||
<view>
|
||
<text>房间号：</text>
|
||
<text>{{ roomNumber }}</text>
|
||
</view>
|
||
<SButton width="60vw" :onClick="enterRoom">进入房间</SButton>
|
||
<text>30分钟无人进入则房间无效</text>
|
||
<view @click="setClipboardData">复制房间信息邀请朋友进入</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.container > image:first-child {
|
||
width: 45%;
|
||
margin: 5px 0;
|
||
}
|
||
.create-options {
|
||
width: 100%;
|
||
padding: 0 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
.battle-btn {
|
||
width: 45%;
|
||
height: 55px;
|
||
text-align: center;
|
||
border-radius: 10px;
|
||
border: 1px solid #fff3;
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.battle-choosen {
|
||
color: #fed847;
|
||
border-color: #fed847;
|
||
}
|
||
.battle-close {
|
||
background-color: #8889;
|
||
color: #b3b3b3;
|
||
}
|
||
.battle-close > text:last-child {
|
||
font-size: 12px;
|
||
}
|
||
.room-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding-top: 40px;
|
||
}
|
||
.room-info > view:first-child {
|
||
font-size: 22px;
|
||
color: #fff;
|
||
margin-bottom: 20px;
|
||
}
|
||
.room-info > view:first-child > text:last-child {
|
||
color: #fed847;
|
||
}
|
||
.room-info > text {
|
||
color: #888686;
|
||
font-size: 14px;
|
||
margin: 10px 0;
|
||
}
|
||
.room-info > view:last-child {
|
||
color: #287fff;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|