@wines/countdown v1.5.0

@wines/countdown

CountDown 倒计时

用于展现倒计时。

使用指南

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">CountDown</view>
		<view class="page__desc">倒计时</view>
	</view>
	<view class="page__bd">
		<wux-cell-group>
			<wux-cell hover-class="none">
				<wux-input label="Mobile" placeholder="Please input mobile" />
				<view slot="footer" class="vcode-btn" bindtap="vcode">{{ c2 || '获取验证码' }}</view>
			</wux-cell>
		</wux-cell-group>
		<view class="text-center">
			<view class="countdown">{{ c1 }}</view>
			<view class="countdown">{{ c3 }}</view>
		</view>
		<view class="button-sp-area">
			<wux-button wux-class="btn" type="light" bind:click="stop">Stop</wux-button>
			<wux-button wux-class="btn" type="light" bind:click="start">Start</wux-button>
			<wux-button wux-class="btn" type="light" bind:click="update">Update</wux-button>
		</view>
	</view>
</view>

import './index.less';
import { Countdown } from '@wines/countdown';
import { PageData, PageCustom } from '@wines/core';

Page<PageData, PageCustom>({
  data: {},
  onLoad() {
    const setData = this.setData.bind(this);
    this.c1 = new Countdown({
      date: 'June 7, 2087 15:03:25',
      render(date) {
        const years = this.leadingZeros(date.years, 4) + ' 年 ';
        const days = this.leadingZeros(date.days, 3) + ' 天 ';
        const hours = this.leadingZeros(date.hours, 2) + ' 时 ';
        const min = this.leadingZeros(date.min, 2) + ' 分 ';
        const sec = this.leadingZeros(date.sec, 2) + ' 秒 ';
        setData({
          c1: years + days + hours + min + sec,
        });
      },
    });
    this.c3 = new Countdown({
      date: +new Date().getTime() + 60000 * 20,
      render(date) {
        const min = this.leadingZeros(date.min, 2) + ' 分 ';
        const sec = this.leadingZeros(date.sec, 2) + ' 秒 ';
        setData({
          c3: min + sec,
        });
      },
    });
  },
  vcode() {
    const setData = this.setData.bind(this);
    if (this.c2 && this.c2.isRuning()) return;
    this.c2 = new Countdown({
      date: +new Date() + 60000,
      onEnd() {
        setData({
          c2: '重新获取验证码',
        });
      },
      render(date) {
        const sec = this.leadingZeros(date.sec, 2) + ' 秒 ';
        if (date.sec !== 0) {
          setData({
            c2: sec,
          });
        }
      },
    });
  },
  stop() {
    this.c3.stop();
  },
  start() {
    this.c3.start();
  },
  update() {
    this.c3.update(+new Date() + 60000 * 30);
  },
});

API