<template>
    <div class="header">
        <van-image
            class="avator"
            fit="cover"
            width="66"
            height="66"
            round
            :src="headUrl"
        />

        <div class="texts">
            <div class="title">小丸子2号可以放12个文字</div>
            <div class="tag">已实名认证</div>
            <div class="nums">
                <div class="left">可用积分 <span class="num">8797</span> 分</div>
                <div>可用购酒券 <span class="num">8797</span> 分</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nickname: "",
            headUrl: "",
            custSign: "",
            customerLevelVO: {},
        };
    },
    mounted() {
        this.getUserInfo();
    },

    methods: {
        jump(status) {
            let url = "/pages/shop_base.html#/accountsAndSecurity";
            if (status) {
                url += "?status=" + status;
            }
            my.jump(url);
        },

        getUserInfo() {
            my.post({
                url: my.apiDomain + "api/customer/queryById/token",
                data: {
                    channel: "h5",
                },
            }).then((res) => {
                const { nickname, headUrl, custSign, customerLevelVO } = res;
                Object.assign(this, {
                    nickname,
                    custSign,
                    headUrl,
                    customerLevelVO,
                });
            });
        },
        toMemberShipCenter() {
            my.jump("/membershipCenter");
        },
    },
};
</script>

<style lang="scss" scoped>
.header {
  padding: 0px 12px;
  padding-top: 35px;
  display: flex;

  .texts {
    position: relative;
    top: 16px;
    margin-left: 10px;

    .title {
      font-size: 14px;
      color: #fff;
      margin-bottom: 8px;
      line-height: 1;
    }
    .tag {
      background-color: #f29a4f;
      padding: 2px 9px;
      width: auto;
      display: inline-block;
      border-radius: 30px;
      color: #fff;
      line-height: 1;
      font-size: 12px;
      margin-bottom: 8px;
    }

    .nums {
      line-height: 1;
      color: #fff;
      display: flex;
      align-items: center;
      font-size: 12px;

      .num {
        font-size: 14px;
        font-weight: bold;
      }

      .left{
        padding-right: 20px;
        margin-right: 20px;
        border-right: 1px solid rgba(255, 255, 255, 0.6);
        height: 16px;
      }

    }
  }
}
</style>
