提交

1

src/components/timerMeter/components/countdown.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, nextTick, onMounted } from 'vue';
+import { defineComponent, ref, watch, nextTick, onMounted,computed } from 'vue';
 import styles from '../index.module.less';
 import { NTabs, NTabPane, NSpace, NButton, NImage, NInput, NInputNumber } from 'naive-ui';
 import { useRoute } from 'vue-router';
@@ -142,10 +142,89 @@ export default defineComponent({
       })
 
     })
+   const addSecondTimer = (num:number)=>{
 
+    nextTick(()=>{
+      const lastStr = getSecond(count.value)
+      count.value+=num
+      count.value >3599?count.value = 3599: count.value
+      const str = getSecond(count.value)
+      for (let i = 0; i < flipObjs.value.length; i++) {
+        if (lastStr[i] === str[i]) {
+          continue
+        }
+        flipObjs.value[i].value.flipDown(lastStr[i], str[i])
+      }
+      mine.value = Math.floor(count.value / 60)
+      second.value = Math.floor(count.value % 60)
+    })
+
+   }
+  const minusSecondTimer = (num:number)=>{
+    nextTick(()=>{
+      const lastStr = getSecond(count.value)
+      count.value -=num
+      count.value <0?count.value = 0: count.value
+      const str = getSecond(count.value)
+      for (let i = 0; i < flipObjs.value.length; i++) {
+        if (lastStr[i] === str[i]) {
+          continue
+        }
+        flipObjs.value[i].value.flipUp(lastStr[i], str[i])
+      }
+       mine.value = Math.floor(count.value / 60)
+      second.value = Math.floor(count.value % 60)
+    })
+
+  }
+
+  const updateMin = ()=>{
+    nextTick(()=>{
+      console.log(mine.value, count.value)
+      const lastStr = getSecond(count.value)
+      count.value = mine.value*60+second.value
+      const str = getSecond(count.value)
+      console.log(str,lastStr)
+          for (let i = 0; i < flipObjs.value.length; i++) {
+        if (lastStr[i] === str[i]) {
+          continue
+        }
+        flipObjs.value[i].value.flipUp(lastStr[i], str[i])
+      }
+    })
+
+
+  }
+  const updateSecond=()=>{
+    nextTick(()=>{
+      console.log(mine.value)
+      const lastStr = getSecond( count.value)
+      count.value = mine.value*60+second.value
+      const str = getSecond(count.value)
+          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,(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])
+  //   }
+  // })
     return () => (
       <div class={styles.timerItemWrap}>
-        dao
         <div class={styles.timerItemInfo}>
           <div class={styles.timerItemInset}>
             <div class={styles.timerItemInfoTop}>
@@ -156,16 +235,17 @@ export default defineComponent({
                   <Flipper ref={flipperMinute1} />
                   <Flipper ref={flipperMinute2} />
                   <div  class={styles.chioseWrap}>
-                    <img src={add} class={styles.add} alt="" />
-                    <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} v-model:value={mine.value}></NInputNumber>
-                    <img src={minus} class={styles.minus} alt="" />
+                    <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)} />
                   </div>
                 </div>
               </div>
               <div class={styles.timerItemTopCore}>
-                <h4 class={styles.dotTop}></h4>
+
                 <div class={styles.dot}></div>
                 <div class={styles.dot}></div>
+                <h4 class={styles.dotBtm}></h4>
               </div>
               <div class={styles.timerItemTopCore}>
                 <h4> 秒 </h4>
@@ -173,9 +253,9 @@ export default defineComponent({
                   <Flipper ref={flipperSecond1} />
                   <Flipper ref={flipperSecond2} />
                   <div  class={styles.chioseWrap}>
-                    <img src={add} class={styles.add} alt="" />
-                    <NInputNumber class={styles.countInput} min={0} max={59} show-button={false} v-model:value={second.value}></NInputNumber>
-                    <img src={minus} class={styles.minus} alt="" />
+                    <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)} />
                   </div>
                 </div>
               </div>

src/components/timerMeter/index.module.less

@@ -147,6 +147,12 @@
   }
 }
 
+.dotBtm {
+  width: 100%;
+
+  height: 16px;
+}
+
 .chioseWrap {
   margin: 14px 0 26px;
   width: 174px;
@@ -163,10 +169,14 @@
   .add {
     width: 16px;
     height: 16px;
+    cursor: pointer;
   }
 
+
+
   .minus {
     width: 16px;
     height: 4px;
+    cursor: pointer;
   }
 }

src/components/timerMeter/index.tsx

@@ -7,7 +7,7 @@ import Positive from './components/positive';
 export default defineComponent({
   name: 'data-module',
   setup() {
-    const activeTab = ref('positive');  //countdown
+    const activeTab = ref('countdown');  //countdown
     const route = useRoute();
     // onMounted(() => {
     // })