src/views/mySelf/selfNav.vue

<template>
  <div>
    <div class="person-bg">
      <div class="person-ifo">
        <div class="person-pic"></div>
        <ul class="person-con">
          <li>{{ phoneNum }}</li>
          <li>账户余额: <span>￥ {{ acctBalance }}</span></li>
          <li>我的卡券：<span>{{couponNum}}  张</span></li>
        </ul>
      </div>
    </div>
    <mt-cell title="会员卡" is-link :to="{ name: 'Toast' }"></mt-cell>
    <mt-cell title="车辆管理" is-link :to="{ name: 'Toast' }"></mt-cell>
    <mt-cell title="停车记录" is-link :to="{ name: 'parkNotes' }"></mt-cell>
    <mt-cell title="建议反馈" is-link :to="{ name: 'suggestionBack' }"></mt-cell>
    <div class="leftRightPadding" style="margin-top: 34px">
      <mt-button type="danger" size="large" @click="toBinDing">退出账户</mt-button>
    </div>
  </div>
</template>
<script>
import { getOpenIdByCode, getTokenByOpenId, queryUserInfo } from '@/api/selfNav/selfNav'
export default {
  name: 'selfNav',
  data(){
    return {
      couponNum:'3', // 卡券数量
      acctBalance: '420.00', // 账户余额
      phoneNum:'',//  用户手机号
    }
  },
  created() {
    if (this.$utils.clientBrowser() == "微信") {
      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,0#wechat_redirect'
      } else {
        return code;
      }
    }
  },
  mounted() {
    if(this.$utils.GetOpenid()){
      this.getTokenByOpenId(this.$utils.GetOpenid())
    }else{
      this.getOpenId()
    }
  },
  methods: {
    getUrlParam(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
      var r = window.location.search.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return null
    },
    getOpenId: function () { // 第一步获取openid
      let getCode = location.href
      console.log(getCode)
      let dataCode = getCode.split('?')[1]
      let wxCode = dataCode.split('&')[0].split('=')[1]
      let jsondata = {
        appId: this.$utils.myVxAppId,
        code: wxCode
      };
      getOpenIdByCode(jsondata).then(data => {
        console.log(data)
        // SetOpenid
        if(data.code=='0'){
          let openid = data.data;
          this.$utils.SetOpenid(openid);
          // mUrl.setApporWX('wx');
          console.log("用户 openid "+openid);
          this.getTokenByOpenId(openid)
        }
      })
    },
    getTokenByOpenId: function (openid) { // 获取token和手机号
      let jsondata = {
        openid: 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);
          this.$utils.SetToken(data.data.token)
          this.$utils.SetPhone(data.data.phoneNum)
          this.phoneNum = data.data.phoneNum
          //  用户已经绑定手机号，获取用户信息
          this.getInfoSelf()
        }else{
          //  用户未绑定手机号
          this.$router.push({
            path: 'binDing'
          })
        }
      })
    },
    getInfoSelf: function () {  // 获取用户信息
      let salt = this.$utils.myCommonSalt(32);
      var jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        token: this.$utils.GetToken(),
      }
      jsondata.sign = this.$utils.signObject(jsondata)
      queryUserInfo(jsondata).then(data => {
        console.log(data)
        if(data.code == '0'){
          let datas = data.data
          this.couponNum = datas.couponNum;//卡券数量
          this.acctBalance = (datas.acctBalance/100).toFixed(2);//账户余额 单位：分
        }
      })
    },
    toBinDing: function () { // 退出账户 去绑定页面
      this.$router.push({
        path:'binDing'
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .person-bg {
    height: 160px;
    background: url("../../assets/images/mySelf/selfNavBg.png") no-repeat;
    background-size: 100% 100%;
  }
  .person-ifo {
    padding: $commonLeftRightPadding;
    padding-top: 45px;
    display: flex;
    color: #ffbfbf;
    .person-pic {
      width: 64px;
      height: 64px;
      margin-right: 15px;
      background: url("../../assets/images/mySelf/photoBG.png") no-repeat;
    }
  }
  .person-con {
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .mint-cell {
    border-bottom: 1px solid #EFEDED;
  }
</style>