crowd-test-service-frontend/src/pages/UserCenter/ReBindingMobile.vue

<template>
  <div v-loading="loading">
    <el-steps :active="active" process-status="finish" style="margin: 20px">
      <el-step title="验证原手机"></el-step>
      <el-step title="绑定新手机"></el-step>
    </el-steps>
    <el-form label-width="80px" style="width:400px;" :rules="rules" :model="phoneBindingForm" :ref="phoneBindingForm">
      <el-form-item label="原手机号" v-if="active===0" prop="phone">
        <span v-model="phoneBindingForm.phone">{{this.user.mobile}}</span>
      </el-form-item>
      <el-form-item label="新手机号" v-if="active===1" prop="newPhone">
        <el-input v-model="phoneBindingForm.newPhone"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="verifyCode">
        <el-input placeholder="验证码内容" v-model="phoneBindingForm.verifyCode" class="input-with-select">
          <el-button slot="append" @click="getVerifyCode" :disabled="hasVerifyCode">{{hasVerifyCode ? codeTime :
            '获取验证码'}}
          </el-button>
        </el-input>
        <span v-if="hasVerifyCode">验证码已发送到您手机上</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="reBindingMobile">{{this.active===0 ?
          '下一步':'完成绑定'}}
        </el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  import Http from '@/js/http.js'
  import {storageGet} from '@/js/index'
  import {notify} from '@/constants/index'

  export default {
    name: "ReBindingMobile",
    data() {
      return {
        loading: false,
        active: 0,
        user: {},
        phoneBindingForm: {
          phone: '',
          verifyCode: '',
          newPhone: '',
        },
        hasVerifyCode: false,
        codeTime: 60,
        rules: {
          verifyCode: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            {min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
          ],
          newPhone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, max: 11, message: '手机号不合法', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      setUserInfo() {
        let userId = storageGet('user') && storageGet('user').userVO.id;
        Http.get(`/api/user/${userId}`).then(res => {
          this.user = res.userVO;
          this.phoneBindingForm.phone = this.user.mobile;
        })
      },
      reBindingMobile() {
        this.showLoading();
        if (this.active === 0) {
          //1.验证原手机
          let params = {
            "id": this.user.id,
            "mobile": this.user.mobile,
            "verifyCode": this.phoneBindingForm.verifyCode
          }
          Http.put('/api/verify/old/mobile', params).then(res => {
            this.hideLoading();
            if (res.code === 20000) {
              notify('success', '验证成功');
              this.active = 1;
              this.phoneBindingForm.phone = '';
              this.phoneBindingForm.verifyCode = '';
              this.hasVerifyCode = false;
              this.codeTime = 60;
              this.setUserInfo();
            } else {
              notify('error', '验证原手机失败:' + res.data);
              this.codeTime = 60;
              this.hasVerifyCode = false;
            }
          }).catch(err => {
            this.phoneBindingForm.phone = '';
            this.phoneBindingForm.verifyCode = '';
            this.codeTime = 60;
            this.hasVerifyCode = false;
            this.hideLoading();
            notify('error', '验证原手机失败:' + err.data);
          })
        } else {
          let params = {
            "id": this.user.id,
            "mobile": this.phoneBindingForm.newPhone,
            "verifyCode": this.phoneBindingForm.verifyCode
          };
          Http.put('/api/user/mobile', params).then(res => {
            this.hideLoading();
            if (res.msg == "ERROR") {
              notify('error', '绑定失败：' + res.data);
            } else {
              notify('success', '绑定成功');
              this.$router.push({path: '/personal/phoneBinding'});
            }
          }).catch(err => {
            this.hideLoading();
            notify('error', '绑定失败：' + err.data);
          })
        }

      },
      getVerifyCode() {
        if (this.active === 0) {
          //1.验证原手机
          let params = {
            id: this.user.id,
            mobile: this.phoneBindingForm.phone
          }
          Http.put('/api/verify/mobile', params).then((res) => {
            let _this = this;
            if(res.msg == 'ERROR'){
              notify('error', '验证码获取失败：' + res.data);
            }else{
              this.hasVerifyCode = true;
              notify('success', res.data);
              let codeTimer = setInterval(function () {
                if (_this.codeTime > 0) {
                  _this.codeTime--;
                } else {
                  clearInterval(codeTimer);
                  _this.hasVerifyCode = false;
                  this.codeTime = 10;
                }
              }, 1000)
            }
          }).catch(err => {
            notify('error', '获取验证码失败:' + err.data);
          })
        } else {
          //2.验证新手机
          let params = {
            id: this.user.id,
            mobile: this.phoneBindingForm.newPhone
          }

          Http.put('/api/verify/mobile', params).then((res) => {
            let _this = this;
            if (res.msg == "ERROR") {
              notify('error', '验证码获取失败：' + res.data);
            }else{
              this.hasVerifyCode = true;
              notify('success', res.data);
              let codeTimer = setInterval(function () {
                if (_this.codeTime > 0) {
                  _this.codeTime--;
                } else {
                  clearInterval(codeTimer);
                  _this.hasVerifyCode = false;
                  this.codeTime = 10;
                }
              }, 1000)
            }

          }).catch(err => {
            notify('error', '获取验证码失败:' + err.data);
          })
        }
      },
      showLoading() {
        this.loading = true
      },
      hideLoading() {
        this.loading = false
      },

    },
    mounted() {
      this.setUserInfo();
    }
  }
</script>

<style scoped>

</style>