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

<!-- @format -->

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

const commonStore = useCommonStore()
const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
const { noticeRemind } = storeToRefs(commonStore)
const hoverStatus = ref<any>()

const { openLoginModal } = useLoginModal()
commonStore.getNoticeRemind()

// const { locale, setLocale } = useI18nLocale()
// function handleClick({ key }: any) {
//   setLocale(key)
// }

async function clickLogin() {
  try {
    const { status } = await openLoginModal()
    if (status)
      location.reload()
  }
  catch (error) {
    console.log(error)
  }
}

async function onSelected(command: string | number | object) {
  if (command === 'signOut') {
    // 退出登录
    try {
      userStore.logout()
    }
    catch (error) {
      console.log(error, 'error')
    }
  }
}
</script>

<template>
  <div>
    <div v-if="!isLogin">
      <el-button
        class="b-solid b-1px b-#AB7045 custom-btn-login !text-#AB7045 !w-100px !h-34px !text-16px !b-rd-150px"
        @mouseover="hoverStatus = '!fill-#fff'" @mouseleave="hoverStatus = '!fill-#CC9879'" @click="clickLogin"
      >
        <template #icon>
          <svgo-user :class="hoverStatus" class="w-24px h-24px" :filled="true" />
        </template> Log In
      </el-button>
    </div>
    <div v-else>
      <el-dropdown :hide-on-click="false" placement="bottom-end" popper-class="custom-dropdown" @command="onSelected">
        <template #default>
          <svgo-user class="!w-30px !h-30px !fill-#5B463E" :filled="true" />
        </template>
        <template #dropdown>
          <div class="flex items-center ">
            <svgo-user-avatar class="!w-20px !h-20px" />
            <span class="text-20px fw-500 text-#333 ml-20px">
              {{ userStore.userInfo.firstName }}
              {{ userStore.userInfo.lastName }}
            </span>
          </div>
          <div class="text-16px text-#999 mt-10px">
            {{ userStore.userInfo.email }}
          </div>
          <!-- <div class="w-full bg-#D8D8D8 h-1px my-20px" />
          <div class="text-16px text-#333">
            Unlock <span class="text-#AB7045">$ 8000</span> Buy Now Pay Later Limit （60 day terms）
          </div> -->
          <div class="w-full bg-#D8D8D8 h-1px my-20px" />
          <el-dropdown-menu>
            <el-dropdown-item command="dashboard">
              <NuxtLink to="/account/panel" class="flex items-center text-16px">
                <svgo-dashboard class="!w-22px !h-22px mr-16px" /> Dashboard
              </NuxtLink>
            </el-dropdown-item>
            <el-dropdown-item command="message">
              <NuxtLink to="/account/rfqs" class="flex items-center text-16px">
                <svgo-rfqs class="!w-20px !h-20px  mr-18px" />
                RFQS
              </NuxtLink>
            </el-dropdown-item>
            <el-dropdown-item command="favorites">
              <NuxtLink to="/account/favourites?tab=products" class="flex items-center text-16px">
                <svgo-favorite class="!w-22px !h-22px  mr-16px" />
                Favourites
              </NuxtLink>
            </el-dropdown-item>
            <el-dropdown-item command="orders">
              <NuxtLink to="/account/orders?tab=submitted" class="flex items-center text-16px">
                <svgo-order class="!w-22px !h-22px  mr-16px" />
                Orders
              </NuxtLink>
            </el-dropdown-item>
            <!-- <el-dropdown-item command="message">
              <NuxtLink to="/account/messages" class="flex items-center text-16px">
                <svgo-message class="!w-22px !h-22px  mr-16px" />
                Messages
              </NuxtLink>
            </el-dropdown-item> -->
            <el-dropdown-item command="message">
              <NuxtLink to="/account/notice" class="flex items-center text-16px pos-relative">
                <svgo-notice class="!w-22px !h-22px  mr-16px" />
                <div v-if="noticeRemind" class="pos-absolute top-0 left-20px bg-primary w-5px h-5px b-rd-50%" />
                Notice
              </NuxtLink>
            </el-dropdown-item>
            <el-dropdown-item command="setting">
              <NuxtLink to="/account/settings?tab=profile" class="flex items-center text-16px">
                <svgo-setting class="!w-22px !h-22px  mr-16px" />
                Settings
              </NuxtLink>
            </el-dropdown-item>
            <div class="w-full bg-#D8D8D8 h-1px mb-20px" />
            <el-dropdown-item command="signOut">
              <div class=" flex items-center text-16px">
                <svgo-logout class="!w-22px !h-22px mr-16px" />
                Sign out
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style lang="less">
 .custom-btn-login {
  .el-icon{
    font-size: 24px;
  }
}
.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>