wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code structure and remove redundant changes

Browse Source
This commit is contained in:
wangqiao
2025-08-15 16:45:15 +08:00
commit 99df1d1f81
220 changed files with 33086 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
pages/home/components/LoginForm.vue Normal file
View File

@ -0,0 +1,200 @@
<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>