BJ_web_developers / wxgzh

  <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>