mui 绑定手机号

html

<div id="app">
	<header class="flex-row top">
		<i class="mui-icon mui-icon-arrowleft" id="back" @click='back'></i>
		<span id="title" class="title">绑定手机</span>
		<i class="save" id="save" @click='save'>保存</i>
	</header>
	<div class="bindForm">
		<p class="prompt">绑定手机号后，下次登录可使用手机号登录，以及用于修改密码</p>
		<div class="phone">
			<label>+86</label>
			<input type="text" id="phone" placeholder="手机号" v-model="bindForm.phone" />
		</div>
		<div class="code">
			<label></label>
			<input type="text" id="code" placeholder="验证码" v-model="bindForm.code" />
			<button type="button" id="getCode" @click="getCode">获取验证码</button>
		</div>
	</div>
</div>

css

body {
	overflow: auto;
	font-family: PingFang SC;
	font-weight: 400;
}

.top {
	height: 0.9rem;
	background: #000;
	align-items: center;
	padding: 0rem 0.32rem;
	border: 0rem;
	box-shadow: none;
	margin-bottom: 0.6rem;
}

.top .mui-icon {
	color: #fff;
	font-size: 0.5rem;
	font-weight: 500;
}

.top .save {
	color: #00FFC2;
	font-size: 0.32rem;
}

.top .title {
	color: #fff;
	min-width: 2.52rem;
	height: 0.5rem;
	line-height: 0.5rem;
	display: block;
	text-align: center;
	font-size: 0.36rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
}

.bindForm {
	width: 100%;
	margin: 0 .32rem;
}

.bindForm .prompt {
	font-size: .24rem;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: .33rem;
	color: #FFFFFF;
	opacity: 0.5;
	margin-bottom: .45rem;
}

.bindForm .phone,
.bindForm .code {
	display: flex;
	align-items: center;
	margin-bottom: .6rem;
}


.bindForm label {
	font-size: .32rem;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: .45rem;
	color: #FFFFFF;
	opacity: 0.8;
	margin-right: .36rem;
}

#phone {
	width: 5.47rem;
}

#code {
	width: 3.81rem;
	margin-left: .548rem;
}

#phone,
#code {
	background-color: transparent;
	padding: .12rem;
	margin-bottom: 0;
	height: .6rem;
	font-size: .32rem;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: .6rem;
	color: #FFFFFF;
	opacity: 0.5;
}

#phone::placeholder,
#code::placeholder {
	font-size: .32rem;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: .45rem;
	color: #FFFFFF;
	opacity: 0.5;
}

#getCode {
	font-size: .28rem;
	font-family: PingFang SC;
	font-weight: 400;
	/* line-height: .4rem; */
	color: #00FFC2;
	opacity: 1;
	background-color: transparent;
	border: none;
}

js

// 绑定手机
new Vue({
	el: "#app",
	data: {
		bindForm: {
			phone: '',
			code: '',
		}
	},
	mounted() {
	},
	updated() {
	},
	methods: {

		// 获取验证码按钮
		getCode(){
			let countdown = 60;
			function settime(obj) {
				if (countdown == 0) {
					obj.removeAttribute("disabled"); 
					obj.style.color = "#00FFC2"
					obj.innerText="获取验证码";
					countdown = 60;
					return;
				} else {
					obj.setAttribute("disabled", true);
					obj.style.color = "#acacac"
					obj.innerText="重新发送(" + countdown + ")";
					countdown--;
				}
				setTimeout(function(){settime(obj)}, 1000)
			}
			if((/^([1]\d{10}|([\(（]?0[0-9]{2,3}[）\)]?[-]?)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?)$/).test(this.bindForm.phone)){
				let obj = document.getElementById('getCode')
				settime(obj)
				post(
					url = '/app/verification/create',
					params = {
						phone: this.bindForm.phone
					}
				).then(res=>{
					plus.nativeUI.toast('验证码已发送')
					console.log(res)
				}).catch(err=>{
					plus.nativeUI.toast('验证码获取失败')
					console.log(err)
				})
			}else{
				plus.nativeUI.toast('手机号码格式错误')
			}
			
		},

		// 保存按钮
		save(){
			if(this.bindForm.phone != '' && this.bindForm.code != ''){
				plus.nativeUI.showWaiting("验证中")
				post(
					url = '/app/verification/checkPhone',
					params = {
						phone: this.bindForm.phone,
						VerificationCode: this.bindForm.code
					}
				).then(res=>{
					plus.nativeUI.closeWaiting()
					console.log(res)
					post(
						url = '/app/patrolInformation/edit',
						params = {
							patrolPhone: this.bindForm.phone
						}
					).then(res=>{
						if(res.code == 200){
							plus.nativeUI.toast('已修改电话')
							//刷新
							const index = plus.webview.getLaunchWebview();
							mui.fire(index, 'refresh');
						}else{
							if(res.message != ''){
								if(res.message != '该手机号已经存在')
									plus.nativeUI.toast('手机号已经绑定')
							}else{
								plus.nativeUI.toast('验证码错误')
							}
						}
					}).catch(err=>{
						plus.nativeUI.toast('修改失败')
					})
				}).catch(err=>{
					console.log(JSON.stringify(err))
					plus.nativeUI.closeWaiting()
					// if(err.code == 500){
					plus.nativeUI.toast(err.message)
					// }else{
						// plus.nativeUI.toast('验证码错误')
					// }
				})
			}else if(this.bindForm.phone == ''){
				plus.nativeUI.toast('手机号不能为空')
			}else if(this.bindForm.code == ''){
				plus.nativeUI.toast('验证码不能为空')
			}
		}
	},
})