---
title: WKCountDown 倒计时
group:
  title: 展示组件
  path: /show/
---

## 何时使用

- 需要发送验证码时
- 需要显示活动开始倒计时

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import { SECOND, MINUTE, HOUR, DAY } from '@wakeapp/utils';
import { WKCountDown, View } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import api from '@wakeapp/api';

const CountDownPage = () => {
  const date = Date.now();
  const timeStr = date + 3 * DAY + 2 * MINUTE;
  const timeStr2 = date + 3 * DAY + 2 * HOUR;
  const timestamp = date + 10000;
  const timeStr3 = date + 1000 * 90;

  const onFinish = () => {
    api.showToast({
      title: '商品开抢',
      icon: 'none',
    });
  };

  const custom = {
    height: '100rpx',
    fontSize: '60rpx',
    borderRadius: '10rpx',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
  };

  const title = {
    fontSize: '40rpx',
    marginTop: '30rpx',
    marginLeft: '30rpx',
  };

  const countDown = {
    marginTop: '30rpx',
    marginLeft: '30rpx',
  };

  return (
    <PageWrapper>
      <View>
        <View style={title}>基础用法</View>
        <WKCountDown style={countDown} futureTime={timestamp} onFinish={onFinish} />
        <View style={title}>剩余时间模式（毫秒）</View>
        <WKCountDown style={countDown} futureTime={10000} isRemainTime onFinish={onFinish} />
        <View style={title}>自定义格式</View>
        <WKCountDown
          style={countDown}
          separateData={{ dayUnit: '天', hourUnit: '时', minuteUnit: '分', secondUnit: '秒' }}
          futureTime={timeStr}
        />
        <View style={title}>自定义样式</View>
        <WKCountDown style={countDown} futureTime={timeStr2} itemStyle={{ backgroundColor: 'orange' }} />
        <View style={title}>自定义显示内容</View>
        <WKCountDown
          style={countDown}
          futureTime={timeStr3}
          renderContent={(data: { day: string; hour: string; minute: string; second: string }) => {
            return (
              <View style={custom}>
                {data.day !== '00' && (
                  <>
                    <View>{data.day}</View>
                    <View>天</View>
                  </>
                )}
                {data.hour !== '00' && (
                  <>
                    <View>{data.hour}</View>
                    <View>时</View>
                  </>
                )}
                {data.minute !== '00' && (
                  <>
                    <View>{data.minute}</View>
                    <View>分</View>
                  </>
                )}
                <View>{data.second}</View>
                <View>秒</View>
              </View>
            );
          }}
        />
        <View className="title">发送验证码时</View>
        <WKCountDown
          style={countDown}
          futureTime={timeStr3}
          renderContent={(data: { day: string; hour: string; minute: string; second: string }) => {
            return (
              <View style={custom}>
                <View>{parseInt(data.minute) * 60 + parseInt(data.second)}</View>
                <View>秒后重新发送</View>
              </View>
            );
          }}
        />
      </View>
    </PageWrapper>
  );
};

export default CountDownPage;
```

<API src='@wakeapp/components/WKCountDown/index.d.ts'></API>
