xiangqin/pages/profile/changephone.vue

<template>
	<view class="index">
		<view class="" v-if="isStart">
			<view class="title">
				更换手机号
			</view>
			<view class="phone u-flex">
				<input type="number" placeholder="请输入手机号" v-model="oldPhone">
			</view>
			<view class="phone u-flex">
				<input type="number" placeholder="请输入短信验证码" v-model="oldCode">
				<text class="code" @click="send">{{tips}}</text>
			</view>
			<view class="publish" @click="next">
				下一步
			</view>
		</view>
		<view class="" v-else>
			<view class="title">
				新手机号
			</view>
			<view class="phone u-flex">
				<input type="number" placeholder="请输入手机号" v-model="newPhone">
			</view>
			<view class="phone u-flex">
				<input type="number" placeholder="请输入短信验证码" v-model="newCode">
				<text class="code" @click="send">{{tips}}</text>
			</view>
			<view class="publish" @click="submit">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips:'获取验证码',
				s: 60,
				time: null,
				isStart:true,
				oldPhone:'',
				oldCode:'',
				newPhone:'',
				newCode:'',
			}
		},
		methods: {
			submit(){
				if (!this.newPhone) {
					this.$u.toast('请输入新手机号')
					return 
				}
				if (!this.newCode) {
					this.$u.toast('请输入新手机号验证码')
					return 
				}	
				uni.$u.http.post('/api/user/eidt_phone',{phone:this.oldPhone,code:this.oldCode,new_phone:this.newPhone,new_code:this.newCode}).then(res => {
					if(res.code==1){
						this.$u.toast(res.msg)
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},2000)
				
					}
				})
			},
			next(){
				if (!this.oldPhone) {
					this.$u.toast('请输入旧手机号')
					return 
				}
				if (!this.oldCode) {
					this.$u.toast('请输入旧手机号验证码')
					return 
				}
				this.s=60
				this.tips='获取验证码'
			// uni.navigateTo({
			// 	url:'newphone'
			// })	
			this.isStart=false
			},
			send() {
				if (this.s == 60) {
					if(this.isStart){
						if (!this.oldPhone) {
							uni.showToast({
								title: "请输入旧手机号",
								duration: 2000,
								icon: "none",
							});
							return false;
						}
					}else{
						if (!this.newPhone) {
							uni.showToast({
								title: "请输入新手机号",
								duration: 2000,
								icon: "none",
							});
							return false;
						}
					}
					
					
					uni.showLoading({
						mask: true,
						title: "请稍后"
					})
					var result = {}
					result.phone = this.tel
					result.event = 'register'
					this.$u.post('/api/Sms/send', result).then((res) => {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none",
						});
						if (res.code == 1) {
							this.time = setInterval(() => {
								this.s--
								this.tips = `${this.s}s`
								if (this.s == 0) {
									this.s = 60
									this.tips = '重新发送'
									clearInterval(this.time)
								}
							}, 1000)
						}
					});
				} else {
					uni.showToast({
						title: "请稍后再试",
						duration: 2000,
						icon: "none",
					});
					return false;
				}
			},
		}
	}
</script>

<style lang="scss">
	.publish{
		
		margin: 128rpx auto;
		width: 650rpx;
		height: 104rpx;
		line-height: 104rpx;
		text-align: center;
		background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
		border-radius: 52rpx;
		font-size: 36rpx;
		color: #fff;
		
	}
.index{
	padding: 70rpx 60rpx 0;
	color: #222222;
	.title{
		font-size: 44rpx;
		font-weight: 600;
		margin-bottom: 50rpx;
	}
	.phone{
		height: 128rpx;
		line-height: 128rpx;
		border-bottom: 2rpx solid #F2F2F2;
		input{
			flex: 1;
		}
		.code{
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			background: linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
}
</style>