完成创建房间相关接口

src/components/AppFooter.vue

@@ -1,4 +1,9 @@
 <script setup>
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
 const tabs = [
   { image: "../static/tab-vip.png" },
   { image: "../static/tab-grow.png" },
@@ -6,6 +11,12 @@ const tabs = [
 ];
 
 function handleTabClick(index) {
+  if (!user.value.id) {
+    return uni.showToast({
+      title: "还未登录",
+      icon: "none",
+    });
+  }
   if (index === 1) {
     uni.navigateTo({
       url: "/pages/my-growth",

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>

src/components/Guide.vue

@@ -33,7 +33,7 @@ defineProps({
   display: flex;
   align-items: center;
   padding: 0 15px;
-  width: 100vw;
+  width: 100%;
 }
 .container > image {
   width: 20%;