提交

1

src/components/timerMeter/components/countdown.tsx

@@ -10,6 +10,7 @@ import suspend from '../images/suspend.png'
 import add from '../images/add.png'
 import minus from '../images/minus.png'
 import { getSecond } from '@/utils/index'
+import soundWav from '../timer.wav';
 export default defineComponent({
   name: 'timer-countdown',
   setup() {
@@ -42,7 +43,7 @@ export default defineComponent({
         flipObjs.value[i].value.setFront(nowTimeStr[i])
       }
     }
-
+    const soundVIdeo = new Audio(soundWav)
     const formatDate = (date: Date, dateFormat: string) => {
       /* 单独格式化年份，根据y的字符数量输出年份
      * 例如：yyyy => 2019
@@ -108,6 +109,9 @@ export default defineComponent({
       timer.value = setInterval(() => {
         // 获取当前时间
         const lastStr = getSecond(count.value)
+        if(count.value == 4){
+          soundVIdeo.play()
+        }
         if( count.value <= 0){
           onReset()
           return
@@ -126,6 +130,8 @@ export default defineComponent({
 
     const suspendNum = () => {
       isPlaying.value = false;
+      soundVIdeo.currentTime = 0;
+      soundVIdeo.pause();
       if (timer.value) {
         clearInterval(timer.value)
         timer.value = null
@@ -135,6 +141,8 @@ export default defineComponent({
 
       suspendNum()
       count.value = 0
+      soundVIdeo.currentTime = 0;
+      soundVIdeo.pause();
       setTimeout(() => {
         init()
       }, 600)

src/views/home/index.module.less

@@ -361,6 +361,14 @@
 }
 
 
+.beatImage {
+  cursor: pointer;
+
+  img {
+    width: 698px;
+  }
+}
+
 .homeInfoRight {
   display: flex;
   margin-left: 20px;

src/views/home/index.tsx

@@ -49,6 +49,7 @@ import { setTabsCaches } from '/src/hooks/use-async';
 import HomeGuide from '/src/custom-plugins/guide-page/home-guide';
 import TimerMeter from '/src/components/timerMeter';
 import { vaildUrl } from '/src/utils/urlUtils';
+import toneImage from  '@/components/layout/images/toneImage.png';
 export const formatDateToDay = () => {
   const hours = dayjs().hour();
   if (hours < 12) {
@@ -542,7 +543,7 @@ export default defineComponent({
                 <p class={styles.toolMemo}>提升效率，练习好节奏</p>
                 <NButton class={styles.btn1}>节拍器</NButton>
               </div>
-              <div class={[styles.toolItem, styles.item2]}>
+              <div class={[styles.toolItem, styles.item2]} onClick={()=>{showModalTone.value= true}}>
                 <img src={t2} />
                 <p class={styles.toolMemo}>精准调音，一劳永逸</p>
                 <NButton class={styles.btn2}>调音器</NButton>
@@ -714,6 +715,18 @@ export default defineComponent({
           </div>
         </NModal>
 
+<NModal v-model:show={showModalTone.value} style={{ width: '687px' }}>
+<div
+  onClick={() => {
+    showModalTone.value = false;
+  }}>
+  <NImage
+    src={toneImage}
+    previewDisabled
+    class={styles.beatImage}></NImage>
+</div>
+</NModal>
+
         {forms.showGuide ? <HomeGuide></HomeGuide> : null}
       </div>