exam/exam-06173-uni - reg/pages/login/components/SmsBox.vue

<template>
	<view>


		<uni-forms :modelValue="postForm" ref="postForm" :rules="rules" :label-width="100">
			<uni-forms-item name="mobile" label="手机号码" required>
				<uni-easyinput type="text" v-model="postForm.mobile" placeholder="手机号码/用户名" />
			</uni-forms-item>


			<uni-forms-item name="captchaValue" label="图形验证" required>
				<view class="ca-box">
					<uni-easyinput class="input" type="text" v-model="postForm.captchaValue"
						placeholder="图形验证码" />
					<image class="img" @click="refreshCaptcha" :src="captchaUrl">
				</view>
			</uni-forms-item>


			<uni-forms-item name="smsCode" label="短信验证" required>
				<view class="ca-box">
					<uni-easyinput class="input" type="number" v-model="postForm.smsCode" placeholder="短信验证码" />
					<button class="btn" type="warn" @click="sendSms" :disabled="left > 0">
						{{left ==0 ? '发送': `${ left }秒` }}
					</button>
				</view>
			</uni-forms-item>
		</uni-forms>

	</view>
</template>

<script>

	import { send } from '@/api/ability/sms'
	import { isMobile } from '@/common/validate'

	export default {
		name: 'SmsBox',
		props: {
			value: Object,
			type: Number
		},
		data() {
			return {
				captchaUrl: '',
				rules: {
					mobile: {
						rules: [{
							required: true,
							errorMessage: '手机号码不能为空！'
						},
						{
							validateFunction:function (rule, value, data, callback) {
								if(!isMobile(value)){
									callback("手机号码格式错误！");
								}
							}
						}
						]
					},
					
					captchaValue: {
						rules: [{
							required: true,
							errorMessage: '图形验证码不能为空！'
						}]
					},
					
					smsCode: {
						rules: []
					
					}
				},
				// 数据
				postForm: {
					
				},
				// 值
				timer: '',
				left: ''
			}
		},
		
		watch: {
		  // 传递参数
		  postForm: {
		    handler(val) {
				 // 发送验证码
				 this.$emit('input', val)
		    },
			deep: true
		  },
		  
		  // 检测查询变化
		  value: {
		    handler(val) {
		  		this.postForm = val
		    },
		  	deep: true
		  }
		},

		created() {
			this.postForm = this.value
			this.refreshCaptcha()
		},

		methods: {
			
			// 表单验证
			async validate(){
				
				// 增加校验
				this.rules.smsCode.rules = [{
					required: true,
					errorMessage: '请输入6位数字验证码！'
				}]
				
				// 返回结果
				return await this.$refs.postForm.validate().then(()=>{
					return true
				}).catch(()=>{
					return false
				})
			},
			

			// 刷新编码
			refreshCaptcha() {
				this.postForm.captchaKey = new Date().getTime()
				this.captchaUrl = `${this.$urls.api}/api/common/captcha/gen?key=${this.postForm.captchaKey}`
			},

			// 发送短信
			sendSms() {
				
				// 计时未停止，不允许发送
				if(this.left > 0){
					return;
				}
				
				if(this.timer){
					clearInterval(this.timer)
				}
				
				// 移除校验
				this.rules.smsCode.rules = []
				
				// 发送类型
				this.postForm.smsType = this.type
				
				// 表单验证
				this.$refs.postForm.validate().then((res) => {
					
					send(this.postForm).then(() => {
						this.left = 60
						this.timer = setInterval(this.calc, 1000)
						this.dialogVisible = false
						uni.showToast({
							title: '短信发送成功，请查收手机短信！',
							icon:'none',
							duration: 2000
						})
						
						// 发送验证码
						this.$emit('input', this.postForm)
					})
				}).catch(()=>{
					
				})
			},

			calc() {
				this.left -= 1
				if (this.left === 0) {
					clearInterval(this.timer)
				}
			}
		}
	}
</script>