mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-06 23:25:06 +08:00
多模块重构 12：修改项目名字，按照新的规则
This commit is contained in:
YunaiV
@ -0,0 +1,24 @@
|
||||
export default {
|
||||
props: {
|
||||
// 倒计时时长，单位ms
|
||||
time: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.countDown.time
|
||||
},
|
||||
// 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
|
||||
format: {
|
||||
type: String,
|
||||
default: uni.$u.props.countDown.format
|
||||
},
|
||||
// 是否自动开始倒计时
|
||||
autoStart: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.countDown.autoStart
|
||||
},
|
||||
// 是否展示毫秒倒计时
|
||||
millisecond: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.countDown.millisecond
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view class="u-count-down">
|
||||
<slot>
|
||||
<text class="u-count-down__text">{{ formattedTime }}</text>
|
||||
</slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js';
|
||||
import {
|
||||
isSameSecond,
|
||||
parseFormat,
|
||||
parseTimeData
|
||||
} from './utils';
|
||||
/**
|
||||
* u-count-down 倒计时
|
||||
* @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
|
||||
* @tutorial https://uviewui.com/components/countDown.html
|
||||
* @property {String | Number} time 倒计时时长，单位ms （默认 0 ）
|
||||
* @property {String} format 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 （默认 'HH:mm:ss' ）
|
||||
* @property {Boolean} autoStart 是否自动开始倒计时 （默认 true ）
|
||||
* @property {Boolean} millisecond 是否展示毫秒倒计时 （默认 false ）
|
||||
* @event {Function} finish 倒计时结束时触发
|
||||
* @event {Function} change 倒计时变化时触发
|
||||
* @event {Function} start 开始倒计时
|
||||
* @event {Function} pause 暂停倒计时
|
||||
* @event {Function} reset 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时
|
||||
* @example <u-count-down :time="time"></u-count-down>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-count-down',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
// 各单位(天，时，分等)剩余时间
|
||||
timeData: parseTimeData(0),
|
||||
// 格式化后的时间，如"03:23:21"
|
||||
formattedTime: '0',
|
||||
// 倒计时是否正在进行中
|
||||
runing: false,
|
||||
endTime: 0, // 结束的毫秒时间戳
|
||||
remainTime: 0, // 剩余的毫秒时间
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
time(n) {
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.reset()
|
||||
},
|
||||
// 开始倒计时
|
||||
start() {
|
||||
if (this.runing) return
|
||||
// 标识为进行中
|
||||
this.runing = true
|
||||
// 结束时间戳 = 此刻时间戳 + 剩余的时间
|
||||
this.endTime = Date.now() + this.remainTime
|
||||
this.toTick()
|
||||
},
|
||||
// 根据是否展示毫秒，执行不同操作函数
|
||||
toTick() {
|
||||
if (this.millisecond) {
|
||||
this.microTick()
|
||||
} else {
|
||||
this.macroTick()
|
||||
}
|
||||
},
|
||||
macroTick() {
|
||||
this.clearTimeout()
|
||||
// 每隔一定时间，更新一遍定时器的值
|
||||
// 同时此定时器的作用也能带来毫秒级的更新
|
||||
this.timer = setTimeout(() => {
|
||||
// 获取剩余时间
|
||||
const remain = this.getRemainTime()
|
||||
// 重设剩余时间
|
||||
if (!isSameSecond(remain, this.remainTime) || remain === 0) {
|
||||
this.setRemainTime(remain)
|
||||
}
|
||||
// 如果剩余时间不为0，则继续检查更新倒计时
|
||||
if (this.remainTime !== 0) {
|
||||
this.macroTick()
|
||||
}
|
||||
}, 30)
|
||||
},
|
||||
microTick() {
|
||||
this.clearTimeout()
|
||||
this.timer = setTimeout(() => {
|
||||
this.setRemainTime(this.getRemainTime())
|
||||
if (this.remainTime !== 0) {
|
||||
this.microTick()
|
||||
}
|
||||
}, 30)
|
||||
},
|
||||
// 获取剩余的时间
|
||||
getRemainTime() {
|
||||
// 取最大值，防止出现小于0的剩余时间值
|
||||
return Math.max(this.endTime - Date.now(), 0)
|
||||
},
|
||||
// 设置剩余的时间
|
||||
setRemainTime(remain) {
|
||||
this.remainTime = remain
|
||||
// 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
|
||||
const timeData = parseTimeData(remain)
|
||||
// 如果有传入slot内容，则发出change事件
|
||||
if(this.$slots.default || this.$slots.$default) {
|
||||
this.$emit('change', timeData)
|
||||
}
|
||||
// 得出格式化后的时间
|
||||
this.formattedTime = parseFormat(this.format, timeData)
|
||||
// 如果时间已到，停止倒计时
|
||||
if (remain <= 0) {
|
||||
this.pause()
|
||||
this.$emit('finish')
|
||||
}
|
||||
},
|
||||
// 重置倒计时
|
||||
reset() {
|
||||
this.pause()
|
||||
this.remainTime = this.time
|
||||
this.setRemainTime(this.remainTime)
|
||||
if (this.autoStart) {
|
||||
this.start()
|
||||
}
|
||||
},
|
||||
// 暂停倒计时
|
||||
pause() {
|
||||
this.runing = false;
|
||||
this.clearTimeout()
|
||||
},
|
||||
// 清空定时器
|
||||
clearTimeout() {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearTimeout()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
$u-count-down-text-color:$u-content-color !default;
|
||||
$u-count-down-text-font-size:15px !default;
|
||||
$u-count-down-text-line-height:22px !default;
|
||||
.u-count-down {
|
||||
&__text {
|
||||
color:$u-count-down-text-color;
|
||||
font-size:$u-count-down-text-font-size;
|
||||
line-height:$u-count-down-text-line-height;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,62 @@
|
||||
// 补0，如1 -> 01
|
||||
function padZero(num, targetLength = 2) {
|
||||
let str = `${num}`
|
||||
while (str.length < targetLength) {
|
||||
str = `0${str}`
|
||||
}
|
||||
return str
|
||||
}
|
||||
const SECOND = 1000
|
||||
const MINUTE = 60 * SECOND
|
||||
const HOUR = 60 * MINUTE
|
||||
const DAY = 24 * HOUR
|
||||
export function parseTimeData(time) {
|
||||
const days = Math.floor(time / DAY)
|
||||
const hours = Math.floor((time % DAY) / HOUR)
|
||||
const minutes = Math.floor((time % HOUR) / MINUTE)
|
||||
const seconds = Math.floor((time % MINUTE) / SECOND)
|
||||
const milliseconds = Math.floor(time % SECOND)
|
||||
return {
|
||||
days,
|
||||
hours,
|
||||
minutes,
|
||||
seconds,
|
||||
milliseconds
|
||||
}
|
||||
}
|
||||
export function parseFormat(format, timeData) {
|
||||
let {
|
||||
days,
|
||||
hours,
|
||||
minutes,
|
||||
seconds,
|
||||
milliseconds
|
||||
} = timeData
|
||||
// 如果格式化字符串中不存在DD(天)，则将天的时间转为小时中去
|
||||
if (format.indexOf('DD') === -1) {
|
||||
hours += days * 24
|
||||
} else {
|
||||
// 对天补0
|
||||
format = format.replace('DD', padZero(days))
|
||||
}
|
||||
// 其他同理于DD的格式化处理方式
|
||||
if (format.indexOf('HH') === -1) {
|
||||
minutes += hours * 60
|
||||
} else {
|
||||
format = format.replace('HH', padZero(hours))
|
||||
}
|
||||
if (format.indexOf('mm') === -1) {
|
||||
seconds += minutes * 60
|
||||
} else {
|
||||
format = format.replace('mm', padZero(minutes))
|
||||
}
|
||||
if (format.indexOf('ss') === -1) {
|
||||
milliseconds += seconds * 1000
|
||||
} else {
|
||||
format = format.replace('ss', padZero(seconds))
|
||||
}
|
||||
return format.replace('SSS', padZero(milliseconds, 3))
|
||||
}
|
||||
export function isSameSecond(time1, time2) {
|
||||
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
|
||||
}
|
||||
Reference in New Issue
Block a user