注册手机号增加台湾地区手机号验证

src/components/Setting.vue

@@ -579,7 +579,7 @@
             @blur="handleTrim('phoneForm', 'oldPhone')"
             maxlength="20"
           >
-            <template slot="prepend">+86</template>
+            <!-- <template slot="prepend">+86</template> -->
           </el-input>
         </el-form-item>
         <el-form-item label="新手机号" prop="newPhone">
@@ -590,7 +590,7 @@
             @blur="handleTrim('phoneForm', 'newPhone')"
             maxlength="20"
           >
-            <template slot="prepend">+86</template>
+            <!-- <template slot="prepend">+86</template> -->
           </el-input>
         </el-form-item>
         <el-form-item>
@@ -697,7 +697,8 @@ export default {
         callback(new Error("请输入手机号"));
       } else {
         let reg = /^1[3-9]\d{9}$/;
-        let result = reg.test(value);
+        let regex = /^09\d{7,8}$/;
+        let result = reg.test(value) || regex.test(value);
         if (result) {
           callback();
         } else {

src/views/forgotPwd.vue

@@ -1,31 +1,74 @@
 <template>
   <div class="forgot-container">
     <h2 class="title-big">找回密码</h2>
-        <el-form label-position="top" label-width="80px" ref="loginCodeForm" :model="loginCodeForm" class="form" :hide-required-asterisk="true" :rules="rulesCode" v-if="stepIndex===0">
-            <el-form-item label="手机号" prop="phone">
-                <el-input v-model="loginCodeForm.phone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('loginCodeForm','phone')" maxlength="20">
-                    <template slot="prepend">+86</template>
-                </el-input>
-            </el-form-item>
-            <el-form-item label="验证码" prop="code" class="code-box">
-                <el-input v-model="loginCodeForm.code" autocomplete="off" placeholder="请输入验证码" class="code-input" @blur="handleTrim('loginCodeForm','code')" @input="handeleInput" maxlength="20">
-                </el-input>
-                <el-button type="primary" @click="sendCode('time','phone','verificationCodeShow')" size="small" class="sendCode" @input="handeleInput">
-                    {{ verificationCodeShow ? time+'s' : '发送验证码' }}
-                </el-button>
-            </el-form-item>
-            <el-form-item class="btn-box">
-                <el-button type="primary" @click="onSubmitPassword('loginCodeForm')" size="small" :disabled="submitDis" :loading="loading">下一步</el-button>
-                <el-button @click="onCancel('loginCodeForm')" size="small">取消</el-button>
-            </el-form-item>
-        </el-form>
-        <div v-else class="result-box">
-            <img src="../assets/mail-check-line.png" />
-            <p>密码已通过短信发送至您的手机中，请注意查收。</p>
-            <div class="btn-box">
-                <el-button type="primary" @click="onCancel('loginCodeForm')" size="small">确定</el-button>
-            </div>
-        </div>
+    <el-form
+      label-position="top"
+      label-width="80px"
+      ref="loginCodeForm"
+      :model="loginCodeForm"
+      class="form"
+      :hide-required-asterisk="true"
+      :rules="rulesCode"
+      v-if="stepIndex === 0"
+    >
+      <el-form-item label="手机号" prop="phone">
+        <el-input
+          v-model="loginCodeForm.phone"
+          autocomplete="off"
+          placeholder="请输入完整手机号"
+          @blur="handleTrim('loginCodeForm', 'phone')"
+          maxlength="20"
+        >
+          <!-- <template slot="prepend">+86</template> -->
+        </el-input>
+      </el-form-item>
+      <el-form-item label="验证码" prop="code" class="code-box">
+        <el-input
+          v-model="loginCodeForm.code"
+          autocomplete="off"
+          placeholder="请输入验证码"
+          class="code-input"
+          @blur="handleTrim('loginCodeForm', 'code')"
+          @input="handeleInput"
+          maxlength="20"
+        >
+        </el-input>
+        <el-button
+          type="primary"
+          @click="sendCode('time', 'phone', 'verificationCodeShow')"
+          size="small"
+          class="sendCode"
+          @input="handeleInput"
+        >
+          {{ verificationCodeShow ? time + "s" : "发送验证码" }}
+        </el-button>
+      </el-form-item>
+      <el-form-item class="btn-box">
+        <el-button
+          type="primary"
+          @click="onSubmitPassword('loginCodeForm')"
+          size="small"
+          :disabled="submitDis"
+          :loading="loading"
+          >下一步</el-button
+        >
+        <el-button @click="onCancel('loginCodeForm')" size="small"
+          >取消</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div v-else class="result-box">
+      <img src="../assets/mail-check-line.png" />
+      <p>密码已通过短信发送至您的手机中，请注意查收。</p>
+      <div class="btn-box">
+        <el-button
+          type="primary"
+          @click="onCancel('loginCodeForm')"
+          size="small"
+          >确定</el-button
+        >
+      </div>
+    </div>
   </div>
 </template>
 
@@ -37,325 +80,328 @@ export default {
   props: [],
   data() {
     const validatePhone = (rule, value, callback) => {
-        if (value === '') {
-            callback(new Error('请输入手机号'));
+      if (value === "") {
+        callback(new Error("请输入手机号"));
+      } else {
+        let reg = /^1[3-9]\d{9}$/;
+        let regex = /^09\d{7,8}$/;
+        let result = reg.test(value) || regex.test(value);
+        if (result) {
+          callback();
         } else {
-            let reg = /^1[3-9]\d{9}$/;
-            let result = reg.test(value);
-            if (result) {
-                callback();
-            } else {
-                callback(new Error('请输入正确的手机号'));
-            }
+          callback(new Error("请输入正确的手机号"));
         }
+      }
     };
     return {
-        loginCodeForm:{
-            type: 'USER',
-            phone:'',
-            code:''
-        },
-        rulesCode:{
-            phone:[
-                { required: true, validator: validatePhone, trigger: 'blur' }
-            ],
-            code:[
-                { required: true, message: '请输入验证码', trigger: 'blur' }
-            ]
-        },
-        time: 60, //获取验证码的时间
-        verificationCodeShow: false, //是否已经获取了验证码
-        loading: false,
-        timer: null,
-        submitDis: true,
-        stepIndex: 0
+      loginCodeForm: {
+        type: "USER",
+        phone: "",
+        code: "",
+      },
+      rulesCode: {
+        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
+        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+      },
+      time: 60, //获取验证码的时间
+      verificationCodeShow: false, //是否已经获取了验证码
+      loading: false,
+      timer: null,
+      submitDis: true,
+      stepIndex: 0,
     };
   },
-  watch: {
-    
-  },
+  watch: {},
   methods: {
     // 密码登录提交表单
-    onSubmitPassword(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.loading = true
-            let MethodName = "/OrgServer/LoginControl/ResetRandomPassword";
-            let data = {
-                    user_type:this.loginCodeForm.type,
-                    phone_or_email:this.loginCodeForm.phone,
-                    dynamic_verification_code:this.loginCodeForm.code,
-                    dynamic_verification_code_send_type:"SMS"
-                }
-            getLogin(MethodName, data)
+    onSubmitPassword(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let MethodName = "/OrgServer/LoginControl/ResetRandomPassword";
+          let data = {
+            user_type: this.loginCodeForm.type,
+            phone_or_email: this.loginCodeForm.phone,
+            dynamic_verification_code: this.loginCodeForm.code,
+            dynamic_verification_code_send_type: "SMS",
+          };
+          getLogin(MethodName, data)
             .then((res) => {
-                this.loading = false
-                if(res.status===1){
-                    this.stepIndex++
-                }
+              this.loading = false;
+              if (res.status === 1) {
+                this.stepIndex++;
+              }
             })
             .catch(() => {
-                this.loading = false
-                this.verificationCodeShow = false;
-                clearInterval(this.timer);
-                this.time = 60;
+              this.loading = false;
+              this.verificationCodeShow = false;
+              clearInterval(this.timer);
+              this.time = 60;
             });
-          } else {
-            return false;
-          }
-        });
+        } else {
+          return false;
+        }
+      });
     },
     // 取消 恢复到修改前状态
-    onCancel(formName){
-        this.$emit('cancelFot')
+    onCancel(formName) {
+      this.$emit("cancelFot");
     },
     // 发送验证码
-    sendCode(time,phone,flag,obj){
-        let this_ = this;
-        if(this_[time] != 60){
-            return
-        }
-        this_.timer = null;
-        if (this_.loginCodeForm[phone]) {
-            let reg = /^1[3-9]\d{9}$/;
-            let result = reg.test(this_.loginCodeForm[phone]);
-            if (!result) {
-                this_.$message.warning('请输入正确的手机号');
-                return
-            }
-            this_[flag] = true;
-            this_.timer = setInterval(() => {
-                this_[time]--;
-                if (this_[time] == 0) {
-                    this_[flag] = false;
-                    clearInterval(this_.timer);
-                    this_.timer = null;
-                    this_[time] = 60;
-                }
-            }, 1000);
-            let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
-            let data = {
-                send_type: 'SMS',
-                phone_or_email: this_.loginCodeForm.phone,
-            };
-            getLogin(MethodName, data).then((res) => {
-            }).catch(()=>{
-                this_[flag] = false;
-                clearInterval(this_.timer);
-                this_.timer = null;
-                this_[time] = 60;
-            });
-        } else {
-            this_.$message.warning('请先输入手机号');
+    sendCode(time, phone, flag, obj) {
+      let this_ = this;
+      if (this_[time] != 60) {
+        return;
+      }
+      this_.timer = null;
+      if (this_.loginCodeForm[phone]) {
+        let reg = /^1[3-9]\d{9}$/;
+        let regex = /^09\d{7,8}$/;
+        let result =
+          reg.test(this_.loginCodeForm[phone]) ||
+          regex.test(this_.loginCodeForm[phone]);
+        if (!result) {
+          this_.$message.warning("请输入正确的手机号");
+          return;
         }
+        this_[flag] = true;
+        this_.timer = setInterval(() => {
+          this_[time]--;
+          if (this_[time] == 0) {
+            this_[flag] = false;
+            clearInterval(this_.timer);
+            this_.timer = null;
+            this_[time] = 60;
+          }
+        }, 1000);
+        let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
+        let data = {
+          send_type: "SMS",
+          phone_or_email: this_.loginCodeForm.phone,
+        };
+        getLogin(MethodName, data)
+          .then((res) => {})
+          .catch(() => {
+            this_[flag] = false;
+            clearInterval(this_.timer);
+            this_.timer = null;
+            this_[time] = 60;
+          });
+      } else {
+        this_.$message.warning("请先输入手机号");
+      }
     },
     // 去掉前后空格
-    handleTrim(form,fild){
-        this[form][fild] = this[form][fild].trim()
-        if(this.loginCodeForm.phone&&this.loginCodeForm.code){
-            this.submitDis = false
-        }else{
-            this.submitDis = true
-        }
+    handleTrim(form, fild) {
+      this[form][fild] = this[form][fild].trim();
+      if (this.loginCodeForm.phone && this.loginCodeForm.code) {
+        this.submitDis = false;
+      } else {
+        this.submitDis = true;
+      }
+    },
+    handeleInput() {
+      if (this.loginCodeForm.phone && this.loginCodeForm.code) {
+        this.submitDis = false;
+      } else {
+        this.submitDis = true;
+      }
     },
-    handeleInput(){
-        if(this.loginCodeForm.phone&&this.loginCodeForm.code){
-            this.submitDis = false
-        }else{
-            this.submitDis = true
-        }
-    }
-  },
-  mounted() {
-    
   },
+  mounted() {},
 };
 </script>
 
 <style lang="scss" scoped>
-.forgot-container{
-    background: #FFFFFF;
-    padding: 64px 72px;
-    .title-big{
-        font-weight: 400;
-        font-size: 32px;
-        line-height: 40px;
-        margin: 0;
-        color: #1D2129;
+.forgot-container {
+  background: #ffffff;
+  padding: 64px 72px;
+  .title-big {
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 40px;
+    margin: 0;
+    color: #1d2129;
+  }
+  .title-name {
+    font-size: 14px;
+    line-height: 22px;
+    color: #86909c;
+    margin: 0 0 40px 0;
+  }
+  .tabs-box {
+    display: flex;
+    a {
+      font-size: 14px;
+      line-height: 22px;
+      color: #4e5969;
+      border-radius: 100px;
+      padding: 5px 16px;
+      margin-right: 16px;
+      &:hover {
+        background: #f2f3f5;
+      }
+      &.active {
+        background: #f2f3f5;
+        font-weight: 500;
+        color: #165dff;
+      }
     }
-    .title-name{
-        font-size: 14px;
-        line-height: 22px;
-        color: #86909C;
-        margin: 0 0 40px 0;
+  }
+  .form {
+    margin-top: 40px;
+    .show-icon {
+      cursor: pointer;
+      color: #4e5969;
+    }
+    .forgotPwd {
+      font-size: 14px;
+      line-height: 22px;
+      color: #165dff;
+    }
+  }
+}
+.result-box {
+  text-align: center;
+  padding-top: 46px;
+  img {
+    width: 64px;
+  }
+  p {
+    width: 260px;
+    color: #000;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 16px auto 62px auto;
+  }
+  .el-button {
+    width: 100%;
+  }
+}
+</style>
+<style lang="scss">
+.forgot-container {
+  .form {
+    .el-form-item__label {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #4e5969;
+      padding-bottom: 8px;
     }
-    .tabs-box{
+    .userAgree-box {
+      .el-form-item__content {
         display: flex;
-        a{
-            font-size: 14px;
-            line-height: 22px;
-            color: #4E5969;
-            border-radius: 100px;
-            padding: 5px 16px;
-            margin-right: 16px;
-            &:hover{
-                background: #F2F3F5;
-            }
-            &.active{
-                background: #F2F3F5;
-                font-weight: 500;
-                color: #165DFF;
-            }
+        justify-content: space-between;
+        line-height: 22px;
+      }
+      .el-checkbox-group {
+        flex: 1;
+        .el-checkbox {
+          color: rgba(0, 0, 0, 0.88);
+          font-weight: 400;
         }
+      }
     }
-    .form{
-        margin-top: 40px;
-        .show-icon{
-            cursor: pointer;
-            color: #4E5969;
-        }
-        .forgotPwd{
-            font-size: 14px;
-            line-height: 22px;
-            color: #165DFF;
-        }
+    .btn-box {
+      .el-button {
+        width: 100%;
+      }
+      .el-button + .el-button {
+        margin-left: 0;
+        margin-top: 8px;
+      }
     }
-}
-.result-box{
-    text-align: center;
-    padding-top: 46px;
-    img{
-        width: 64px;
+    .el-button--primary {
+      background: #165dff;
+      border-color: #165dff;
+      border-radius: 2px;
+      &:hover {
+        background: #4080ff;
+        border-color: #4080ff;
+      }
+      &:focus {
+        background: #0e42d2;
+        border-color: #0e42d2;
+      }
     }
-    p{
-        width: 260px;
-        color: #000;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 24px; 
-        margin: 16px auto 62px auto;
+    .el-button--default {
+      background: #f2f3f5;
+      border-radius: 2px;
+      border: none;
+      color: #4e5969;
+      &:hover {
+        background: #e5e6eb;
+      }
+      &:focus {
+        background: #c9cdd4;
+      }
     }
-    .el-button{
-        width: 100%;
+    .code-box {
+      .el-form-item__content {
+        display: flex;
+      }
     }
-}
-</style>
-<style lang="scss">
-.forgot-container{
-    .form{
-        .el-form-item__label{
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 22px;
-            color: #4E5969;
-            padding-bottom: 8px;
-        }
-        .userAgree-box{
-            .el-form-item__content{
-                display: flex;
-                justify-content: space-between;
-                line-height: 22px;
-            }
-            .el-checkbox-group{
-                flex: 1;
-                .el-checkbox{
-                    color: rgba(0, 0, 0, 0.88);
-                    font-weight: 400;
-                }
-            }
-        }
-        .btn-box{
-            .el-button{
-                width: 100%;
-            }
-            .el-button+.el-button{
-                margin-left: 0;
-                margin-top: 8px;
-            }
-        }
-        .el-button--primary{
-            background: #165DFF;
-            border-color: #165DFF;
-            border-radius: 2px;
-            &:hover{
-                background: #4080FF;
-                border-color: #4080FF;
-            }
-            &:focus{
-                background: #0E42D2;
-                border-color: #0E42D2;
-            }
-        }
-        .el-button--default{
-            background: #F2F3F5;
-            border-radius: 2px;
-            border: none;
-            color: #4E5969;
-            &:hover{
-                background: #E5E6EB;
-            }
-            &:focus{
-                background: #C9CDD4;
-            }
-        }
-        .code-box{
-            .el-form-item__content{
-                display: flex;
-            }
-        }
-        .code-input{
-            height: 32px;
-            .el-input__inner{
-                border-radius: 4px 0 0 4px;
-            }
-        }
-        .sendCode{
-            border-radius: 0 4px 4px 0;
-            margin-top: 1px;
-            width: 92px;
-            flex-shrink: 0;
-        }
-        .el-form-item__content,.el-input__icon{
-            line-height: 32px;
-            color: #4E5969 !important;
-        }
-        .el-input__inner{
-            height: 32px;
-            color: #1D2129;
-            background: #F2F3F5;
-            border: none;
-        }
-        .el-textarea__inner,.el-input-group__prepend{
-            color: #1D2129;
-        }
-        .el-checkbox__input.is-checked+.el-checkbox__label{
-            color: #165DFF;
-        }
-        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
-            background: #165DFF;
-            border-color: #165DFF;
-        }
-        .el-input-group__prepend{
-            width: 54px;
-            height: 32px;
-            border: none;
-            background: #F2F3F5;
-            border-radius: 2px 0px 0px 2px;
-            line-height: 32px;
-            text-align: center;
-            padding: 0;
-        }
-        .el-input-group--prepend{
-            display: flex;
-            .el-input__inner{
-                margin-left: 8px;
-                flex: 1;
-            }
-        }
+    .code-input {
+      height: 32px;
+      .el-input__inner {
+        border-radius: 4px 0 0 4px;
+      }
+    }
+    .sendCode {
+      border-radius: 0 4px 4px 0;
+      margin-top: 1px;
+      width: 92px;
+      flex-shrink: 0;
+    }
+    .el-form-item__content,
+    .el-input__icon {
+      line-height: 32px;
+      color: #4e5969 !important;
+    }
+    .el-input__inner {
+      height: 32px;
+      color: #1d2129;
+      background: #f2f3f5;
+      border: none;
+    }
+    .el-textarea__inner,
+    .el-input-group__prepend {
+      color: #1d2129;
+    }
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #165dff;
+    }
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background: #165dff;
+      border-color: #165dff;
+    }
+    .el-input-group__prepend {
+      width: 54px;
+      height: 32px;
+      border: none;
+      background: #f2f3f5;
+      border-radius: 2px 0px 0px 2px;
+      line-height: 32px;
+      text-align: center;
+      padding: 0;
     }
-    .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover{
-        background-color: #a0cfff;
-        border-color: #a0cfff;
+    .el-input-group--prepend {
+      display: flex;
+      .el-input__inner {
+        margin-left: 8px;
+        flex: 1;
+      }
     }
+  }
+  .el-button--primary.is-disabled,
+  .el-button--primary.is-disabled:active,
+  .el-button--primary.is-disabled:focus,
+  .el-button--primary.is-disabled:hover {
+    background-color: #a0cfff;
+    border-color: #a0cfff;
+  }
 }
 </style>

src/views/login.vue

@@ -108,7 +108,7 @@
             @blur="handleTrim('loginCodeForm', 'phone')"
             maxlength="20"
           >
-            <template slot="prepend">+86</template>
+            <!-- <template slot="prepend">+86</template> -->
           </el-input>
         </el-form-item>
         <el-form-item label="验证码" prop="code" class="code-box">
@@ -193,7 +193,8 @@ export default {
           callback(new Error("请输入手机号"));
         } else {
           let reg = /^1[3-9]\d{9}$/;
-          let result = reg.test(value);
+          let regex = /^09\d{7,8}$/;
+          let result = reg.test(value) || regex.test(value);
           if (result) {
             callback();
           } else {
@@ -351,7 +352,10 @@ export default {
       this_.timer = null;
       if (this_.loginCodeForm[phone]) {
         let reg = /^1[3-9]\d{9}$/;
-        let result = reg.test(this_.loginCodeForm[phone]);
+        let regex = /^09\d{7,8}$/;
+        let result =
+          reg.test(this_.loginCodeForm[phone]) ||
+          regex.test(this_.loginCodeForm[phone]);
         if (!result) {
           this_.$message.warning("请输入正确的手机号");
           return;

src/views/personalCenter/components/Setting.vue

@@ -338,7 +338,7 @@
             maxlength="20"
             @blur="handleTrim('phoneForm', 'newPhone')"
           >
-            <template slot="prepend">+86</template>
+            <!-- <template slot="prepend">+86</template> -->
           </el-input>
         </el-form-item>
         <el-form-item label="验证码" prop="newCode" class="code-box">
@@ -473,7 +473,8 @@ export default {
         callback(new Error("请输入手机号"));
       } else {
         let reg = /^1[3-9]\d{9}$/;
-        let result = reg.test(value);
+        let regex = /^09\d{7,8}$/;
+        let result = reg.test(value) || regex.test(value);
         if (result) {
           callback();
         } else {
@@ -795,7 +796,10 @@ export default {
       if (!obj) {
         if (this_.phoneForm[phone]) {
           let reg = /^1[3-9]\d{9}$/;
-          let result = reg.test(this_.phoneForm[phone]);
+          let regex = /^09\d{7,8}$/;
+          let result =
+            reg.test(this_.phoneForm[phone]) ||
+            regex.test(this_.phoneForm[phone]);
           if (!result) {
             this_.$message.warning("请输入正确的手机号");
             return;

src/views/register.vue

@@ -141,9 +141,11 @@
             @blur="handleTrim('registerForm', 'phone')"
             maxlength="20"
           >
-            <template slot="prepend">+86</template>
+            <!-- <template slot="prepend">+86</template> -->
           </el-input>
+          <p class="tips">非大陆地区用户注册完成后请用账号密码进行登录</p>
         </el-form-item>
+
         <el-form-item label="邮箱" prop="email">
           <el-input
             v-model="registerForm.email"
@@ -275,7 +277,8 @@ export default {
         callback(new Error("请输入手机号"));
       } else {
         let reg = /^1[3-9]\d{9}$/;
-        let result = reg.test(value);
+        let regex = /^09\d{7,8}$/;
+        let result = reg.test(value) || regex.test(value);
         if (result) {
           callback();
         } else {