BJ_web_developers / wxgzh

  <template>
    <div>
      <div class="person-bg">
        <div class="person-ifo">

          <div class="person-pic" :style="{backgroundImage:'url('+this.headPicUrl+')',backgroundSize:'100%'}"></div>

          <ul class="person-con">

            <li>昵称:{{ userPhone}}</li>
            <li>账户余额: <span>￥{{(acctBalance/100).toFixed(2)}}</span></li>
            <li>我的卡券：<span>{{ couponNum }}张</span></li>

          </ul>
        </div>
      </div>
  

      <mt-cell is-link v-for="i in menuList" :title="i.name" @click.native="toMemu(i.path)" :key="i.name"></mt-cell>

      <!--<mt-cell title="车辆管理" is-link></mt-cell>-->

      <!--<mt-cell title="停车记录" is-link></mt-cell>-->

      <!--<mt-cell title="建议反馈" is-link></mt-cell>-->

      <div class="leftRightPadding" style="margin-top: 34px" v-show="loginShow">
        <mt-button type="danger" size="large" @click="loginHandle">{{ loginTxt }}</mt-button>

      </div>
  
    </div>
  </template>
  
  <script>

  
  import {
    getOpenIdByCode,
    getTokenByOpenId,
    queryUserInfo,
    queryCustPersonBaseInfo,
    logout
  } from "@/api/selfNav/selfNav";

  export default {

    name: "selfNav",
    data() {
      return {
        menuList: [

          { name: "会员卡", path: "Cards" },
          { name: "车辆管理", path: "myCars" },

          { name: "发票管理", path: "eInvoiceWrap" },
          { name: "停车记录", path: "parkNotes" },
          { name: "建议反馈", path: "suggestionBack" }
        ],

        webAppCode: "", // 071hQo0w34xoYX21CP2w3RRw7U1hQo02

        couponNum: 0, // 卡券数量
        acctBalance: 0, // 账户余额
        userPhone: "--",// 账户手机号
        headPicUrl: require("@/assets/images/mySelf/photoBG.png"),// 用户图像
        loginTxt: "绑定手机", // 退出账户
        loginShow:true
        // headPicUrl:headPic
      };
    },
    created() {

      // this.$vux.loading.show({
      //   text: "数据加载中..."
      // });

      if (this.$utils.clientBrowser() == "微信") {
        this.webAppCode = this.getCode();
      }
    },
    mounted() {
      let that = this;
      if(sessionStorage.getItem("wx_openId")){
        this.getTokenByOpenId(sessionStorage.getItem("wx_openId"));

        this.getinfoself()

      }else{
        if (this.webAppCode) {
          this.getopenid();
        }
      }
  
    },
    methods: {
      // 获取code
      getCode() {
        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) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      },
      // 获取openid
      getopenid() {
        let jsondata = {
          appId: this.$utils.myVxAppId,
          code: this.webAppCode
        };
        getOpenIdByCode(jsondata).then(data => {
          console.log(data);
          if (data.code == "0") {
            let openid = data.data;
            sessionStorage.setItem("wx_openId", openid);
            console.log("用户 openid " + openid);
            this.getTokenByOpenId(openid);
          }else{
            this.$vux.toast.text(data.message, "top");
          }
        });
      },
      // 获取token
      getTokenByOpenId(openid) {
        let that = this
        var 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);
            let _token = data.data.token;
            console.log('getTokenByOpenId获取到的'+_token)
            sessionStorage.setItem("wx_Token", data.data.token);

            // alert(data.data.token)

            sessionStorage.setItem("WXPhone", data.data.phoneNum);
            that.getinfoself(); //获取用户信息
          } else {
            this.$vux.toast.text(data.message, "top");
          }
          this.$vux.loading.hide();
        });
      },
      //获取用户信息
      getinfoself() {
        // alert('token是:'+sessionStorage.getItem("wx_Token"))
        let jsondata =  this.$utils.commonParams();
        console.log(jsondata)
        jsondata.sign = this.$utils.signObject(jsondata);
        queryUserInfo(jsondata).then(data => {
          this.$vux.loading.hide();
          console.log("获取用户信息 " + JSON.stringify(data));
          if (data.code == "0") {
            var datas = data.data;
            this.couponNum = datas.couponNum;//卡券数量
            var openAcctType = datas.openAcctType;//是否开通账户 1 开通 0 未开通
            var msgPushState = datas.msgPushState;//是否开启消息推送 1 是 0否
            // this.userPhone = datas.phone;//手机号
            var carCount = datas.carCount;//绑定车牌数量
            this.acctBalance = datas.acctBalance;//账户余额 单位：分
            var orderCount = datas.orderCount;//停车记录
            var pettyPayAmount = datas.pettyPayAmount;//小额免密支付金额
            var acctScoreBalance = datas.acctScoreBalance;//积分账户余额 单位：个
            var pettyPayState = datas.pettyPayState;//用户是否开启小额免密支付 1是 0否
            var yjstatus = datas.openAcctDepositType;//是否交了押金
            var yjjine = datas.acctDepositBalance;//Yjjine
            var headPicUrl = "";//头像
            var custNickname = "";//昵称
            var phone = "";//昵称
  
            this.queryCustPersonBaseInfo(); //获取手机号和头像
          } else {
            this.$vux.toast.text(data.message, "top");
          }
        });
      },
      //获取手机号和头像
      queryCustPersonBaseInfo() {
        let jsondata = this.$utils.commonParams()
        jsondata.sign = this.$utils.signObject(jsondata);
        queryCustPersonBaseInfo(jsondata).then(data => {
          // this.userPhone = datas.phone;//手机号
          console.log('获取用户手机头像'+JSON.stringify(data))
          if (data.code == "0") {
            if(data.data.headPicUrl){
              this.headPicUrl = data.data.headPicUrl;//头像
            }else{
              this.headPicUrl = require("@/assets/images/mySelf/photoBG.png");
            }
  
            var custNickname = data.data.custNickname;//昵称
            this.userPhone = data.data.userPhone;//昵称
            // this.loginTxt = "退出登陆";
            this.loginShow = false
          } else {
            this.$vux.toast.text(data.message, "top");
          }
        });
      },
      // 注册登陆或者退出登陆
      loginHandle() {
        if (this.loginTxt == "退出登陆") {
          let jsondata = {};
          let obj = {
            token: sessionStorage.getItem("wx_Token")
          };
          jsondata = Object.assign(obj, this.$utils.commonParams());
          jsondata.sign = this.$utils.signObject(jsondata);
          logout(jsondata).then(data => {
            console.log("执行获取token的接口  " + JSON.stringify(data));
            if (data.code == 0) {
              sessionStorage.setItem("wx_Token", null);
              sessionStorage.setItem("WXPhone", null);
              this.couponNum = 0; // 卡券数量
              this.acctBalance = 0; // 账户余额
              this.userPhone = "--";// 账户手机号
              this.headPicUrl = require("@/assets/images/mySelf/photoBG.png");// 用户图像
              this.loginTxt = "绑定手机"; // 退出账户
              this.$router.push({
                path: "binDing"
              });
            } else {
              this.$vux.toast.text(data.message, "top");
            }
          });
        } else {
          this.$router.push({
            path: "binDing"
          });
        }
      },
      // 前往各个子页面
      toMemu(path) {
        let _token = sessionStorage.getItem("wx_Token");
        if (_token) {
          this.$router.push({
            path: path
          });
        } else {
          this.$vux.toast.text("请先绑定手机号", "top");

          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>