<template>
  <div class="mine">
    <div class="head" :style="{backgroundImage:`url(${image.head_bg})`}">
      <img class="header-icon" :src="userDetail.avatar">
      <div class="ref-block" @click="clearBoth()">
        <img :src="image.ref"/>
      </div>
      <p class="name">{{userDetail.nickname}}</p>
      <span class="id">学员号:{{userDetail.user_id}}</span>
    </div>
    <div class="list">
      <mt-cell title="订单" to="/order" is-link>
        <img slot="icon" :src="image.order" width="24" height="24">
      </mt-cell>
      <!--<mt-cell title="Q&A" to="//github.com" is-link>-->
        <!--<img slot="icon" :src="image.qa" width="24" height="24">-->
      <!--</mt-cell>-->
    </div>
    <bottom-tab/>
  </div>
</template>

<script>
  import bottomTab from './public/bottomTab';
  import {mineImage} from "../util/imgUrl";
  import {getUserDetailApi} from "../service/api";
  import { Toast } from 'mint-ui';
  export default {
    name: "mine",
    components:{
      bottomTab
    },
    data(){
      return {
        image:mineImage,
        userDetail:{}
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        getUserDetailApi().then(res=>{
          this.userDetail = res
        })
      },
      clearBoth(){
        localStorage.clear();
        Toast('清除成功')

      }
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .mine{
    height: 100%;
    background: #EEEEEE;
    overflow: auto;
    .head{
      .ref-block{
        width: 25 * @toVw;
        height: 25 * @toVw;
        position: absolute;
        right: 20 * @toVw;
        top: 20 * @toVw;
        img{
          width: 100%;
        }
      }
      width: 375 * @toVw;
      height: 160 * @toVw ;
      background-size: 100% 100%;
      color: white;
      text-align: center;
      .header-icon{
        margin-top: 18 * @toVw;
        margin-bottom: 14 * @toVw;
        width: 72 * @toVw;
        height: 72 * @toVw;
        border-radius: 10000px;
      }
      .name{
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:normal;
        color:rgba(255,255,255,1);
        line-height:20* @toVw;
      }
      .id{
        font-size:12px;
        font-family:PingFang-SC-Medium;
        font-weight:normal;
        color: #808080;
        border-radius: 200px;
        line-height:17* @toVw;
        background-color: white;
        padding: 0 20*@toVw;
      }
    }
    .list{
      margin-top: 12*@toVw;
      .mt-cell{
        height: 40 * @toVw;
      }
    }
  }
</style>