xusfood_client/center/findpaypass.vue

<template>
	<view class="page-wrap">
		<u-navbar
			title="忘记密码"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="title">手机验证身份</view>
		<view class="phone">
			<text v-if="leftTime>0">验证码已发送</text>
			<text v-else>手机号：</text>
			{{vuex_member_info.mobile|hidePhoneNumber}}</view>
		<u-code-input 
			v-model="value" 
			mode="line" 
			:maxlength="4"
			@finish="finish">
		</u-code-input>
		<u-button class="button" type="primary" :disabled="leftTime>0" @click="sendSMS" :text="btnStatus"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				leftTime: 0, // 剩余时间
				btnStatus: '发送验证码', // 按钮状态
				params:{
				}
				
			}
		},
		onShow() {
			
		},
		onLoad() {

		},
		methods: {
			sendSMS() {
			  // console.log('发送短信验证码到：', 手机号码);
			  this.$u.api.getCode({mobile:this.vuex_member_info.mobile}).then(res=>{
				  this.leftTime = 60;
				  this.btnStatus = `${this.leftTime}秒后重试`;
				  const timer = setInterval(() => {
					this.leftTime--;
					this.btnStatus = `${this.leftTime}秒后重试`;
					if (this.leftTime <= 0) {
					  clearInterval(timer);
					  this.btnStatus = '重新发送验证码';
					}
				  }, 1000);
			  	console.log('res',res.data);
			  }).catch(err=>{
			  	console.log('getCode',err);
			  });
			},
			finish(){
				console.log('value',this.value);
				uni.$u.route('/center/setPaypass', {
					fromPage: 'forget',
					code:this.value
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	text-align: center;
	.title{
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 45rpx;
		margin: 40rpx auto 30rpx;
	}
	.phone{
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
		line-height: 37rpx;
		margin-bottom: 130rpx;
	}
}
/deep/ .u-code-input__item{
	flex-grow: 1;
}
/deep/ .u-button{
	margin-top: 80rpx;
	width: 80%!important;
}
</style>