From f17c22793b723789cd88598642c6abc663ae228e Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Thu, 29 Sep 2022 19:25:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Flipper/index.vue              |  2 +
 .../Decorates/Mores/CountDown/config.ts       |  2 +-
 .../Decorates/Mores/CountDown/index.vue       | 68 +++----------------
 3 files changed, 13 insertions(+), 59 deletions(-)

diff --git a/src/components/Flipper/index.vue b/src/components/Flipper/index.vue
index 63f5b55f..fcee3cdd 100644
--- a/src/components/Flipper/index.vue
+++ b/src/components/Flipper/index.vue
@@ -56,6 +56,8 @@ const backTextFromData = ref(props.backText)
 
 // 翻牌
 const flip = (front: string | number, back: string | number) => {
+  if (!back) back = +front - 1
+  console.log('flip:', { front, back })
   // 如果处于翻转中，则不执行
   if (isFlipping.value) return
   // 设置翻盘前后数据
diff --git a/src/packages/components/Decorates/Mores/CountDown/config.ts b/src/packages/components/Decorates/Mores/CountDown/config.ts
index 118797ff..94b2e383 100644
--- a/src/packages/components/Decorates/Mores/CountDown/config.ts
+++ b/src/packages/components/Decorates/Mores/CountDown/config.ts
@@ -16,7 +16,7 @@ export const FontWeightObject = {
 
 export const option = {
   flipperBgColor: '#ee6600FF',
-  flipperTextColor: '#336600FF',
+  flipperTextColor: '#FFFFFFFF',
   flipperWidth: 60,
   flipperHeight: 100,
   flipperRadius: 10,
diff --git a/src/packages/components/Decorates/Mores/CountDown/index.vue b/src/packages/components/Decorates/Mores/CountDown/index.vue
index 3a7d0b04..e98c5bf4 100644
--- a/src/packages/components/Decorates/Mores/CountDown/index.vue
+++ b/src/packages/components/Decorates/Mores/CountDown/index.vue
@@ -3,7 +3,9 @@
     <n-countdown :duration="50000" :active="true" />
     <n-space :gap="10">
       <flipper
-        :front-text="9"
+        flip-type="down"
+        :front-text="0"
+        :back-text="COUNT"
         :width="flipperWidth"
         :height="flipperHeight"
         :front-color="flipperTextColor"
@@ -12,61 +14,6 @@
         :duration="flipperSpeed"
         ref="flipperRef"
       />
-      <flipper
-        :front-text="9"
-        :back-text="8"
-        :width="flipperWidth"
-        :height="flipperHeight"
-        :front-color="flipperTextColor"
-        :back-color="flipperBgColor"
-        :radius="flipperRadius"
-        :duration="flipperSpeed"
-        ref="flipperRef2"
-      />
-      <flipper
-        :front-text="8"
-        :back-text="7"
-        :width="flipperWidth"
-        :height="flipperHeight"
-        :front-color="flipperTextColor"
-        :back-color="flipperBgColor"
-        :radius="flipperRadius"
-        :duration="flipperSpeed"
-        ref="flipperRef3"
-      />
-      <flipper
-        :front-text="7"
-        :back-text="7"
-        :width="flipperWidth"
-        :height="flipperHeight"
-        :front-color="flipperTextColor"
-        :back-color="flipperBgColor"
-        :radius="flipperRadius"
-        :duration="flipperSpeed"
-        ref="flipperRef4"
-      />
-      <flipper
-        :front-text="6"
-        :back-text="5"
-        :width="flipperWidth"
-        :height="flipperHeight"
-        :front-color="flipperTextColor"
-        :back-color="flipperBgColor"
-        :radius="flipperRadius"
-        :duration="flipperSpeed"
-        ref="flipperRef5"
-      />
-      <flipper
-        :front-text="5"
-        :back-text="4"
-        :width="flipperWidth"
-        :height="flipperHeight"
-        :front-color="flipperTextColor"
-        :back-color="flipperBgColor"
-        :radius="flipperRadius"
-        :duration="flipperSpeed"
-        ref="flipperRef6"
-      />
     </n-space>
   </div>
 </template>
@@ -112,10 +59,15 @@ let COUNT = 9
 let interval = 0
 onMounted(() => {
   const interval = window.setInterval(() => {
+    if (COUNT <= 1) {
+      window.clearInterval(interval)
+      return
+    }
     COUNT--
-    if (COUNT <= 1) window.clearInterval(interval)
     const flipperCON: any = flipperRef.value
-    flipperCON?.flipDown(COUNT, COUNT - 1)
+    console.log(flipperCON)
+    flipperCON?.flip(COUNT, COUNT - 1)
+    console.log('onMounted:window.setInterval', COUNT)
   }, 1000)
 })
 onUnmounted(() => {