'normal'

src/containers/center/setting/index.vue

@@ -7,6 +7,7 @@
           <a :class="{'current':show===2}" style="text-decoration: none;padding-bottom: 5px" @click="show=2" class="">实名认证</a>
           <a :class="{'current':show===3}" style="text-decoration: none;padding-bottom: 5px" @click="show=3" class="">额外信息</a>
           <a :class="{'current':show===4}" style="text-decoration: none;padding-bottom: 5px" @click="show=4" class="">密码修改</a>
+          <a :class="{'current':show===5}" style="text-decoration: none;padding-bottom: 5px" @click="show=5" class="">手机修改</a>
         </div>
 
         <div v-if="show===1" class="lwh-ul-form">
@@ -174,6 +175,34 @@
 
           </el-form>
         </div>
+
+        <div v-if="show===5" class="ng-scope">
+          <el-form ref="elFormPhone" :inline="false" :model="phoneForm" :rules="phoneRules" class="mt50">
+            <el-form-item label="输入新手机" label-width='150px' class="mt30" prop="phone" >
+               <el-input placeholder="输入新手机" v-model="phoneForm.phone " style="width: 300px;" :maxlength="11" show-word-limit>
+               </el-input>
+            </el-form-item>
+
+            <el-form-item label="短信检验码" label-width='150px' class="mt30" prop="code" >
+               <el-input placeholder="输入短信检验码" v-model="phoneForm.code" style="width: 180px;" :maxlength="6" show-word-limit>
+               </el-input>
+               <el-button style="width: 120px;" type="info" v-if="phoneForm.phone.length!=11" disabled>获取检验码</el-button>
+               <el-button style="width: 120px;" type="primary" v-else-if="!count" @click="getCode()">获取检验码</el-button>
+               <el-button style="width: 120px;" type="info" disabled v-else>剩余时间{{count}} s</el-button>
+            </el-form-item>
+            <el-form-item label="" label-width='150px' class="mt30" prop="code" >
+              <span style="color: red;">注意：手机必须本人实名认证手机</span>
+            </el-form-item>
+            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
+               <el-button type="primary"  class="confirm" @click="doSavePhone()">
+                 确认修改
+                </el-button>
+            </el-form-item>
+
+          </el-form>
+        </div>
+
+
       </div>
     </div>
 
@@ -210,6 +239,8 @@
         show: 1,
         width: "",
         visible: false,
+        timer: false,
+        count: 0,
         imgUrl:'',
         passForm:{
           oldPass:'',
@@ -223,6 +254,14 @@
             { required: true, validator: validatePass2, trigger: "blur" },
           ],
         },
+        phoneForm:{
+          phone:'',
+          code:''
+        },
+        phoneRules:{
+          phone: rules.defaultFun("请输入新手机"),
+          code: rules.defaultFun("请输入短信校验码")
+        },
         errorImg: 'this.src="' + require('../../../assets/images/default-photo_hash88f70f5253.jpg') + '"'
       }
     },
@@ -236,6 +275,14 @@
         let phone = this.userInfo.phone;
         return !phone||/^1[0-9]{10}$/.test(phone)
       },
+      checkPhone() {
+        let phone = this.phoneForm.phone;
+        if (!/^1[3456789]\d{9}$/.test(phone)) {
+          this.$message.error("请填写正确的手机号");
+          return false;
+        }
+        return true
+      },
       showImg( url ){
         this.imgUrl = url;
         this.visible = true;
@@ -290,6 +337,49 @@
           }
         })
       },
+      doSavePhone(){
+        let {phone, code}  = this.phoneForm;
+        this.$refs["elFormPhone"].validate((valid) => {
+          if (!valid) return;
+          let param = {
+             phone: phone,
+             code: code
+           }
+          httpServer("User.ChangePhone", param).then( res=>{
+            if( res.code == 200){
+              this.userInfo.phone = phone;
+              this.$message.success("修改手机成功");
+              this.saveBaseInfo(this.userInfo);
+            }
+          })
+        })
+      },
+      getCode() {
+        if (!this.checkPhone()) return;
+        let phone = this.phoneForm.phone
+        this.startTimer()
+        let type = "changePhone"
+        httpServer("Auth.getCode", { phone, type}).then(res => {
+          if (res.code == 200) {
+            this.$message.successMsg("发送成功", 1)
+            this.startTimer()
+          }
+        })
+      },
+      startTimer() {
+        const TIME_COUNT = 60; //更改倒计时时间
+        if (this.timer) clearInterval(this.timer);
+        this.count = TIME_COUNT;
+        this.timer = setInterval(() => {
+          if (this.count > 0) {
+            this.count--;
+          } else {
+            clearInterval(this.timer); // 清除定时器
+            this.timer = null;
+            this.count = 0;
+          }
+        }, 1000)
+      },
       doSavePassword(){
         let {oldPass, newPass}  = this.passForm;
         console.log( {oldPass, newPass})