完成获胜页面UI和一些优化

src/components/ImageShare.vue

@@ -67,7 +67,7 @@ const saveImage = () => {
     <view class="content">
       <image src="../static/share-bg.png" mode="widthFix" />
       <view>
-        <Avatar :src="user.avatarUrl" size="40" frame />
+        <Avatar :src="user.avatarUrl" :size="40" frame />
         <view>
           <text>{{ user.nickName }}</text>
           <text>砖石1级</text>

src/components/PlayerSeats.vue

@@ -0,0 +1,90 @@
+<script setup>
+defineProps({
+  players: {
+    type: Array,
+    default: () => [],
+  },
+});
+const seats = new Array(10).fill(1);
+</script>
+
+<template>
+  <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>
+</template>
+
+<style scoped>
+.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;
+}
+.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>

src/constants.js

@@ -1,4 +1,20 @@
 export const MESSAGETYPES = {
-  ShootSyncMeArrowID: parseInt("0x789b6b0d"),
+  ShootSyncMeArrowID: parseInt("0x789b6b0d"), // 2023451405
-  ShootSyncMePracticeID: parseInt("0xD88AE05E"),
+  ShootSyncMePracticeID: parseInt("0xD88AE05E"), // 3632980062
+  WaitForAllReady: parseInt("0x615C13BE"), // 1633424318
+  AllReady: parseInt("0x1CCB49FD"), // 483084797
+  ShootResult: parseInt("0xAA0795E2"), // 2852623842
+  CurrentRoundEnded: parseInt("0x3E2CE041"), // 1043128385
+  ToSomeoneShoot: parseInt("0x077ACD1A"), // 125488410
+  SomeGuyIsReady: parseInt("0xAEE8C236"), // 2934489654
+  MatchOver: parseInt("0xB7815EEF"), // 3078708975
+};
+
+export const roundsName = {
+  0: "一",
+  1: "一",
+  2: "二",
+  3: "三",
+  4: "四",
+  5: "五",
 };

src/pages.json

@@ -113,6 +113,12 @@
       "style": {
         "navigationBarTitleText": "排位赛"
       }
+    },
+    {
+      "path": "pages/battle-result",
+      "style": {
+        "navigationBarTitleText": "对战结果"
+      }
     }
   ],
   "globalStyle": {

src/pages/battle-result.vue

@@ -0,0 +1,121 @@
+<script setup></script>
+
+<template>
+  <view class="container">
+    <image class="tag" src="../static/winner-yellow.png" mode="widthFix" />
+    <view>
+      <image src="../static/battle-result.png" mode="widthFix" />
+    </view>
+    <view>
+      <image src="../static/shining-bg.png" mode="widthFix" />
+      <image src="../static/throphy.png" mode="widthFix" />
+      <text>蓝队获胜</text>
+      <text>强势登顶，荣耀加冕</text>
+    </view>
+    <view>
+      <image src="../static/row-yellow-bg.png" mode="widthFix" />
+      <text>经验 +20</text>
+    </view>
+    <text>你是朋友中的佼佼者哦</text>
+    <view>
+      <view>查看靶纸</view>
+      <view>退出</view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.tag {
+  position: absolute;
+  width: 32vw;
+  top: 0;
+  right: 0;
+}
+.container > view {
+  position: relative;
+}
+.container > view:nth-child(2) {
+  width: 80%;
+  margin: 10px;
+}
+.container > view:nth-child(2) > image {
+  width: 20vw;
+}
+.container > view:nth-child(3) {
+  width: 100%;
+  height: 38%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  color: #fff9;
+  font-size: 14px;
+}
+.container > view:nth-child(3) > image {
+  position: absolute;
+  width: 100vw;
+  top: 0;
+  left: 0;
+}
+.container > view:nth-child(3) > image:nth-child(2) {
+  top: 6vw;
+}
+.container > view:nth-child(3) > text:nth-child(3) {
+  font-size: 30px;
+  margin: 10px;
+  font-weight: bold;
+  color: #fed847;
+}
+.container > view:nth-child(4) {
+  width: 100%;
+  height: 60px;
+  margin: 20px 0;
+}
+.container > view:nth-child(4) > image {
+  position: absolute;
+  width: 100vw;
+  top: 45%;
+}
+.container > view:nth-child(4) > text {
+  position: absolute;
+  width: 100%;
+  font-size: 30px;
+  color: #fff;
+  text-align: center;
+  top: 54%;
+}
+.container > text:nth-child(5) {
+  margin: 50px 0;
+  font-size: 14px;
+  color: #fed847;
+  width: 100%;
+  text-align: center;
+}
+.container > view:nth-child(6) {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.container > view:nth-child(6) > view {
+  width: 36%;
+  margin: 0 10px;
+  background-color: #fed847;
+  border-radius: 20px;
+  padding: 10px 0;
+  text-align: center;
+}
+.container > view:nth-child(6) > view:last-child {
+  color: #fff;
+  background-color: #757575;
+}
+</style>

src/pages/battle-room.vue

@@ -2,8 +2,7 @@
 import { ref, onUnmounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
-import AppBackground from "@/components/AppBackground.vue";
+import PlayerSeats from "@/components/PlayerSeats.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";
@@ -19,10 +18,9 @@ import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
-const step = ref(1);
+const step = ref(3);
 const room = ref({});
 const roomNumber = ref("");
-const seats = new Array(10).fill(1);
 const players = new Array(7).fill(1);
 const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
 onLoad(async (options) => {
@@ -80,27 +78,10 @@ const startGame = async () => {
           </view>
         </view>
       </view>
-      <view v-if="room.battleType === 2 && room.count === 10" class="players">
+      <PlayerSeats
-        <view v-for="(_, index) in seats" :key="index">
+        v-if="room.battleType === 2 && room.count === 10"
-          <image src="../static/player-bg.png" mode="widthFix" />
+        :players="players"
-          <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>
       <view>
         <SButton
           v-if="room.battleType === 1 && room.count === 2"
@@ -132,7 +113,7 @@ const startGame = async () => {
     <view v-if="step === 3">
       <ShootProgress tips="请红队射箭-第一轮" />
       <PlayersRow :blueTeam="teams" :redTeam="teams" />
-      <BowTarget :power="45" currentRound="1" :totalRound="3" debug />
+      <BowTarget :power="45" :currentRound="1" :totalRound="3" debug />
       <BattleFooter :blueTeam="[6, 2, 3]" :redTeam="[4, 5, 2]" />
     </view>
   </Container>
@@ -144,35 +125,6 @@ const startGame = async () => {
   height: calc(100% - 40px);
   overflow-x: hidden;
 }
-.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;

src/pages/practise-one.vue

@@ -8,7 +8,7 @@ import ScorePanel2 from "@/components/ScorePanel2.vue";
 import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import { createPractiseAPI } from "@/apis";
-import { MESSAGETYPES } from "@/constants";
+import { MESSAGETYPES, roundsName } from "@/constants";
 import websocket from "@/websocket";
 const start = ref(false);
 const showScore = ref(false);
@@ -42,12 +42,6 @@ const onReady = async () => {
   });
 };
 
-const roundsName = {
-  1: "一",
-  2: "二",
-  3: "三",
-};
-
 onUnmounted(() => {
   websocket.closeWebSocket();
 });

src/pages/ranking.vue

@@ -8,119 +8,129 @@ const handleSelect = (index) => {
   selectedIndex.value = index;
 };
 
-const toMatchPage = () => {
+const toMatchPage = (gameType, teamSize) => {
   uni.navigateTo({
-    url: "/pages/match-room",
+    url: `/pages/match-room?gameType=${gameType}&teamSize=${teamSize}`,
   });
 };
 </script>
 
 <template>
-  <Container title="排行赛"
+  <Container title="排行赛">
-    ><view class="ranking-my-data">
+    <view class="container">
-      <view>
+      <view class="ranking-my-data">
-        <view class="user-info">
+        <view>
-          <view class="avatar" @click="toUserPage">
+          <view class="user-info">
-            <image src="../static/avatar-frame.png" mode="widthFix" />
+            <view class="avatar" @click="toUserPage">
-            <image src="../static/avatar.png" mode="widthFix" />
+              <image src="../static/avatar-frame.png" mode="widthFix" />
+              <image src="../static/avatar.png" mode="widthFix" />
+            </view>
+            <text>打酱油·路过</text>
+          </view>
+          <view class="ranking-season">
+            <text>第14赛季</text>
+            <image src="../static/triangle.png" mode="widthFix" />
           </view>
-          <text>打酱油·路过</text>
         </view>
-        <view class="ranking-season">
+        <view class="my-data">
-          <text>第14赛季</text>
+          <view>
-          <image src="../static/triangle.png" mode="widthFix" />
+            <text>段位</text>
+            <text :style="{ color: '#83CDFF' }">砖石 III</text>
+          </view>
+          <view>
+            <text>赛季平均环数</text>
+            <text :style="{ color: '#FFD947' }">9.7环</text>
+          </view>
+          <view>
+            <text>赛季胜率</text>
+            <text :style="{ color: '#FF507E' }">52%</text>
+          </view>
         </view>
+        <view class="rank-type">
+          <image
+            src="../static/battle1v1.png"
+            mode="widthFix"
+            @click="() => toMatchPage(1, 2)"
+          />
+          <image
+            src="../static/battle5.png"
+            mode="widthFix"
+            @click="() => toMatchPage(2, 5)"
+          />
+          <image
+            src="../static/battle10.png"
+            mode="widthFix"
+            @click="() => toMatchPage(2, 10)"
+          />
+        </view>
+        <view class="data-progress">
+          <text>【1 V 1】 163 场 胜率 51%</text>
+          <view>
+            <view :style="{ width: '50%', backgroundColor: '#FF507E' }" />
+          </view>
+        </view>
+        <view class="data-progress">
+          <text>【5人大乱斗】 12 场 得分率 56%</text>
+          <view>
+            <view :style="{ width: '60%', backgroundColor: '#FFD947' }" />
+          </view>
+        </view>
+        <view class="data-progress">
+          <text>【10 人大乱斗】 12 场 得分率 5</text>
+          <view>
+            <view :style="{ width: '45%', backgroundColor: '#FFD947' }" />
+          </view>
+        </view>
+        <view>查看我的比赛记录</view>
       </view>
-      <view class="my-data">
+      <view class="ranking-data">
         <view>
-          <text>段位</text>
+          <view
-          <text :style="{ color: '#83CDFF' }">砖石 III</text>
+            v-for="(rankType, index) in [
+              '积分表',
+              'MVP榜',
+              '十环榜',
+              '最牛省份',
+            ]"
+            :key="index"
+            :style="{
+              color: index === selectedIndex ? '#000' : '#fff',
+              backgroundColor:
+                index === selectedIndex ? '#FFD947' : 'transparent',
+            }"
+            @tap="handleSelect(index)"
+          >
+            {{ rankType }}
+          </view>
         </view>
-        <view>
-          <text>赛季平均环数</text>
-          <text :style="{ color: '#FFD947' }">9.7环</text>
-        </view>
-        <view>
-          <text>赛季胜率</text>
-          <text :style="{ color: '#FF507E' }">52%</text>
-        </view>
-      </view>
-      <view class="rank-type">
-        <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>
-        <view>
-          <view :style="{ width: '50%', backgroundColor: '#FF507E' }" />
-        </view>
-      </view>
-      <view class="data-progress">
-        <text>【5人大乱斗】 12 场 得分率 56%</text>
-        <view>
-          <view :style="{ width: '60%', backgroundColor: '#FFD947' }" />
-        </view>
-      </view>
-      <view class="data-progress">
-        <text>【10 人大乱斗】 12 场 得分率 5</text>
-        <view>
-          <view :style="{ width: '45%', backgroundColor: '#FFD947' }" />
-        </view>
-      </view>
-      <view>查看我的比赛记录</view>
-    </view>
-    <view class="ranking-data">
-      <view>
         <view
-          v-for="(rankType, index) in ['积分表', 'MVP榜', '十环榜', '最牛省份']"
+          v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
           :key="index"
           :style="{
-            color: index === selectedIndex ? '#000' : '#fff',
+            backgroundColor: index % 2 === 0 ? '#ffffff1f' : 'transparent',
-            backgroundColor:
-              index === selectedIndex ? '#FFD947' : 'transparent',
           }"
-          @tap="handleSelect(index)"
+          class="rank-item"
         >
-          {{ rankType }}
+          <image v-if="index === 0" src="../static/champ1.png" />
+          <image v-if="index === 1" src="../static/champ2.png" />
+          <image v-if="index === 2" src="../static/champ3.png" />
+          <view v-if="index > 2">{{ rankType }}</view>
+          <image src="../static/avatar.png" mode="widthFix" />
+          <view>
+            <text>打酱油大声路过</text>
+            <text>钻石三级，20场</text>
+          </view>
+          <text>8850<text>分</text></text>
         </view>
       </view>
-      <view
-        v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-        :key="index"
-        :style="{
-          backgroundColor: index % 2 === 0 ? '#ffffff1f' : 'transparent',
-        }"
-        class="rank-item"
-      >
-        <image v-if="index === 0" src="../static/champ1.png" />
-        <image v-if="index === 1" src="../static/champ2.png" />
-        <image v-if="index === 2" src="../static/champ3.png" />
-        <view v-if="index > 2">{{ rankType }}</view>
-        <image src="../static/avatar.png" mode="widthFix" />
-        <view>
-          <text>打酱油大声路过</text>
-          <text>钻石三级，20场</text>
-        </view>
-        <text>8850<text>分</text></text>
-      </view>
     </view>
   </Container>
 </template>
 
 <style scoped>
+.container {
+  width: 100%;
+}
 .ranking-my-data,
 .ranking-data {
   display: flex;