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">
      <div class="getCode" @click="getCode">{{timeNum}}</div>
    </mt-field>
    <div style="margin-top: 34px" class="leftRightPadding">
      <van-button type="info" block @click="bindPhoneHandle">绑定</van-button>
    </div>
  </div>
</template>
<script>
import { sendverificode, bindCustByOpenId, getOpenIdByCode, getTokenByOpenId } from "@/api/getUserIfo";
export default {
  name: "binDing",
  data() {
    return {
      codeText: "",
      phone: "",
      timeText: "获取验证码",
      timeNum: 60,
      webAppCode: ""
    };
  },
  created() {
    this.timeNum = this.timeText;
    // this.webAppCode = this.getWxCode();  // 正式打开注释
  },
  methods: {
    getWxCode() {
      var appID = this.$utils.myVxAppId;
      var code = this.getUrlParam("code");
      var local = window.location.href;
      if (code == null || code === "") {
        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        return code;
      }
    },
    getUrlParam(name) { // 获取url里面的参数
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      var r = window.location.search.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return null
    },
    getCode: function() {
      var _this = this;
      // this.timeText = this.timeNum+'S'
      const reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        _this.sendverificode();
        let Num = 60;
        var timer = setInterval(function() {
          _this.timeNum = Num-- + "s";
          if (Num == -1) {
            _this.timeNum = "获取验证码";
            clearInterval(timer);
          }
        }, 1000);
      } else {
        this.$toast("请输入正确手机号");
      }
    },
    sendverificode() {
      let jsondata = {
        phone: this.phone
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      sendverificode(jsondata).then(response => {
        console.log(response);
        this.$toast("获取验证码成功");
      });
    },
    bindPhoneHandle() {
      const reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        // this.getOpenIdByCode(); // 获取openid
        this.bindCustByOpenId(this.$route.query.openid)
      } else {
        this.$toast("请输入正确手机号");
      }
    },
    getOpenIdByCode() {  // 获取openid
      // this.bindCustByOpenId() // 正式注释
      // 正式打开注释
      let jsondata = {
        appId: this.$utils.myVxAppId,
        code: this.webAppCode
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      console.log("停车记录传参  " + JSON.stringify(jsondata));
      getOpenIdByCode(jsondata).then(response => {
        if(response.code=='0'){
          let openId = response.data
          this.bindCustByOpenId(openId) // 获取token和用户手机号
        }
      });
    },
    bindCustByOpenId(openId){ //
      let jsondata = {
        phoneNum: this.phone,
        verifyCode: this.codeText,
        openid: openId  // 正式打开注释
        // openid:'oWw3o5rY_bFsiT_nFd2CEQWGZfhs'  // 正式注释
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      bindCustByOpenId(jsondata).then(response => {
        if(response.code=='0'){
          this.getTokenByOpenId(openId) // 获取token和用户手机号
        }else if(response.code=='1017'||response.code==1017){
          this.$toast("已经绑定过");
        }else{
          this.$toast("绑定失败");
        }
      });
    },
    getTokenByOpenId(openId){  // 获取token和用户手机号
      let jsondata = {
        openid:openId  // 正式打开注释
        // openid:'oWw3o5rY_bFsiT_nFd2CEQWGZfhs'  // 正式注释
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      getTokenByOpenId(jsondata).then(response => {
        if(response.code=='0'){
          this.$toast("亲，您已绑定成功!");
          localStorage.setItem('userToken',response.data.token)
          localStorage.setItem('userPhoneNum',response.data.phoneNum)
          this.$router.push({
              name: "selfNav",
              query:{
                openId:openId
              }
            }
          );
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
  .getCode {
    width: 100px;
    height: 48px;
    line-height: 48px;
    background: #ef4f4f;
    color: #fff;
    text-align: center;
  }
</style>