uni-id-pages-x-smsCode.uvue

<template>
	<view class="mobile-box">
		<view @click="chooseArea" class="area">
			<text>+86</text>
			<uni-id-pages-x-icons :size="10" color="#666" @click="chooseArea" type="down" />
		</view>
		<view class="input-box">
			<uni-id-pages-x-input type="number" :border="false" v-model="mobile" :maxlength="11" placeholder="请输入11位手机号"
				ref="mobileInput"></uni-id-pages-x-input>
		</view>
	</view>
	<!-- 获取发送短信的验证码的图形验证码组件 -->
	<view class="send-sms-captcha-box">
		<uni-captcha ref="sendSmsCaptcha" scene="send-sms-code" v-model="sendSmsCaptcha" />
	</view>
	<!-- 悬浮的短信验证码输入框 -->
	<fab-sms-code-input v-model="smsCode" :mobile="mobile" :reverseNumber="reverseNumber" ref="fab-sms-code-input"
		@reGetSmsCode="reGetSmsCode" title="验证并登录" />
</template>

<script>
	import fabSmsCodeInput from './fab-sms-code-input.uvue';
	import { state } from '@/uni_modules/uni-id-pages-x/store.uts';
	export default {
		name: "uni-id-pages-x-smsCode",
		components: { fabSmsCodeInput },
    emits:["input"],
		data() {
			return {
				mobile: "",
				sendSmsCaptcha: "",
				smsCode: "",
				fabSmsCodeInputEl: null as null | ComponentPublicInstance,
				sendSmsCaptchaCP: null as null | UniCaptchaComponentPublicInstance,
				reverseNumber: 0
			}
		},
		props: {
			scene: {
				type: String,
				default: "login-by-sms"
			},
			autoSend: {
				type: Boolean,
				default: true
			}
		},
		computed: {
		},
		watch: {
			//  手机号输满11位时，自动给发送短信验证码的图形验证码“获取焦点”
			mobile(mobile) {
				this.emitInput()
				if (mobile.length == 11) {
					this.sendSmsCaptchaCP!.setFocus(true);
					// 倒计时归零，允许再次发送
					this.reverseNumber = 0
				}
			},
			// 图形验证码填好直接自动发送 短信验证码
			sendSmsCaptcha() {
				this.emitInput()
				if (this.autoSend && this.sendSmsCaptcha.length == 4 && this.mobile.length == 11) {
					this.sendSmsCode(true)
				}
			},
			smsCode() {
				this.emitInput()
			}
		},
		mounted() {
			this.fabSmsCodeInputEl = this.$refs["fab-sms-code-input"] as ComponentPublicInstance;
			this.sendSmsCaptchaCP = this.$refs["sendSmsCaptcha"] as UniCaptchaComponentPublicInstance;
			// 加载好，手机号码输入框就自动获取焦点
			// TO 临时方案解决 this.$nextTick 无效，由setTimeout 300 代替
			setTimeout(() => {
				this.setMobileInputFocus(true)
			}, 300)
		},
		methods: {
      setMobileInputFocus(val:boolean){
        (this.$refs['mobileInput'] as UniIdPagesXInputComponentPublicInstance).setFocus(val);
      },
			showCodeInput() {
				if (this.reverseNumber == 0) {
					this.reverseNumber = 6
					//开始倒计时
					let reverseTimer = function () { }
					reverseTimer = () => {
						if (this.reverseNumber != 0) {
							this.reverseNumber--;
							setTimeout(() => {
								reverseTimer()
							}, 1000)
						}
					}
					reverseTimer()
				}
				this.fabSmsCodeInputEl?.$callMethod('show', true);
			},
			emitInput() {
				const param : UTSJSONObject = {
					"mobile": this.mobile,
					"code": this.smsCode,
					"sendSmsCaptcha": this.sendSmsCaptcha,
				}
				this.$emit("input", param)
			},
			chooseArea() {
				uni.showToast({
					title: "目前只支持中国",
					icon: "none"
				});
			},
			// 重新获取短信验证码
			reGetSmsCode() {
				this.hideCodeInput();
				this.clearCodeInput();
				this.sendSmsCaptchaCP!.getImageCaptcha(true);
			},
			hideCodeInput() {
				this.fabSmsCodeInputEl!.$callMethod("hide");
			},
			clearCodeInput() {
				this.fabSmsCodeInputEl!.$callMethod('clear')
			},
			reset() {
				this.smsCode = ""
				this.sendSmsCaptcha = ""
				this.clearCodeInput()
				this.hideCodeInput()
			},
			sendSmsCode(needAgreements:boolean) {
				// console.log("state.pendingAgreements", state.pendingAgreements,needAgreements);
				if (needAgreements && state.pendingAgreements) {
          // uni.hideKeyboard();
          this.sendSmsCaptchaCP!.setFocus(false);
          // TODO web端有问题
          // (this.$parent as ComponentPublicInstance).$callMethod("showPopupCaptcha", () => {
          // 	if (!state.pendingAgreements) {
          // 		this.sendSmsCode()
          // 	}
          // });
          // 临时方案
          uni.$emit('uni-id-pages-x-loginBySmsCode-showPopupCaptcha',()=>{
            if (!state.pendingAgreements) {
            	this.sendSmsCode(false)
            }
          })
					uni.showToast({
						title: '未同意隐私政策协议',
						icon: 'none'
					});
					return
				}
				// 如果还在倒计时就显示出来输入框，阻止发送
				if (this.reverseNumber != 0) {
					return this.showCodeInput()
				}
				let reg_mobile = /^1\d{10}$/;
				if (!reg_mobile.test(this.mobile)) {
					(this.$refs['mobileInput'] as UniIdPagesXInputComponentPublicInstance).setFocus(true)
					uni.showToast({
						title: "手机号格式错误",
						icon: 'none',
						duration: 3000
					})
					return
				}
				if (this.sendSmsCaptcha.length != 4) {
					this.sendSmsCaptchaCP!.setFocus(true)
					uni.showToast({
						title: '请先输入图形验证码',
						icon: 'none',
						duration: 3000
					});
					return
				}
				// const param : UTSJSONObject
				// console.log('sendSmsCode',{
				// 	"mobile": this.mobile,
				// 	"scene": "login-by-sms",
				// 	"captcha": this.sendSmsCaptcha
				// });
				uni.showLoading({ "title": "发送中" })
				const uniIdCo = uniCloud.importObject("uni-id-co", { "customUI": true })
				uniIdCo.sendSmsCode({
					"mobile": this.mobile,
					"scene": this.scene,
					"captcha": this.sendSmsCaptcha
				})
					.finally(() : void => {
						uni.hideLoading()
					})
					.then((_ : UTSJSONObject) => {
						uni.showToast({
							title: "短信验证码发送成功",
							icon: 'none',
							duration: 3000
						});
						this.showCodeInput()
					})
					.catch((err : any | null) : void => {
						const error = err as UniCloudError
						// console.error(error.message)
						// console.error(error.code)
						switch (error.code) {
							case "uni-captcha-verify-fail":
								uni.showToast({
									title: error.message,
									icon: 'none',
									duration: 3000,
									mask: false
								});
								this.sendSmsCaptchaCP!.getImageCaptcha(true);
								this.sendSmsCaptcha = "";
								break;
							case "uni-id-invalid-sms-template-id":
								this.showCodeInput()
								uni.showToast({
									title: ' 当前为测试模式,详情【控制台信息】',
									icon: 'none',
									duration: 3000
								});
								console.warn(error.message);
								break;
							default:
								uni.showToast({
									title: error.message,
									icon: 'none',
									duration: 3000
								});
								break;
						}
					})
			},
		}
	}
</script>

<style>
	.mobile-box {
		position: relative;
		flex-direction: row;
		background-color: #F8F8F8;
		justify-content: center;
		align-items: center;
		border-radius: 5rpx;
	}

	.area {
		width: 90rpx;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		margin-left: 10px;
	}

	.mobile-box .input-box {
		flex: 1;
	}

	.send-sms-captcha-box {
		margin-top: 10px;
	}
</style>