<template>
  <view class="box">
    <view style="height: 38rpx; width: 100%"></view>
    <image
      class="box-headImg"
      v-if="userInfo.headImage"
      :src="userInfo.headImage"
    ></image>
    <image class="box-headImg" v-else :src="unLoginHead"></image>
    <view  v-if="userInfo.nickName" class="box-name">{{userInfo.nickName}}</view>
    <view  v-if="!userInfo.nickName" class="box-name">新用户</view>
  </view>
</template>

<script>
import unLoginHead from "@/assets/img/unLoginHead.png";
export default {
  data() {
    return {
      unLoginHead: unLoginHead,
    };
  },
  computed: {
    userInfo() {
        console.log(this.$store.state.user.userInfo)
      return this.$store.state.user.userInfo;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 316rpx;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
  .box-headImg {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }
  .box-name {
    width: 100%;
    color: #fff;
    text-align: center;
    margin-top: 20rpx;
  }
}
</style>