src/views/binding/binDing.vue

<template>
  <div>
    <mt-field label="手机号" placeholder="请输入正确的手机号" type="tel" v-model="phone" :attr="{ maxlength: 13 }"></mt-field>
    <mt-field label="验证码" v-model="codeText">
      <button  class="getCode" @click="getCode" :disabled="disabled">{{btntxt}}
      </button>
    </mt-field>
    <div style="margin-top: 34px" class="leftRightPadding">
      <mt-button type="primary" size="large" @click.native="bindphone">绑定</mt-button>
    </div>
  </div>
</template>
<script>
import { sendverificode, bindCustByOpenId } from "@/api/binDing/binding";
import {
  getTokenByOpenId
} from "@/api/selfNav/selfNav";
export default {
  name: "binDing",
  data() {
    return {
      codeText: "",
      phone: "",
      btntxt: "获取验证码",
      time: 0,
      disabled: false
    };
  },
  created() {
    // this.timeNum = this.timeText
  },
  methods: {
    getCode: function() {
      var reg = 11 && /^((13|14|15|17|18|19)[0-9]{1}\d{8})$/;
      //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
      if (this.phone == "") {
        this.$vux.toast.text("请输入手机号码", "top");
      } else if (!reg.test(this.phone)) {
        this.$vux.toast.text("手机格式不正确", "top");
      } else {
        this.time = 60;
        this.disabled = true;
        this.timer();
        this.sendverificode();
      }
    },
    sendverificode: function() {
      let that = this;
      let jsondata = {};
      let obj = {
        phone: this.phone
      };
      jsondata = Object.assign(obj, this.$utils.commonParams());
      jsondata.sign = this.$utils.signObject(jsondata);
      sendverificode(jsondata).then(response => {
        console.log(response);
        if (response.code == 0) {
          this.$vux.toast.text("获取验证码成功", "top");
        } else {
          this.$vux.toast.text(response.message, "top");
        }
      });
    },
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "S后重新获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    },
    bindphone: function() {
      //
      var reg = 11 && /^((13|14|15|17|18|19)[0-9]{1}\d{8})$/;
      //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
      if (this.phone == "") {
        this.$vux.toast.text("请输入手机号码", "top");
      } else if (!reg.test(this.phone)) {
        this.$vux.toast.text("手机格式不正确", "top");
      } else {
        if (this.codeText) {
          let jsondata = {
            phoneNum: this.phone,
            verifyCode: this.codeText,
            openid: sessionStorage.getItem("wx_openId"), // o0Moh6eQhTm5bZVqT6wjdSUsZonM
            orgId: this.$utils.myOrgId
          };
          // jsondata = JSON.stringify(jsondata);
          bindCustByOpenId(jsondata).then(data => {
            console.log(data);
            if (data.code == 0 || data.code == "0") {
              this.$vux.toast.text("亲，您已绑定成功!", "top")
              this.$router.push({
                path:'selfNav'
              })
            } else if (data.code == 1017 || data.code == "1017") {
              this.$vux.toast.text("已经绑定过", "top")
              this.$router.push({
                path:'selfNav'
              })
            } else {
              this.$vux.toast.text("绑定失败，请重新绑定!", "top")
            }
          });
        } else {
          this.$vux.toast.text("亲!请输入验证码", "top")
        }
      }
    },
    // 获取token
    getTokenByOpenId() {
      let that = this
      var jsondata = {
        openid: sessionStorage.getItem("wx_openId"),
        deviceInfo: this.$utils.myDeviceInfo
      };
      getTokenByOpenId(jsondata).then(data => {
        console.log("执行获取token的接口  " + JSON.stringify(data));
        if (data.code == 0) {
          console.log("用户 token " + data.data.token);
          let _token = data.data.token;
          console.log('getTokenByOpenId获取到的'+_token)
          sessionStorage.setItem("wx_Token", data.data.token);
          sessionStorage.setItem("WXPhone", data.data.phoneNum);
          this.$router.push({
            path:'selfNav'
          })
        } else {
          this.$vux.toast.text(data.message, "top");
        }
        this.$vux.loading.hide();
      });
    },
  }
};
</script>
<style scoped lang="scss">
  .getCode {
    width: 120px;
    height: 48px;
    line-height: 48px;
    background: #26a2ff;
    color: #fff;
    text-align: center;
    border: 0;
    margin-right: -10px
  }
</style>