mobile-frame-h5-example/pages/template/bindPhoneNumber/bindPhoneNumber.vue

<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">绑定手机号</view>
			<input class="u-border-bottom" type="number" maxlength="11" v-model="tel" placeholder="请输入手机号" />
			<button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
			<u-message-input v-if="show" :focus="true" :value="messageCode" @change="change" @finish="finish" mode="bottomLine" :maxlength="codelength"></u-message-input>
		</view>
		<!-- <text v-if="messageError">验证码错误，请重新输入</text> -->
		<view class="captcha">
			<!-- <text v-if="show&&this.messageDisable==false" @tap="noCaptcha">收不到验证码点这里</text> -->
			<text v-if="messageShow">{{ second }}秒后可重新获取验证码</text>
		</view>
		<view class="buttom">
			<view class="hint">
				登录代表同意
				<text class="link">隐私政策，</text>
				并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tel: '',
			messageCode:'',
			messageShow: false,
			messageDisable: false,
			codelength: 4,
			show: false,
			second:10,
			// messageError:false
		}
	},
	onLoad() {
		
	},
	computed: {
		inputStyle() {
			let style = {};
			if(this.tel.length==11&&this.messageDisable==false) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		}
	},
	methods: {
		submit() {
			if(this.$u.test.mobile(this.tel)&&this.messageDisable==false) {
				this.messageDisable = true;
				this.messageShow = true;
				this.show = true;
				// this.getCaptcha()
				let interval = setInterval(() => {
					this.second--;
					if (this.second <= 0) {						
						this.messageDisable=false
						this.messageShow = false;
						if (this.messageCode.lenth != 4) {
							// this.messageError = true;
						}
						clearInterval(interval);
						this.second=10;
					}
				}, 1000);
				
			}
		},
		// 收不到验证码选择时的选择
		noCaptcha() {
			uni.showActionSheet({
				itemList: ['重新获取验证码', '接听语音验证码'],
				success: function(res) {
					
				},
				fail: function(res) {
					
				}
			});
		},
		// change事件侦听
		change(value) {
			// console.log('change', value);
		},
		// 输入完验证码最后一位执行
		finish(value) {
			let params = {
				tel:this.tel,
				openid:this.$store.state.vuex_user.openId,
				value:value
			};
			this.$u.api.bindphone(params)
			.then(res =>{
				if(res.retBody.OK=='ok'){
					this.$u.route({
						url: 'pages/template/login/code'
					})
				}else{
					
				}
				
			});
			console.log('finish', value);
		}
	}
};
</script>

<style lang="scss" scoped>
.hide{display: none!important;}
.wrap {
	font-size: 28rpx;
	.content {
		width: 600rpx;
		margin: 80rpx auto 0;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #ddd;
		}
		.getCaptcha {
			margin: 45rpx auto 130rpx;
			background-color: rgb(253, 243, 208);
			color: $u-tips-color;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			
			&::after {
				border: none;
			}
		}
	}
	.buttom {
		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;
			
			.link {
				color: $u-type-warning;
			}
		}
	}
	.captcha {
		color: $u-type-warning;
		font-size: 30rpx;
		margin-top: 40rpx;
		text-align: center;
	}
}
</style>