<template>
    <div class="wrapper">
      <div class="title">
          <div class="left-quan">
              <p class="left-name">礼券</p>
              <p class="left-num">{{saveLogoStatus.coupon}}</p>
              <img src="@/assets/+.png" class="quan" alt="" @click="goMore">
          </div>
          <div class="right-zhi">
              <p class="right-name">贴纸</p>
              <p class="right-num">{{saveLogoStatus.paster}}</p>
          </div>
      </div>
    </div>
</template>

<script>
export default {
   components: {},
   props: {
      
   },
   data() {
       return {
           saveLogoStatus:{},
       };
   },
    computed: {
    },
   methods: {
        getUserInfo(){
            this.$api.getUserinfoAPI().then(res => {
                console.log(res)
                if(res.data.errno == 10000){
                    localStorage.setItem('userinfo',JSON.stringify(res.data.data))
                     //测试先注释
                    if(res.data.data.status==1){
                        this.$router.push({
                            path:'/verification',
                        })
                    }else{
                        this.saveLogoStatus = res.data.data
                    }

                }else if(res.data.errno == 20000){
                    this.$toast.fail('登录已失效,请重新登录！')
                    localStorage.removeItem('userinfo')
                    this.$router.push(
                        {path: '/'},
                    )
                }else{
                    this.$toast.fail(res.data.errmsg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        goMore(){
            this.$router.push(
                {path: '/more'},
            )
        }
   },
   created() {
   },
   mounted() {
        this.getUserInfo()
   }
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    position: relative;
    .bg-box{
        position: absolute;
        height: 100vh;
    }
    .title{
        margin-top: 20px;
        position: absolute;
        z-index: 1;
        display: flex;
        justify-content: space-around;
        padding-left: 51px;
        .left-quan{
            width: 310px;
            height: 72px;
            background: #000000;
            border: 1px solid #FFFFFF;
            border-radius: 36px;
            margin-right: 28px;
            display: flex;
            align-items: center;
            .left-name{
                font-size: 24px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-align: right;
                margin-right: 15px;
                width: 78px;
                letter-spacing: 2px;
                line-height: 72px;
            }
            .left-num{
                width: 132px;
                font-size: 40px;
                font-weight: 400;
                color: #FFFFFF;
                margin-right: 14px;
                font-family: DIN Black;
                line-height: 72px;
            }
            .quan{
                width: 72px;
                height: 72px;
            }
        }
        .right-zhi{
            width: 310px;
            height: 72px;
            background: #000000;
            border: 1px solid #FFFFFF;
            border-radius: 36px;
            display: flex;
            align-items: center;
            .right-name{
                font-size: 24px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-left: 31px;
                margin-right: 15px;
                letter-spacing: 2px;
                line-height: 72px;
            }
            .right-num{
                font-size: 40px;
                font-family: DIN Black;
                font-weight: 400;
                color: #FFFFFF;
                margin-right: 14px;
                line-height: 72px;
            }
        }
    }
}
</style>