el-form绑定更换手机号

Glistening_Ying

已于 2023-11-23 10:33:10 修改

阅读量33

点赞数

分类专栏： vue2_element项目文章标签： vue.js javascript elementui

于 2023-11-22 16:42:26 首次发布

本文链接：https://blog.csdn.net/Glistening_Ying/article/details/134556352

版权

vue2_element项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面结构

<div class="wasker-pop" id="cellphoneModel" v-if="isShowBindPhoto">
  
  <div class="wasker-user-default" style="height: 380px">
    <div class="wasker-top">
      <div class="wasker-title">绑定的手机号码</div>
      <img src="../assets/image/close.png" @click.stop="isShowBindPhoto = false" />
   	</div>
    
    <el-form :model="BingPhoto" :rules="BingPhotorules" ref="BingPhoto" label-width="122px">
      <div class="wasker-user-default-main" style="height: 270px">
        <el-form-item label="绑定的手机号码">
          <el-input style="width: 380px;" class="bing-photo-value" type="text" disabled :value="value"></el-input>
        </el-form-item>
        <el-form-item label="绑定的手机号码" prop="mobile">
          <el-input style="width: 254px" type="text" v-model="BingPhoto.mobile" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="verifyCode">
          <el-input style="width: 150px" type="text" v-model="BingPhoto.verifyCode" placeholder="请输入验证码"></el-input>
          <el-button type="primary" class="get-code-btn" @click="sendVerifyCode('BingPhoto')" :disabled="disabled">
            获取验证码
            <span v-if="isShowTime">({{timing}})</span>
          </el-button>
        </el-form-item>
      </div>

      <div class="wasker-footer">
        <el-form-item>
          <el-button class="btn confrim" type="primary" @click="boundStudentPhone('BingPhoto')">绑定</el-button>
        </el-form-item>
      </div>
      
    </el-form>
  </div>
</div>

表单验证

data(){
    return {
        timing: 0,
        disabled: false, //验证按钮
        value: "暂未绑定",
        userType: "", //用户角色
        studentMobile: null,
        loginCount: "", //登录次数
        BingPhoto: {
          mobile: "", //绑定手机号
          verifyCode: "", //获取验证码
        },
        BingPhotorules: {
         mobile: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机格式', trigger: 'blur' }
          ],
        },
    }
}

手机号显示和隐藏

<div class="right-user-info">
  <div class="user-title">
    <div class="user-photo">
      <img style="height: 100%; width: 100%" :src="avatar" />
    </div>
    <div class="user-name" :title="actualName">{{ actualName }}</div>
    <img src="../assets/image/down.png" style="width: 8px; height: 5px; margin-left: 9px" />
  </div>
  <div class="user-wasker">
    <a id="aUserInfo" href="#" @click="sss">
      <div class="user-item">个人信息</div>
    </a>
    <div class="user-item" @click="ResetPasswordPop">密码修改</div>
    <div class="user-item" v-if="userType == 3 && !studentMobile" @click="isShowBindPhoto = true">
      绑定手机号码
    </div>
    <div class="user-item" v-if="userType == 3 && studentMobile" @click="alterPhoneModel">
      更换手机号码
    </div>
    <div class="user-item" @click="logout">退出登录</div>
  </div>
</div>

手机号弹窗显示和隐藏

getStudent() {
  let that = this;
  return $.ajax({
    type: "get",
    url: this.path + "/edu/student/getStudent?userId=" + this.userId,
    success: (data) => {
      // 首次登录显示绑定手机号码弹窗
      if (!data) return;
      that.studentMobile = data.mobile;
      // 判断一天内登录次数
      const k = "loginCountA_" + data.uid;
      const t = new Date();
      const v = [t.getFullYear(), t.getMonth(), t.getDate()].join('-');
      if (document.cookie.indexOf(k) > -1) return;
      // 学生端登录，且没有绑定手机号，一天内首次登录，则自动弹出弹窗
      if (that.loginCount == 0 && !that.studentMobile && that.userType == 3) {
        that.isShowBindPhoto = true;
        const expires = new Date(t.getFullYear(), t.getMonth(), t.getDate() + 1, 0, 0, 0);
        document.cookie = `${k}=${v}; path=/; expires=` + expires.toUTCString();
      }
    },
  });
},

绑定手机号

boundStudentPhone(BingPhoto) {
  let that = this;
  if (!this.BingPhoto.verifyCode) {
    this.$message.error('请输入验证码！');
    return;
  }
  this.$refs[BingPhoto].validate(valid => {
    if (valid) {
      $.ajax({
        type: "post",
        url: this.path + "/admin/user/boundStudentPhone",
        data: { mobile: this.BingPhoto.mobile, verifyCode: this.BingPhoto.verifyCode },
        success: function (row) {
          if (row.code == 0) {
            that.$message.success(row.message);
            that.isShowBindPhoto = false;
            that.getStudent();
          } else {
            that.$message.error(row.message);
          }
        }
      });
    }
  })
},

获取绑定手机验证码
验证码处理

sendVerifyCode(BingPhoto) {
  let that = this;
  this.$refs[BingPhoto].validate(valid => {
    if (valid) {
      this.isShowTime = true;
      if (this.timing > 0) return;
      $.ajax({
        url: this.path + "/admin/user/sendVerifyCode",
        type: 'get',
        async: false,
        data: { phone: this.BingPhoto.mobile },
        success: function (res) {
          if (res.code == 0) {
            that.disabled = true;
            that.startInterval()
            that.$message.success(res.message)
          } else {
            that.isShowTime = false;
            that.$message.error(res.message);
          }
        }
      });
    }
  })
},

验证码倒计时

// 验证码倒计时
startInterval() {
  this.timing = 60;
  var interval = setInterval(() => {
    this.timing = this.timing - 1
    if (this.timing == 0) {
      clearInterval(interval)
      this.disabled = false;
      this.isShowTime = false;
    }
  }, 1000);
},

更换手机号

页面结构

<!-- 更换手机号 -->
<div class="wasker-pop" id="cellphoneModel" v-if="isShowChangePhoto">
  <div class="wasker-user-default" style="height: 380px">
    <div class="wasker-top">
      <div class="wasker-title">更换手机号码</div>
      <img src="../assets/image/close.png" @click.stop="isShowChangePhoto = false" />
    </div>
    <el-form label-width="120px">
      <div class="wasker-user-default-main" style="height: 270px">
        <el-form-item label="旧手机号码：">
          <el-input style="width: 380px;" class="bing-photo-value" type="text" disabled :value="value"></el-input>
        </el-form-item>
        <el-form-item label="旧手机号码：" prop="usedMobile">
          <el-input style="width: 380px" type="text" v-model="usedMobile" placeholder="请输入旧手机号码"></el-input>
        </el-form-item>
        <el-form-item label="登录密码：" prop="mobilePass">
          <el-input style="width: 380px" type="password" v-model="mobilePass" placeholder="请输入登录密码"></el-input>
        </el-form-item>
      </div>

      <div class="wasker-footer">
        <el-form-item>
          <el-button class="btn confrim" type="primary" @click="goNext">下一步</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</div>

data属性

usedMobile: "", //旧手机号码
mobilePass: "", //登录密码

处理旧号码

alterPhoneModel() {
  this.isShowChangePhoto = true;
  let phone = this.studentMobile.replace(/\D/g, '');  // 删除非数字字符
  if (/^\d{7,}$/.test(phone)) {  // 校验手机号格式
    // 隐藏中间四位数
    phone = phone.replace(/^(\d{3})\d*(\d{4})$/g, '$1****$2');
    this.value = phone;
  }
},

点击下一步前的密码校验以及点击后显示弹窗

//效验手机号密码下一步弹框
goNext() {
  let that = this;
  if (!this.mobilePass || !this.usedMobile) {
    this.$message.error('手机号码或登录密码不能为空');
    return;
  }
  if (this.usedMobile != this.studentMobile) {
    this.$message.error('新旧手机号码不一致，请重新输入!');
    return;
  }
  $.ajax({
    type: "post",
    url: this.path + "/admin/user/nextMobilPhone",
    data: { userId: this.userId, mobile: this.usedMobile, mobilePass: this.mobilePass },
    success: function (row) {
      if (row.flag) {
        that.isShowChangePhoto = false;
        that.isShowNextChangePhoto = true;
      } else {
        that.$message.error(row.message);
      }
    }
  });
},

更換号码

页面结构

<!-- 下一步更换手机号 -->
<div class="wasker-pop" id="cellphoneModel" v-if="isShowNextChangePhoto">
  <div class="wasker-user-default" style="height: 300px">
    <div class="wasker-top">
      <div class="wasker-title">更换手机号码</div>
      <img src="../assets/image/close.png" @click.stop="isShowNextChangePhoto = false" />
    </div>
    <el-form :model="ChangePhoto" :rules="ChangePhotorules" ref="ChangePhoto" label-width="120px">
      <div class="wasker-user-default-main" style="height: 190px">
        <el-form-item label="新手机号码：" prop="newMobile">
          <el-input style="width: 290px" type="text" v-model="ChangePhoto.newMobile" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="newVerifyCode">
          <el-input style="width: 150px" type="text" v-model="ChangePhoto.newVerifyCode" placeholder="请输入验证码"></el-input>
          <el-button type="primary" :disabled="disabled" class="get-code-btn" @click="sendVerifyCode1('ChangePhoto')">
            获取验证码
            <span v-if="isShowTime">({{timing}})</span>
          </el-button>
        </el-form-item>
      </div>

      <div class="wasker-footer">
        <el-form-item>
          <el-button class="btn confrim" type="primary" @click="nextAlterphoneModel('ChangePhoto')">更换</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</div>

手机号校验

 ChangePhoto: {
  newMobile: "",
  newVerifyCode: ""
},
ChangePhotorules: {
  newMobile: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机格式', trigger: 'blur' }
  ]
}

绑定新手机号码

//更换手机号码
nextAlterphoneModel(ChangePhoto) {
  let that = this;
  if (!this.ChangePhoto.newVerifyCode) {
    this.$message.error('请输入验证码！');
    return;
  }
  this.$refs[ChangePhoto].validate(valid => {
    if (valid) {
      $.ajax({
        type: "post",
        url: this.path + "/admin/user/updateMobilePhone",
        data: {
          userId: this.userId, userName: this.userName, mobile: this.studentMobile, mobilePass: this.mobilePass,
          newMobile: this.ChangePhoto.newMobile, newVerifyCode: this.ChangePhoto.newVerifyCode,
        },
        success: function (row) {
          if (row.code == 0) {
            that.getStudent();
            that.$message.success(row.message);
            that.isShowNextChangePhoto = false;
          } else {
            that.$message.error(row.message);
          }
        }
      });
    }
  });
},

获取更换手机号的验证码

//获取更换手机验证码
sendVerifyCode1(ChangePhoto) {
  let that = this;
  this.$refs[ChangePhoto].validate(valid => {
    if (valid) {
      this.isShowTime = true;
      if (this.timing > 0) return;
      $.ajax({
        url: this.path + "/admin/user/sendVerifyCode",
        type: 'get',
        async: false,
        data: { phone: this.ChangePhoto.newMobile },
        success: function (res) {
          if (res.code == 0) {
            that.disabled = true;
            that.startInterval()
            that.$message.success(res.message)
          } else {
            that.isShowTime = false;
            that.$message.error(res.message);
          }
        }
      });
    }
  })
},