feat: 好友约战选择20、40厘米靶

src/App.vue

@@ -1,13 +1,28 @@
 <script setup>
-import { watch } from "vue";
-import { onShow, onHide } from "@dcloudio/uni-app";
+	import {
+		watch
+	} from "vue";
+	import {
+		onShow,
+		onHide
+	} from "@dcloudio/uni-app";
 	import websocket from "@/websocket";
-import { getDeviceBatteryAPI } from "@/apis";
+	import {
+		getDeviceBatteryAPI
+	} from "@/apis";
 	import useStore from "@/store";
-import { storeToRefs } from "pinia";
+	import {
+		storeToRefs
+	} from "pinia";
+	import audioManager from "./audioManager";
 	const store = useStore();
-const { user } = storeToRefs(store);
-const { updateUser, updateOnline } = store;
+	const {
+		user
+	} = storeToRefs(store);
+	const {
+		updateUser,
+		updateOnline
+	} = store;
 
 	watch(
 		() => user.value.id,
@@ -16,15 +31,12 @@ watch(
 				`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
 			);
 			if (newVal && token) {
-      websocket.createWebSocket(token, (content) => {
-        uni.$emit("socket-inbox", content);
-      });
+				websocket.createWebSocket(token, onShootWsMsg);
 			}
 			if (!newVal) {
 				websocket.closeWebSocket();
 			}
-  },
-  {
+		}, {
 			deep: false, // 如果 user 是一个对象或数组，建议开启
 			immediate: false, // 若想在初始化时立即执行一次回调，可开启。
 		}
@@ -39,6 +51,17 @@ async function emitUpdateOnline() {
 		updateOnline(data.online);
 	}
 
+	function onDeviceShoot() {
+		audioManager.play("射箭声音")
+	}
+
+	function onShootWsMsg(content) {
+		if(content.type === 'shoot-trigger'){
+			onDeviceShoot()
+		}
+		uni.$emit("socket-inbox", content);
+	}
+
 	onShow(() => {
 		uni.$on("update-user", emitUpdateUser);
 		uni.$on("update-online", emitUpdateOnline);
@@ -47,9 +70,7 @@ onShow(() => {
 		);
 		if (user.value.id && token) {
 			console.log("回到前台，重新连接 websocket");
-    websocket.createWebSocket(token, (content) => {
-      uni.$emit("socket-inbox", content);
-    });
+			websocket.createWebSocket(token, onShootWsMsg);
 		}
 	});
 
@@ -93,9 +114,11 @@ button::after {
 		flex-direction: column;
 		font-size: 28rpx;
 	}
+
 	.guide-tips>text:first-child {
 		color: #fed847;
 	}
+
 	.guide-tips>text:nth-child(2) {
 		font-size: 24rpx;
 	}
@@ -105,13 +128,16 @@ button::after {
 			transform: translateY(20px);
 			opacity: 0;
 		}
+
 		30% {
 			transform: translateY(0);
 			opacity: 1;
 		}
+
 		80% {
 			opacity: 1;
 		}
+
 		100% {
 			opacity: 0;
 		}
@@ -126,6 +152,7 @@ button::after {
 			transform: translateY(0);
 			opacity: 1;
 		}
+
 		to {
 			transform: translateY(20px);
 			opacity: 0;
@@ -141,6 +168,7 @@ button::after {
 			transform: scale(0);
 			opacity: 0;
 		}
+
 		to {
 			transform: scale(1);
 			opacity: 1;
@@ -157,6 +185,7 @@ button::after {
 			transform: scale(1);
 			opacity: 1;
 		}
+
 		to {
 			transform: scale(0);
 			opacity: 0;
@@ -172,6 +201,7 @@ button::after {
 		from {
 			transform: rotate(0deg);
 		}
+
 		to {
 			transform: rotate(360deg);
 		}
@@ -181,6 +211,7 @@ button::after {
 		from {
 			transform: scale(2);
 		}
+
 		to {
 			transform: scale(1);
 		}
@@ -212,6 +243,7 @@ button::after {
 		align-items: center;
 		justify-content: center;
 	}
+
 	.user-row {
 		display: flex;
 		align-items: center;
@@ -220,6 +252,7 @@ button::after {
 		padding-top: 7px;
 		position: relative;
 	}
+
 	.half-time-tip {
 		width: 100%;
 		display: flex;
@@ -227,28 +260,31 @@ button::after {
 		justify-content: center;
 		align-items: center;
 	}
+
 	.half-time-tip>text:last-child {
 		margin-top: 20px;
 		color: #fff9;
 	}
+
 	.see-more {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		margin-top: 20rpx;
 	}
+
 	.see-more>text {
 		color: #39a8ff;
 		font-size: 13px;
 	}
+
 	.see-more>image {
 		width: 15px;
 	}
 
 	@font-face {
 		font-family: "DINCondensed";
-  src: url("https://static.shelingxingqiu.com/font/DIN-Condensed-Bold-2.ttf")
-    format("truetype");
+		src: url("https://static.shelingxingqiu.com/font/DIN-Condensed-Bold-2.ttf") format("truetype");
 		font-weight: 700;
 		font-style: normal;
 		font-display: swap;

src/apis.js

@@ -6,8 +6,8 @@ try {
 
   switch (envVersion) {
     case "develop": // 开发版
-      // BASE_URL = "http://192.168.1.30:8000/api/shoot";
-      BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
+      BASE_URL = "http://localhost:8000/api/shoot";
+      // BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
       break;
     case "trial": // 体验版
       BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
@@ -196,10 +196,11 @@ export const getMyDevicesAPI = () => {
   return request("GET", "/user/device/getBindings");
 };
 
-export const createPractiseAPI = (arrows, time) => {
+export const createPractiseAPI = (arrows, time, target) => {
   return request("POST", "/user/practice/create", {
     shootNumber: arrows,
     shootTime: time,
+    targetType: target*20,
   });
 };
 
@@ -215,10 +216,11 @@ export const getPractiseAPI = async (id) => {
   return request("GET", `/user/practice/get?id=${id}`);
 };
 
-export const createRoomAPI = (gameType, teamSize) => {
+export const createRoomAPI = (gameType, teamSize, targetType) => {
   return request("POST", "/user/createroom", {
     gameType,
     teamSize,
+    targetType,
   });
 };
 

src/audioManager.js

@@ -40,26 +40,26 @@ export const audioFils = {
   未上靶:
     "https://static.shelingxingqiu.com/attachment/2025-11-12/de6n45o3tsm1v4unam.mp3",
   "1环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin1aq7gxjih5l.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/1.mp3",
   "2环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin64tdgx2s4at.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/2.mp3",
   "3环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinlmf87vt8z65.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/3.mp3",
   "4环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinniv97sx0q9u.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/4.mp3",
   "5环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin7j01kknpb7k.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/5.mp3",
   "6环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin4syy1015rtq.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/6.mp3",
   "7环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin3iz3dvmjdai.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/7.mp3",
   "8环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinnjd42lhpfiw.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/8.mp3",
   "9环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxin69nj1xh7yfz.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/9.mp3",
   "10环":
-    "https://static.shelingxingqiu.com/attachment/2025-09-17/dcutxinnvsx0tt7ksa.mp3",
-  X环: "https://static.shelingxingqiu.com/attachment/2026-02-09/dga8puwekpe2gmtbu4.mp3",
+    "https://static.shelingxingqiu.com/shootaudio/v3/10.mp3",
+  X环: "https://static.shelingxingqiu.com/shootaudio/v4/v4/X%E7%8E%AF.mp3",
   向上调整:
     "https://static.shelingxingqiu.com/attachment/2025-11-12/de6ellf5pfvu3l8dhr.mp3",
   向右上调整:
@@ -80,6 +80,10 @@ export const audioFils = {
     "https://static.shelingxingqiu.com/attachment/2025-11-13/de7kzzllq0futwynso.mp3",
   练习开始:
     "https://static.shelingxingqiu.com/attachment/2025-11-14/de88w0lmmt43nnfmoi.mp3",
+  射箭声音:
+	"https://static.shelingxingqiu.com/shootaudio/v4/v4/%E7%AE%AD%E9%A3%9E%E8%A1%8C.mp3",
+  命中:
+	"https://static.shelingxingqiu.com/shootaudio/%E5%91%BD%E4%B8%AD.mp3"
 };
 
 // 版本控制日志函数

src/components/CreateRoom.vue

@@ -18,6 +18,7 @@ const props = defineProps({
 });
 
 const battleMode = ref(1);
+const targetMode = ref(1);
 const loading = ref(false);
 const roomNumber = ref("");
 
@@ -35,13 +36,14 @@ const createRoom = debounce(async () => {
   try {
     const result = await createRoomAPI(
       battleMode.value === 2 ? 2 : 1,
-      battleMode.value === 2 ? 10 : size
+      battleMode.value === 2 ? 10 : size,
+        targetMode.value*20,
     );
     if (result.number) {
       props.onConfirm();
       await joinRoomAPI(result.number);
       uni.navigateTo({
-        url: "/pages/battle-room?roomNumber=" + result.number,
+        url: "/pages/battle-room?roomNumber=" + result.number + "&target=" + targetMode.value,
       });
     }
   } catch (error) {
@@ -53,7 +55,11 @@ const createRoom = debounce(async () => {
 </script>
 <template>
   <view class="container">
-    <image src="../static/choose-battle-mode.png" mode="widthFix" />
+    <view class="target-options-header">
+      <view class="target-options-header-line-left"></view>
+      <image class="target-options-header-title-img" src="../static/choose-battle-mode.png" mode="widthFix" />
+      <view class="target-options-header-line-right"></view>
+    </view>
     <view class="create-options">
       <view
         :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 1 }"
@@ -80,6 +86,25 @@ const createRoom = debounce(async () => {
         <text>乱斗模式（3-10人）</text>
       </view>
     </view>
+    <view class="target-options-header">
+      <view class="target-options-header-line-left"></view>
+      <view class="target-options-header-title">选择靶纸</view>
+      <view class="target-options-header-line-right"></view>
+    </view>
+    <view class="target-options">
+      <view
+        :class="{ 'battle-btn': true, 'battle-choosen': targetMode === 1 }"
+        @click="() => (targetMode = 1)"
+      >
+        <text>20厘米全环靶</text>
+      </view>
+      <view
+        :class="{ 'battle-btn': true, 'battle-choosen': targetMode === 2 }"
+        @click="() => (targetMode = 2)"
+      >
+        <text>40厘米全环靶</text>
+      </view>
+    </view>
     <SButton :onClick="createRoom">创建房间</SButton>
   </view>
 </template>
@@ -91,6 +116,7 @@ const createRoom = debounce(async () => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-top: 44rpx;
 }
 .container > image:first-child {
   width: 45%;
@@ -105,6 +131,50 @@ const createRoom = debounce(async () => {
   justify-content: center;
   margin-bottom: 15px;
 }
+.target-options-header{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24rpx;
+}
+.target-options-header-title-img{
+  width: 196rpx;
+  height: 40rpx;
+}
+.target-options-header-title{
+  width: 112rpx;
+  height: 40rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 400;
+  font-size: 28rpx;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+  color: #FFEFBA;
+  margin: 0 18rpx;
+}
+.target-options-header-line-left{
+  width: 214rpx;
+  height: 0rpx;
+  border-radius: 0rpx 0rpx 0rpx 0rpx;
+  border: 1rpx solid;
+  border-image: linear-gradient(90deg, rgba(133, 119, 96, 0), rgba(133, 119, 96, 1)) 1 1;
+}
+.target-options-header-line-right{
+  width: 214rpx;
+  height: 0rpx;
+  border-radius: 0rpx 0rpx 0rpx 0rpx;
+  border: 1rpx solid;
+  border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
+}
+.target-options {
+  width: 100%;
+  padding: 0 10px;
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-bottom: 15px;
+}
 .battle-btn {
   width: 45%;
   height: 55px;

src/components/SModal.vue

@@ -88,6 +88,7 @@ watch(
   transform: translateY(100%);
   transition: all 0.3s ease;
   position: relative;
+  background-color: #372E1D;
 }
 .modal-content > image:first-child {
   width: 100%;

src/components/TargetPicker.vue

@@ -0,0 +1,197 @@
+<script setup>
+import { ref, watch } from "vue";
+import SButton from "@/components/SButton.vue";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  onConfirm: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const selectedTarget = ref(2);
+const showContainer = ref(false);
+const showContent = ref(false);
+
+watch(
+  () => props.show,
+  (newValue) => {
+    if (newValue) {
+      showContainer.value = true;
+      setTimeout(() => {
+        showContent.value = true;
+      }, 100);
+    } else {
+      showContent.value = false;
+      setTimeout(() => {
+        showContainer.value = false;
+      }, 100);
+    }
+  },
+  {}
+);
+
+const handleConfirm = () => {
+  props.onConfirm(selectedTarget.value);
+  props.onClose();
+};
+</script>
+
+<template>
+  <view
+    class="container"
+    v-if="showContainer"
+    :class="{ 'container-show': showContent }"
+    @click="onClose"
+  >
+    <view
+      class="modal-content"
+      :class="{ 'modal-show': showContent }"
+      @click.stop=""
+    >
+      <view class="header">
+        <view class="header-title">
+          <view class="header-title-line-left"></view>
+          <text>选择靶型</text>
+          <view class="header-title-line-right"></view>
+        </view>
+        <view class="close-btn" @click="onClose">
+          <image src="../static/close-yellow.png" mode="widthFix" />
+        </view>
+      </view>
+      <view class="target-options">
+        <view
+          :class="{ 'target-btn': true, 'target-choosen': selectedTarget === 1 }"
+          @click="() => (selectedTarget = 1)"
+        >
+          <text>20厘米全环靶</text>
+        </view>
+        <view style="width: 30rpx"></view>
+        <view
+          :class="{ 'target-btn': true, 'target-choosen': selectedTarget === 2 }"
+          @click="() => (selectedTarget = 2)"
+        >
+          <text>40厘米全环靶</text>
+        </view>
+      </view>
+      <SButton width="694rpx" :onClick="handleConfirm">确定</SButton>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #00000099;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  opacity: 0;
+  transition: all 0.3s ease;
+  z-index: 999;
+}
+.container-show {
+  opacity: 1;
+}
+.modal-content {
+  width: 100%;
+  transform: translateY(100%);
+  transition: all 0.3s ease;
+  background: url("https://static.shelingxingqiu.com/attachment/2025-12-04/dep11770wzxg6o2alo.png")
+    no-repeat center top;
+  background-size: 100% auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding-bottom: 68rpx;
+  padding-top: 44rpx;
+}
+.modal-show {
+  transform: translateY(0%);
+}
+.header {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-bottom: 44rpx;
+}
+.header-title{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.header-title text{
+  width: 196rpx;
+  height: 40rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 400;
+  font-size: 28rpx;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+  color: #FFEFBA;
+}
+.header-title-line-left{
+  width: 214rpx;
+  height: 0rpx;
+  border-radius: 0rpx 0rpx 0rpx 0rpx;
+  border: 1rpx solid;
+  border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
+}
+.header-title-line-right{
+  width: 214rpx;
+  height: 0rpx;
+  border-radius: 0rpx 0rpx 0rpx 0rpx;
+  border: 1rpx solid;
+  border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
+ }
+.close-btn {
+  position: absolute;
+  right: 0;
+  top: -10px;
+}
+.close-btn > image {
+  width: 40px;
+  height: 40px;
+}
+.target-options {
+  width: 750rpx;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 38rpx;
+}
+.target-btn {
+  width: 332rpx;
+  height: 92rpx;
+  text-align: center;
+  border-radius: 10px;
+  border: 2rpx solid #fff3;
+  box-sizing: border-box;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.target-choosen {
+  color: #fed847;
+  border: 4rpx solid #fed847;
+}
+</style>

src/pages/friend-battle.vue

@@ -169,7 +169,7 @@ onLoad(async (options) => {
       <SModal
         :show="showModal"
         :onClose="() => (showModal = false)"
-        height="520rpx"
+        height="716rpx"
       >
         <view v-if="warnning" class="warnning">
           {{ warnning }}

src/pages/practise-one.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
-import { onShow } from "@dcloudio/uni-app";
+import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import BowTarget from "@/components/BowTarget.vue";
@@ -35,6 +35,13 @@ const practiseResult = ref({});
 const practiseId = ref("");
 const showGuide = ref(false);
 const tips = ref("");
+const targetType = ref(1);
+
+onLoad((options) => {
+  if (options.target) {
+    targetType.value = Number(options.target);
+  }
+});
 
 const onReady = async () => {
   await startPractiseAPI();
@@ -84,7 +91,7 @@ onMounted(async () => {
   });
   uni.$on("socket-inbox", onReceiveMessage);
   uni.$on("share-image", onClickShare);
-  const result = await createPractiseAPI(total, 120);
+  const result = await createPractiseAPI(total, 120, targetType.value);
   if (result) practiseId.value = result.id;
 });
 

src/pages/practise-two.vue

@@ -24,6 +24,7 @@ import { MESSAGETYPESV2 } from "@/constants";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
+import {onLoad} from "@dcloudio/uni-app";
 const store = useStore();
 const { user } = storeToRefs(store);
 
@@ -33,6 +34,13 @@ const total = 36;
 const practiseResult = ref({});
 const practiseId = ref("");
 const showGuide = ref(false);
+const targetType = ref(1);
+
+onLoad((options) => {
+  if (options.target) {
+    targetType.value = Number(options.target);
+  }
+});
 
 const onReady = async () => {
   await startPractiseAPI();
@@ -97,7 +105,7 @@ onMounted(async () => {
   });
   uni.$on("socket-inbox", onReceiveMessage);
   uni.$on("share-image", onClickShare);
-  const result = await createPractiseAPI(total, 360);
+  const result = await createPractiseAPI(total, 360, targetType.value);
   if (result) practiseId.value = result.id;
 });
 

src/pages/practise.vue

@@ -4,6 +4,7 @@ import { onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import Guide from "@/components/Guide.vue";
 import Avatar from "@/components/Avatar.vue";
+import TargetPicker from "@/components/TargetPicker.vue";
 import { getPractiseDataAPI } from "@/apis";
 import { canEenter } from "@/util";
 
@@ -12,12 +13,20 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, device, online } = storeToRefs(store);
 const data = ref({});
+const showTargetPicker = ref(false);
+const pendingPractiseType = ref("");
 
 const goPractise = async (type) => {
   if (!canEenter(user.value, device.value, online.value)) return;
-  // await uni.$checkAudio();
+  pendingPractiseType.value = type;
+  showTargetPicker.value = true;
+};
+
+const handleTargetConfirm = (target) => {
+  showTargetPicker.value = false;
+  const type = pendingPractiseType.value;
   uni.navigateTo({
-    url: `/pages/practise-${type}`,
+    url: `/pages/practise-${type}?target=${target}`,
   });
 };
 
@@ -88,6 +97,11 @@ onShow(async () => {
         />
       </view>
     </view>
+    <TargetPicker
+      :show="showTargetPicker"
+      :onClose="() => (showTargetPicker = false)"
+      :onConfirm="handleTargetConfirm"
+    />
   </Container>
 </template>
 

src/websocket.js

@@ -14,8 +14,8 @@ function createWebSocket(token, onMessage) {
 
     switch (envVersion) {
       case "develop": // 开发版
-        // url = "ws://192.168.1.30:8000/socket";
-        url = "wss://apitest.shelingxingqiu.com/socket";
+        url = "ws://localhost:8000/socket";
+        // url = "wss://apitest.shelingxingqiu.com/socket";
         break;
       case "trial": // 体验版
         url = "wss://apitest.shelingxingqiu.com/socket";