111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import planetBg from '@/assets/img/planetBg.png'
|
|
import { NConfigProvider, NImage, NMessageProvider } from 'naive-ui'
|
|
import { ref, watch } from 'vue'
|
|
|
|
const route = useRoute()
|
|
const { communityId, tenantId } = route.query
|
|
const userStore = useUserStore()
|
|
definePageMeta({
|
|
layout: 'planet',
|
|
})
|
|
|
|
// 获取用户点赞/粉丝/关注数量
|
|
interface SelectUserInfo {
|
|
likeCount: number
|
|
bean: number
|
|
download: number
|
|
attention: number
|
|
}
|
|
const selectUserInfo = ref<SelectUserInfo>({
|
|
likeCount: 0,
|
|
bean: 0,
|
|
download: 0,
|
|
attention: 0,
|
|
})
|
|
|
|
const communityDetail = ref({})
|
|
async function getCommunityDetail() {
|
|
try {
|
|
const res = await request.get(`/community/detail?communityId=${communityId}&tenantId=${tenantId}`)
|
|
if (res.code === 200) {
|
|
communityDetail.value = res.data
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
getCommunityDetail()
|
|
|
|
// 获取关注
|
|
async function getAttention() {
|
|
try {
|
|
const res = await request.get('/attention/selectUserInfo')
|
|
if (res.code === 200) {
|
|
selectUserInfo.value = res.data
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
getAttention()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-[#F7F8FA]">
|
|
<div class="relative">
|
|
<!-- 背景图片区域 -->
|
|
<div class="h-[300px] w-full bg-[#E8F3FF]">
|
|
<img :src="planetBg" alt="背景图片" class="w-full h-full object-cover">
|
|
</div>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<div class="absolute inset-x-0 top-[80px]">
|
|
<div class="max-w-[1140px] mx-auto">
|
|
<!-- 用户基本信息 -->
|
|
<client-only>
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<img :src="userStore.userInfo?.avatar" class="w-[224px] h-[224px] rounded" alt="头像">
|
|
<div class="flex flex-col justify-between h-[224px] w-full">
|
|
<div class="flex flex-col gap-3">
|
|
<div class="text-[20px] font-medium text-[#192029]">
|
|
{{ userStore.userInfo?.nickName }}
|
|
</div>
|
|
<div class="text-[14px] text-[#878d95]">
|
|
最新更新时间: 3234-32432-32
|
|
</div>
|
|
<div class="text-[14px] flex gap-8">
|
|
<div class="flex items-center gap-3">
|
|
<img :src="userStore.userInfo?.avatar" class="w-[20px] h-[20px] rounded-full" alt="头像">
|
|
<div>
|
|
成员数量: 1234
|
|
</div>
|
|
</div>
|
|
<div>
|
|
累计更新内容: 1234
|
|
</div>
|
|
<div>
|
|
星球创建天数: 1234
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between p-2 rounded bg-white items-center">
|
|
<div class="flex items-center gap-2 text-[#fc4141]">
|
|
<span class="font-bold text-[28px]">228</span> <span class="text-[16px]">积分</span>
|
|
</div>
|
|
<div class="text-[14px]">
|
|
立即加入
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</client-only>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|