shoot-miniprograms/src/components/CreateRoom.vue

<script setup>
import { ref } from "vue";
import SButton from "@/components/SButton.vue";
import { joinRoomAPI, createRoomAPI, isGamingAPI } 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 () => {
  const isGaming = await isGamingAPI();
  if (isGaming) {
    uni.$showHint("当前正在对战中");
    return;
  }
  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>