UI开发

2025-05-16 15:56:54 +08:00
parent 34c9dd00e2
commit 779b3395db
35 changed files with 1003 additions and 40 deletions
--- a/src/pages/battle-room.vue
+++ b/src/pages/battle-room.vue
@@ -0,0 +1,149 @@
+<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 BowTarget from "@/components/BowTarget.vue";
+import BattleHeader from "@/components/BattleHeader.vue";
+import BattleFooter from "@/components/BattleFooter.vue";
+import BowPower from "@/components/BowPower.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import PlayersRow from "@/components/PlayersRow.vue";
+const step = ref(1);
+const seats = new Array(10).fill(1);
+const players = new Array(7).fill(1);
+const teams = [
+  { name: "选手1", avatar: "../static/avatar.png" },
+];
+</script>
+
+<template>
+  <view class="container">
+    <AppBackground />
+    <Header title="对战" />
+    <view v-if="step === 1">
+      <Guide>
+        <view :style="{ display: 'flex', flexDirection: 'column' }">
+          <text :style="{ color: '#fed847' }">人都到齐了吗？</text>
+          <text>天赋异禀的弓箭手们，比赛即将开始！</text>
+        </view>
+      </Guide>
+      <view class="players">
+        <view v-for="(_, index) in seats" :key="index">
+          <image src="../static/player-bg.png" mode="widthFix" />
+          <image
+            v-if="players[index]"
+            src="../static/avatar.png"
+            mode="widthFix"
+          />
+          <view v-else class="player-unknow">
+            <image src="../static/question-mark.png" mode="widthFix" />
+          </view>
+          <text v-if="players[index]">选手{{ index + 1 }}</text>
+          <text v-else :style="{ color: '#fff9' }">虚位以待</text>
+          <view v-if="index === 0" class="founder">创建者</view>
+          <image
+            :src="`../static/player-${index + 1}.png`"
+            mode="widthFix"
+            class="player-bg"
+          />
+        </view>
+      </view>
+      <SButton :onClick="() => (step = 2)">进入大乱斗</SButton>
+      <text class="tips">创建者点击下一步，所有人即可进入游戏。</text>
+    </view>
+    <view v-if="step === 2">
+      <BattleHeader />
+      <Guide noBg>
+        <view :style="{ display: 'flex', justifyContent: 'space-between' }">
+          <view :style="{ display: 'flex', flexDirection: 'column' }">
+            <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
+            <text>请确保射击距离只有5米</text>
+          </view>
+          <BowPower power="45" />
+        </view>
+      </Guide>
+      <BowTarget tips="本次射程5.2米，已达距离要求" />
+      <SButton :onClick="() => (step = 3)">开始</SButton>
+    </view>
+    <view v-if="step === 3">
+      <ShootProgress tips="请红队射箭-第一轮" />
+      <PlayersRow :blueTeam="teams" :redTeam="teams" />
+      <BowTarget power="45" currentRound="1" totalRound="3" debug />
+      <BattleFooter :blueTeam="[6, 2, 3]" :redTeam="[4, 5, 2]" />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+}
+.players {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  column-gap: 15px;
+  row-gap: 10px;
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+.players > view {
+  width: 45%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  color: #fff;
+  height: 90px;
+  overflow: hidden;
+}
+.players > view > image:first-child {
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+}
+.players > view > image:nth-child(2) {
+  width: 40px;
+  margin: 0 10px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+}
+.founder {
+  position: absolute;
+  background-color: #fed847;
+  top: 0;
+  color: #000;
+  font-size: 12px;
+  padding: 2px 5px;
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+.player-bg {
+  position: absolute;
+  width: 52px;
+  right: 0;
+}
+.tips {
+  color: #fff9;
+  width: 100%;
+  text-align: center;
+  display: block;
+  margin-top: 10px;
+  font-size: 14px;
+}
+.player-unknow {
+  width: 40px;
+  height: 40px;
+  margin: 0 10px;
+  border: 1px solid #fff3;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #69686866;
+}
+.player-unknow > image {
+  width: 40%;
+}
+</style>
--- a/src/pages/friend-battle.vue
+++ b/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>
--- a/src/pages/match-room.vue
+++ b/src/pages/match-room.vue
@@ -0,0 +1,108 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+import Header from "@/components/Header.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import PlayersRow from "@/components/PlayersRow.vue";
+import PlayerScore from "@/components/PlayerScore.vue";
+const teams = [
+  { name: "选手1", avatar: "../static/avatar.png" },
+  { name: "选手1", avatar: "../static/avatar.png" },
+  { name: "选手1", avatar: "../static/avatar.png" },
+];
+</script>
+
+<template>
+  <view class="container">
+    <AppBackground />
+    <Header title="排位赛" />
+    <view>
+      <ShootProgress tips="请红队射箭-第一轮" />
+      <PlayersRow :blueTeam="teams" :redTeam="teams" />
+      <BowTarget power="45" currentRound="1" totalRound="3" debug />
+      <PlayerScore
+        name="某某选手"
+        avatar="../static/avatar.png"
+        :scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
+      />
+      <PlayerScore
+        name="下个选手"
+        avatar="../static/avatar.png"
+        :scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  padding-bottom: 20px;
+}
+.players {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  column-gap: 15px;
+  row-gap: 10px;
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+.players > view {
+  width: 45%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  color: #fff;
+  height: 90px;
+  overflow: hidden;
+}
+.players > view > image:first-child {
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+}
+.players > view > image:nth-child(2) {
+  width: 40px;
+  margin: 0 10px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+}
+.founder {
+  position: absolute;
+  background-color: #fed847;
+  top: 0;
+  color: #000;
+  font-size: 12px;
+  padding: 2px 5px;
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+.player-bg {
+  position: absolute;
+  width: 52px;
+  right: 0;
+}
+.tips {
+  color: #fff9;
+  width: 100%;
+  text-align: center;
+  display: block;
+  margin-top: 10px;
+  font-size: 14px;
+}
+.player-unknow {
+  width: 40px;
+  height: 40px;
+  margin: 0 10px;
+  border: 1px solid #fff3;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #69686866;
+}
+.player-unknow > image {
+  width: 40%;
+}
+</style>
--- a/src/pages/practise-one.vue
+++ b/src/pages/practise-one.vue
@@ -5,6 +5,7 @@ import Header from "@/components/Header.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ScorePanel2 from "@/components/ScorePanel2.vue";
+import ScoreResult from "@/components/ScoreResult.vue";
 const showScore = ref(false);

 setTimeout(() => {
@@ -16,7 +17,7 @@ setTimeout(() => {
  <view class="container">
    <AppBackground type="1" />
    <Header title="个人单组练习" />
-    <ShootProgress tips="请连续射箭36支" total="120" />
+    <ShootProgress tips="请开始射箭第一轮" total="120" />
    <BowTarget
      totalRound="10"
      currentRound="4"
@@ -24,6 +25,12 @@ setTimeout(() => {
      power="45"
    />
    <ScorePanel2 :scores="[1, 2, 3, 4, 5, 6]" />
+    <ScoreResult
+      :total="12"
+      :rowCount="6"
+      :show="showScore"
+      :onClose="() => (showScore = false)"
+    />
  </view>
 </template>

--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -1,13 +1,19 @@
 <script setup>
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
-import { ref } from 'vue';
+import { ref } from "vue";

 const selectedIndex = ref(0);

 const handleSelect = (index) => {
  selectedIndex.value = index;
 };
+
+const toMatchPage = () => {
+  uni.navigateTo({
+    url: "/pages/match-room",
+  });
+};
 </script>

 <template>
@@ -43,9 +49,21 @@ const handleSelect = (index) => {
        </view>
      </view>
      <view class="rank-type">
-        <image src="../static/battle1v1.png" mode="widthFix" />
-        <image src="../static/battle5.png" mode="widthFix" />
-        <image src="../static/battle10.png" mode="widthFix" />
+        <image
+          src="../static/battle1v1.png"
+          mode="widthFix"
+          @click="toMatchPage"
+        />
+        <image
+          src="../static/battle5.png"
+          mode="widthFix"
+          @click="toMatchPage"
+        />
+        <image
+          src="../static/battle10.png"
+          mode="widthFix"
+          @click="toMatchPage"
+        />
      </view>
      <view class="data-progress">
        <text>【1 V 1】 163 场 胜率 51%</text>
@@ -74,9 +92,10 @@ const handleSelect = (index) => {
          :key="index"
          :style="{
            color: index === selectedIndex ? '#000' : '#fff',
-            backgroundColor: index === selectedIndex ? '#FFD947' : 'transparent',
+            backgroundColor:
+              index === selectedIndex ? '#FFD947' : 'transparent',
          }"
-           @tap="handleSelect(index)"
+          @tap="handleSelect(index)"
        >
          {{ rankType }}
        </view>