功能

src/views/userCenter/SetPhone.vue

 <template>
-    <div class="set-passwd">
-        <section v-if="step == '1'" style="color:#353535;text-align:left;line-height: 1.5em;">
+    <div class="set-phone">
+        <section v-if="step === '1'" style="color:#353535;text-align:left;line-height: 1.5em;">
            <div style="font-size: 20px;">已绑定手机号</div>
            <div class="title" style="font-size:25px;margin-top:5px;margin-bottom:22px;">{{userInfo.phone || userInfo.email}}</div>
            <div style="font-size:14px;color:#737582;">绑定手机号将作为您身份验证的重要方式，请谨慎操作！</div>
-           <van-button block style="margin-top: 60px;" type="info" @click="sendCode">更改手机号</van-button>
+           <van-button block style="margin-top: 60px;" type="info" @click="step = '2'">更改手机号</van-button>
            <div style="font-size:12px;color:#999999;margin-top:17px;">变更手机号后，将自动同步新手机号为登录账号</div>
         </section>
-        <section v-if="step == '2'">
-          <div class="title">输入验证码</div>
-          <div style="font-size: 14px; color: #999999;text-align:left;line-height: 2em;margin-bottom: 30px;">6位验证码已发送至{{userInfo.phone || userInfo.email}}</div>
-          <van-password-input
-            :value="code"
-            :mask="false"
-            :focused="showKeyboard"
-            @focus="showKeyboard = true"
-          />
-          <van-number-keyboard
-            :show="showKeyboard"
-            @input="onInput"
-            @delete="onDelete"
-            @blur="showKeyboard = false"
-          />
-          <div style="color:#737582;font-size: 14px;text-align:left;margin-top:15px;" @click="sendCode">重新发送{{count > 0 ? `(${count}s)` : ''}}</div>
-        </section>
-        <section v-if="step == '3'">
+        <code-input
+          v-if="step === '2'"
+          :code.sync="code"
+          :codeTo="userInfo.phone || userInfo.email"
+          :sendCode="sendCode"
+          :validateCode="validateOldAccount"
+          :next="showNewAccountInput"></code-input>
+        <section v-if="step === '3'">
           <div class="title">输入新手机号</div>
           <van-field v-model="newPhone" label="" placeholder="请输入新手机号" class="margin-top30"></van-field>
-          <van-button block type="info" class="margin-top30" @click="sendCode">确定</van-button>
-        </section>
-        <section v-if="step == '4'">
-           <div class="title">输入验证码</div>
-          <div style="font-size: 14px; color: #999999;text-align:left;line-height: 2em;margin-bottom: 30px;">6位验证码已发送至{{userInfo.phone || userInfo.email}}</div>
-          <van-password-input
-            :value="code"
-            :mask="false"
-            :focused="showKeyboard"
-            @focus="showKeyboard = true"
-          />
-          <van-number-keyboard
-            :show="showKeyboard"
-            @input="onInput"
-            @delete="onDelete"
-            @blur="showKeyboard = false"
-          />
-          <div style="color:#737582;font-size: 14px;text-align:left;margin-top:15px;" @click="sendCode">重新发送{{count > 0 ? `(${count}s)` : ''}}</div>
+          <van-button block type="info" class="margin-top30" @click="step='4'">确定</van-button>
         </section>
-        <set-success v-if="step === '5'" :tip="'手机号设置成功'"></set-success>
+        <code-input
+          v-if="step === '4'"
+          :code.sync="code"
+          :codeTo="newPhone"
+          :sendCode="sendCode(newPhone)"
+          :validateCode="() => {}"
+          :next="setPhone"></code-input>
+        <set-success
+          v-if="step === '5'"
+          :tip="'手机号设置成功'"></set-success>
     </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio, PasswordInput, NumberKeyboard } from 'vant';
+import { Form, Field, Button } from 'vant';
 import { State, Getter, Action, Mutation } from 'vuex-class';
 import { Route } from 'vue-router';
 import SetSuccess from './components/SetSuccess.vue';
-
+import CodeInput from './components/CodeInput.vue';
 @Component({
   components: {
     [Form.name]: Form,
     [Field.name]: Field,
     [Button.name]: Button,
-    [Image.name]: Image,
-    [Cell.name]: Cell,
-    [RadioGroup.name]: RadioGroup,
-    [Radio.name]: Radio,
-    [PasswordInput.name]: PasswordInput,
-    [NumberKeyboard.name]: NumberKeyboard,
     SetSuccess,
+    CodeInput,
   },
 })
 export default class SetPhone extends Vue {
@@ -76,58 +53,37 @@ export default class SetPhone extends Vue {
   private code: string = '';
   private randomToken: string = '';
   private newPhone: string = '';
-  private showKeyboard: boolean = false;
   private step: string = '1';
-  private count: number = 0;
-
   get isPhone() {
     return this.userInfo.phone;
   }
   get codeType() {
     return this.isPhone ? 0 : 1;
   }
-  private async onInput(key: any) {
+  private sendSms(account: string = '') {
+    return this.$api.user.sendSms(account || this.userInfo.phone , 1); // 1 修改密码
+  }
+  private sendEmail(account: string = '') {
+    return this.$api.user.sendEmail(account || this.userInfo.email, 1); // 1 修改密码
+  }
+  private async sendCode(account: string = '') {    
+    if (this.isPhone) {
+      await this.sendSms(account);
+    } else {
+      await this.sendEmail(account);
+    }
+  }
+  private async validateOldAccount() {
     const { userInfo: { phone, email }, code, newPhone } = this;
-      this.code = (this.code + key).slice(0, 6);
-      const { length } = this.code;
-      if (length >= 6) {
     const { random_token } = await this.$api.user.setPhoneCode( this.codeType, this.code, {
       phone,
       email,
     });
     this.randomToken = random_token;
-        this.count = 0;
-        if (!newPhone) {
+  }
+  private showNewAccountInput() {
     this.step = '3';
     this.code = '';
-        } else {
-          await this.setPhone();
-        }
-      }
-  }
-  private  onDelete() {
-      this.code = this.code.slice(0, this.code.length - 1);
-  }
-  private sendSms() {
-    return this.$api.user.sendSms(this.userInfo.phone , 1); // 1 修改密码
-  }
-  private sendEmail() {
-    return this.$api.user.sendEmail(this.userInfo.email, 1); // 1 修改密码
-  }
-  private async sendCode() {
-    if (this.count > 0 ) { return; }
-    this.count = 60;
-    const timer = setInterval(() => { if (this.count > 0) { this.count--; } }, 1000);
-    this.$once('hook:beforeDestory', () => {
-      clearTimeout(timer);
-    });
-    const { userInfo } = this;
-    if (this.isPhone) {
-      await this.sendSms();
-    } else {
-      await this.sendEmail();
-    }
-    this.step = this.newPhone ? '4' : '2';
   }
   private async setPhone() {
     const {code, newPhone, randomToken } = this;
@@ -137,7 +93,7 @@ export default class SetPhone extends Vue {
 }
 </script>
 <style scoped lang="scss">
-  .set-passwd {
+  .set-phone {
     padding: 31px 25px;
     .title{
       font-size: 22px;

src/views/userCenter/components/CodeInput.vue

@@ -34,22 +34,18 @@ import { Route } from 'vue-router';
 export default class CodeInput extends Vue {
   @Prop({
     required: true,
-  })
-  private codeTo!: string;
-  @Prop()
-  private code!: string;
+  })private codeTo!: string;
+  @Prop()private code!: string;
   @Prop({
     default: () => {},
-  })
-  private sendCode!: () => Promise<any>;
+  })private sendCode!: () => Promise<any>;
   @Prop({
     default: () => {},
-  })
-  private validateCode!: () => Promise<any>;
+  })private validateCode!: () => Promise<any>;
   @Prop({
     default: () => {},
-  })
-  private next!: () => Promise<any>;
+  })private next!: () => Promise<any>;
+
   private count: number = 0;
   private showKeyboard: boolean = true;
   private mounted() {
@@ -73,13 +69,14 @@ export default class CodeInput extends Vue {
   private async onInput(key: any) {
     let code = (this.code + key).slice(0, 6);
     this.$emit('update:code', code );
+    console.log(code);
     if (code.length < 6) { return; }
     try {
       await this.validateCode();
       this.showKeyboard = false;
-      this.next();
+      await this.next();
     }catch(err){
-      console.log(err);
+      console.error(err);
     }
   }
   private onDelete() {