fix(countdown): 修改实现逻辑适配v13和四端

packages/nutui-harmony/build-profile.json5

@@ -1,33 +1,35 @@
 {
-  app: {
-    signingConfigs: [],
-    products: [
+  "app": {
+    "signingConfigs": [],
+    "products": [
       {
-        name: 'default',
-        signingConfig: 'default',
-        compatibleSdkVersion: '4.1.0(11)',
-        runtimeOS: 'HarmonyOS',
-      },
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "4.1.0(11)",
+        "runtimeOS": "HarmonyOS"
+      }
     ],
-    buildModeSet: [
+    "buildModeSet": [
       {
-        name: 'debug',
+        "name": "debug"
       },
       {
-        name: 'release',
-      },
-    ],
+        "name": "release"
+      }
+    ]
   },
-  modules: [
+  "modules": [
     {
-      name: 'default',
-      srcPath: './entry',
-      targets: [
+      "name": "default",
+      "srcPath": "./entry",
+      "targets": [
         {
-          name: 'default',
-          applyToProducts: ['default'],
-        },
-      ],
-    },
-  ],
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
 }

src/packages/countdown/countdown.harmony.css

@@ -1,5 +1,57 @@
 .nut-countdown {
   display: flex;
-  color: #1A1A1A;
-  font-size: 14px;
+  flex-direction: row;
+  align-items: center;
+  color: #ff0f23;
+  font-size: 10px;
+}
+.nut-countdown-number-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-unit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-number {
+  min-width: 20px;
+  padding: 0 1px;
+  border-radius: 2px;
+  margin: 0 2px;
+}
+.nut-countdown-number-primary {
+  min-width: 20px;
+  padding: 0 1px;
+  border-radius: 2px;
+  margin: 0 2px;
+}
+.nut-countdown-number {
+  border: 1px solid #ffebf1;
+  background-color: transparent;
+  color: #ff0f23;
+  text-align: center;
+}
+.nut-countdown-number-primary {
+  border: 1px solid #ff0f23;
+  background-color: #ff0f23;
+  color: #ffffff;
+}
+.nut-countdown-unit {
+  color: #ff0f23;
 }

src/packages/countdown/countdown.scss

@@ -1,5 +1,38 @@
 .nut-countdown {
   display: $countdown-display;
+  flex-direction: row;
+  align-items: center;
   color: $countdown-color;
   font-size: $countdown-font-size;
+  &-number-primary,
+  &-number,
+  &-unit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $countdown-height;
+    font-weight: $coutdown-font-weight;
+    font-size: $countdown-font-size;
+  }
+  &-number,
+  &-number-primary {
+    min-width: $countdown-width;
+    padding: $countdown-number-padding;
+    border-radius: $countdown-number-border-radius;
+    margin: $countdown-number-margin;
+  }
+  &-number {
+    border: 1px solid $countdown-number-border-color;
+    background-color: $countdown-number-background-color;
+    color: $countdown-number-color;
+    text-align: center;
+  }
+  &-number-primary {
+    border: 1px solid $countdown-number-primary-border-color;
+    background-color: $countdown-number-primary-background-color;
+    color: $countdown-number-primary-color;
+  }
+  &-unit {
+    color: $color-primary;
+  }
 }

src/packages/countdown/countdown.taro.tsx

@@ -7,12 +7,20 @@ import React, {
   useImperativeHandle,
 } from 'react'
 import { View } from '@tarojs/components'
-import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { padZero } from '@/utils/pad-zero'
-import { harmonyAndRn } from '@/utils/platform-taro'
+import { harmonyAndRn, web } from '@/utils/platform-taro'
 
+export interface CountDownTimeProps {
+  d: number
+  h: number
+  m: number
+  s: number
+  ms: number
+}
+export type CountDownType = 'default' | 'primary'
 export interface CountDownProps extends BasicComponent {
+  type: CountDownType
   paused: boolean
   startTime: number
   endTime: number
@@ -31,6 +39,7 @@ export interface CountDownProps extends BasicComponent {
 
 const defaultProps = {
   ...ComponentDefaults,
+  type: 'default',
   paused: false,
   startTime: Date.now(),
   endTime: Date.now(),
@@ -46,8 +55,8 @@ const InternalCountDown: ForwardRefRenderFunction<
   unknown,
   Partial<CountDownProps>
 > = (props, ref) => {
-  const { locale } = useConfig()
   const {
+    type,
     paused,
     startTime,
     endTime,
@@ -94,7 +103,7 @@ const InternalCountDown: ForwardRefRenderFunction<
       stateRef.current.handleEndTime = Date.now() + Number(remainingTime)
     } else {
       stateRef.current.handleEndTime = endTime
-      if (!harmonyAndRn()) {
+      if (web()) {
         stateRef.current.diffTime = Date.now() - getTimeStamp(startTime) // 时间差
       }
     }
@@ -127,7 +136,7 @@ const InternalCountDown: ForwardRefRenderFunction<
     })
   }
 
-  // 将倒计时剩余时间格式化   参数： t  时间戳  type custom 自定义类型
+  // 将倒计时剩余时间格式化   参数：t时间戳 type custom 自定义类型
   const formatRemainTime = (t: number, type?: string) => {
     const ts = t
     const rest = {
@@ -152,13 +161,7 @@ const InternalCountDown: ForwardRefRenderFunction<
     return type === 'custom' ? rest : parseFormat({ ...rest })
   }
 
-  const parseFormat = (time: {
-    d: number
-    h: number
-    m: number
-    s: number
-    ms: number
-  }) => {
+  const parseFormat = (time: CountDownTimeProps) => {
     const { d } = time
     let { h, m, s, ms } = time
     let formatCache = format
@@ -198,8 +201,16 @@ const InternalCountDown: ForwardRefRenderFunction<
         formatCache = formatCache.replace('SS', msC.slice(0, 1))
       }
     }
+    formatCache = formatCache.replace(
+      /(\d+)/g,
+      type === 'primary'
+        ? `<View class="nut-countdown-number-primary">$1</View>`
+        : `<View class="nut-countdown-number">$1</View>`
+    )
+
     return formatCache
   }
+
   // 暂定
   const pause = () => {
     cancelAnimationFrame(stateRef.current.timer)
@@ -286,25 +297,87 @@ const InternalCountDown: ForwardRefRenderFunction<
     return formatRemainTime(stateRef.current.restTime)
   })()
 
+  const getUnit = (unit: string) => {
+    const formatArr = format.split(/(DD|HH|mm|ss|S)/)
+    const index = formatArr.indexOf(unit)
+    return index > -1 ? formatArr[index + 1] : ':'
+  }
+
+  const renderTimeItem = (
+    formatUnit: string,
+    time: number | string,
+    unit = ''
+  ) => {
+    return (
+      <>
+        {format.includes(formatUnit) ? (
+          <>
+            <View
+              className={`${classPrefix}-number${type === 'primary' ? '-primary' : ''}`}
+            >
+              {padZero(time)}
+            </View>
+            {unit ? (
+              <View className={`${classPrefix}-unit`}>{getUnit(unit)}</View>
+            ) : null}
+          </>
+        ) : null}
+      </>
+    )
+  }
+
+  const renderTaroTime = () => {
+    const formatCache = formatRemainTime(stateRef.current.restTime, 'custom')
+    const { d, h, m, s, ms } = formatCache as CountDownTimeProps
+    const digit = format.match(/S/g)?.length
+    // format可能是DD天HH时mm分SSS秒或者DD天HH时mm分S秒或是DD：HH：mm：ss
+
+    return (
+      <>
+        {renderTimeItem('DD', d, 'DD')}
+        {renderTimeItem('HH', h, 'HH')}
+        {renderTimeItem('mm', m, 'mm')}
+        {renderTimeItem('ss', s)}
+        {(format.includes('S') || getUnit('ss') !== ':') && (
+          <>
+            <View className={`${classPrefix}-unit`}>{getUnit('ss')}</View>
+          </>
+        )}
+        {renderTimeItem(
+          'S',
+          padZero(ms, 3)
+            .toString()
+            .slice(0, digit || 2)
+        )}
+      </>
+    )
+  }
+
   return (
-    <View
-      className={`${classPrefix} ${className}`}
-      style={{ ...style }}
-      {...rest}
-    >
+    <>
       {children || (
-        <View
-          className={`${classPrefix}-block`}
-          // eslint-disable-next-line react/no-danger
-          // TODO:RN和鸿蒙暂时不支持dangerouslySetInnerHTML
-          //   dangerouslySetInnerHTML={{
-          //     __html: `${renderTime}`,
-          //   }}
-        >
-          {renderTime as any}
-        </View>
+        <>
+          {!harmonyAndRn() ? (
+            <View
+              className={`${classPrefix} ${className}`}
+              style={{ ...style }}
+              {...rest}
+              dangerouslySetInnerHTML={{
+                __html: `${renderTime}`,
+              }}
+            />
+          ) : (
+            <View
+              className={`${classPrefix} ${className}`}
+              style={{ ...style }}
+              {...rest}
+            >
+              {renderTaroTime()}
+            </View>
+          )}
+        </>
       )}
-    </View>
+    </>
   )
 }