完成创建房间相关接口

src/components/CreateRoom.vue

@@ -1,14 +1,44 @@
 <script setup>
 import { ref } from "vue";
 import SButton from "@/components/SButton.vue";
-const props = defineProps({});
+import { 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 toBattleRoom = () => {
+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 = () => {
+  props.onConfirm();
   uni.navigateTo({
-    url: "/pages/battle-room",
+    url: `/pages/battle-room?roomNumber=${roomNumber.value}`,
+  });
+};
+
+const setClipboardData = () => {
+  uni.setClipboardData({
+    data: roomNumber.value,
+    success() {
+      uni.showToast({ title: "复制成功" });
+    },
   });
 };
 </script>
@@ -41,15 +71,15 @@ const toBattleRoom = () => {
         <text>敬请期待</text>
       </view>
     </view>
-    <SButton v-if="step === 1" :onClick="() => (step = 2)">下一步</SButton>
+    <SButton v-if="step === 1" :onClick="createRoom">下一步</SButton>
     <view v-if="step === 2" class="room-info">
       <view>
         <text>房间号：</text>
-        <text>3245</text>
+        <text>{{ roomNumber }}</text>
       </view>
-      <SButton width="60vw" :onClick="toBattleRoom">进入房间</SButton>
+      <SButton width="60vw" :onClick="enterRoom">进入房间</SButton>
       <text>30分钟无人进入则房间无效</text>
-      <view>复制房间信息邀请朋友进入</view>
+      <view @click="setClipboardData">复制房间信息邀请朋友进入</view>
     </view>
   </view>
 </template>