From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序

---
 minipro_standard/uni_modules/uview-ui/components/u-code/u-code.vue |  129 +++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 129 insertions(+), 0 deletions(-)

diff --git a/minipro_standard/uni_modules/uview-ui/components/u-code/u-code.vue b/minipro_standard/uni_modules/uview-ui/components/u-code/u-code.vue
new file mode 100644
index 0000000..f79a09a
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-code/u-code.vue
@@ -0,0 +1,129 @@
+<template>
+	<view class="u-code">
+		<!-- 姝ょ粍浠跺姛鑳界敱js瀹屾垚锛屾棤闇�鍐檋tml閫昏緫 -->
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * Code 楠岃瘉鐮佽緭鍏ユ
+	 * @description 鑰冭檻鍒扮敤鎴峰疄闄呭彂閫侀獙璇佺爜鐨勫満鏅紝鍙兘鏄竴涓寜閽紝涔熷彲鑳芥槸涓�娈垫枃瀛楋紝鎻愮ず璇悇鏈変笉鍚岋紝鎵�浠ユ湰缁勪欢 涓嶆彁渚涚晫闈㈡樉绀猴紝鍙彁渚涙彁绀鸿锛岀敱鐢ㄦ埛灏嗘彁绀鸿宓屽叆鍒板叿浣撶殑鍦烘櫙
+	 * @tutorial https://www.uviewui.com/components/code.html
+	 * @property {String | Number}	seconds			鍊掕鏃舵墍闇�鐨勭鏁帮紙榛樿 60 锛�
+	 * @property {String}			startText		寮�濮嬪墠鐨勬彁绀鸿锛岃瀹樼綉璇存槑锛堥粯璁� '鑾峰彇楠岃瘉鐮�' 锛�
+	 * @property {String}			changeText		鍊掕鏃舵湡闂寸殑鎻愮ず璇紝蹇呴』甯︽湁瀛楁瘝"x"锛岃瀹樼綉璇存槑锛堥粯璁� 'X绉掗噸鏂拌幏鍙�' 锛�
+	 * @property {String}			endText			鍊掕缁撴潫鐨勬彁绀鸿锛岃瀹樼綉璇存槑锛堥粯璁� '閲嶆柊鑾峰彇' 锛�
+	 * @property {Boolean}			keepRunning		鏄惁鍦℉5鍒锋柊鎴栧悇绔繑鍥炲啀杩涘叆鏃剁户缁�掕鏃讹紙 榛樿false 锛�
+	 * @property {String}			uniqueKey		涓轰簡鍖哄垎澶氫釜椤甸潰锛屾垨鑰呬竴涓〉闈㈠涓�掕鏃剁粍浠舵湰鍦板瓨鍌ㄧ殑缁х画鍊掕鏃跺彉浜�
+	 *
+	 * @event {Function}	change	鍊掕鏃舵湡闂达紝姣忕瑙﹀彂涓�娆�
+	 * @event {Function}	start	寮�濮嬪�掕鏃惰Е鍙�
+	 * @event {Function}	end		缁撴潫鍊掕鏃惰Е鍙�
+	 * @example <u-code ref="uCode" @change="codeChange" seconds="20"></u-code>
+	 */
+	export default {
+		name: "u-code",
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		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.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)
+        this.setTimeToStorage()
+      },
+			// 閲嶇疆锛屽彲浠ヨ鐢ㄦ埛鍐嶆鑾峰彇楠岃瘉鐮�
+			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/components.scss";
+</style>

--
Gitblit v1.9.3