shoot-miniprograms/src/components/CreateRoom.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,
      });
    }
  } 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>