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 as REFRESHTOKEN } from '@/utils/axios'
  import { getCurrentInstance, computed, watchEffect, ref } from 'vue'
  import { handleLoginQQ, handleLoginWechat } from '@/utils/login'
  import { UserStatisticsCountRespVO } from '@/api/personal-center/types'
  import { getUserStatistics } from '@/api/personal-center/index'
  import useUserStore from '@/store/user'
  const userStore = useUserStore()
  const instance = getCurrentInstance()

  // 是否登录
  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 = () => {
    if (instance) {
      instance.appContext.config.globalProperties.$openLogin()
    }
  }

  const handleRegister = () => {
    if (instance) {
      instance.appContext.config.globalProperties.$openRegister()
    }
  }

  const handleLoginPhone = () => {
    if (instance) {
      instance.appContext.config.globalProperties.$openLogin('verify')
    }
  }

  const handleLoginEmail = () => {
    if (instance) {
      instance.appContext.config.globalProperties.$openLoginEmail()
    }
  }

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

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

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

  const handleSign = () => {
    window.open('/sign-page', '_blank') // 修改为在新窗口打开
  }

  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>