<template>
  <div class="wrapper" v-show="saveLogoStatus.curr_attire_img1">
      <div class="bg-box">
        <img style="width:100%;height:100%" src="@/assets/BG.png" alt="">
      </div>
      <ticket></ticket>

      <div class="nav">
          <img src="@/assets/tietieren.png" alt="">
      </div>
      <div class="zhan-box">
          <img class="zhanshi" src="@/assets/zhanshitai.png" alt="">
          <div class="curr_attire_img-box">
            <img class="curr_attire_img" :src="saveLogoStatus.curr_attire_img1" alt="">
          </div>
          <div class="new-box">
            <img class="new" src="@/assets/new.png" alt="">
            <span class="text" @click="newPop()">新手<br />教程</span>
          </div>
      </div>
      <div class="btn-box">
          <div class="left-box" @click="goRoom()">
              <img src="@/assets/left-btn.png" alt="">
              <span>试衣间</span>
          </div>
          <div class="right-box" @click="goOpen()">
              <img src="@/assets/right-btn.png" alt="">
              <span>开礼盒</span>
          </div>
      </div>
      <div class="long-box" @click="goMore()">
          <img src="@/assets/long-btn.png" alt="">
          <span>我的礼券</span>
      </div>
      <van-popup v-model="newShow" class="new-pop">
        <div class="content">
            换装教程
            <div class="new-img">
                <img :src="newTeach" alt="">
            </div>
        </div>
        <div class="new-clone"><img src="@/assets/new-clone.png" alt="" @click="newClone()"></div>
      </van-popup>
      
  </div>
</template>

<script>
import overlay from '@/components/Overlay.vue'
import ticket from '@/components/ticket.vue'

export default {
   components: {
       overlay,
       ticket
   },
   props: {},
   data() {
       return {
           show:false,
           newShow:false,
           saveLogoStatus:{},
           newTeach:'',
       };
   },
   watch: {},
   computed: {},
   methods: {
       getUserInfo(){
            this.$api.getUserinfoAPI().then(res => {
                if(res.data.errno == 10000){
                    if(res.data.data.status==1){
                        this.$router.push({
                            path:'/verification',
                        })
                    }else{
                        localStorage.setItem('userinfo',JSON.stringify(res.data.data))
                        this.saveLogoStatus = res.data.data
                    }
                    this.newTeach =  window.localStorage.getItem('userinfo') ? JSON.parse(window.localStorage.getItem('userinfo')).assets.new_teach : ''
                }else if(res.data.errno == 20000){
                    this.$toast.fail('登录已失效,请重新登录！')
                    localStorage.removeItem('userinfo')
                    this.$router.push('/')
                }else{
                    this.$toast.fail(res.data.errmsg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
       goRoom(){
           this.$router.push({
                path:'/fittingRoom',
                // query: {id:'1'}
            })
       },
       goOpen(){
           this.$router.push({
                path:'/giftBox',
                // query: {id:'1'}
            })
       },
       showClose(val){
           this.show = val
       },
       pop(){
           this.show = true
       },
       newPop(){
           this.newShow = true
       },
       newClone(){
           this.newShow = false
       },
       goMore(){
            this.$router.push({
                path:'/more',
            })
       }
   },
   created() {
   },
    mounted(){
        this.getUserInfo();
    },
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 100%;
    height: 100%;
    position: fixed;
    .bg-box{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .nav{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 103px;
        img{
            display: block;
            margin: 0 auto;
            width: 627px;
            left: 0;
        }
    }
    .zhan-box{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 203px;
        .zhanshi{
            width: 688px;
            display: block;
            margin: 0 auto;
        }
        .curr_attire_img-box{
            position: absolute;
            // bottom: 197px;
            top: 0;
            width: 100%;
            .curr_attire_img{
                margin: 0 auto;
                display: block;
                width: 620px;
                height: 620px;
                border-radius: 50%;
            }
        }
        .new-box{
            top: 458px;
            right: 8px;
            position: absolute;
            display: flex;
            .new{
                width: 185px;
                height: 177px;
            }
            .text{
                position: absolute;
                left: 55px;
                top: 48px;
                font-size: 36px;
                font-weight: 800;
                color: #FFFFFF;
                letter-spacing: 4px;
                line-height: 40px;
            }
            
        }
        
    }
    .btn-box{
        position: absolute;
        display: flex;
        justify-content: space-between;
        margin: 0 66px;
        width: 618px;
        top: 923px;
        z-index: 9;
        .left-box{
            width: 300px;
            img{
                margin: 0 auto;
                display: block;
                width: 300px;
            }
            span{
                width: 300px;
                position: absolute;
                text-align: center;
                top: 43px;
                font-size: 36px;
                font-weight: 800;
                color: #FFFFFF;
                letter-spacing: 4px;
            }
        }
        .right-box{
            width: 300px;
            img{
                margin: 0 auto;
                display: block;
                width: 300px;
            }
            span{
                width: 300px;
                position: absolute;
                text-align: center;
                top: 43px;
                font-size: 36px;
                font-weight: 800;
                color: #000000;
                letter-spacing: 4px;
            }
        }
    }
    .long-box{
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-around;
        width: 100%;
        top: 1114px;
        img{
            width: 460px;
            height: 100px;
            display: block;
            margin: 0 auto;
        }
        span{
            position: absolute;
            display: block;
            line-height: 100px;
            text-align: center;
            font-size: 36px;
            font-weight: 800;
            color: #FFFFFF;
            letter-spacing: 4px;
        }
    }
    .new-pop{
        width: 640px;
        border-radius: 70px;
        text-align: center;
        background: rgba(0,0,0,.7);
        .content{
            padding-top: 45px;
            padding-bottom: 40px;
            width: 640px;
            background: #FFFFFF;
            background: #FFFFFF;
            border-radius: 70px;
            font-size: 40px;
            font-weight: 800;
            color: #000000;
            .new-img{
                height: 660px;
                overflow: auto;
                margin: 30px auto 10px;
                img{
                    width: 552px;
                    height: auto;
                }
            }
        }
        .new-clone{
            img{
                width: 66px;
                height: 136px;
            }
        }
    }
}
</style>