selfNav.vue 5.01 KB
<template>
  <div>
    <div class="person-bg">
      <div class="person-ifo">
        <div class="person-pic"></div>
        <ul class="person-con">
          <li></li>
          <li style="padding-top: 20px;font-size: 20px;">{{phoneNum}}</li>
          <!--<li>账户余额: <span>¥100.00</span></li>-->
          <!--<li>我的卡券:<span>20张</span></li>-->
        </ul>
      </div>
    </div>

    <!--<mt-cell title="会员卡" is-link :to="{ name: 'cardList' }"></mt-cell>-->

    <!--<mt-cell title="车辆管理" is-link :to="{ name: 'myCars' }"></mt-cell>-->

    <!--<mt-cell title="车辆管理" is-link :to="{ name: 'parkNotes' }"></mt-cell>-->

    <!--<mt-cell title="建议反馈" is-link :to="{ name: 'suggestionBack' }"></mt-cell>-->

    <van-cell-group>
      <van-cell v-for="i in navList" :key="i.title" :title="i.title" size="large" is-link @click="toNextPage(i.path)"/>
    </van-cell-group>


    <div class="leftRightPadding" style="margin-top: 34px" v-if="phoneNum">
      <!--<mt-button type="danger" size="large"></mt-button>-->
      <!--<van-button type="info" block>退出账户</van-button>-->
    </div>
    <div class="leftRightPadding" style="margin-top: 34px" v-else>
      <van-button type="info" block @click="toBindingPage">登录绑定</van-button>
    </div>

  </div>
</template>

<script>

import { getTokenByOpenId, getOpenIdByCode } from "@/api/getUserIfo";
export default {
  name: "selfNav",
  data() {
    return {
      navList: [
        {
          title: "会员卡", path: "cardList"
        },
        {
          title: "车辆管理", path: "myCars"
        },
        {
          title: "停车记录", path: "parkNotes"
        },
        {
          title: "建议反馈", path: "suggestionBack"
        }
      ],
      openId: "",
      phoneNum: ""//手机号
    };
  },

  created() {
    // this.phoneNum = localStorage.getItem('userPhoneNum')
  },
  mounted() {
    // this.openId = this.$utils.openId;
    // if (this.openId) {
    //   this.getTokenAndphoneNum();
    // }
    // console.log(this.openId);
    // this.phoneNum = localStorage.getItem('userPhoneNum')


    if(this.$route.query.openId){
      this.openId = this.$route.query.openId
      this.getTokenAndphoneNum(this.openId)
    }else{
      this.webAppCode = this.getWxCode();
      this.getOpenIdByCode()
    }

    console.log(this.$utils.userPhoneNum)
  },
  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
    },
    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.openId = openId
          this.getTokenAndphoneNum(openId) // 获取token和用户手机号
        }
      });
    },
    toNextPage(path) {
      if (this.phoneNum) {
        this.$router.push({
            name: path
          }
        );
      } else {
        this.$toast("请先登录");
        // this.$router.push({
        //     name: "binDing"
        //   }
        // );
      }
    },
    toBindingPage() {
      this.$router.push({
          name: "binDing",
          query:{
            openid: this.openId
          }
        }
      );
    },
    getTokenAndphoneNum(openId) {
      let jsondata = {
        openid: openId
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      console.log("停车记录传参  " + JSON.stringify(jsondata));
      getTokenByOpenId(jsondata).then(response => {
        console.log(response);
        this.phoneNum = response.data.phoneNum;
        console.log(response.data.token);
      });
    }
  }
};
</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;
    }
  }


</style>