细节调整

src/App.vue

@@ -5,13 +5,14 @@ import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
+const { updateConnect } = store;
 
 watch(
   () => user.value.id,
   (newVal) => {
     const token = uni.getStorageSync("token");
     if (newVal && token) {
-      websocket.createWebSocket(token, (content) => {
+      websocket.createWebSocket(token, updateConnect, (content) => {
         uni.$emit("socket-inbox", content);
       });
     }

src/components/AppFooter.vue

@@ -29,6 +29,11 @@ function handleTabClick(index) {
       url: "/pages/my-growth",
     });
   }
+  if (index === 2) {
+    uni.navigateTo({
+      url: "/pages/device-intro",
+    });
+  }
 }
 </script>
 

src/components/BattleHeader.vue

@@ -19,7 +19,7 @@ defineProps({
   },
   winner: {
     type: Number,
-    default: 1,
+    default: 2,
   },
 });
 const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "];

src/components/ScoreResult.vue

@@ -3,7 +3,7 @@ import { ref } from "vue";
 import IconButton from "@/components/IconButton.vue";
 import SButton from "@/components/SButton.vue";
 import ImageShare from "@/components/ImageShare.vue";
-import CoachComment from "@/components/CoachComment.vue";
+import ScreenHint from "@/components/ScreenHint.vue";
 import BowData from "@/components/BowData.vue";
 const props = defineProps({
   show: {
@@ -100,9 +100,9 @@ setTimeout(() => {
       </view>
     </view>
     <ImageShare :show="showShare" :onClose="() => (showShare = false)" />
-    <CoachComment :show="showComment" :onClose="() => (showComment = false)">
+    <ScreenHint :show="showComment" :onClose="() => (showComment = false)">
       {{ result.adjustmentHint }}
-    </CoachComment>
+    </ScreenHint>
     <BowData
       :arrows="result.arrows"
       :show="showBowData"

src/components/ScreenHint.vue

@@ -30,6 +30,11 @@ const props = defineProps({
         src="../static/prompt-bg-square.png"
         mode="widthFix"
       />
+      <image
+        v-if="mode === 'small'"
+        src="../static/finish-frame.png"
+        mode="widthFix"
+      />
       <slot />
     </view>
     <IconButton
@@ -58,14 +63,16 @@ const props = defineProps({
   align-items: center;
   position: relative;
   width: 70vw;
+  min-height: 22vh;
+  margin-bottom: 20px;
   color: #fff;
-  margin-bottom: 25vw;
 }
 .container > view:first-child > image {
   position: absolute;
   width: 80vw;
-  left: -5vw;
+  left: -7%;
   bottom: -20vw;
   z-index: -1;
+  transform: translateY(-75px);
 }
 </style>

src/pages/battle-room.vue

@@ -91,8 +91,7 @@ const startGame = async () => {
   step.value = 2;
 };
 
-async function onReceiveMessage(content) {
+async function onReceiveMessage(messages = []) {
-  const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
     if (
       msg.roomNumber === roomNumber.value ||
@@ -223,7 +222,6 @@ const onLeaveRoom = () => {
 
 const destroyRoom = async () => {
   await destroyRoomAPI(roomNumber.value);
-  uni.navigateBack();
 };
 
 const exitRoom = async () => {

src/pages/first-try.vue

@@ -46,8 +46,7 @@ const onStart = () => {
   scores.value = [];
 };
 
-async function onReceiveMessage(content) {
+async function onReceiveMessage(messages = []) {
-  const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);

src/pages/melee-match.vue

@@ -52,8 +52,7 @@ async function readyToGo() {
   }
 }
 
-async function onReceiveMessage(content) {
+async function onReceiveMessage(messages = []) {
-  const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
     if (
       !msg.id ||

src/pages/my-device.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
-import CoachComment from "@/components/CoachComment.vue";
+import ScreenHint from "@/components/ScreenHint.vue";
 import SButton from "@/components/SButton.vue";
 import { bindDeviceAPI, getMyDevicesAPI, unbindDeviceAPI } from "@/apis";
 import useStore from "@/store";
@@ -91,7 +91,7 @@ const backToHome = () => {
         <view @click="() => (showTip = true)">找不到我的弓箭？</view>
         <view @click="toDeviceIntroPage">我还没有弓箭</view>
       </view>
-      <CoachComment
+      <ScreenHint
         mode="square"
         :show="showTip"
         :onClose="() => (showTip = false)"
@@ -105,8 +105,8 @@ const backToHome = () => {
           <text>4. 连接成功后</text>
           <view>联系在线客服</view>
         </view>
-      </CoachComment>
+      </ScreenHint>
-      <CoachComment
+      <ScreenHint
         :show="confirmBindTip"
         :onClose="() => (confirmBindTip = false)"
       >
@@ -123,7 +123,7 @@ const backToHome = () => {
             <view @click="() => (confirmBindTip = false)">取消</view>
           </view>
         </view>
-      </CoachComment>
+      </ScreenHint>
     </view>
     <view v-if="justBind" class="just-bind">
       <view class="device-binded">
@@ -212,7 +212,7 @@ const backToHome = () => {
   display: flex;
   flex-direction: column;
   font-size: 14px;
-  transform: translateX(10px) translateY(65px);
+  transform: translateX(10px) translateY(-10px);
 }
 .scan-tips > text {
   margin-bottom: 2px;

src/pages/practise-one.vue

@@ -38,8 +38,7 @@ const onStart = () => {
   currentRound.value = 0;
 };
 
-async function onReceiveMessage(content) {
+async function onReceiveMessage(messages = []) {
-  const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);

src/pages/practise-two.vue

@@ -38,8 +38,7 @@ const onStart = () => {
   currentRound.value = 0;
 };
 
-async function onReceiveMessage(content) {
+async function onReceiveMessage(messages = []) {
-  const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);

src/pages/team-match.vue

@@ -9,6 +9,7 @@ import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
 import Timer from "@/components/Timer.vue";
 import BattleFooter from "@/components/BattleFooter.vue";
+import ScreenHint from "@/components/ScreenHint.vue";
 import SButton from "@/components/SButton.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
@@ -22,6 +23,8 @@ const matching = ref(false);
 const start = ref(false);
 const battleId = ref("");
 const currentRound = ref(1);
+const currentRedPoint = ref(0);
+const currentBluePoint = ref(0);
 const totalRounds = ref(0);
 const power = ref(0);
 const scores = ref([]);
@@ -39,6 +42,7 @@ const roundResults = ref([
 ]);
 const redPoints = ref(0);
 const bluePoints = ref(0);
+const showRoundTip = ref(false);
 
 onLoad((options) => {
   gameType.value = options.gameType;
@@ -48,13 +52,13 @@ async function startMatch() {
   if (gameType.value && teamSize.value) {
     scores.value = [];
     await matchGameAPI(true, gameType.value, teamSize.value);
-    startMatch.value = true;
+    matching.value = true;
   }
 }
 async function stopMatch() {
   if (gameType.value && teamSize.value) {
     await matchGameAPI(false, gameType.value, teamSize.value);
-    startMatch.value = false;
+    matching.value = false;
   }
 }
 async function readyToGo() {
@@ -65,8 +69,7 @@ async function readyToGo() {
   }
 }
 
-async function onReceiveMessage(content) {
+async function onReceiveMessage(messages = []) {
-  const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
     if (
       !msg.id ||
@@ -114,11 +117,12 @@ async function onReceiveMessage(content) {
       const result = msg.preRoundResult;
       scores.value = [];
       currentShooterId.value = 0;
-      if (result.currentRound > 0 && result.currentRound < totalRounds.value) {
+      currentBluePoint.value = result.blueScore;
-        // 开始下一轮;
+      currentRedPoint.value = result.redScore;
-        roundResults.value = result.roundResults;
+      showRoundTip.value = true;
-        currentRound.value = result.currentRound + 1;
+      // 开始下一轮;
-      }
+      roundResults.value = result.roundResults;
+      currentRound.value = result.currentRound + 1;
     }
     if (msg.constructor === MESSAGETYPES.MatchOver) {
       uni.redirectTo({
@@ -132,7 +136,7 @@ onMounted(() => {
 });
 onUnmounted(() => {
   uni.$off("socket-inbox", onReceiveMessage);
-  if (startMatch.value) {
+  if (matching.value) {
     matchGameAPI(false, gameType.value, teamSize.value);
   }
 });
@@ -146,7 +150,7 @@ onUnmounted(() => {
         :redTeam="redTeam"
         :blueTeam="blueTeam"
       />
-      <Guide noBg v-if="!start && startMatch.value">
+      <Guide noBg v-if="!start && matching">
         <view :style="{ display: 'flex', justifyContent: 'space-between' }">
           <view :style="{ display: 'flex', flexDirection: 'column' }">
             <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
@@ -163,7 +167,7 @@ onUnmounted(() => {
         :redTeam="redTeam"
       />
       <BowTarget
-        v-if="startMatch.value"
+        v-if="matching"
         :showE="start && user.id === currentShooterId"
         :power="start ? power : 0"
         :currentRound="currentRound"
@@ -184,6 +188,20 @@ onUnmounted(() => {
         :bluePoints="bluePoints"
       />
       <Timer :seq="timerSeq" :callBack="readyToGo" />
+      <ScreenHint :show="showRoundTip" :onClose="() => (showRoundTip = false)">
+        <view class="round-end-tip">
+          <text>第{{ currentRound - 1 }}轮射击结束</text>
+          <view>
+            <text>蓝队</text>
+            <text>{{ currentBluePoint }}</text>
+            <text>分，红队</text>
+            <text>{{ currentRedPoint }}</text>
+            <text>分</text>
+          </view>
+          <!-- <text>同分僵局！最后一箭定江山</text>
+          <text>10 秒后蓝红双方 决金箭 一箭决胜负</text> -->
+        </view>
+      </ScreenHint>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
@@ -198,4 +216,31 @@ onUnmounted(() => {
 .container {
   width: 100%;
 }
+.round-end-tip {
+  width: 100%;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.round-end-tip > view:nth-child(2) {
+  margin: 15px 0;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.round-end-tip > view:nth-child(2) > text:nth-child(2),
+.round-end-tip > view:nth-child(2) > text:nth-child(4) {
+  color: #fed847;
+  width: 30px;
+  text-align: center;
+  font-size: 30px;
+}
+.round-end-tip > text:nth-child(3),
+.round-end-tip > text:nth-child(4) {
+  color: #fff9;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
 </style>

src/store.js

@@ -11,6 +11,7 @@ const defaultUser = {
 export default defineStore("store", {
   // 状态
   state: () => ({
+    remoteConnect: false,
     user: defaultUser,
     device: {
       deviceId: "",
@@ -28,6 +29,9 @@ export default defineStore("store", {
 
   // 方法
   actions: {
+    updateConnect(connect) {
+      this.remoteConnect = connect;
+    },
     updateUser(user) {
       this.user = { ...defaultUser, ...user };
       const rankInfos = this.config.randInfos || [];

src/websocket.js

@@ -13,19 +13,21 @@ const RECONNECT_CONFIG = {
 /**
  * 建立 WebSocket 连接
  */
-function createWebSocket(token, onMessage) {
+function createWebSocket(token, onUpdate, onMessage) {
   const url = `wss://api.shelingxingqiu.com/socket?authorization=${token}`;
   socket = uni.connectSocket({
     url,
     success: () => {
       console.log("websocket 连接成功");
+      onUpdate(true);
       reconnectCount = 0; // 重置重连次数
     },
   });
 
   // 接收消息
   uni.onSocketMessage((res) => {
-    if (onMessage) onMessage(res.data);
+    const data = JSON.parse(res.data);
+    if (onMessage) onMessage(data.data.updates);
   });
 
   // 错误处理
@@ -36,6 +38,7 @@ function createWebSocket(token, onMessage) {
 
   uni.onSocketClose((result) => {
     console.log("WebSocket 已关闭", result);
+    onUpdate(false);
     stopHeartbeat();
     reconnect(token, onMessage);
   });