UI开发

src/pages/friend-battle.vue

@@ -1,8 +1,29 @@
 <script setup>
+import { ref } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
+import SModal from "@/components/SModal.vue";
+import CreateRoom from "@/components/CreateRoom.vue";
+
+const showModal = ref(false);
+const warnning = ref("");
+const roomNumber = ref("");
+
+const enterRoom = () => {
+  console.log(roomNumber.value);
+  if (!roomNumber.value) {
+    warnning.value = "请输入房间号";
+  } else {
+    warnning.value = "查无此房";
+  }
+  showModal.value = true;
+};
+const createRoom = () => {
+  warnning.value = "";
+  showModal.value = true;
+};
 </script>
 
 <template>
@@ -18,8 +39,8 @@ import SButton from "@/components/SButton.vue";
     <view class="founded-room">
       <image src="../static/founded-room.png" mode="widthFix" />
       <view>
-        <input placeholder="输入房间号" />
-        <button>进入房间</button>
+        <input placeholder="输入房间号" v-model="roomNumber" />
+        <view @click="enterRoom">进入房间</view>
       </view>
     </view>
     <view class="create-room">
@@ -32,9 +53,17 @@ import SButton from "@/components/SButton.vue";
         </view>
       </view>
       <view>
-        <SButton width="70%" :rounded="30">创建约战房</SButton>
+        <SButton width="70%" :rounded="30" :onClick="createRoom">
+          创建约战房
+        </SButton>
       </view>
     </view>
+    <SModal :show="showModal" :onClose="() => (showModal = false)">
+      <view v-if="warnning" class="warnning">
+        {{ warnning }}
+      </view>
+      <CreateRoom v-if="!warnning" />
+    </SModal>
   </view>
 </template>
 
@@ -69,7 +98,7 @@ import SButton from "@/components/SButton.vue";
   font-size: 14px;
   height: 40px;
 }
-.founded-room > view > button {
+.founded-room > view > view {
   background-color: #fed847;
   width: 30%;
   line-height: 40px;
@@ -78,6 +107,7 @@ import SButton from "@/components/SButton.vue";
   padding: 3px 0;
   font-weight: bold;
   color: #000;
+  text-align: center;
 }
 .create-room {
   position: relative;
@@ -118,4 +148,12 @@ import SButton from "@/components/SButton.vue";
 .create-room > view:last-child {
   transform: translateY(-110%);
 }
+.warnning {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff9;
+}
 </style>