uni-zhks-app/pages/m-personal/m-p-setPhone/m-p-setPhone.vue

<template>
	<view>
		<view class="content">
			<view class="input_box">
				<input type="text" v-model="mobile" placeholder="请输入手机号" placeholder-style="color:#999;"/>
			</view>
			<view class="send_box">
				<view class="send_code">
					<input type="text" v-model="vcode" placeholder="验证码" placeholder-style="color:#999;"/>
				</view>
				
				<view class="send_btn" @click="send_vcode()">
					发送验证码
				</view>
			</view>
			<view class="re_btn" @click="bang_phone()">
				绑定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile:'',
				vcode:'',
			};
		},
		methods:{
			async send_vcode(){
				
				if(this.mobile == ''){
					uni.showToast({
						icon:'none',
						title:'手机号不能为空'
					})
					return
				}
				
				const res = await this.$myRequest({
					method:"POST",
					url:'/sms/vcode',
					header:{
						"Content-Type":"application/json",
						Authorization : uni.getStorageSync('token_type') +' '+uni.getStorageSync('Authorization')
					},
					data:{
						mobile:this.mobile
					}
				})
			},
			async bang_phone(){
				
				if(this.mobile == ''){
					uni.showToast({
						icon:'none',
						title:'手机号不能为空'
					})
					return
				}
				
				if(this.vcode == ''){
					uni.showToast({
						icon:'none',
						title:'验证码不能为空'
					})
					return
				}
				
				const res = await this.$myRequest({
					method:"POST",
					url:'/user/mobile/set',
					header:{
						"Content-Type":"application/json",
						Authorization : uni.getStorageSync('token_type') +' '+uni.getStorageSync('Authorization')
					},
					data:{
						mobile:this.mobile,
						vcode:this.vcode
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f0f0f0;
	}
	.content{
		padding: 21rpx 30rpx 0;
		.input_box{
			margin-bottom: 20rpx;
			padding: 10rpx 25rpx;
			background-color: #fff;
			input{
				height: 60rpx;
				font-size: 28rpx;
				color: #333;
			}
			
		}
		.send_box{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.send_code{
				width: 400rpx;
				padding: 10rpx 25rpx;
				background-color: #fff;
				input{
					height: 60rpx;
					font-size: 28rpx;
					color: #333;
				}
				
			}
			.send_btn{
				width: 200rpx;
				background-color: #009FE8;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				line-height: 80rpx;
			}
		}
		.re_btn{
			background-color: #009FE8;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			line-height: 80rpx;
		}
	}
</style>