zhengxinApplets/pages/user/phone.vue

<template>
	<view class="phone">
		<view class="content">
			<view class="item">
				<view class="a">手机号</view>
				<view class="b">
					<view class="txt">{{userInfo.mobile}}</view>
					<view class="code" @click="sendCode()">{{count == 60?'获取验证码':count+"s"}}</view>
				</view>
			</view>
			<view class="item">
				<view class="a">验证码</view>
				<view class="b">
					<input type="number" v-model="captcha" placeholder="请输入验证码" />
				</view>
			</view>
			<view class="item">
				<view class="a">新手机号</view>
				<view class="b">
					<input type="number" v-model="mobile" placeholder="请输入新手机号" />
				</view>
			</view>
		</view>
		<view class="btn" @click="toSubmit()">验证</view>
	</view>
</template>

<script>
	let timer = null;
	export default {
		data() {
			return {
				userInfo: {},
				count: 60,
				isClick: true,
				captcha: "",
				mobile: "",
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			async toSubmit() {
				if(!this.mobile){
				  uni.showToast({
				  	title: '手机号格式不能为空',
				  	icon: "none",
				  })
				  return ;
				}
				if(!/^1[3456789]\d{9}$/.test(this.mobile)){
				  uni.showToast({
				  	title: '手机号格式不正确',
				  	icon: "none",
				  })
				  return ;
				}
				if(!this.captcha){
				  uni.showToast({
				  	title: '验证码不能为空',
				  	icon: "none",
				  })
				  return ;
				}
				const { code,msg } = await this.$api.changemobile({captcha: this.captcha, mobile: this.mobile});
				if(code == 1){
					uni.showToast({
						title: "修改成功"
					})
					setTimeout(()=>{
						this.getUserInfo();
					},2000)
				}else{
					uni.showToast({
						title: msg,
						icon: "none",
					})
				}
			},
			async sendCode() {
				const that = this;
				if(that.isClick == false){
					return ;
				}
				that.isClick = false;
				const { code,msg } = await this.$api.sendMsm({mobile: this.userInfo.mobile, event:"changemobile"});
				if(code == 1){
					uni.showToast({
						title: "验证码已发送",
						icon: "none",
					})
					timer =  setInterval(()=>{
						if(that.count == 60){
							clearInterval(timer);
							that.count = 60;
							that.isClick = true;
						}else{
							that.count --
						}
					},1000)
				}else{
					that.isClick = true;
					uni.showToast({
						title: msg,
						icon: "none",
					})
				}
			},
			async getUserInfo() {
				const { code, data , msg } = await this.$api.getMemberInfo({token: uni.getStorageSync("token")});
				if(code == 1){
					this.userInfo = data.user;
				}else{
					uni.showToast({
						title: msg,
						icon: "none",
					})
				}
			},
		},
		destroyed() {
			clearInterval(timer)
		}
	}
</script>

<style lang="scss">
.phone{
	padding: 25rpx;
	overflow: hidden;
	.btn{
		width: 100%;
		line-height: 90rpx;
		background: #00C6A9;
		box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
		border-radius: 90rpx;
		text-align: center;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 120rpx;
	}
	.content{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px solid #EAEAEA;
			padding: 35rpx 0;
			overflow: hidden;
			position: relative;
			&:first-child{
				border-color: #FFFFFF;
			}
			.a{
				width: 160rpx;
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
			}
			.b{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 30rpx;
				color: #999999;
				.txt{
					flex: 1;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}
				input{
					flex: 1;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}
				.code{
					font-weight: 500;
					font-size: 30rpx;
					color: #00C6A9;
					margin-right: 20rpx;
				}
			}
		}
		
	}
}
</style>