uview-ultra-plus 1.0.0

package/uview-ultra/components/up-count-down/props.js

@@ -0,0 +1,26 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 倒计时时长，单位ms
+        time: {
+            type: [String, Number],
+            default: () => defProps.countDown.time
+        },
+        // 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
+        format: {
+            type: String,
+            default: () => defProps.countDown.format
+        },
+        // 是否自动开始倒计时
+        autoStart: {
+            type: Boolean,
+            default: () => defProps.countDown.autoStart
+        },
+        // 是否展示毫秒倒计时
+        millisecond: {
+            type: Boolean,
+            default: () => defProps.countDown.millisecond
+        }
+    }
+})

package/uview-ultra/components/up-count-down/props.uts

@@ -0,0 +1,37 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-11-06 12:20:08
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-11-06 12:20:08
+ * @FilePath     : /uview-ultra/libs/config/props/countDown
+ */
+import { defineMixin } from '../../libs/vue'
+import defProps from './countDown.uts'
+let crtProp = defProps['countDown'] as UTSJSONObject
+
+export const propsCountDown = defineMixin({
+    props: {
+        // 倒计时时长，单位ms
+        time: {
+            type: [String, Number],
+            default: crtProp['time']
+        },
+        // 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
+        format: {
+            type: String,
+            default: crtProp['format']
+        },
+        // 是否自动开始倒计时
+        autoStart: {
+            type: Boolean,
+            default: crtProp['autoStart']
+        },
+        // 是否展示毫秒倒计时
+        millisecond: {
+            type: Boolean,
+            default: crtProp['millisecond']
+        }
+    }
+})

package/uview-ultra/components/up-count-down/up-count-down.uvue

@@ -0,0 +1,194 @@
+<template>
+	<view class="up-count-down">
+		<slot>
+			<text class="up-count-down__text">{{ formattedTime }}</text>
+		</slot>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+	import defProps from '../../libs/config/props.uts'
+	import { isSameSecond, parseFormat, parseTimeData } from './utils.uts';
+
+	// props
+	const props = defineProps({
+		// 倒计时时长，单位ms
+		time: {
+			type: [String, Number],
+			default: defProps.getNumber('countDown.time')
+		},
+		// 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
+		format: {
+			type: String,
+			default: defProps.getString('countDown.format')
+		},
+		// 是否自动开始倒计时
+		autoStart: {
+			type: Boolean,
+			default: defProps.getBoolean('countDown.autoStart')
+		},
+		// 是否展示毫秒倒计时
+		millisecond: {
+			type: Boolean,
+			default: defProps.getBoolean('countDown.millisecond')
+		}
+	})
+
+	// 定义事件
+	const emit = defineEmits<{
+		(e: 'finish'): void
+		(e: 'change', value: any): void
+		(e: 'start'): void
+		(e: 'pause'): void
+		(e: 'reset'): void
+	}>()
+
+	// 响应式数据
+	const timer = ref(-1)
+	const timeData = ref(parseTimeData(0))
+	const formattedTime = ref('0')
+	const running = ref(false)
+	const endTime = ref(0)
+	const remainTime = ref(0)
+
+	// 清空定时器
+	const clearTimeoutFn = () => {
+		if (timer.value !== -1) {
+			clearTimeout(timer.value)
+		}
+		timer.value = -1
+	}
+
+	// 获取剩余的时间
+	const getRemainTime = (): number => {
+		// 取最大值，防止出现小于0的剩余时间值
+		return Math.max(endTime.value - Date.now(), 0)
+	}
+	
+	// 暂停倒计时
+	const pause = () => {
+		running.value = false
+		clearTimeoutFn()
+		emit('pause')
+	}
+	
+	// 设置剩余的时间
+	const setRemainTime = (remain: number) => {
+		remainTime.value = remain
+		// 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
+		const timeDataValue = parseTimeData(remain)
+		timeData.value = timeDataValue
+		emit('change', timeDataValue)
+		// 得出格式化后的时间
+		formattedTime.value = parseFormat(props.format, timeDataValue)
+		// 如果时间已到，停止倒计时
+		if (remain <= 0) {
+			pause()
+			emit('finish')
+		}
+	}
+
+	// 不能定义为函数表达式和箭头函数，否则app-android无法递归调用。
+	function macroTick() {
+		clearTimeoutFn()
+		// 每隔一定时间，更新一遍定时器的值
+		// 同时此定时器的作用也能带来毫秒级的更新
+		timer.value = setTimeout(() => {
+			// 获取剩余时间
+			const remain = getRemainTime()
+			// 重设剩余时间
+			if (!isSameSecond(remain, remainTime.value) || remain == 0) {
+				setRemainTime(remain)
+			}
+			// 如果剩余时间不为0，则继续检查更新倒计时
+			if (remainTime.value != 0) {
+				macroTick()
+			}
+		}, 30)
+	}
+
+	// 不能定义为函数表达式和箭头函数，否则app-android无法递归调用。
+	function microTick() {
+		clearTimeoutFn()
+		timer.value = setTimeout(() => {
+			setRemainTime(getRemainTime())
+			if (remainTime.value !== 0) {
+				microTick()
+			}
+		}, 50)
+	}
+	
+	// 根据是否展示毫秒，执行不同操作函数
+	const toTick = () => {
+		if (props.millisecond) {
+			microTick()
+		} else {
+			macroTick()
+		}
+	}
+	
+	// 开始倒计时
+	const start = () => {
+		if (running.value) return
+		running.value = true
+		endTime.value = Date.now() + remainTime.value
+		toTick()
+		emit('start')
+	}
+	
+	// 重置倒计时
+	const reset = () => {
+		pause()
+		remainTime.value = props.time as number
+		setRemainTime(remainTime.value)
+		if (props.autoStart) {
+			start()
+		}
+		emit('reset')
+	}
+	
+	// 初始化
+	const init = () => {
+		reset()
+	}
+
+	onMounted(() => {
+		init()
+	})
+
+	// 监听time变化
+	watch((): string|number => props.time, (newVal: string|number) => {
+		reset()
+	})
+	
+	// 组件卸载前清理定时器
+	onBeforeUnmount(() => {
+		clearTimeoutFn()
+	})
+
+	// 导出供模板使用的方法
+	defineExpose({
+		start,
+		pause,
+		reset
+	})
+</script>
+
+<style
+	lang="scss"
+	scoped
+>
+	@import "../../libs/css/components.scss";
+	$up-count-down-text-color:$up-content-color !default;
+	$up-count-down-text-font-size:15px !default;
+	$up-count-down-text-line-height:22px !default;
+
+	.up-count-down {
+		&__text {
+			color: $up-count-down-text-color;
+			font-size: $up-count-down-text-font-size;
+			line-height: $up-count-down-text-line-height;
+		}
+	}
+</style>

package/uview-ultra/components/up-count-down/up-count-down.vue

@@ -0,0 +1,166 @@
+<template>
+	<view class="up-count-down">
+		<slot>
+			<text class="up-count-down__text">{{ formattedTime }}</text>
+		</slot>
+	</view>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import {
+		isSameSecond,
+		parseFormat,
+		parseTimeData
+	} from './utils';
+	/**
+	 * up-count-down 倒计时
+	 * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+	 * @tutorial https://uview-plus.jiangruyi.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 <up-count-down :time="time"></up-count-down>
+	 */
+	export default {
+		name: 'up-count-down',
+		mixins: [mpMixin, 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()
+		},
+		emits: ["change", "finish"],
+		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()
+					}
+				}, 50)
+			},
+			// 获取剩余的时间
+			getRemainTime() {
+				// 取最大值，防止出现小于0的剩余时间值
+				return Math.max(this.endTime - Date.now(), 0)
+			},
+			// 设置剩余的时间
+			setRemainTime(remain) {
+				this.remainTime = remain
+				// 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
+				const timeData = parseTimeData(remain)
+				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
+			}
+		},
+		beforeUnmount() {
+			this.clearTimeout()
+		}
+	}
+</script>
+
+<style
+	lang="scss"
+	scoped
+>
+	@import "../../libs/css/components.scss";
+	$up-count-down-text-color:$up-content-color !default;
+	$up-count-down-text-font-size:15px !default;
+	$up-count-down-text-line-height:22px !default;
+
+	.up-count-down {
+		&__text {
+			color: $up-count-down-text-color;
+			font-size: $up-count-down-text-font-size;
+			line-height: $up-count-down-text-line-height;
+		}
+	}
+</style>

package/uview-ultra/components/up-count-down/utils.js

@@ -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)
+}

package/uview-ultra/components/up-count-down/utils.uts

@@ -0,0 +1,67 @@
+// 补0，如1 -> 01
+function padZero(num: number, targetLength = 2): string {
+    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: number): UTSJSONObject {
+    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: string, timeData: UTSJSONObject): string {
+   // let {
+     //   days,
+     //   hours,
+    //    minutes,
+    //    seconds,
+   //     milliseconds
+   // } = timeData
+	let days = timeData["days"] as number
+	let hours = timeData["hours"] as number
+	let minutes = timeData["minutes"] as number
+	let seconds = timeData["seconds"] as number
+	let milliseconds = timeData["milliseconds"] as number
+    // 如果格式化字符串中不存在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: number, time2: number): boolean {
+    return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
+}

package/uview-ultra/components/up-count-to/countTo.js

@@ -0,0 +1,25 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/countTo.js
+ */
+export default {
+    // countTo 组件
+    countTo: {
+        startVal: 0,
+        endVal: 0,
+        duration: 2000,
+        autoplay: true,
+        decimals: 0,
+        useEasing: true,
+        decimal: '.',
+        color: '#606266',
+        fontSize: 22,
+        bold: false,
+        separator: ''
+    }
+}

package/uview-ultra/components/up-count-to/countTo.uts

@@ -0,0 +1,25 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-11-10 12:40:08
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-11-10 12:40:08
+ * @FilePath     : /uview-ultra/uni_modules/uview-ultra/components/up-count-to/count-to.uts
+ */
+export default {
+    // count-to组件
+    countTo: {
+        startVal: 0,
+        endVal: 0,
+        duration: 2000,
+        autoplay: true,
+        decimals: 0,
+        useEasing: true,
+        decimal: '.',
+        color: '#606266',
+        fontSize: 22,
+        bold: false,
+        separator: ''
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-count-to/props.js

@@ -0,0 +1,61 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 开始的数值，默认从0增长到某一个数
+        startVal: {
+            type: [String, Number],
+            default: () => defProps.countTo.startVal
+        },
+        // 要滚动的目标数值，必须
+        endVal: {
+            type: [String, Number],
+            default: () => defProps.countTo.endVal
+        },
+        // 滚动到目标数值的动画持续时间，单位为毫秒（ms）
+        duration: {
+            type: [String, Number],
+            default: () => defProps.countTo.duration
+        },
+        // 设置数值后是否自动开始滚动
+        autoplay: {
+            type: Boolean,
+            default: () => defProps.countTo.autoplay
+        },
+        // 要显示的小数位数
+        decimals: {
+            type: [String, Number],
+            default: () => defProps.countTo.decimals
+        },
+        // 是否在即将到达目标数值的时候，使用缓慢滚动的效果
+        useEasing: {
+            type: Boolean,
+            default: () => defProps.countTo.useEasing
+        },
+        // 十进制分割
+        decimal: {
+            type: [String, Number],
+            default: () => defProps.countTo.decimal
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: () => defProps.countTo.color
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.countTo.fontSize
+        },
+        // 是否加粗字体
+        bold: {
+            type: Boolean,
+            default: () => defProps.countTo.bold
+        },
+        // 千位分隔符，类似金额的分割(￥23,321.05中的",")
+        separator: {
+            type: String,
+            default: () => defProps.countTo.separator
+        }
+    }
+})