更换测距页面

src/components/BowTarget.vue

@@ -25,10 +25,6 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-  tips: {
-    type: String,
-    default: "",
-  },
   scores: {
     type: Array,
     default: () => [],
@@ -183,7 +179,6 @@ const simulShoot = async () => {
     <view v-if="avatar" class="footer">
       <image :src="avatar" mode="widthFix" />
     </view>
-    <text v-if="tips">{{ tips }}</text>
     <view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
       模拟射箭
     </view>
@@ -263,13 +258,6 @@ const simulShoot = async () => {
   border-radius: 50%;
   border: 1px solid #fff;
 }
-.container > text {
-  width: 100%;
-  color: #fed847;
-  text-align: center;
-  line-height: 40px;
-  display: block;
-}
 .simul {
   position: absolute;
   bottom: 20px;

src/components/ShootProgress.vue

@@ -56,11 +56,10 @@ watch(
   (newVal, oldVal) => {
     if (newVal === false) {
       if (timer.value) clearInterval(timer.value);
-      remain.value = props.total;
     }
     if (!oldVal && newVal === true) {
+      remain.value = props.total;
       setTimeout(() => {
-        remain.value = props.total;
         timer.value = setInterval(() => {
           if (remain.value > 0) {
             remain.value--;

src/components/StartCountdown.vue

@@ -38,7 +38,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <view class="container" :style="{ top: `calc(50% - ${isIos ? 59 : 64}px)` }">
+  <view class="container" :style="{ top: `calc(50% - ${isIos ? 56 : 64}px)` }">
     <view class="number pump-in" v-if="count === 3">3</view>
     <view class="number pump-in" v-if="count === 2">2</view>
     <view class="number pump-in" v-if="count === 1">1</view>

src/components/TestDistance.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import Guide from "@/components/Guide.vue";
+import BowPower from "@/components/BowPower.vue";
+import Avatar from "@/components/Avatar.vue";
+import { simulShootAPI } from "@/apis";
+import { checkConnection } from "@/util";
+import { MESSAGETYPES } from "@/constants";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user, device } = storeToRefs(store);
+const props = defineProps({
+  guide: {
+    type: Boolean,
+    default: true,
+  },
+});
+const arrow = ref({});
+const power = ref(0);
+const distance = ref(0);
+const debugInfo = ref("");
+
+async function onReceiveMessage(messages = []) {
+  messages.forEach((msg) => {
+    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+      arrow.value = msg.target;
+      power.value = msg.target.battery;
+      distance.value = msg.target.dst / 100;
+      debugInfo.value = msg.target;
+    }
+  });
+}
+
+const simulShoot = async () => {
+  if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
+};
+
+onMounted(() => {
+  checkConnection();
+  uni.$on("socket-inbox", onReceiveMessage);
+});
+
+onUnmounted(() => {
+  uni.$off("socket-inbox", onReceiveMessage);
+});
+</script>
+
+<template>
+  <view class="container">
+    <Guide v-if="guide">
+      <view
+        :style="{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingRight: '10px',
+        }"
+      >
+        <view :style="{ display: 'flex', flexDirection: 'column' }">
+          <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
+          <text>请确保射击距离只有5米</text>
+        </view>
+        <BowPower :power="power" />
+      </view>
+    </Guide>
+    <image
+      class="text-bg"
+      src="https://api.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
+      mode="widthFix"
+    />
+    <view class="warnning-text" v-if="distance > 0">
+      <text>当前距离{{ distance }}米</text>
+      <text v-if="distance >= 5">已达到距离要求</text>
+      <text v-else>请调整站位</text>
+    </view>
+    <view class="debug-text">{{ debugInfo }}</view>
+    <view>
+      <Avatar :src="user.avatar" :size="35" />
+      <view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
+        模拟射箭
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+}
+.text-bg {
+  width: 100%;
+}
+.warnning-text {
+  position: fixed;
+  color: #fed847;
+  font-size: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  left: calc(50% - 27vw);
+  top: 30%;
+}
+.warnning-text > text {
+  width: 54vw;
+  text-align: center;
+}
+.container > view:last-child {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  margin-top: -27vw;
+}
+.debug-text {
+  position: fixed;
+  left: calc(50% - 45vw);
+  top: 66%;
+  color: #fff;
+  font-size: 14px;
+}
+</style>