fashion-ssr-vue3/components/common/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 { openLoginModal } = useLoginModal()

async function clickLogin() {
  try {
    const { status } = await openLoginModal()
    console.log('Login status:', status)
    // 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-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>
</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>