<template>
  <scroll
    class="wrapper mine"
    :pullup="true"
    :bounce="true"
  >
    <div class="head" >
      <img class="bg" :src="image.head_bg">
      <div class="ref-block" @click="clearBoth()">
          <img :src="image.ref"/>
        </div>
      <div class="contentBox">
        <img class="header-icon" :src="userDetail.avatar">
        <p class="name">{{userDetail.nickname}}</p>
        <p class="id">学员号:{{userDetail.user_id}}</p>
      </div>
    </div>
    <div class="outBox">
      <div class="list">
        <van-cell title="我的订单" ref="order" to="/order" @click="toOrder" is-link>
          <img slot="icon" :src="image.order" >
        </van-cell>
        <van-cell title="宝宝档案" ref="bbda" to="/bbda" @click="toBbda" is-link>
          <img slot="icon" :src="image.babyicon" >
        </van-cell>
      </div>
    </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{
      .contentBox{width: 335 * @toVw;height: 104 * @toVw;background: white;box-shadow:0px 1px 6px 0px rgba(64,169,255,0.3);
    border-radius: 8 * @toVw;position: absolute;top: 100 * @toVw;left: 20 * @toVw;
    }
    .bg{width: 100%;}
      .ref-block{
        width: 25 * @toVw;
        height: 25 * @toVw;
        position: absolute;
        right: 28 * @toVw;
        top: 56 * @toVw;
        img{
          width: 100%;
        }
      }
      width: 375 * @toVw;
      height: 160 * @toVw ;
      background-size: 100% 100%;
      color: white;
      text-align: center;
      .header-icon{
        width: 72 * @toVw;
        height:72 * @toVw;
        border-radius: 10000px;
        border: 1 * @toVw solid white;
        position: absolute;
        top: -40 * @toVw;
        left: 134* @toVw;
      }
      .name{
        font-size:20* @toVw;
        font-family:PingFang-SC-Medium;
        font-weight:normal;
        line-height:20* @toVw;
        margin-top:42 * @toVw;
        color: black;
        font-weight: 500;
      }
      .id{
        font-size:14* @toVw;
        font-family:PingFang-SC-Medium;
        font-weight:normal;
        color: #808080;
        border-radius: 200px;
        line-height:17* @toVw;
        background-color: white;
        margin-top:12 * @toVw;
        // padding: 10 20*@toVw 0 ;

      }
    }
    .outBox{background: white;box-shadow:0px 1px 6px 0px rgba(64,169,255,0.3);width: 335 * @toVw;border-radius: 8 * @toVw;margin-top: 62*@toVw;
    overflow: hidden;
    .list{
      .van-cell{
        font-size: 16px;
        padding-top:12 * @toVw ;
        padding-bottom: 12 * @toVw ;
        img{margin-right:12 * @toVw;width: 21 * @toVw;height:21 * @toVw ;}
      }
      .van-cell:not(:last-child)::after{right: 15px;}
    }
    }
    
  }
</style>