proginn-frontend/components/common/bindMobile.vue

<template>
  <div class="bindMobile">
    <el-dialog
      title="绑定手机号"
      :visible.sync="isShowToast"
      width="520px"
      :center="true">
      <div class="bindMobileContent">
        <div class="phoneNum">
          <p class="name">手机号</p>
          <el-input v-model="phone" placeholder="请输入手机号" class="input-with-select">
            <el-select v-model="preMobile" slot="prepend" placeholder="请选择" style="width: 140px;">
              <el-option
                v-for="(item,index) in selectList"
                :key="index+'sda'"
                :label="item.name"
                :value="item.pre">
              </el-option>
            </el-select>
            <div slot="append" @click="getCode" :class="{sendBtn: true, ok: !interval}">
                {{interval ? `${timeLoop}重新发送` : "发送验证码"}}
            </div>
          </el-input>
        </div>
        <div class="codeNum">
          <div class="name">验证码</div>
          <el-input placeholder="请输入验证码" v-model="scode"/>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="isShowToast = false">取 消</el-button>
    <el-button type="primary" @click="bindMobile">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  const Max_Time = 60
  export default {
    props: [ "source" ],
    components: {},
    data() {
      return {
        phone: "",
        scode: "",
        isShowToast: false,
        timeLoop: Max_Time,
        preMobile: "+86",
        selectList: [],
        interval: null,
      };
    },
    computed: {},
    created() {
      this.getMobilePre()
    },
    mounted() {
    },
    methods: {
      open() {
        this.isShowToast = true
      },
      close() {
        this.isShowToast = false
      },
      handleSubmit() {

      },

      /** 发送验证码 **/
      getCode() {
        const {phone, preMobile} = this
        if ( (phone.toString().length != 11 && preMobile == 0 )
          || (preMobile > 0 && !/^\d{8,15}$/.exec(phone)) ) {
          this.$message.warning('请输入正确的手机号码');
          return false;
        }

        if (this.interval) {
          this.$message.info('请1分钟后再次发送')
          return false
        }

        let newPhone =  preMobile + '-' + phone;
        this.$axios.post('/api/user/check_mobile_exist', {mobile: newPhone}).then(res=>{
          if (Number(res.data.status) === 1 && !res.data.data.exist) {
            this.sendCode()
          }
        })
      },

      /** 发送验证码 **/
      sendCode() {
        this.timeLoop = Max_Time
        const {phone, preMobile} = this
        let newPhone =  phone;
        if (preMobile !== '+86') {
          newPhone =  preMobile + '-' + phone;
        }
        this.$axios.post('/api/user/send_mobile_auth_code', {
          mobile: newPhone
        }).then(res=>{
          if (Number(res.data.status) === 1) {
            this.interval = setInterval(()=>{
              this.timeLoop--
              if (this.timeLoop <= 0) {
                clearInterval(this.interval)
                this.interval = null
              }
            }, 1000)
          }
        })
      },

      /** 获取数据 -- 手机号码前缀 **/
      getMobilePre() {
        this.$axios.get('/api/user/get_mobile_pre_arr').then(res=>{
          if (Number(res.data.status) === 1) {
            let list = res.data.data && res.data.data.mobilePreArr || [{id: 0, name: "中国 +86", pre: "+86"}]
            this.selectList = list
          }
        })
      },
      /** 开始绑定手机号 **/
      bindMobile() {
        const {phone, preMobile, scode} = this
        let newPhone =  preMobile + '-' + phone;
        this.$axios.post('/api/user/update_info', {
          login_mobile: newPhone,
          auth_code: scode
        }).then(res=>{
          if (Number(res.data.status) === 1) {
            this.updateUserInfo()
            this.close()
          }
        })
      }
    }
  };
</script>

<style lang="scss">
  .bindMobile {
    .bindMobileContent {
      .phoneNum, .codeNum {
        margin-top: 20px;
        display: flex;
        align-items: center;
        .name {
          flex-shrink: 0;
          font-size: 14px;
          font-weight: 500;
          color: #19222e;
          line-height: 20px;
        }
        .el-input {
          flex-grow: 1;
          margin-left: 10px;

          .el-input-group__append {
            background-color: transparent;
            border: none;
            padding: 0;

            .sendBtn {
              background-color: #F5F7FA;
              color: #909399;
              vertical-align: middle;
              display: table-cell;
              position: relative;
              border: 1px solid #DCDFE6;
              border-radius: 4px;
              padding: 10px 20px;
              width: 1px;
              white-space: nowrap;
              cursor: pointer;
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;

              &.ok {
                background-color: #308EFF;
                color: #fff;
                vertical-align: middle;
                display: table-cell;
                position: relative;
                border: 1px solid #308EFF;
              }
            }
          }
        }
      }
    }
  }
</style>