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: () => {},
  },
});

/** 对战模式：0=未选 1=1v1 2=乱斗 3=2v2 4=3v3 */
const battleMode = ref(0);
/** 靶纸尺寸：0=未选 1=20cm 2=40cm */
const targetMode = ref(0);
const loading = ref(false);
const roomNumber = ref("");

const createRoom = debounce(async () => {
  // 校验必填项：对战模式与靶纸均必须选择
  if (!battleMode.value || !targetMode.value) {
    uni.showToast({ title: '请完善创建信息', icon: 'none' });
    return;
  }
  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,
        targetMode.value*20,
    );
    if (result.number) {
      props.onConfirm();
      await joinRoomAPI(result.number);
      uni.navigateTo({
        url: "/pages/battle-room?roomNumber=" + result.number + "&target=" + targetMode.value,
      });
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
});
</script>
<template>
  <view class="container">
    <view class="target-options-header">
      <view class="target-options-header-line-left"></view>
      <image class="target-options-header-title-img" src="../static/choose-battle-mode.png" mode="widthFix" />
      <view class="target-options-header-line-right"></view>
    </view>
    <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>
    <view class="target-options-header">
      <view class="target-options-header-line-left"></view>
      <view class="target-options-header-title">选择靶纸</view>
      <view class="target-options-header-line-right"></view>
    </view>
    <view class="target-options">
      <view
        :class="{ 'battle-btn': true, 'battle-choosen': targetMode === 1 }"
        @click="() => (targetMode = 1)"
      >
        <text>20厘米全环靶</text>
      </view>
      <view
        :class="{ 'battle-btn': true, 'battle-choosen': targetMode === 2 }"
        @click="() => (targetMode = 2)"
      >
        <text>40厘米全环靶</text>
      </view>
    </view>
    <SButton :onClick="() => $clickSound(createRoom)">创建房间</SButton>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 44rpx;
}
.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;
}
.target-options-header{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
}
.target-options-header-title-img{
  width: 196rpx;
  height: 40rpx;
}
.target-options-header-title{
  width: 112rpx;
  height: 40rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  color: #FFEFBA;
  margin: 0 18rpx;
}
.target-options-header-line-left{
  width: 214rpx;
  height: 0rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  border: 1rpx solid;
  border-image: linear-gradient(90deg, rgba(133, 119, 96, 0), rgba(133, 119, 96, 1)) 1 1;
}
.target-options-header-line-right{
  width: 214rpx;
  height: 0rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  border: 1rpx solid;
  border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
}
.target-options {
  width: 100%;
  padding: 0 10px;
  display: flex;
  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>