Ci2Order.vue/App/pages/center/setting/changetel.vue

<template>
	<view class="changetel">
		<z-navbar title="更换手机号" back></z-navbar>
		<view class="flex-n fac top_toast">
			<view class="top_toast_dot">
				*
			</view>
			<view class="top_toast_text">
				更换手机号后，您所在的店铺要用新的手机号重新登录
			</view>
		</view>
		<z-card>
			<view class="mlr-40 card_area">
				<view class="flex-n fac card_area_item">
					<view class="card_icon iconfont iconyuanjiaojuxing2"></view>
					<z-input class="ml-19" type="number" align="left" v-model="phone" placeholder="请输入新的手机号码"></z-input>
				</view>
				<view class="line"></view>
				<view class="flex-n fac card_area_item">
					<view class="card_icon iconfont iconjuxing11" style="font-size: 30rpx;"></view>
					<z-input class="ml-19 flex-1" align="left" v-model="code" placeholder="请输入短信验证码"></z-input>
					<view class="card_send_message" v-if="sendCodeState!=2" type="primary" @click="sendCode(phone)">{{sendCodeState=='0'?'发送验证码':'重新获取'}}
					</view>
					<view class="card_send_message" v-else disabled type="primary">{{countdown}}s</view>
				</view>
			</view>
			
		</z-card>
		<z-button class="mt-50" @click="submit">保 存</z-button>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				phone:'',
				code:'',
				
				sendCodeState: 0,//发送验证码 0 重新发送 1 倒计时2
				countdown: 60,//倒计时
				cleartime: '',//清除定时器
			}
		},
		mounted(){
			
		},
		watch:{
			countdown(newval, oldval) {
			                if (newval == 0) {
			                    clearInterval(this.cleartime);
			                    this.countdown = 60;
			                    this.sendCodeState = 1;
			                }
			            },
		},
		methods:{
			//发送验证码
			sendCode(phone) {
				this.$axios.post('sms/sendSms', {
					"phone": phone,
					"type": "SEND_CODE"
				}).then(res => {
					this.$refs.uToast.success('验证码发送成功');
					this.sendCodeState = 2;
					this.cleartime = setInterval(() => {
						this.countdown--;
					}, 1000)
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
			},
			submit(){
				this.$axios.post('app/user/updatePhone',{
					phone:this.phone,
					code:this.code
				}).then(res => {
					this.$refs.uToast.success('手机号修改成功');
					uni.reLaunch({
						url:'../../login/oldlogin'
					})
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
				
			}
		},
		beforeDestroy() {
			clearTimeout(this.cleartime);
		}
	}
</script>

<style lang="scss" scoped>
	.changetel{
		.top_toast{
			line-height: 97rpx;
			margin-left: 30rpx;
			letter-spacing: 1rpx;
			.top_toast_dot{
				font-size: 24rpx;
				color: #FF0000;
			}
			.top_toast_text{
				font-size: 24rpx;
				color: #666666;
				margin-left: 19rpx;
			}
		}
		.card_area{
			.card_area_item{
				height: 100rpx;
			}
			.card_icon {
				font-size: 40rpx;
				min-width: 40rpx;
				color: gray;
			}
			.card_send_message{
				font-size: 28rpx;
				color: #2481EE;
			}
		}
	}
</style>