<!--
 * @Author: your name
 * @Date: 2021-11-18 11:09:35
 * @LastEditTime: 2022-01-07 10:58:47
 * @LastEditors: OBKoro1
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /ybm-doctor-miniapp/src/pages/index/compenents/header.vue
-->
<template>
  <view class="index-header u-flex u-col-center">
    <image class="avatar" :src="avatarName.avatarUrl" />
    <view class="index-header__content u-flex-1">
      <view class="u-flex u-col-center">
        <view class="name">{{ useInfo.name }}</view>
        <image v-if="useInfo.sex===1" class="sex" :src="ManIcon" />
        <image v-if="useInfo.sex===2" class="sex" :src="WomenIcon" />
      </view>
    </view>
  </view>
</template>

<script>
import UserIcon from '../images/icon-nouser.png'
import ManIcon from '../images/icon_man.png'
import WomenIcon from '../images/women.png'

export default {
  props: {
    useInfo: {
      type: [Object],
      default: null
    },
    user: {
      type: [Object],
      default: null
    }
  },
  data() {
    return {
      UserIcon,
      ManIcon,
      WomenIcon,
      avatarName: uni.getStorageSync('avatar-name')
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.index-header {
  padding: 15rpx 40rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  &__content {
    .name {
      font-size: 30rpx;
      font-weight: 500;
      color: $color-text-title;
    }
    .desc {
      margin-top: 12rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: $color-text-weak;
    }
    .sex {
      width: 26rpx;
      height: 24rpx;
      margin-left: 6rpx;
    }
  }
  .scan-icon {
    width: 42rpx;
    height: 42rpx;
  }
  .arrow-icon {
    width: 46rpx;
    height: 44rpx;
    margin-left: 30rpx;
  }
}
.avatar {
    width: 120rpx;
    height: 120rpx;
    margin-right: 10rpx;
    border-radius: 50%;
    background-color: #eee;
  }
</style>
