设置密码和设置手机号流程

src/store/index.ts

@@ -18,6 +18,9 @@ export default new Vuex.Store({
     isPhone( { userInfo }) {
       return userInfo.phone;
     },
+    isPhoneStr( {userInfo }) {
+      return userInfo.phone ? '手机号' : '邮箱';
+    },
     userIcon( {userInfo} ) {
       if (userInfo.icon) {
         return userInfo.icon;

src/views/userCenter/SetPasswd.vue

@@ -2,7 +2,7 @@
   <div class="set-passwd">
     <section v-if="step == '1'">
         <div class="title">设置密码</div>
-        <van-field :value="userInfo.phone || userInfo.email" label="" readonly placeholder="请输入你的手机号" class="margin-top30"></van-field>
+        <van-field :value="userInfo.phone || userInfo.email" label="" readonly :placeholder="`请输入你的${isPhoneStr}`" class="margin-top30"></van-field>
         <van-button block style="margin-top: 60px;" type="info" @click="step = '2'">获取验证码</van-button>
     </section>
     <code-input v-if="step == '2'" :code.sync="code" :codeTo="userInfo.phone || userInfo.email" @send-code="sendCode" @next="showPassWordInputHandler"></code-input>
@@ -40,13 +40,12 @@ import CodeInput from './components/CodeInput.vue';
 })
 export default class SetPasswd extends Vue {
   @State('userInfo') private userInfo!: any;
+  @Getter('isPhone') private isPhone!: boolean;
+  @Getter('isPhoneStr') private isPhoneStr!: string;
   @Action('getUserInfo') private getUserInfo!: () => void;
   private code: string = '';
   private pwd: string = '';
   private step: string = '1';
-  get isPhone() {
-    return this.userInfo.phone;
-  }
   get codeType() {
     return this.isPhone ? 0 : 1;
   }

src/views/userCenter/SetPhone.vue

@@ -16,7 +16,7 @@
       <section v-if="step === '3'">
         <div class="title">输入新{{isPhoneStr}}</div>
         <van-field v-model="newPhone" label="" :placeholder="`请输入新${isPhoneStr}`" class="margin-top30"></van-field>
-        <van-button block type="info" class="margin-top30" @click="step='4';sendCode(newPhone)();">确定</van-button>
+        <van-button block type="info" class="margin-top30" @click="inputNewPhone">确定</van-button>
       </section>
       <code-input
         v-if="step === '4'"
@@ -48,6 +48,7 @@ import CodeInput from './components/CodeInput.vue';
 export default class SetPhone extends Vue {
   @State('userInfo') private userInfo!: any;
   @Getter('isPhone') private isPhone!: boolean;
+  @Getter('isPhoneStr') private isPhoneStr!: string;
   @Action('getUserInfo') private getUserInfo!: () => Promise<any>;
   private code: string = '';
   private randomToken: string = '';
@@ -56,9 +57,6 @@ export default class SetPhone extends Vue {
   get codeType() {
     return this.isPhone ? 0 : 1;
   }
-  get isPhoneStr() {
-    return this.isPhone ? '手机号' : '邮箱';
-  }
   private sendSms(account: string = '') {
     return this.$api.user.sendSms(account || this.userInfo.phone , 3); // 1 修改密码
   }
@@ -87,6 +85,15 @@ export default class SetPhone extends Vue {
     this.step = '3';
     this.code = '';
   }
+  private  inputNewPhone() {
+    const { isPhone, newPhone, isPhoneStr } = this;
+    if (!/1\d{10}/.test(newPhone) || !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(newPhone)) {
+      this.$toast(`请输入正确的${isPhoneStr}`);
+      return;
+    }
+    this.step = '4';
+    this.sendCode(newPhone)();
+  }
   private async setPhone() {
     const {code, newPhone, randomToken } = this;
     await this.$api.user.setPhone(code, newPhone, randomToken);