<template>
  <div class="mine">
    <div class="head" :style="{backgroundImage:`url(${image.head_bg})`}">
      <img class="header-icon" :src="userDetail.avatar">
      <p class="name">{{userDetail.nickname}}</p>
      <p class="id">ID:{{userDetail.user_id}}</p>
    </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";

  export default {
    name: "mine",
    components:{
      bottomTab
    },
    data(){
      return {
        image:mineImage,
        userDetail:{}
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        getUserDetailApi().then(res=>{
          this.userDetail = res
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .mine{
    height: 100%;
    background: #EEEEEE;
    overflow: auto;
    .head{
      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:14* @toVw;
        font-family:PingFang-SC-Medium;
        font-weight:normal;
        color:rgba(255,255,255,1);
        line-height:20* @toVw;
      }
      .id{
        font-size:12* @toVw;
        font-family:PingFang-SC-Medium;
        font-weight:normal;
        color:rgba(255,255,255,1);
        line-height:17* @toVw;
      }
    }
    .list{
      margin-top: 12*@toVw;
      .mt-cell{
        height: 40 * @toVw;
      }
    }
  }
</style>
