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

pages/account/resetPassword.vue

@@ -15,10 +15,15 @@
 					<label>确认支付密码</label>
 					<input type="number" v-model="verify" maxlength="6" password placeholder="请确认支付密码" />
 				</view>
-				<view class="inputs">
+				 <view class="getCode">
-					<label>验证码</label>
+				     <view class="inputs">
-					<input type="number" v-model="code" maxlength="4" placeholder="请输入验证码" />
+				     	<label>验证码</label>
-				</view>
+				     	<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 = 3;
-				let smsTime = 60;
 				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>

unpackage/dist/dev/app-plus/app-view.js

@@ -22289,22 +22289,44 @@ var render = function() {
                 "v-uni-view",
                 { staticClass: _vm._$g(13, "sc"), attrs: { _i: 13 } },
                 [
-                  _c("v-uni-label", { attrs: { _i: 14 } }, [_vm._v("验证码")]),
+                  _c(
-                  _c("v-uni-input", {
+                    "v-uni-view",
-                    attrs: {
+                    { staticClass: _vm._$g(14, "sc"), attrs: { _i: 14 } },
-                      type: "number",
+                    [
-                      maxlength: "4",
+                      _c("v-uni-label", { attrs: { _i: 15 } }, [
-                      placeholder: "请输入验证码",
+                        _vm._v("验证码")
-                      _i: 15
+                      ]),
+                      _c("v-uni-input", {
+                        attrs: {
+                          type: "number",
+                          maxlength: "4",
+                          placeholder: "请输入验证码",
+                          _i: 16
+                        },
+                        model: {
+                          value: _vm._$g(16, "v-model"),
+                          callback: function($$v) {
+                            _vm.$handleVModelEvent(16, $$v)
+                          },
+                          expression: "code"
+                        }
+                      })
+                    ],
+                    1
+                  ),
+                  _c(
+                    "v-uni-view",
+                    {
+                      staticClass: _vm._$g(17, "sc"),
+                      attrs: { _i: 17 },
+                      on: {
+                        click: function($event) {
+                          return _vm.$handleViewEvent($event)
+                        }
+                      }
                     },
-                    model: {
+                    [_vm._v(_vm._$g(17, "t0-0"))]
-                      value: _vm._$g(15, "v-model"),
+                  )
-                      callback: function($$v) {
-                        _vm.$handleVModelEvent(15, $$v)
-                      },
-                      expression: "code"
-                    }
-                  })
                 ],
                 1
               )
@@ -22316,12 +22338,12 @@ var render = function() {
       ),
       _c(
         "v-uni-view",
-        { staticClass: _vm._$g(16, "sc"), attrs: { _i: 16 } },
+        { staticClass: _vm._$g(18, "sc"), attrs: { _i: 18 } },
         [
           _c(
             "v-uni-button",
             {
-              attrs: { type: "default", "form-type": "submit", _i: 17 },
+              attrs: { type: "default", "form-type": "submit", _i: 19 },
               on: {
                 click: function($event) {
                   return _vm.$handleViewEvent($event)
@@ -22425,7 +22447,7 @@ if(false) {}
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/runtime/api.js */ 10);
 exports = ___CSS_LOADER_API_IMPORT___(false);
 // Module
-exports.push([module.i, "@charset \"UTF-8\";\n/**\n * 这里是uni-app内置的常用样式变量\n *\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\n *\n */\n/**\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\n *\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\n */\n/**\n * Web唐明明\n * 匆匆数载恍如梦，岁月迢迢华发增。\n * 碌碌无为枉半生，一朝惊醒万事空。\n */\n.ios-bottom[data-v-dc9b4e62] {\n  padding-bottom: env(safe-area-inset-bottom);\n  padding-bottom: constant(safe-area-inset-bottom);\n}\n.ios-left[data-v-dc9b4e62] {\n  padding-left: env(safe-area-inset-left);\n  padding-left: constant(safe-area-inset-left);\n}\n.ios-right[data-v-dc9b4e62] {\n  padding-right: env(safe-area-inset-right);\n  padding-right: constant(safe-area-inset-right);\n}\n.ios-top[data-v-dc9b4e62] {\n  padding-top: var(--status-bar-height);\n}\n.vertical[data-v-dc9b4e62] {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-box-pack: center;\n}\n.nowrap[data-v-dc9b4e62] {\n  max-width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ellipsis[data-v-dc9b4e62] {\n  max-width: 100%;\n  display: -webkit-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n}\n/* 颜色变量 */\n/* 行为相关颜色 */\n/* 文字基本颜色 */\n/* 背景颜色 */\n/* 边框颜色 */\n/* 尺寸变量 */\n/* 文字尺寸 */\n/* 图片尺寸 */\n/* Border Radius */\n/* 水平间距 */\n/* 垂直间距 */\n/* 透明度 */\n/* 文章场景相关 */\n.content[data-v-dc9b4e62] {\n  background: #F3F6FB;\n  min-height: 100vh;\n  overflow: hidden;\n}\n.sub-title[data-v-dc9b4e62] {\n  color: #666;\n  text-align: center;\n  margin: 60rpx 30rpx;\n  font-size: 28rpx;\n}\n.password[data-v-dc9b4e62] {\n  padding: 0 30rpx;\n}\n.password .prompt[data-v-dc9b4e62] {\n  margin-top: 60rpx;\n  font-size: 28rpx;\n  color: gray;\n  text-align: center;\n}\n.password .prompt-code[data-v-dc9b4e62] {\n  line-height: 50rpx;\n}\n.password .prompt-code uni-button[size=\"mini\"][data-v-dc9b4e62] {\n  vertical-align: top;\n  margin-left: 20rpx;\n  font-size: 28rpx;\n  background: transparent;\n  color: #34CE98;\n  height: 50rpx;\n  line-height: 50rpx;\n  width: auto;\n  padding: 0;\n}\n.password .prompt-code uni-button[size=\"mini\"][data-v-dc9b4e62]::after {\n  display: none;\n}\n.password .group[data-v-dc9b4e62] {\n  margin-top: 30rpx;\n  border-radius: 10rpx;\n  box-shadow: 0 0 4rpx 4rpx rgba(51, 51, 51, 0.02);\n  background-color: white;\n}\n.password .group .inputs[data-v-dc9b4e62] {\n  padding: 30rpx 40rpx;\n  border-bottom: solid 1rpx #f5f5f5;\n}\n.password .group .inputs[data-v-dc9b4e62]:last-child {\n  border-bottom: none;\n}\n.password .group .inputs uni-label[data-v-dc9b4e62] {\n  color: #666;\n  font-size: 28rpx;\n}\n.password .group .inputs uni-input[data-v-dc9b4e62] {\n  height: 70rpx;\n  line-height: 70rpx;\n  font-size: 32rpx;\n}\n.buttons[data-v-dc9b4e62] {\n  padding: 60rpx 30rpx;\n}\n.buttons uni-button[data-v-dc9b4e62] {\n  border-radius: 45rpx;\n  height: 90rpx;\n  line-height: 90rpx;\n  background-color: #34CE98;\n  color: white;\n  font-weight: bold;\n  font-size: 32rpx;\n}\n.buttons uni-button[data-v-dc9b4e62]::after {\n  display: none;\n}\n", ""]);
+exports.push([module.i, "@charset \"UTF-8\";\n/**\n * 这里是uni-app内置的常用样式变量\n *\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\n *\n */\n/**\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\n *\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\n */\n/**\n * Web唐明明\n * 匆匆数载恍如梦，岁月迢迢华发增。\n * 碌碌无为枉半生，一朝惊醒万事空。\n */\n.ios-bottom[data-v-dc9b4e62] {\n  padding-bottom: env(safe-area-inset-bottom);\n  padding-bottom: constant(safe-area-inset-bottom);\n}\n.ios-left[data-v-dc9b4e62] {\n  padding-left: env(safe-area-inset-left);\n  padding-left: constant(safe-area-inset-left);\n}\n.ios-right[data-v-dc9b4e62] {\n  padding-right: env(safe-area-inset-right);\n  padding-right: constant(safe-area-inset-right);\n}\n.ios-top[data-v-dc9b4e62] {\n  padding-top: var(--status-bar-height);\n}\n.vertical[data-v-dc9b4e62] {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-box-pack: center;\n}\n.nowrap[data-v-dc9b4e62] {\n  max-width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ellipsis[data-v-dc9b4e62] {\n  max-width: 100%;\n  display: -webkit-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n}\n/* 颜色变量 */\n/* 行为相关颜色 */\n/* 文字基本颜色 */\n/* 背景颜色 */\n/* 边框颜色 */\n/* 尺寸变量 */\n/* 文字尺寸 */\n/* 图片尺寸 */\n/* Border Radius */\n/* 水平间距 */\n/* 垂直间距 */\n/* 透明度 */\n/* 文章场景相关 */\n.content[data-v-dc9b4e62] {\n  background: #F3F6FB;\n  min-height: 100vh;\n  overflow: hidden;\n}\n.sub-title[data-v-dc9b4e62] {\n  color: #666;\n  text-align: center;\n  margin: 60rpx 30rpx;\n  font-size: 28rpx;\n}\n.password[data-v-dc9b4e62] {\n  padding: 0 30rpx;\n}\n.password .prompt[data-v-dc9b4e62] {\n  margin-top: 60rpx;\n  font-size: 28rpx;\n  color: gray;\n  text-align: center;\n}\n.password .prompt-code[data-v-dc9b4e62] {\n  line-height: 50rpx;\n}\n.password .prompt-code uni-button[size=\"mini\"][data-v-dc9b4e62] {\n  vertical-align: top;\n  margin-left: 20rpx;\n  font-size: 28rpx;\n  background: transparent;\n  color: #34CE98;\n  height: 50rpx;\n  line-height: 50rpx;\n  width: auto;\n  padding: 0;\n}\n.password .prompt-code uni-button[size=\"mini\"][data-v-dc9b4e62]::after {\n  display: none;\n}\n.password .group[data-v-dc9b4e62] {\n  margin-top: 30rpx;\n  border-radius: 10rpx;\n  box-shadow: 0 0 4rpx 4rpx rgba(51, 51, 51, 0.02);\n  background-color: white;\n}\n.password .group .inputs[data-v-dc9b4e62] {\n  padding: 30rpx 40rpx;\n  border-bottom: solid 1rpx #f5f5f5;\n}\n.password .group .inputs[data-v-dc9b4e62]:last-child {\n  border-bottom: none;\n}\n.password .group .inputs uni-label[data-v-dc9b4e62] {\n  color: #666;\n  font-size: 28rpx;\n}\n.password .group .inputs uni-input[data-v-dc9b4e62] {\n  height: 70rpx;\n  line-height: 70rpx;\n  font-size: 32rpx;\n}\n.buttons[data-v-dc9b4e62] {\n  padding: 60rpx 30rpx;\n}\n.buttons uni-button[data-v-dc9b4e62] {\n  border-radius: 45rpx;\n  height: 90rpx;\n  line-height: 90rpx;\n  background-color: #34CE98;\n  color: white;\n  font-weight: bold;\n  font-size: 32rpx;\n}\n.buttons uni-button[data-v-dc9b4e62]::after {\n  display: none;\n}\n.getCode[data-v-dc9b4e62] {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  width: 100%;\n}\n.getCode .time[data-v-dc9b4e62] {\n  padding: 20rpx 30rpx 20rpx 20rpx;\n}\n", ""]);
 // Exports
 module.exports = exports;