手机验证码按钮bug

components/input/ver.vue

@@ -7,7 +7,7 @@
 
 <script>
 let running = false
-let time = 3
+let time = 60
 let text = '获取验证码'
 let interval
 
@@ -26,6 +26,7 @@ export default {
         if(this.time < 1) {
           clearInterval(interval)
           this.time = time + 1
+          running = false
         }
         return text
       }
@@ -39,6 +40,7 @@ export default {
     run() {
       if(running) return
       this.$emit('click', () => {
+        running = true
         this.time--
         interval = setInterval(() => {
           this.time--

components/input/ver_img.vue

@@ -8,7 +8,7 @@
 
 <script>
 let running = false
-let time = 3
+let time = 60
 let text = '获取验证码'
 let interval
 

pages/user/register.vue

@@ -22,7 +22,7 @@
         <el-input v-model="ruleFormPhone.nickname" placeholder="请输入昵称"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="pwd">
-        <el-input v-model="ruleFormPhone.pwd" placeholder="请输入密码 至少六个字符"></el-input>
+        <el-input type="password" v-model="ruleFormPhone.pwd" placeholder="请输入密码 至少六个字符"></el-input>
       </el-form-item>
     </el-form>
     <el-form
@@ -36,16 +36,16 @@
       :hide-required-asterisk="false"
     >
       <el-form-item label="邮箱" prop="email">
-        <el-input v-model="ruleFormEmail.email"></el-input>
+        <el-input placeholder="请输入邮箱" v-model="ruleFormEmail.email"></el-input>
       </el-form-item>
       <el-form-item label="验证码" prop="ver">
         <input-ver-img @change="chengeVerEmail"></input-ver-img>
       </el-form-item>
       <el-form-item label="昵称" prop="nickname">
-        <el-input v-model="ruleFormEmail.nickname"></el-input>
+        <el-input placeholder="请输入昵称" v-model="ruleFormEmail.nickname"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="pwd">
-        <el-input v-model="ruleFormEmail.pwd"></el-input>
+        <el-input placeholder="请输入密码 至少六个字符" v-model="ruleFormEmail.pwd"></el-input>
       </el-form-item>
     </el-form>
     <p class="remind">
@@ -54,7 +54,7 @@
     </p>
     <el-button type="primary" @click="doRegist">注册</el-button>
     <div class="checks">
-      <span @click="usePhone = !usePhone">邮箱注册</span>
+      <span @click="doSwitch">{{usePhone ? '邮箱' : '手机'}}注册</span>
       <span>直接登录</span>
     </div>
     <div class="logos">
@@ -164,17 +164,26 @@ export default {
       if(!mobile.trim()) {
         this.$message('请输入手机号')
         return
-      } else {
-        run()
       }
       let res = await this.$post('/api/user/sendMobileAuthCode', {
         mobile,
       })
       if(res) {
-        console.log(res)
+        run()
         this.$message(res.info)
       }
     },
+    /**
+     * 点击切换注册模式
+     */
+    doSwitch() {
+      this.usePhone = !this.usePhone
+      let clearValidate
+      if(!this.usePhone) clearValidate = this.$refs.ruleFormPhone.clearValidate
+      else clearValidate = this.$refs.ruleFormEmail.clearValidate
+      // setTimeout(clearValidate, 200)
+      this.$nextTick(clearValidate)
+    }
   }
 }
 </script>