You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
8.9 KiB
318 lines
8.9 KiB
<template> |
|
<view class="u-countdown"> |
|
<view class="u-countdown-item" :style="[itemStyle]" v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"> |
|
<view class="u-countdown-time" :style="[letterStyle]"> |
|
{{ d }} |
|
</view> |
|
</view> |
|
<view |
|
class="u-countdown-colon" |
|
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}" |
|
v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))" |
|
> |
|
{{ separator == 'colon' ? ':' : '天' }} |
|
</view> |
|
<view class="u-countdown-item" :style="[itemStyle]" v-if="showHours"> |
|
<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}"> |
|
{{ h }} |
|
</view> |
|
</view> |
|
<view |
|
class="u-countdown-colon" |
|
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}" |
|
v-if="showHours" |
|
> |
|
{{ separator == 'colon' ? ':' : '时' }} |
|
</view> |
|
<view class="u-countdown-item" :style="[itemStyle]" v-if="showMinutes"> |
|
<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}"> |
|
{{ i }} |
|
</view> |
|
</view> |
|
<view |
|
class="u-countdown-colon" |
|
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}" |
|
v-if="showMinutes" |
|
> |
|
{{ separator == 'colon' ? ':' : '分' }} |
|
</view> |
|
<view class="u-countdown-item" :style="[itemStyle]" v-if="showSeconds"> |
|
<view class="u-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color}"> |
|
{{ s }} |
|
</view> |
|
</view> |
|
<view |
|
class="u-countdown-colon" |
|
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}" |
|
v-if="showSeconds && separator == 'zh'" |
|
> |
|
秒 |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
/** |
|
* countDown 倒计时 |
|
* @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。 |
|
* @tutorial https://www.uviewui.com/components/countDown.html |
|
* @property {String Number} timestamp 倒计时，单位为秒 |
|
* @property {Boolean} autoplay 是否自动开始倒计时，如果为false，需手动调用开始方法。见官网说明（默认true） |
|
* @property {String} separator 分隔符，colon为英文冒号，zh为中文（默认colon） |
|
* @property {String Number} separator-size 分隔符的字体大小，单位rpx（默认30） |
|
* @property {String} separator-color 分隔符的颜色（默认#303133） |
|
* @property {String Number} font-size 倒计时字体大小，单位rpx（默认30） |
|
* @property {Boolean} show-border 是否显示倒计时数字的边框（默认false） |
|
* @property {Boolean} hide-zero-day 当"天"的部分为0时，隐藏该字段 （默认true） |
|
* @property {String} border-color 数字边框的颜色（默认#303133） |
|
* @property {String} bg-color 倒计时数字的背景颜色（默认#ffffff） |
|
* @property {String} color 倒计时数字的颜色（默认#303133） |
|
* @property {String} height 数字高度值(宽度等同此值)，设置边框时看情况是否需要设置此值，单位rpx（默认auto） |
|
* @property {Boolean} show-days 是否显示倒计时的"天"部分（默认true） |
|
* @property {Boolean} show-hours 是否显示倒计时的"时"部分（默认true） |
|
* @property {Boolean} show-minutes 是否显示倒计时的"分"部分（默认true） |
|
* @property {Boolean} show-seconds 是否显示倒计时的"秒"部分（默认true） |
|
* @event {Function} end 倒计时结束 |
|
* @event {Function} change 每秒触发一次，回调为当前剩余的倒计秒数 |
|
* @example <u-count-down ref="uCountDown" :timestamp="86400" :autoplay="false"></u-count-down> |
|
*/ |
|
export default { |
|
name: 'u-count-down', |
|
props: { |
|
// 倒计时的时间，秒为单位 |
|
timestamp: { |
|
type: [Number, String], |
|
default: 0 |
|
}, |
|
// 是否自动开始倒计时 |
|
autoplay: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 用英文冒号(colon)或者中文(zh)当做分隔符，false的时候为中文，如："11:22"或"11时22秒" |
|
separator: { |
|
type: String, |
|
default: 'colon' |
|
}, |
|
// 分隔符的大小，单位rpx |
|
separatorSize: { |
|
type: [Number, String], |
|
default: 30 |
|
}, |
|
// 分隔符颜色 |
|
separatorColor: { |
|
type: String, |
|
default: "#303133" |
|
}, |
|
// 字体颜色 |
|
color: { |
|
type: String, |
|
default: '#303133' |
|
}, |
|
// 字体大小，单位rpx |
|
fontSize: { |
|
type: [Number, String], |
|
default: 30 |
|
}, |
|
// 背景颜色 |
|
bgColor: { |
|
type: String, |
|
default: '#fff' |
|
}, |
|
// 数字框高度，单位rpx |
|
height: { |
|
type: [Number, String], |
|
default: 'auto' |
|
}, |
|
// 是否显示数字框 |
|
showBorder: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
// 边框颜色 |
|
borderColor: { |
|
type: String, |
|
default: '#303133' |
|
}, |
|
// 是否显示秒 |
|
showSeconds: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 是否显示分钟 |
|
showMinutes: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 是否显示小时 |
|
showHours: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 是否显示“天” |
|
showDays: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
// 当"天"的部分为0时，不显示 |
|
hideZeroDay: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
watch: { |
|
// 监听时间戳的变化 |
|
timestamp(newVal, oldVal) { |
|
// 如果倒计时间发生变化，清除定时器，重新开始倒计时 |
|
this.clearTimer(); |
|
this.start(); |
|
} |
|
}, |
|
data() { |
|
return { |
|
d: '00', // 天的默认值 |
|
h: '00', // 小时的默认值 |
|
i: '00', // 分钟的默认值 |
|
s: '00', // 秒的默认值 |
|
timer: null ,// 定时器 |
|
seconds: 0, // 记录不停倒计过程中变化的秒数 |
|
}; |
|
}, |
|
computed: { |
|
// 倒计时item的样式，item为分别的时分秒部分的数字 |
|
itemStyle() { |
|
let style = {}; |
|
if(this.height) { |
|
style.height = this.height + 'rpx'; |
|
style.width = this.height + 'rpx'; |
|
} |
|
if(this.showBorder) { |
|
style.borderStyle = 'solid'; |
|
style.borderColor = this.borderColor; |
|
style.borderWidth = '1px'; |
|
} |
|
if(this.bgColor) { |
|
style.backgroundColor = this.bgColor; |
|
} |
|
return style; |
|
}, |
|
// 倒计时数字的样式 |
|
letterStyle() { |
|
let style = {}; |
|
if(this.fontSize) style.fontSize = this.fontSize + 'rpx'; |
|
if(this.color) style.color = this.color; |
|
return style; |
|
} |
|
}, |
|
mounted() { |
|
// 如果自动倒计时 |
|
this.autoplay && this.timestamp && this.start(); |
|
}, |
|
methods: { |
|
// 倒计时 |
|
start() { |
|
// 避免可能出现的倒计时重叠情况 |
|
this.clearTimer(); |
|
if (this.timestamp <= 0) return; |
|
this.seconds = Number(this.timestamp); |
|
this.formatTime(this.seconds); |
|
this.timer = setInterval(() => { |
|
this.seconds--; |
|
// 发出change事件 |
|
this.$emit('change', this.seconds); |
|
if (this.seconds < 0) { |
|
return this.end(); |
|
} |
|
this.formatTime(this.seconds); |
|
}, 1000); |
|
}, |
|
// 格式化时间 |
|
formatTime(seconds) { |
|
// 小于等于0的话，结束倒计时 |
|
seconds <= 0 && this.end(); |
|
let [day, hour, minute, second] = [0, 0, 0, 0]; |
|
day = Math.floor(seconds / (60 * 60 * 24)); |
|
// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中 |
|
// hour为给后面计算秒和分等用的(基于显示天的前提下计算) |
|
hour = Math.floor(seconds / (60 * 60)) - day * 24; |
|
// showHour为需要显示的小时 |
|
let showHour = null; |
|
if(this.showDays) { |
|
showHour = hour; |
|
} else { |
|
// 如果不显示天数，将“天”部分的时间折算到小时中去 |
|
showHour = Math.floor(seconds / (60 * 60)); |
|
} |
|
minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60; |
|
second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60; |
|
// 如果小于10，在前面补上一个"0" |
|
showHour = showHour < 10 ? '0' + showHour : showHour; |
|
minute = minute < 10 ? '0' + minute : minute; |
|
second = second < 10 ? '0' + second : second; |
|
day = day < 10 ? '0' + day : day; |
|
this.d = day; |
|
this.h = showHour; |
|
this.i = minute; |
|
this.s = second; |
|
}, |
|
// 停止倒计时 |
|
end() { |
|
this.clearTimer(); |
|
this.$emit('end', {}); |
|
}, |
|
// 清除定时器 |
|
clearTimer() { |
|
if(this.timer) { |
|
// 清除定时器 |
|
clearInterval(this.timer); |
|
this.timer = null; |
|
} |
|
} |
|
}, |
|
beforeDestroy() { |
|
clearInterval(this.timer); |
|
this.timer = null; |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
@import "../../libs/css/style.components.scss"; |
|
|
|
.u-countdown { |
|
/* #ifndef APP-NVUE */ |
|
display: inline-flex; |
|
/* #endif */ |
|
align-items: center; |
|
} |
|
|
|
.u-countdown-item { |
|
@include vue-flex; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 2rpx; |
|
border-radius: 6rpx; |
|
white-space: nowrap; |
|
transform: translateZ(0); |
|
} |
|
|
|
.u-countdown-time { |
|
margin: 0; |
|
padding: 0; |
|
line-height: 1; |
|
} |
|
|
|
.u-countdown-colon { |
|
@include vue-flex; |
|
justify-content: center; |
|
padding: 0 5rpx; |
|
line-height: 1; |
|
align-items: center; |
|
padding-bottom: 4rpx; |
|
} |
|
|
|
.u-countdown-scale { |
|
transform: scale(0.9); |
|
transform-origin: center center; |
|
} |
|
</style>
|
|
|