BJ_web_developers / wxgzh

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

  
        <svg class="demo__top-svgBg" viewBox="0 0 366 256">
          <g class="svgBg__objects">
            <path class="svgBg__bg svgBg__bg1" fill="#86D7DB" d="M0,143 88,107 224,153 348,109 366,123 366,256 0,256z" />
            <path class="svgBg__bg svgBg__bg2" fill="#3C929A" d="M0,156 106,136 272,172 342,124 366,144 366,256 0,256z" />
            <path class="svgBg__bg svgBg__bg3" fill="#416175" d="M0,170 62,160 235,148 305,145 366,153 366,256 0,256z" />
            <g class="svgBg__tree svgBg__tree-1 m--left" data-id="1">
              <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M54,127 C77,127 62,95 54,63 C46,95 31,127 54,127" />
              <path class="svgBg__tree-trunk svgBg__tree-part" d="M56,147 Q55,115 54,83 Q53,115 52,146" />
            </g>
            <g class="svgBg__tree svgBg__tree-2 m--left" data-id="2">
              <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M67,124 C90,124 75,92 67,59 C59,92 44,124 67,124" />
              <path class="svgBg__tree-trunk svgBg__tree-part" d="M69,144 Q68,112 67,80 Q66,112 65,143" />
            </g>
            <g class="svgBg__tree svgBg__tree-3 m--right" data-id="3">
              <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M264,129 C287,129 272,97 264,64 C256,97 241,129 264,129" />
              <path class="svgBg__tree-trunk svgBg__tree-part" d="M266,149 Q265,117 264,85 Q263,117 262,148" />
            </g>
            <g class="svgBg__tree svgBg__tree-4 m--right" data-id="4">
              <path class="svgBg__tree-leafs svgBg__tree-part" fill="#207277" d="M287,128 C310,128 295,96 287,63 C279,96 264,128 287,128" />
              <path class="svgBg__tree-trunk svgBg__tree-part" d="M289,148 Q288,116 287,84 Q286,116 285,147" />
            </g>
            <g class="svgBg__tree svgBg__tree-5 m--right" data-id="5">
              <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M313,128 C336,128 321,96 313,63 C305,96 290,128 313,128" />
              <path class="svgBg__tree-trunk svgBg__tree-part" d="M315,148 Q314,116 313,84 Q312,116 311,147" />
            </g>
          </g>
        </svg>

        <div class="person-ifo">

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

          <ul class="person-con">

            <li>手机号:{{ userPhone}}</li>
            <li style="height: 20px;"></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="primary" 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: "plateNumber" },

          { 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.userPhone = data.data.phone;//昵称
            this.loginShow = false
            // 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) {

          if(path=='plateNumber'){

            window.location.href = 'http://wxgzh.renniting.cn/wechatwuxi/WUXIZLYH/GZH/index.html'
           // http://wxgzh.renniting.cn/wechatwuxi/WUXIZLYH/GZH/index.html#/selfNav

          }else{
            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: -webkit-linear-gradient(#7BCECA, #82D3CB);
      background: linear-gradient(#7BCECA, #82D3CB);
  

    }
  
    .person-ifo {
      padding: $commonLeftRightPadding;
      padding-top: 45px;
      display: flex;

      /*color: #ffbfbf;*/
      position: absolute;
      top: 0;
      left: 0;

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