¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <view class="u-code"> |
| | | <!-- æ¤ç»ä»¶åè½ç±jså®æï¼æ éåhtmlé»è¾ --> |
| | | </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 æ¯å¦å¨H5å·æ°æå端è¿ååè¿å
¥æ¶ç»§ç»å计æ¶ï¼ é»è®¤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> |