uview-ultra 4.5.46

package/components/up-code/up-code.uvue

@@ -0,0 +1,184 @@
+<template>
+	<view class="up-code">
+		<!-- 此组件功能由js完成，无需写html逻辑 -->
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { ref, getCurrentInstance } from 'vue'
+	import type { PropType } from 'vue'
+	import defProps from './code.uts'
+	
+	// options
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: "up-code"
+	})
+	
+	// props
+	const props = defineProps({
+		// 倒计时总秒数
+		seconds: {
+			type: [String, Number],
+			default: defProps.getNumber('code.seconds')
+		},
+		// 尚未开始时提示
+		startText: {
+			type: String,
+			default: defProps.getString('code.startText')
+		},
+		// 正在倒计时中的提示
+		changeText: {
+			type: String,
+			default: defProps.getString('code.changeText')
+		},
+		// 倒计时结束时的提示
+		endText: {
+			type: String,
+			default: defProps.getString('code.endText')
+		},
+		// 是否在H5刷新或各端返回再进入时继续倒计时
+		keepRunning: {
+			type: Boolean,
+			default: defProps.getBoolean('code.keepRunning')
+		},
+		// 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+		uniqueKey: {
+			type: String,
+			default: defProps.getString('code.uniqueKey')
+		}
+	})
+	
+	// 定义 emits
+	const emit = defineEmits<{
+		(e: 'change', text: string): void
+		(e: 'start'): void
+		(e: 'end'): void
+	}>()
+	
+	const instance = getCurrentInstance()!.proxy!
+	
+	// 响应式数据
+	const secNum = ref(0)
+	const timer = ref(0)
+	const canGetCodeRef = ref(true) // 是否可以执行验证码操作
+	
+	const changeEvent = (text: string): void => {
+		emit('change', text)
+	}
+	
+	// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
+	const setTimeToStorage = (): void => {
+		if(!props.keepRunning || timer.value == 0) return
+		// 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
+		// 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
+		// @ts-ignore
+		if(secNum.value > 0 && secNum.value < parseInt(props.seconds.toString())) {
+			// 获取当前时间戳(+ new Date()为特殊写法)，除以1000变成秒，再去除小数部分
+			let nowTimestamp = Math.floor(new Date().getTime() / 1000)
+			// 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数
+			uni.setStorage({
+				key: props.uniqueKey + '_$upCountDownTimestamp',
+				data: (nowTimestamp + secNum.value).toString()
+			})
+		}
+	}
+	
+	// 开始倒计时
+	const start = () => {
+		// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
+		if(timer.value != 0) {
+			clearInterval(timer.value)
+			timer.value = 0
+		}
+		
+		// 初始化倒计时的秒数
+		secNum.value = parseInt(props.seconds.toString())
+		
+		emit('start')
+		canGetCodeRef.value = false
+		// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
+		changeEvent(props.changeText.replace(/x|X/, secNum.value.toString()))
+		timer.value = setInterval(() => {
+			if (secNum.value - 1 > 0) {
+				secNum.value-- // 先递减秒数
+				// 用当前倒计时的秒数替换提示字符串中的"x"字母
+				// @ts-ignore
+				changeEvent(props.changeText.replace(/x|X/, secNum.value.toString()))
+			} else {
+				// 当前值减1后小于等于0，说明倒计时结束
+				secNum.value--
+				changeEvent(props.endText.toString())
+				clearInterval(timer.value)
+				timer.value = 0
+				emit('end')
+				canGetCodeRef.value = true
+			}
+		}, 1000)
+		setTimeToStorage()
+	}
+	
+	// 方法实现
+	const checkKeepRunning = () => {
+		// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
+		// @ts-ignore
+		let lastTimestamp = parseInt(uni.getStorageSync(props.uniqueKey + '_$upCountDownTimestamp').toString())
+		
+		// 当前秒的时间戳
+		let nowTimestamp = Math.floor(new Date().getTime() / 1000)
+		// 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳
+		if(props.keepRunning
+			&& lastTimestamp > 0
+			&& lastTimestamp > nowTimestamp) {
+			// 剩余尚未执行完的倒计秒数
+			secNum.value = lastTimestamp - nowTimestamp
+			// 清除本地保存的变量
+			uni.removeStorageSync(props.uniqueKey + '_$upCountDownTimestamp')
+			// 开始倒计时
+			start()
+		} else {
+			// 如果不存在需要继续上一次的倒计时，执行正常的逻辑
+			changeEvent(props.startText.toString())
+		}
+	}
+	
+	// 重置，可以让用户再次获取验证码
+	const reset = () => {
+		canGetCodeRef.value = true
+		clearInterval(timer.value)
+		
+		secNum.value = parseInt(props.seconds.toString())
+		changeEvent(props.endText.toString())
+	}
+	
+	// 组件挂载时检查是否需要继续倒计时
+	onMounted(() => {
+		checkKeepRunning()
+	})
+	
+	// 监听 seconds 变化
+	watch((): any => props.seconds, (newVal: any) => {
+		secNum.value = parseInt(newVal.toString())
+	}, {immediate: true})
+	
+	// 组件销毁的时候，清除定时器，否则定时器会继续存在，系统不会自动清除
+	onBeforeUnmount(() => {
+		setTimeToStorage()
+		clearInterval(timer.value)
+		timer.value = 0
+	})
+	
+	const canGetCode = function() {
+		return canGetCodeRef.value
+	}
+	
+	defineExpose({
+		canGetCode,
+		start,
+		reset
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+</style>

package/components/up-code/up-code.vue

@@ -0,0 +1,117 @@
+<template>
+	<view class="up-code">
+		<!-- 此组件功能由js完成，无需写html逻辑 -->
+	</view>
+</template>
+
+<script setup>
+	import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+	import { props as codeProps } from './props.js'
+	import { commonProps } from '../../libs/composable/useUltraUI.js'
+
+	defineOptions({
+		name: 'up-code',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...codeProps.props
+	})
+	const emit = defineEmits(['start', 'end', 'change'])
+	const secNum = ref(props.seconds)
+	const timer = ref(null)
+	const canGetCode = ref(true)
+
+	function changeEvent(text) {
+		emit('change', text)
+	}
+
+	// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
+	function setTimeToStorage() {
+		if (!props.keepRunning || !timer.value) return
+		// 倒计时尚未结束且已经开始，才需要保存。
+		if (Number(secNum.value) > 0 && Number(secNum.value) < Number(props.seconds)) {
+			const nowTimestamp = Math.floor((+new Date()) / 1000)
+			uni.setStorage({
+				key: props.uniqueKey + '_$uCountDownTimestamp',
+				data: nowTimestamp + Number(secNum.value)
+			})
+		}
+	}
+
+	function checkKeepRunning() {
+		// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
+		const lastTimestamp = Number(uni.getStorageSync(props.uniqueKey + '_$uCountDownTimestamp'))
+		if (!lastTimestamp) return changeEvent(props.startText)
+		const nowTimestamp = Math.floor((+new Date()) / 1000)
+		if (props.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
+			secNum.value = lastTimestamp - nowTimestamp
+			uni.removeStorageSync(props.uniqueKey + '_$uCountDownTimestamp')
+			start()
+		} else {
+			changeEvent(props.startText)
+		}
+	}
+
+	// 开始倒计时
+	function start() {
+		if (timer.value) {
+			clearInterval(timer.value)
+			timer.value = null
+		}
+		emit('start')
+		canGetCode.value = false
+		changeEvent(props.changeText.replace(/x|X/, secNum.value))
+		timer.value = setInterval(() => {
+			if (--secNum.value) {
+				changeEvent(props.changeText.replace(/x|X/, secNum.value))
+			} else {
+				clearInterval(timer.value)
+				timer.value = null
+				changeEvent(props.endText)
+				secNum.value = props.seconds
+				emit('end')
+				canGetCode.value = true
+			}
+		}, 1000)
+		setTimeToStorage()
+	}
+
+	// 重置，可以让用户再次获取验证码
+	function reset() {
+		canGetCode.value = true
+		clearInterval(timer.value)
+		timer.value = null
+		secNum.value = props.seconds
+		changeEvent(props.endText)
+	}
+
+	onMounted(() => {
+		checkKeepRunning()
+	})
+
+	watch(() => props.seconds, (value) => {
+		secNum.value = value
+	}, { immediate: true })
+
+	onBeforeUnmount(() => {
+		setTimeToStorage()
+		clearTimeout(timer.value)
+		timer.value = null
+	})
+
+	defineExpose({
+		start,
+		reset,
+		canGetCode
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+</style>

package/components/up-code-input/codeInput.js

@@ -0,0 +1,29 @@
+/*
+ * @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/codeInput.js
+ */
+export default {
+    // codeInput 组件
+    codeInput: {
+		adjustPosition: true,
+        maxlength: 6,
+        dot: false,
+        mode: 'box',
+        hairline: false,
+        space: 10,
+        value: '',
+        focus: false,
+        bold: false,
+        color: '#606266',
+        fontSize: 18,
+        size: 35,
+        disabledKeyboard: false,
+        borderColor: '#c9cacc',
+		disabledDot: true
+    }
+}

package/components/up-code-input/codeInput.uts

@@ -0,0 +1,29 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-07-03 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-07-03 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/codeInput.uts
+ */
+export default {
+    // codeInput 组件
+    codeInput: {
+		adjustPosition: true,
+        maxlength: 6,
+        dot: false,
+        mode: 'box',
+        hairline: false,
+        space: 10,
+        value: '',
+        focus: false,
+        bold: false,
+        color: '#606266',
+        fontSize: 18,
+        size: 35,
+        disabledKeyboard: false,
+        borderColor: '#c9cacc',
+		disabledDot: true
+    }
+} as UTSJSONObject

package/components/up-code-input/props.js

@@ -0,0 +1,90 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+            default: () => defProps.codeInput.adjustPosition
+		},
+        // 最大输入长度
+        maxlength: {
+            type: [String, Number],
+            default: () => defProps.codeInput.maxlength
+        },
+        // 是否用圆点填充
+        dot: {
+            type: Boolean,
+            default: () => defProps.codeInput.dot
+        },
+        // 显示模式，box-盒子模式，line-底部横线模式
+        mode: {
+            type: String,
+            default: () => defProps.codeInput.mode
+        },
+        // 是否细边框
+        hairline: {
+            type: Boolean,
+            default: () => defProps.codeInput.hairline
+        },
+        // 字符间的距离
+        space: {
+            type: [String, Number],
+            default: () => defProps.codeInput.space
+        },
+		// #ifdef VUE3
+		// 预置值
+		modelValue: {
+			type: [String, Number],
+			default: () => defProps.codeInput.value
+		},
+		// #endif
+		// #ifdef VUE2
+		// 预置值
+		value: {
+			type: [String, Number],
+			default: () => defProps.codeInput.value
+		},
+		// #endif
+        // 是否自动获取焦点
+        focus: {
+            type: Boolean,
+            default: () => defProps.codeInput.focus
+        },
+        // 字体是否加粗
+        bold: {
+            type: Boolean,
+            default: () => defProps.codeInput.bold
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: () => defProps.codeInput.color
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.codeInput.fontSize
+        },
+        // 输入框的大小，宽等于高
+        size: {
+            type: [String, Number],
+            default: () => defProps.codeInput.size
+        },
+        // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+        disabledKeyboard: {
+            type: Boolean,
+            default: () => defProps.codeInput.disabledKeyboard
+        },
+        // 边框和线条颜色
+        borderColor: {
+            type: String,
+            default: () => defProps.codeInput.borderColor
+        },
+		// 是否禁止输入"."符号
+		disabledDot: {
+			type: Boolean,
+			default: () => defProps.codeInput.disabledDot
+		}
+    }
+})

package/components/up-code-input/props.uts

@@ -0,0 +1,83 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './codeInput.uts'
+let crtProp = defProps['codeInput'] as UTSJSONObject
+
+export const propsCodeInput = defineMixin({
+    props: {
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+            default: crtProp['adjustPosition']
+		},
+        // 最大输入长度
+        maxlength: {
+            type: [String, Number],
+            default: crtProp['maxlength']
+        },
+        // 是否用圆点填充
+        dot: {
+            type: Boolean,
+            default: crtProp['dot']
+        },
+        // 显示模式，box-盒子模式，line-底部横线模式
+        mode: {
+            type: String,
+            default: crtProp['mode']
+        },
+        // 是否细边框
+        hairline: {
+            type: Boolean,
+            default: crtProp['hairline']
+        },
+        // 字符间的距离
+        space: {
+            type: [String, Number],
+            default: crtProp['space']
+        },
+		// 预置值
+		modelValue: {
+			type: [String, Number],
+			default: crtProp['value']
+		},
+        // 是否自动获取焦点
+        focus: {
+            type: Boolean,
+            default: crtProp['focus']
+        },
+        // 字体是否加粗
+        bold: {
+            type: Boolean,
+            default: crtProp['bold']
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: crtProp['color']
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: crtProp['fontSize']
+        },
+        // 输入框的大小，宽等于高
+        size: {
+            type: [String, Number],
+            default: crtProp['size']
+        },
+        // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+        disabledKeyboard: {
+            type: Boolean,
+            default: crtProp['disabledKeyboard']
+        },
+        // 边框和线条颜色
+        borderColor: {
+            type: String,
+            default: crtProp['borderColor']
+        },
+		// 是否禁止输入"."符号
+		disabledDot: {
+			type: Boolean,
+			default: crtProp['disabledDot']
+		}
+    }
+})