设置钱包密码加手动获取验证码功能

pages/account/resetPassword.vue

@@ -15,10 +15,15 @@
 					<label>确认支付密码</label>
 					<input type="number" v-model="verify" maxlength="6" password placeholder="请确认支付密码" />
 				</view>
-				<view class="inputs">
-					<label>验证码</label>
-					<input type="number" v-model="code" maxlength="4" placeholder="请输入验证码" />
-				</view>
+				 <view class="getCode">
+				     <view class="inputs">
+				     	<label>验证码</label>
+				     	<input type="number" v-model="code" maxlength="4" placeholder="请输入验证码" />
+				     </view>
+				     <view class="time" @click="!canGet ? '':getCode()">
+				          {{sendCode}}
+				     </view>
+				 </view>
 			</view>
 		</view>
 		<!-- 按钮 -->
@@ -33,25 +38,29 @@
 	export default {
 		data() {
 			return {
-				sendCode	: '',
+				sendCode	: '获取验证码',
+                canGet      : true,
 				getCodeState: false,
 				phone		: '',
 				code		: '',
 				password	: '',
-				verify		: ''
+				verify		: '',
+                outTime     : '',
 			}
 		},
 		onLoad() {
 			this.phone = this.$Route.query.phone
-			this.getCode()
-		},
+		},
+        onUnload() {
+           clearInterval(this.outTime) 
+        },
 		methods: {
+            
 			// 获取验证码
 			getCode(){
-				let outTime;
-				let smsTime = 60;
+				let smsTime = 3;
 				getSms().then(res => {
-                    console.log(res)
+                    this.canGet =  false
 					uni.showToast({
 						title: res.message,
 						icon: "none",
@@ -59,17 +68,21 @@
                     this.phone = res.mobile
 					this.getCodeState   = true;
 					this.sendCode = smsTime + 's后重新获取';
-					outTime = setInterval(() => {
+					this.outTime = setInterval(() => {
+                        console.log(smsTime);
 						if (smsTime <= 1) {
 							this.getCodeState   = false;
 							this.sendCode = '重新获取';
-							clearInterval(outTime);
+                            this.canGet =  true;
+							clearInterval(this.outTime);
 							return
 						}
 						this.sendCode = smsTime + 's后重新获取';
 						smsTime -= 1;
 					}, 1000);
-				}).catch((err) => {
+				}).catch((err) => {
+                    this.canGet =  true;
+                    clearInterval(this.outTime)
 					uni.showToast({
 						title: err.message,
 						icon: "none",
@@ -97,12 +110,13 @@
 					password_confirmation: this.verify,
 					code: this.code
 				}).then(res => {
-                    console.log(res)
 					uni.showModal({
 						title: '提示',
 						content: res,
 						showCancel:false,
 						success: res=> {
+                            this.canGet =  true;
+                            clearInterval(this.outTime)
 							uni.navigateBack()
 						}
 					})
@@ -201,5 +215,16 @@
 				display: none;
 			}
 		}
-	}
+	}
+    .getCode{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        width: 100%;
+        .time{
+            padding:20rpx 30rpx 20rpx 20rpx;
+        }
+    }
 </style>