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>