fashion-ssr-vue3/components/common/user-avatar/index.vue

<!-- @format -->

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user'

const userStore = useUserStore()
const { isLogin, userInfo } = storeToRefs(userStore)

const { openLoginModal } = useLoginModal()
const userName = computed(() => {
  return (userInfo.value?.FirstName || userInfo.value?.LastName) ? `${userInfo.value?.FirstName} ${userInfo.value?.LastName}` : 'EJET Spark'
})
async function clickLogin() {
  try {
    const { status } = await openLoginModal()
    console.log('Login status:', status)
    // if (status)
    //   location.reload()
  }
  catch (error) {
    console.log(error)
  }
}
function onLogout() {
  userStore.logout()
}
</script>

<template>
  <div>
    <div v-if="!isLogin">
      <el-button
        class="!b-0px !bg-#9B6CFF custom-btn-login !text-#fff !w-100px !h-32px !text-16px !b-rd-410px"
        @click="clickLogin"
      >
        Sign in
      </el-button>
    </div>
    <div v-else>
      <el-popover
        placement="bottom-end"
        :width="360"
      >
        <template #reference>
          <div class="b-rd-50% w-40px h-40px  fw-800 text-#9B6CFF lh-40px text-center bg-#EAE5FA text-#3D3D3D cursor-pointer">
            {{ userName.charAt(0) }}
          </div>
        </template>
        <template #default>
          <div class=" bg-#fff b-rd-8px flex justify-between items-center">
            <div class="flex items-center">
              <div class="b-rd-50% w-40px fw-800 h-40px lh-40px text-center text-#9B6CFF bg-#EAE5FA text-#3D3D3D cursor-pointer">
                {{ userName.charAt(0) }}
              </div>
              <div class="ml-18px">
                <div class="custom-title-font text-#333 text-18px">
                  {{ userName }}
                </div>
                <div class="mt-4px   text-#767676">
                  {{ userInfo?.email }}
                </div>
              </div>
            </div>
            <div class="cursor-pointer" @click="onLogout">
              <img src="@/assets/images/logout.png" class="w-24px h-24px" alt="">
            </div>
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<style lang="less">
.custom-btn-login {
  .el-icon {
    font-size: 24px;
  }
}
.el-popover.el-popper{
  border-radius: 10px!important;
  margin-top: 10px;
  padding:   20px!important;
  padding-right: 30px !important;
}
.custom-dropdown {
  &.el-dropdown__popper {
    border-radius: 10px;

    .el-scrollbar {
      .el-dropdown__list {
        width: 415px;
        padding: 30px !important;
      }
      .el-dropdown-menu {
        .el-dropdown-menu__item {
          padding-bottom: 20px;
          padding-left: 0 !important;
          padding-right: 0 !important;
          padding-top: 0 !important;
          &:last-child {
            padding-bottom: 0;
          }
        }
      }
    }
  }
}
</style>