warst/warst-h5/components/c-code/index.vue

<template>
	<!--获取验证码-->
	<view>
		<u-code
			keepRunning
			:uniqueKey="uniqueKey"
			ref="uCode"
			@change="codeChange"
		></u-code>
		<c-button size="14" @click="handleClick" :type="btnType">
			{{ tips }}
		</c-button>
	</view>
</template>

<script>
import { getAuthCode } from '@/api/com';

export default {
	name: 'cCode',
	props: {
		uniqueKey: String, // code组件的唯一key,若key相同计时相同
		phone: String, // 手机号
		codeType: String, // 接口的code
		btnType: {
			default: 'text',
			type: String,
		},
	},
	data() {
		return {
			tips: '',
		};
	},
	methods: {
		handleClick() {
			if (this.$listeners.click) {
				// 外部自定义触发getCode
				this.$emit('click', this.getCode);
				return;
			}
			this.getCode();
		},
		async getCode() {
			//注意：用户可能在倒计时的过程中点击获取验证码的按钮，组件内部提供了通过ref获取的canGetCode变量，在倒计时 过程中，该值为false
			if (!this.$refs.uCode.canGetCode) return;
			const { phone, codeType } = this;
			if (!phone) {
				// 手机号为空
				this.$c.toast('手机号不能为空');
				return;
			}
			uni.$c.loading('正在获取验证码');
			await getAuthCode({
				phone,
				code: codeType,
			});
			uni.hideLoading();
			uni.$c.toast('验证码已发送');
			// 通知验证码组件内部开始倒计时
			this.$refs.uCode.start();
		},
		codeChange(text) {
			this.tips = text;
		},
	},
};
</script>

<style scoped></style>