xiangqin/pages/profile/newphone.vue

<template>
	<view class="index">
		<view class="">
			<view class="title">
				新手机号
			</view>
			<view class="phone u-flex">
				<input type="number" placeholder="请输入手机号">
			</view>
			<view class="phone u-flex">
				<input type="number" placeholder="请输入短信验证码">
				<text class="code" @click="send">{{tips}}</text>
			</view>
			<view class="publish" @click="next">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips:'获取验证码',
				s: 60,
				time: null,
			}
		},
		methods: {
			next(){
			uni.navigateTo({
				url:'newphone'
			})	
			},
			send() {
				if (this.s == 60) {
					if (!this.tel) {
						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>