shoot-miniprograms/src/pages/friend-battle.vue

<script setup>
import { ref } from "vue";
import Container from "@/components/Container.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";
import { getRoomAPI, joinRoomAPI, isGamingAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
import { debounce } from "@/util";

const showModal = ref(false);
const warnning = ref("");
const roomNumber = ref("");

const enterRoom = debounce(async () => {
  const isGaming = await isGamingAPI();
  if (isGaming) {
    uni.$showHint(1);
    return;
  }
  if (!roomNumber.value) {
    warnning.value = "请输入房间号";
    showModal.value = true;
  } else {
    const room = await getRoomAPI(roomNumber.value);
    if (room.number) {
      const alreadyIn = room.members.find(
        (item) => item.userInfo.id === user.value.id
      );
      if (!alreadyIn) await joinRoomAPI(roomNumber.value);
      roomNumber.value = "";
      showModal.value = false;
      uni.navigateTo({
        url: `/pages/battle-room?roomNumber=${room.number}`,
      });
    } else {
      warnning.value = "查无此房";
      showModal.value = true;
    }
  }
});
const onCreateRoom = async () => {
  const isGaming = await isGamingAPI();
  if (isGaming) {
    uni.$showHint(1);
    return;
  }
  warnning.value = "";
  showModal.value = true;
};
</script>

<template>
  <Container title="好友约战" :showBackToGame="true">
    <view :style="{ width: '100%' }">
      <Guide>
        <view class="guide-tips">
          <text>约上朋友开几局，欢乐多，不寂寞</text>
          <text>一起练升级更快，早日加入全国排位赛！</text>
        </view>
      </Guide>
      <view class="founded-room">
        <image src="../static/founded-room.png" mode="widthFix" />
        <view>
          <input
            placeholder="输入房间号"
            v-model="roomNumber"
            placeholder-style="color: #ccc"
          />
          <view @click="enterRoom">进入房间</view>
        </view>
      </view>
      <view class="create-room">
        <image
          src="https://api.shelingxingqiu.com/attachment/2025-07-15/dbcejys872iyun92h6.png"
          mode="widthFix"
        />
        <view>
          <image :src="user.avatar" mode="widthFix" />
          <image src="../static/versus.png" mode="widthFix" />
          <view>
            <image src="../static/question-mark.png" mode="widthFix" />
          </view>
        </view>
        <view>
          <SButton width="80%" :rounded="30" :onClick="onCreateRoom">
            创建约战房
          </SButton>
        </view>
      </view>
      <SModal :show="showModal" :onClose="() => (showModal = false)">
        <view v-if="warnning" class="warnning">
          {{ warnning }}
        </view>
        <CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
      </SModal>
    </view>
  </Container>
</template>

<style scoped>
.founded-room {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 0;
  background-color: #54431d33;
  border: 1px solid #54431d;
  margin: 25px 15px;
  border-radius: 10px;
  padding: 15px;
}
.founded-room > image {
  width: 16vw;
}
.founded-room > view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25px 0;
  background-color: #fff;
  border-radius: 30px;
  width: 100%;
  overflow: hidden;
}
.founded-room > view > input {
  width: 70%;
  text-align: center;
  font-size: 14px;
  height: 40px;
}
.founded-room > view > view {
  background-color: #fed847;
  width: 30%;
  line-height: 40px;
  border-radius: 30px;
  font-size: 14px;
  padding: 3px 0;
  font-weight: bold;
  color: #000;
  text-align: center;
}
.create-room {
  position: relative;
  margin: 25px 15px;
}
.create-room > image:first-of-type {
  position: absolute;
  width: 100%;
}
.create-room > view {
  margin: 0 30px;
  padding-top: 12%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.create-room > view > image:first-child {
  width: 18vw;
  transform: translateX(30%);
  border-radius: 50%;
}
.create-room > view > image:nth-child(2) {
  width: 36vw;
  transform: translateX(55%) translateY(-40px);
}
.create-room > view > view:nth-child(3) {
  width: 18vw;
  height: 18vw;
  border-radius: 50%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(290%, -75px);
}
.create-room > view > view:nth-child(3) > image {
  width: 20px;
  margin-right: 2px;
}
.create-room > view:last-child {
  transform: translateY(-100%);
}
.warnning {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff9;
}
</style>