Code

Considering the scene where the user actually sends the verification code, it may be a button or a piece of text, and the prompts are different, so this component does not provide interface display, only provides prompts, and the user embeds the prompts into the specific scene

platform compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

基本使用

Get the component object through ref, and then perform the following operations, see the example below.

Use seconds to set the number of seconds to count down (default 60)
Call the start method inside the component through ref to start the countdown
Obtain the text of the prompt by listening to the change event (triggered every second from the beginning to the end), the possible value is "Get verification code | Re-acquire after 12 seconds | Re-acquire", which can be customized

Note: The user may click the button to get the verification code during the countdown. The canGetCode variable obtained by ref is provided inside the component. During the countdown, the value is false. If it is false, a prompt should be given and Do not request the verification code from the backend again. If it is true, you can request the verification code from the backend again before obtaining the verification code or after the countdown ends.

For a complete example, see below:

vue

<template>
	<view class="wrap">
		<wu-code :seconds="seconds" @end="end" @start="start" ref="wuCode" 
		@change="codeChange"></wu-code>
		<wu-button @tap="getCode">{{tips}}</wu-button>
	</view>
</template>

<script>
    // This is the import method without using the extended configuration. After using the extended configuration, you can use uni.$w.toast directly without importing
    import { toast } from '@/uni_modules/wu-ui-tools/libs/function/index.js';
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 10,
			}
		},
		onReady() {
			// Note that a component cannot be assigned to a variable of data here, otherwise the WeChat applet will
			// If you want to do this, please define the refCode variable in non-data
			// this.refCode = this.$refs.wuCode;
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.wuCode.canGetCode) {
					// Simulate requesting a verification code from the backend
					uni.showLoading({
						title: 'Getting verification code'
					})
					setTimeout(() => {
						uni.hideLoading();
						// Here this prompt will be overridden by the prompt in this.start() method
						toast('Verification code sent');
						// Notify the internal countdown of the captcha component
						this.$refs.wuCode.start();
					}, 2000);
				} else {
					toast('Send after countdown');
				}
			},
			end() {
				toast('countdown ends');
			},
			start() {
				toast('countdown begins');
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 24rpx;
	}
</style>

<template>
	<view class="wrap">
		<wu-code :seconds="seconds" @end="end" @start="start" ref="wuCode" 
		@change="codeChange"></wu-code>
		<wu-button @tap="getCode">{{tips}}</wu-button>
	</view>
</template>

<script>
    // This is the import method without using the extended configuration. After using the extended configuration, you can use uni.$w.toast directly without importing
    import { toast } from '@/uni_modules/wu-ui-tools/libs/function/index.js';
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 10,
			}
		},
		onReady() {
			// Note that a component cannot be assigned to a variable of data here, otherwise the WeChat applet will
			// If you want to do this, please define the refCode variable in non-data
			// this.refCode = this.$refs.wuCode;
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.wuCode.canGetCode) {
					// Simulate requesting a verification code from the backend
					uni.showLoading({
						title: 'Getting verification code'
					})
					setTimeout(() => {
						uni.hideLoading();
						// Here this prompt will be overridden by the prompt in this.start() method
						toast('Verification code sent');
						// Notify the internal countdown of the captcha component
						this.$refs.wuCode.start();
					}, 2000);
				} else {
					toast('Send after countdown');
				}
			},
			end() {
				toast('countdown ends');
			},
			start() {
				toast('countdown begins');
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 24rpx;
	}
</style>

Custom Prompt

There are built-in prompts inside the component. For example, the prompt before obtaining the verification code is "Get Verification Code". Users can configure custom prompts through parameters:

Before obtaining, the parameter is start-text, and the default value is "get verification code"
During the countdown, the parameter is change-text, and the default is "X seconds to reacquire", where "x" (both uppercase and lowercase) will be replaced by the countdown seconds
The countdown is over, the parameter is end-text, the default value is "refetch"

Keep Countdown

Under normal circumstances, when H5 refreshes the browser, or when each terminal returns and re-enters, the countdown will disappear, causing the user to try to obtain the verification code again, although the backend will make further judgments on this.

For this situation, wu-ui gives a keep-running parameter (the default is false), when it is true, even if you refresh the browser or return to the previous page, the countdown will still continue (if still within the countdown time).

Note: If one or more pages of your page use multiple components at the same time, in order to prevent multiple components from interfering with each other, you can configure each component The unique-key is a unique string for distinction:

vue

/* A.vue */
<wu-code unique-key="page-a"></wu-code>

/* B.vue */
<wu-code unique-key="page-b"></wu-code>

/* A.vue */
<wu-code unique-key="page-a"></wu-code>

/* B.vue */
<wu-code unique-key="page-b"></wu-code>

API

Code Props

property name	description	type	default value	optional values
seconds	Number of seconds to count down	Number / String	60	-
startText	Prompt before starting, see above description	String	Get verification code	-
changeText	The prompt during the countdown period, must have the letter "x", see the above description	String	Reacquire in X seconds	-
endText	The prompt for the end of the countdown, see the description above	String	Reacquire	-
keepRunning	Whether to continue the countdown when H5 is refreshed or each end returns to re-enter	Boolean	false	true/false
uniqueKey	The distinguishing key for continuous countdown between multiple components, see the description above	String	-	-
customStyle	Define the external styles that need to be used	Object	-	-

Code Event

method name	description	callback parameters
change	During the countdown, it is triggered once every second	text: the current state of how many seconds are left, see the description above
start	start countdown trigger	-
end	end countdown trigger	-

Code Methods

Name	Description
start	start countdown
reset	End the countdown that is currently in progress, and set the component to a state where the verification code can be obtained again

Code ​

platform compatibility ​

基本使用 ​

Custom Prompt ​

Keep Countdown ​

API ​

Code Props ​

Code Event ​

Code Methods ​