front-pc/pages/home/components/LoginForm.vue

<template>
  <div class="login-container flex flex-col justify-between">
    <div class="ma-auto mt-[25px] w-[100%] flex flex-col items-center">
      <el-image
        :src="userStore.userInfoRes.avatar || 'https://tuxixi.oss-cn-chengdu.aliyuncs.com/avater.png'"
        alt=""
        srcset=""
        class="h-[69px] w-[69px] rd-[50%]"
        :class="{ 'cursor-pointer': isLogin }"
        fit="cover"
        @click="handleUserInfo"
      />
      <div class="mt-[10px] text-[16px] text-[#333333] font-normal">
        <img v-if="userStore.userInfoRes.vipLevel === 1" src="~/assets/svg/vip.svg" alt="" class="relative top-[12px]" />
        <img v-if="userStore.userInfoRes.vipLevel === 2" src="~/assets/svg/svip.svg" alt="" class="relative top-[12px]" />
        Hi，{{ userStore.userInfoRes.nickname || '欢迎访问~' }}
      </div>
    </div>
    <div v-if="isLogin" class="mt-[20px] flex flex-col gap-[20px] px-[20px] text-[14px] text-[#333333] font-normal">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <img src="~/assets/images/cad_0 (1).png" alt="" srcset="" />
          <span class="title ml-[4px]" :title="`${userStaticInfo?.pointCount}`">我的积分: {{ userStaticInfo?.pointCount || 0 }}</span>
        </div>
        <div class="flex items-center">
          <img src="~/assets/images/cad_0 (2).png" alt="" srcset="" />
          <span class="title ml-[4px]" :title="`${userStaticInfo?.followCount}`">我的收藏: {{ userStaticInfo?.followCount || 0 }}</span>
        </div>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <img src="~/assets/images/cad_0 (3).png" alt="" srcset="" />
          <span class="title ml-[4px]" :title="`${userStaticInfo?.projectCount}`">我的发布: {{ userStaticInfo?.projectCount || 0 }}</span>
        </div>
        <div class="flex items-center">
          <img src="~/assets/images/cad_0 (4).png" alt="" srcset="" />
          <span class="title ml-[4px]" :title="`${userStaticInfo?.downloadCount}`">我的下载: {{ userStaticInfo?.downloadCount || 0 }}</span>
        </div>
      </div>
    </div>
    <div v-if="!isLogin" class="mt-[48px] box-border flex justify-between px-[18px]">
      <div
        class="h-[37px] w-[101px] cursor-pointer border border-[#1A65FF] rounded-[2px] border-solid bg-[#1A65FF] text-center text-[14px] text-[#FFFFFF] font-normal line-height-[37px]"
        @click="handleLogin"
        >立即登录</div
      >
      <div
        class="h-[37px] w-[101px] cursor-pointer border border-[#DDDDDD] rounded-[2px] border-solid text-center text-[14px] text-[#333333] font-normal line-height-[37px]"
        @click="handleRegister"
        >免费注册</div
      >
    </div>
    <div v-else class="mt-[30px] box-border flex justify-between px-[18px]">
      <div
        class="h-[37px] w-[101px] cursor-pointer border border-[#1A65FF] rounded-[2px] border-solid bg-[#1A65FF] text-center text-[14px] text-[#FFFFFF] font-normal line-height-[37px]"
        @click="handleDrawe"
        >发布图纸</div
      >
      <div
        class="h-[37px] w-[101px] cursor-pointer border border-[#DDDDDD] rounded-[2px] border-solid text-center text-[14px] text-[#333333] font-normal line-height-[37px]"
        @click="handleLoginOut"
        >退出登录</div
      >
    </div>
    <div v-if="!isLogin" class="mt-[30px] flex justify-between px-[20px]">
      <img src="~/assets/images/qq-v2.png" alt="QQ登录" class="social-icon" @click="handleLoginQQ" />
      <img src="~/assets/images/weixin-v2.png" alt="微信登录" class="social-icon" @click="handleLoginWechat" />
      <img src="~/assets/images/email-v2.png" alt="邮箱登录" class="social-icon" @click="handleLoginEmail" />
      <img src="~/assets/images/phone-v2.png" alt="手机登录" class="social-icon" @click="handleLoginPhone" />
    </div>

    <div class="sign-bonus mt-[18px]" @click="handleSign">
      <img src="~/assets/images/sign.png" alt="签到奖励" class="bonus-image" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import REFRESHTOKEN from '~/utils/RefreshToken'
  import { getCurrentInstance, computed, watchEffect, ref } from 'vue'
  import { handleLoginQQ, handleLoginWechat } from '~/utils/login'
  import type { UserStatisticsCountRespVO } from '~/api/personal-center/types'
  import { getUserStatistics } from '~/api/personal-center/index'
  import useUserStore from '~/stores/user'
  const userStore = useUserStore()
  const app = useNuxtApp()

  // 是否登录
  const isLogin = computed(() => {
    return !!userStore.token
  })

  // 获取用户统计信息
  const userStaticInfo = ref<UserStatisticsCountRespVO>()
  const fetchUserStatistics = async () => {
    try {
      const res = await getUserStatistics()
      userStaticInfo.value = res.data
    } catch (error) {
      console.log(error)
    }
  }

  const handleLogin = () => {
      app.$openLogin()
  }

  const handleRegister = () => {
      app.$openRegister()
  }

  const handleLoginPhone = () => {
      app.$openLogin('verify')
  }

  const handleLoginEmail = () => {
      app.$openLoginEmail()
  }

  const handleUserInfo = () => {
    if (!isLogin.value) return
    navigateTo('/personal-detail') // 修改为在新窗口打开
  }

  // 发布图纸
  const handleDrawe = () => {
    navigateTo('/upnew/drawe') // 修改为在新窗口打开
  }

  // 推出登录
  const handleLoginOut = () => {
    REFRESHTOKEN.removeToken()
    userStore.setToken('')
    userStore.setUserId('')
    userStore.setRefreshToken('')
    window.location.reload()
  }

  const handleSign = () => {
    navigateTo('/sign-page') // 修改为在新窗口打开
  }

  watchEffect(() => {
    if (isLogin.value) {
      fetchUserStatistics()
    }
  })
</script>

<style scoped lang="scss">
  .login-container {
    width: 260px;
    background: white;
    /* border-radius: 8px; */
    box-sizing: border-box;
  }

  .login-button:hover {
    background-color: #40a9ff;
    cursor: pointer;
  }

  .social-login {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
  }

  .social-icon {
    width: 35px;
    height: 36px;
    cursor: pointer;
  }

  .sign-bonus {
    background: #f5f5f5;
    width: 100%;
    height: 120px;
    overflow: hidden;
  }

  .bonus-image {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .title {
    @include ellipsis(1);
  }
</style>