日常开发

src/components/ActionConfirmWindow/index.vue

@@ -63,6 +63,11 @@
                 <template v-if="currentGame == 'game_basketball'">玩法：身体左右移动对准篮筐，双手投篮</template>
                 <template v-if="currentGame == 'game_football'">玩法：身体左右移动躲避雪糕筒，踢腿射门</template>
               </div>
+
+              <div class="music"> <el-select v-model="music.id" :popper-append-to-body="false" placeholder="请选择"
+                  @change="changeMusic" clearable>
+                  <el-option v-for="item in music.list" :key="item.id" :label="item.name" :value="item.id" />
+                </el-select></div>
             </div>
           </div>
           <div @click="getExit" class="close"></div>
@@ -73,10 +78,17 @@
 
 </template>
 <script setup lang="ts">
+import useAppStore from '@/store/modules/app';
 import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
 const { proxy } = getCurrentInstance() as any;
-const emit = defineEmits(['confirmExit', 'confirmStart']);
-
+const emit = defineEmits(['confirmExit', 'confirmStart', 'setMusic']);
+//父值
+const props = defineProps({
+  musicId: {
+    type: String,
+    default: ""
+  }
+});
 const data = reactive<any>({
   currentGame: "",
   currentGameArea: [],
@@ -86,15 +98,18 @@ const data = reactive<any>({
   actionText: "",
   timer: null,
   timerNum: null,
+  music: { id: null, list: [] }
 });
 
-const { currentGame, currentGameArea, actionState, areaStateList, lock, actionText, timer, timerNum } = toRefs(data);
+const { currentGame, currentGameArea, actionState, areaStateList, lock, actionText, timer, timerNum, music } = toRefs(data);
 
 
 
 onBeforeMount(() => {
   //初始化语音
   initSpeech();
+  //音乐
+  getMusic();
 })
 
 onMounted(() => {
@@ -285,6 +300,36 @@ const getExit = () => {
   emit('confirmExit', {});
 };
 
+//获取音乐
+const getMusic = async () => {
+  const list: any = useAppStore().getMusic();
+  if (list.length) {
+    music.value.list = list;
+  } else {
+    await proxy?.$http.train.musicList().then((res: any) => {
+      if (res.data.length > 0) {
+        let myList: any = res.data;
+        music.value.list = myList;
+        useAppStore().setMusic(myList);
+      }
+    });
+  }
+};
+
+/**
+ * 选择音乐
+ */
+const changeMusic = (data: any) => {
+  emit('setMusic', data);
+};
+
+/**
+ * 设置音乐
+ */
+const setMusic = (data: any) => {
+  music.value.id = data;
+};
+
 /**
  * 监听全部OK
  */
@@ -317,9 +362,11 @@ watch(
   { deep: true }
 );
 
+
 //暴露给父组件用
 defineExpose({
   getOpen,
+  setMusic,
   getInit
 })
 </script>
@@ -369,7 +416,7 @@ defineExpose({
       display: flex;
       align-items: center;
       padding-top: 2vh;
-      
+
       i {
         width: 3vh;
         height: 3vh;
@@ -496,6 +543,7 @@ defineExpose({
       .picBox {
         width: calc(30vh * (1920 / 1080) * 2);
         height: 25vh;
+        max-width: 100%;
         background-image: url('@/assets/images/game/bg.png');
         background-position: bottom;
         background-repeat: no-repeat;
@@ -512,7 +560,26 @@ defineExpose({
         width: 100%;
         color: #ffffff;
         font-size: 2.8vh;
-        padding-top: 20px;
+        padding: 20px 0;
+      }
+    }
+
+    .music {
+      width: 120px;
+      display: block;
+      cursor: pointer;
+      background-position: left center;
+      background-repeat: no-repeat;
+      background-size: 1.1rem 1.1rem;
+      background-image: url('@/assets/images/common/music.png');
+      padding-left: 1.8rem;
+
+      ::v-deep(.el-select__wrapper) {
+        background: none;
+        color: #ffffff;
+        .el-select__placeholder{
+          color: #ffffff;
+        }
       }
     }
   }

src/views/game/index.vue

@@ -74,7 +74,8 @@
     <div class="continueGame" v-if="resumeGame">举手继续游戏</div>
     <div class="resumeGame" v-if="resumeGame" @click="getResumeGame">继续游戏</div>
     <div class="close close1" v-if="start" @click="getExitGame"></div>
-    <ActionConfirmWindow ref="actionConfirmRef" @confirmExit="getExitGame({ type: 1 })" @confirmStart="getStartGame">
+    <ActionConfirmWindow ref="actionConfirmRef" @confirmExit="getExitGame({ type: 1 })" @confirmStart="getStartGame"
+      @setMusic="setMusic">
     </ActionConfirmWindow>
     <div class="time" v-if="timerNum > 0">
       <div>{{ timerNum }}</div>
@@ -84,6 +85,7 @@
 </template>
 
 <script setup name="GameIndex" lang="ts">
+import useAppStore from '@/store/modules/app';
 import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Grid } from 'swiper/modules';
@@ -120,8 +122,9 @@ const data = reactive<any>({
   resumeGame: false,//游戏结束显示继续游戏
   timer: null,
   timerNum: null,
+  music: { id: null, list: [] }
 });
-const { projectList, wsState, bodyposeState, deviceInfo, currentGame, currentGameArea, start, areaStateList, resumeGame, timer, timerNum } = toRefs(data);
+const { projectList, wsState, bodyposeState, deviceInfo, currentGame, currentGameArea, start, areaStateList, resumeGame, timer, timerNum, music } = toRefs(data);
 
 /**
  * 监听数据变化
@@ -135,6 +138,7 @@ watch(
       return item.gameover;
     })
     if (state) {
+      speckCancel();
       // start.value = false;
       // actionConfirmRef.value.getOpen(currentGame.value, currentGameArea.value);
       resumeGame.value = true;
@@ -259,6 +263,13 @@ const getJump = (data: any) => {
   if (data.exam_name == 'test') {
     router.push({ path: '/game/test' });
   } else {
+    //相同项目切换音乐保留上一次记录
+    if (music.value.id) {
+      actionConfirmRef.value.setMusic(music.value.id);
+    } else {
+      music.value.id = data.music_id;
+      actionConfirmRef.value.setMusic(music.value.id);
+    }
     currentGame.value = data.exam_name;
     currentGameArea.value = data.area_test_id?.split(",") || [];
     actionConfirmRef.value.getOpen(currentGame.value, currentGameArea.value);
@@ -320,6 +331,7 @@ const getStartGame = (data: any) => {
   areaStateList.value = data;
   start.value = true;
   resumeGame.value = false;
+  getPlayMusic();
 };
 
 /**
@@ -327,7 +339,6 @@ const getStartGame = (data: any) => {
  */
 const getResumeGame = () => {
   resumeGame.value = false;
-
   timerNum.value = 5;
   speckText(timerNum.value);
   timer.value = setInterval(() => {
@@ -350,16 +361,59 @@ const getResumeGame = () => {
       if (currentGame.value == 'game_fruit') {
         fruitRef.value.getResumeGame();
       }
+      getPlayMusic();
     }
   }, 1000)
+};
+
+
+/**
+ * 播放音乐
+ */
+const getPlayMusic = async () => {
+  if (music.value.id) {
+    let obj = music.value.list.find((item: any) => {
+      return item.id == music.value.id;
+    });
+    if (obj != undefined) {
+      playMusic(obj.url);
+    }
+  }
+};
 
+/**
+ * 获取音乐
+ */
+const getMusic = async () => {
+  const list: any = useAppStore().getMusic();
+  if (list.length) {
+    music.value.list = list;
+  } else {
+    await proxy?.$http.train.musicList().then((res: any) => {
+      if (res.data.length > 0) {
+        let myList: any = res.data;
+        music.value.list = myList;
+        useAppStore().setMusic(myList);
+      }
+    });
+  }
+};
 
+/**
+ * 弹窗设置的音乐返回上层
+ */
+const setMusic = async (data: any) => {
+  //console.log("data",data)
+  music.value.id = data;
 };
 
 onBeforeMount(async () => {
   //初始化语音
   initSpeech();
+  //初始化WS
   getInit();
+  //音乐
+  getMusic();
 });
 
 onMounted(() => {
@@ -582,7 +636,7 @@ $waiPadding: 6.51rem;
   }
 }
 
-.continueGame{
+.continueGame {
   z-index: 991;
   position: fixed;
   width: 100%;