uni-zhihuikuangshan/pages/my/setPhone/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()">
					{{send_text}}
				</view>
			</view>
			<view class="re_btn" @click="bang_phone()">
				绑定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile:'',
				vcode:'',
				send_text:'发送验证码'
			};
		},
		methods:{
			send_vcode(){
				if(this.mobile.length < 11){
					uni.showToast({
						icon:'none',
						title:'请填写正确的手机号'
					})
					return
				}
				
				if(this.send_text = "发送验证码"){
					this.$api.sms_vcode({
						mobile:this.mobile
					}).then((res)=>{
						
						console.log(res.data)
						
						if(res.data.code == 3001){
							uni.showToast({
								icon:"none",
								title:"电话号码错误"
							})
						}else if(res.data.code == 3002){
							uni.showToast({
								icon:"none",
								title:"发送失败"
							})
						}else if(res.data.code == 0){
							uni.showToast({
								icon:"none",
								title:"验证码发送成功"
							})
						}
					})
				}
				
				this.send_text = "已发送"
				if(this.send_text = "已发送"){
					uni.showToast({
						icon:"none",
						title:"请勿重复发送"
					})
				}
				
			},
			bang_phone(){
				
				if(this.mobile == ''){
					uni.showToast({
						icon:'none',
						title:'手机号不能为空'
					})
					return
				}
				
				if(this.vcode == ''){
					uni.showToast({
						icon:'none',
						title:'验证码不能为空'
					})
					return
				}
				
				this.$api.user_mobile_set({
					mobile:this.mobile,
					vcode:this.vcode
				}).then((res)=>{
					console.log(res)
					console.log(res.data.data.mobile)
					
					if(res.data.code == 4002){
						uni.showToast({
							icon:'none',
							title:"验证码超时或者错误"
						})
						return
					}else{
						uni.setStorageSync('mobile', res.data.data.mobile)
						
						uni.showToast({
							icon:'none',
							title:'手机绑定成功'
						})
						this.send_text = "发送验证码"
					}
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				})
				
			},
		},
	}
</script>

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