tnt group 3 anni fa
parent
commit
73ce3a8551

+ 2 - 0
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
   // 设置翻盘前后数据

+ 1 - 1
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,

+ 10 - 58
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(() => {