<template>
  <scroll
    class="wrapper mine"
    :pullup="true"
    :bounce="true"
  >
    <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">
      <van-cell title="我的订单" ref="order" to="/order" @click="toOrder" is-link>
        <img slot="icon" :src="image.order" width="24" height="24">
      </van-cell>
      <van-cell title="宝宝档案" ref="bbda" to="/bbda" @click="toBbda" is-link>
        <img slot="icon" :src="image.babyicon" width="24" height="24">
      </van-cell>
    </div>
    <bottom-tab/>
  </scroll>
</template>

<script>
  import bottomTab from './public/bottomTab';
  import {mineImage} from "../util/imgUrl";
  import { Cell,Toast } from 'vant';
  export default {
    name: "mine",
    components:{
      bottomTab,
      [Cell.name]:Cell
    },
    data(){
      return {
        image:mineImage,
        userDetail:{}
      }
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        this.userDetail = JSON.parse(localStorage.getItem('userDesc'))
      },
      clearBoth(){
        this.$sa.track('buttonClick',{
          tabTitle:'我的',
          moduleTitle:'我的',
          buttonType:'清楚缓存',
          buttonName:'清楚缓存'
        });
        localStorage.clear();
        Toast('清除成功')
      },
      toOrder(){
        this.$sa.quick('trackHeatMap',this.$refs.order)
      },
      toBbda(){
        this.$sa.quick('trackHeatMap',this.$refs.bbda)
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .mine{
    height: 100vh;
    background: #F5F5F9;
    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;
      .van-cell{
        font-size: 16px;
        padding: 10px 13px;
        img{margin-right: 6px;}
      }
    }
  }
</style>