<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="CountDown倒计时">
<!-- 基础用法 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
<zk-count-down :time="time" />
</zk-theme>
<!-- 显示天数 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="显示天数" align="center" />
<zk-count-down :time="3 * 24 * 60 * 60 * 1000" :show-days="true" />
</zk-theme>
<!-- 显示毫秒 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="显示毫秒" align="center" />
<zk-count-down :time="time" :show-milliseconds="true" />
</zk-theme>
<!-- 自定义样式 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义样式" align="center" />
<zk-count-down :time="time" :item-style="itemStyle" :colon-style="colonStyle" />
</zk-theme>
<!-- 手动控制 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="手动控制" align="center" />
<zk-count-down ref="countDown" :time="3000" :auto-start="false" @change="onChange" @finish="onFinish" />
<view class="button-group">
<view class="group-item">
<zk-button text="开始" type="primary" size="small" @click="start" margin="0 12rpx" />
</view>
<view class="group-item">
<zk-button text="暂停" type="primary" size="small" @click="pause" margin="0 12rpx" />
</view>
<view class="group-item">
<zk-button text="重置" type="primary" size="small" @click="reset" margin="0 12rpx" />
</view>
</view>
</zk-theme>
<!-- 自定义格式 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义格式" align="center" />
<zk-count-down :time="time" :show-days="true" :show-colon="false" />
</zk-theme>
<!-- 插槽用法 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="插槽用法" align="center" />
<zk-count-down :time="time">
<template #default="{ hours, minutes, seconds }">
<view class="custom-time">
<zk-text type="primary" :size="36" weight="bold" :text="hours" />
<zk-text type="third" :size="28" margin="0 8rpx" text="时" />
<zk-text type="primary" :size="36" weight="bold" :text="minutes" />
<zk-text type="third" :size="28" margin="0 8rpx" text="分" />
<zk-text type="primary" :size="36" weight="bold" :text="seconds" />
<zk-text type="third" :size="28" margin="0 8rpx" text="秒" />
</view>
</template>
</zk-count-down>
</zk-theme>
<!-- 卡片样式 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="卡片样式" align="center" />
<zk-count-down :time="time">
<template #default="{ hours, minutes, seconds }">
<view class="custom-time custom-time--card">
<view class="custom-item custom-item--card">
<zk-text type="primary" :size="36" weight="bold" :text="hours" />
</view>
<zk-text type="third" :size="28" margin="0 8rpx" text=":" />
<view class="custom-item custom-item--card">
<zk-text type="primary" :size="36" weight="bold" :text="minutes" />
</view>
<zk-text type="third" :size="28" margin="0 8rpx" text=":" />
<view class="custom-item custom-item--card">
<zk-text type="primary" :size="36" weight="bold" :text="seconds" />
</view>
</view>
</template>
</zk-count-down>
</zk-theme>
</zk-theme>
</template>
<script>
export default {
data() {
return {
time: 30 * 60 * 1000,
itemStyle: {
backgroundColor: '#165DFF',
color: '#ffffff',
fontSize: '32rpx',
width: '60rpx',
height: '60rpx',
lineHeight: '60rpx',
borderRadius: '8rpx'
},
colonStyle: {
color: '#165DFF',
fontSize: '32rpx',
paddingLeft: '12rpx',
paddingRight: '12rpx'
}
}
},
methods: {
// 开始倒计时
start() {
this.$refs.countDown.start()
},
// 暂停倒计时
pause() {
this.$refs.countDown.pause()
},
// 重置倒计时
reset() {
this.$refs.countDown.reset()
},
// 倒计时变化事件
onChange(timeData) {
console.log("timeData: " + JSON.stringify(timeData));
},
// 倒计时结束事件
onFinish() {
console.log('倒计时结束')
uni.showToast({
title: '倒计时结束',
icon: 'none'
})
}
}
}
</script>
<style lang="scss">
.button-group {
margin-top: 24rpx;
flex-direction: row;
align-items: center;
display: flex;
}
.group-item {
margin-left: 20rpx;
margin-right: 20rpx;
}
.custom-time {
flex-direction: row;
align-items: center;
justify-content: center;
display: flex;
&--card {
padding: 8rpx;
background-color: #F2F3F5;
border-radius: 8rpx;
}
}
.custom-item {
&--card {
min-width: 60rpx;
height: 60rpx;
background-color: #ffffff;
border-radius: 6rpx;
align-items: center;
justify-content: center;
}
}
/* #ifdef APP-NVUE */
.button-group {
width: 662rpx;
}
/* #endif */
</style>