From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-verification-code/u-verification-code.vue | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 164 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-verification-code/u-verification-code.vue b/uview-ui/components/u-verification-code/u-verification-code.vue
new file mode 100644
index 0000000..b3079f4
--- /dev/null
+++ b/uview-ui/components/u-verification-code/u-verification-code.vue
@@ -0,0 +1,164 @@
+<template>
+ <view class="u-code-wrap">
+ <!-- 姝ょ粍浠跺姛鑳界敱js瀹屾垚锛屾棤闇�鍐檋tml閫昏緫 -->
+ </view>
+</template>
+
+<script>
+ /**
+ * verificationCode 楠岃瘉鐮佽緭鍏ユ
+ * @description 鑰冭檻鍒扮敤鎴峰疄闄呭彂閫侀獙璇佺爜鐨勫満鏅紝鍙兘鏄竴涓寜閽紝涔熷彲鑳芥槸涓�娈垫枃瀛楋紝鎻愮ず璇悇鏈変笉鍚岋紝鎵�浠ユ湰缁勪欢 涓嶆彁渚涚晫闈㈡樉绀猴紝鍙彁渚涙彁绀鸿锛岀敱鐢ㄦ埛灏嗘彁绀鸿宓屽叆鍒板叿浣撶殑鍦烘櫙
+ * @tutorial https://www.uviewui.com/components/verificationCode.html
+ * @property {Number String} seconds 鍊掕鏃舵墍闇�鐨勭鏁帮紙榛樿60锛�
+ * @property {String} start-text 寮�濮嬪墠鐨勬彁绀鸿锛岃瀹樼綉璇存槑锛堥粯璁よ幏鍙栭獙璇佺爜锛�
+ * @property {String} change-text 鍊掕鏃舵湡闂寸殑鎻愮ず璇紝蹇呴』甯︽湁瀛楁瘝"x"锛岃瀹樼綉璇存槑锛堥粯璁绉掗噸鏂拌幏鍙栵級
+ * @property {String} end-text 鍊掕缁撴潫鐨勬彁绀鸿锛岃瀹樼綉璇存槑锛堥粯璁ら噸鏂拌幏鍙栵級
+ * @property {Boolean} keep-running 鏄惁鍦℉5鍒锋柊鎴栧悇绔繑鍥炲啀杩涘叆鏃剁户缁�掕鏃讹紙榛樿false锛�
+ * @event {Function} change 鍊掕鏃舵湡闂达紝姣忕瑙﹀彂涓�娆�
+ * @event {Function} start 寮�濮嬪�掕鏃惰Е鍙�
+ * @event {Function} end 缁撴潫鍊掕鏃惰Е鍙�
+ * @example <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
+ */
+ export default {
+ name: "u-verification-code",
+ props: {
+ // 鍊掕鏃舵�荤鏁�
+ seconds: {
+ type: [String, Number],
+ default: 60
+ },
+ // 灏氭湭寮�濮嬫椂鎻愮ず
+ startText: {
+ type: String,
+ default: '鑾峰彇楠岃瘉鐮�'
+ },
+ // 姝ｅ湪鍊掕鏃朵腑鐨勬彁绀�
+ changeText: {
+ type: String,
+ default: 'X绉掗噸鏂拌幏鍙�'
+ },
+ // 鍊掕鏃剁粨鏉熸椂鐨勬彁绀�
+ endText: {
+ type: String,
+ default: '閲嶆柊鑾峰彇'
+ },
+ // 鏄惁鍦℉5鍒锋柊鎴栧悇绔繑鍥炲啀杩涘叆鏃剁户缁�掕鏃�
+ keepRunning: {
+ type: Boolean,
+ default: false
+ },
+ // 涓轰簡鍖哄垎澶氫釜椤甸潰锛屾垨鑰呬竴涓〉闈㈠涓�掕鏃剁粍浠舵湰鍦板瓨鍌ㄧ殑缁х画鍊掕鏃跺彉浜�
+ uniqueKey: {
+ type: String,
+ default: ''
+ }
+ },
+ data() {
+ return {
+ secNum: this.seconds,
+ timer: null,
+ canGetCode: true, // 鏄惁鍙互鎵ц楠岃瘉鐮佹搷浣�
+ }
+ },
+ mounted() {
+ this.checkKeepRunning();
+ },
+ watch: {
+ seconds: {
+ immediate: true,
+ handler(n) {
+ this.secNum = n;
+ }
+ }
+ },
+ methods: {
+ checkKeepRunning() {
+ // 鑾峰彇涓婁竴娆￠��鍑洪〉闈�(H5杩樺寘鎷埛鏂�)鏃剁殑鏃堕棿鎴筹紝濡傛灉娌℃湁涓婃鐨勪繚瀛橈紝姝ゅ�煎彲鑳戒负绌�
+ let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$uCountDownTimestamp'));
+ if(!lastTimestamp) return this.changeEvent(this.startText);
+ // 褰撳墠绉掔殑鏃堕棿鎴�
+ let nowTimestamp = Math.floor((+ new Date()) / 1000);
+ // 鍒ゆ柇褰撳墠鐨勬椂闂存埑锛屾槸鍚﹀皬浜庝笂涓�娆＄殑鏈鎸夎瀹氱粨鏉燂紝鍗存彁鍓嶇粨鏉熺殑鏃堕棿鎴�
+ if(this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
+ // 鍓╀綑灏氭湭鎵ц瀹岀殑鍊掕绉掓暟
+ this.secNum = lastTimestamp - nowTimestamp;
+ // 娓呴櫎鏈湴淇濆瓨鐨勫彉閲�
+ uni.removeStorageSync(this.uniqueKey + '_$uCountDownTimestamp');
+ // 寮�濮嬪�掕鏃�
+ this.start();
+ } else {
+ // 濡傛灉涓嶅瓨鍦ㄩ渶瑕佺户缁笂涓�娆＄殑鍊掕鏃讹紝鎵ц姝ｅ父鐨勯�昏緫
+ this.changeEvent(this.startText);
+ }
+ },
+ // 寮�濮嬪�掕鏃�
+ start() {
+ // 闃叉蹇�熺偣鍑昏幏鍙栭獙璇佺爜鐨勬寜閽�屽鑷村唴閮ㄤ骇鐢熷涓畾鏃跺櫒瀵艰嚧娣蜂贡
+ if(this.timer) {
+ clearInterval(this.timer);
+ this.timer = null;
+ }
+ this.$emit('start');
+ this.canGetCode = false;
+ // 杩欓噷鏀捐繖鍙ワ紝鏄负浜嗕竴寮�濮嬫椂灏辨彁绀猴紝鍚﹀垯瑕佺瓑setInterval鐨�1绉掑悗鎵嶄細鏈夋彁绀�
+ this.changeEvent(this.changeText.replace(/x|X/, this.secNum));
+ this.setTimeToStorage();
+ this.timer = setInterval(() => {
+ if (--this.secNum) {
+ // 鐢ㄥ綋鍓嶅�掕鏃剁殑绉掓暟鏇挎崲鎻愮ず瀛楃涓蹭腑鐨�"x"瀛楁瘝
+ this.changeEvent(this.changeText.replace(/x|X/, this.secNum));
+ } else {
+ clearInterval(this.timer);
+ this.timer = null;
+ this.changeEvent(this.endText);
+ this.secNum = this.seconds;
+ this.$emit('end');
+ this.canGetCode = true;
+ }
+ }, 1000);
+ },
+ // 閲嶇疆锛屽彲浠ヨ鐢ㄦ埛鍐嶆鑾峰彇楠岃瘉鐮�
+ reset() {
+ this.canGetCode = true;
+ clearInterval(this.timer);
+ this.secNum = this.seconds;
+ this.changeEvent(this.endText);
+ },
+ changeEvent(text) {
+ this.$emit('change', text);
+ },
+ // 淇濆瓨鏃堕棿鎴筹紝涓轰簡闃叉鍊掕鏃跺皻鏈粨鏉燂紝H5鍒锋柊鎴栬�呭悇绔殑鍙充笂瑙掕繑鍥炰笂涓�椤靛啀杩涙潵
+ setTimeToStorage() {
+ if(!this.keepRunning || !this.timer) return;
+ // 璁板綍褰撳墠鐨勬椂闂存埑锛屼负浜嗕笅娆¤繘鍏ラ〉闈紝濡傛灉杩樺湪鍊掕鏃跺唴鐨勮瘽锛岀户缁�掕鏃�
+ // 鍊掕鏃跺皻鏈粨鏉燂紝缁撴灉澶т簬0锛涘�掕鏃跺凡缁忓紑濮嬶紝灏变細灏忎簬鍒濆鍊硷紝濡傛灉绛変簬鍒濆鍊硷紝璇存槑娌℃湁寮�濮嬪�掕鏃讹紝鏃犻渶澶勭悊
+ if(this.secNum > 0 && this.secNum <= this.seconds) {
+ // 鑾峰彇褰撳墠鏃堕棿鎴�(+ new Date()涓虹壒娈婂啓娉�)锛岄櫎浠�1000鍙樻垚绉掞紝鍐嶅幓闄ゅ皬鏁伴儴鍒�
+ let nowTimestamp = Math.floor((+ new Date()) / 1000);
+ // 灏嗘湰璇ョ粨鏉熸椂鍊欑殑鏃堕棿鎴充繚瀛樿捣鏉� => 褰撳墠鏃堕棿鎴� + 鍓╀綑鐨勭鏁�
+ uni.setStorage({
+ key: this.uniqueKey + '_$uCountDownTimestamp',
+ data: nowTimestamp + Number(this.secNum)
+ })
+ }
+ }
+ },
+ // 缁勪欢閿�姣佺殑鏃跺�欙紝娓呴櫎瀹氭椂鍣紝鍚﹀垯瀹氭椂鍣ㄤ細缁х画瀛樺湪锛岀郴缁熶笉浼氳嚜鍔ㄦ竻闄�
+ beforeDestroy() {
+ this.setTimeToStorage();
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-code-wrap {
+ width: 0;
+ height: 0;
+ position: fixed;
+ z-index: -1;
+ }
+</style>
--
Gitblit v1.9.3