更换测距页面

2025-07-05 14:52:41 +08:00
parent 054bf2ef21
commit 1c70471959
10 changed files with 224 additions and 179 deletions
--- a/src/components/TestDistance.vue
+++ b/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>