127 lines
2.9 KiB
Vue
127 lines
2.9 KiB
Vue
<script setup>
|
||
import { ref } from "vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
|
||
import { joinRoomAPI, createRoomAPI } from "@/apis";
|
||
import { debounce } from "@/util";
|
||
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user, game } = storeToRefs(store);
|
||
|
||
const props = defineProps({
|
||
onConfirm: {
|
||
type: Function,
|
||
default: () => {},
|
||
},
|
||
});
|
||
|
||
const battleMode = ref(1);
|
||
const loading = ref(false);
|
||
const roomNumber = ref("");
|
||
|
||
const createRoom = debounce(async () => {
|
||
if (game.value.inBattle) {
|
||
uni.$showHint(1);
|
||
return;
|
||
}
|
||
if (loading.value === true) return;
|
||
loading.value = true;
|
||
let size = 2;
|
||
if (battleMode.value === 2) size = 10;
|
||
if (battleMode.value === 3) size = 4;
|
||
if (battleMode.value === 4) size = 6;
|
||
try {
|
||
const result = await createRoomAPI(
|
||
battleMode.value === 2 ? 2 : 1,
|
||
battleMode.value === 2 ? 10 : size
|
||
);
|
||
if (result.number) {
|
||
props.onConfirm();
|
||
await joinRoomAPI(result.number);
|
||
uni.navigateTo({
|
||
url: "/pages/battle-room?roomNumber=" + result.number,
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
</script>
|
||
<template>
|
||
<view class="container">
|
||
<image src="../static/choose-battle-mode.png" mode="widthFix" />
|
||
<view 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 === 3 }"
|
||
@click="() => (battleMode = 3)"
|
||
>
|
||
<text>对抗模式（2V2）</text>
|
||
</view>
|
||
<view
|
||
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 4 }"
|
||
@click="() => (battleMode = 4)"
|
||
>
|
||
<text>对抗模式（3V3）</text>
|
||
</view>
|
||
<view
|
||
:class="{ 'battle-btn': true, 'battle-choosen': battleMode === 2 }"
|
||
@click="() => (battleMode = 2)"
|
||
>
|
||
<text>乱斗模式（3-10人）</text>
|
||
</view>
|
||
</view>
|
||
<SButton :onClick="createRoom">创建房间</SButton>
|
||
</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: 12px;
|
||
justify-content: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
.battle-btn {
|
||
width: 45%;
|
||
height: 55px;
|
||
text-align: center;
|
||
border-radius: 10px;
|
||
border: 2rpx solid #fff3;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.battle-choosen {
|
||
color: #fed847;
|
||
border: 4rpx solid #fff3;
|
||
border-color: #fed847;
|
||
}
|
||
</style>
|