提交

1

src/components/timerMeter/components/countdown.tsx

@@ -36,7 +36,8 @@ export default defineComponent({
     const init = () => {
       const now = new Date()
       const nowTimeStr = '0000'
-
+      mine.value = 0;
+      second.value = 0;
       for (let i = 0; i < flipObjs.value.length; i++) {
         flipObjs.value[i].value.setFront(nowTimeStr[i])
       }
@@ -107,8 +108,10 @@ export default defineComponent({
       timer.value = setInterval(() => {
         // 获取当前时间
         const lastStr = getSecond(count.value)
-        count.value++
-
+        count.value--
+        if( count.value == 0){
+          onReset()
+        }
         const str = getSecond(count.value)
         for (let i = 0; i < flipObjs.value.length; i++) {
           if (lastStr[i] === str[i]) {
@@ -130,6 +133,7 @@ export default defineComponent({
 
       suspendNum()
       nextTick(() => {
+
         count.value = 0
         init()
       })
@@ -210,19 +214,12 @@ export default defineComponent({
     })
   }
 
-  // watch(()=> count.value,(lastVal:number,val:number)=>{
-  //   console.log('lastVal',lastVal,'val',val)
-  //   mine.value = Math.floor(val / 60)
-  //   second.value = Math.floor(val % 60)
-  //   const lastStr = getSecond(lastVal)
-  //   const str = getSecond(val)
-  //   for (let i = 0; i < flipObjs.value.length; i++) {
-  //     if (lastStr[i] === str[i]) {
-  //       continue
-  //     }
-  //     flipObjs.value[i].value.flipUp(lastStr[i], str[i])
-  //   }
-  // })
+  watch(()=> count.value,(val)=>{
+
+    mine.value = Math.floor(val / 60)
+    second.value = Math.floor(val % 60)
+
+  })
     return () => (
       <div class={styles.timerItemWrap}>
         <div class={styles.timerItemInfo}>
@@ -234,7 +231,7 @@ export default defineComponent({
                 <div class={styles.FlipClock}>
                   <Flipper ref={flipperMinute1} />
                   <Flipper ref={flipperMinute2} />
-                  <div  class={styles.chioseWrap}>
+                  <div  class={styles.chioseWrap} class={[styles.chioseWrap,isPlaying.value ?styles.chioseHidden:'']}>
                     <img src={add} class={styles.add} alt="" onClick={()=>addSecondTimer(60)}/>
                     <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} onUpdate:value={updateMin} v-model:value={mine.value}></NInputNumber>
                     <img src={minus} class={styles.minus} alt="" onClick={()=>minusSecondTimer(60)} />
@@ -252,7 +249,7 @@ export default defineComponent({
                 <div class={styles.FlipClock}>
                   <Flipper ref={flipperSecond1} />
                   <Flipper ref={flipperSecond2} />
-                  <div  class={styles.chioseWrap}>
+                  <div  class={[styles.chioseWrap,isPlaying.value ?styles.chioseHidden:'']}>
                     <img src={add} class={styles.add} alt=""  onClick={()=>addSecondTimer(1)}/>
                     <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} v-model:value={second.value}  onUpdate:value={updateSecond}></NInputNumber>
                     <img src={minus} class={styles.minus} alt="" onClick={()=>minusSecondTimer(1)} />

src/components/timerMeter/index.module.less

@@ -179,4 +179,8 @@
     height: 4px;
     cursor: pointer;
   }
+}
+
+.chioseHidden {
+  visibility: hidden;
 }