planet
shenhan000 2025-04-26 13:16:55 +08:00
parent 5fb4a9df0c
commit 4ae33d30bf
3 changed files with 76 additions and 26 deletions

View File

@ -32,17 +32,7 @@ async function getCommunityDetail() {
try {
const res = await request.get(`/community/detail?communityId=${props.communityId}&tenantId=${props.tenantId}`)
if (res.code === 200) {
const { imageUrl, communityName, communityTag, type, price, validityDay, description, id } = res.data
planetInfo.value = {
imageUrl,
communityName,
communityTag: communityTag.toString(),
type: type.toString(),
price,
id,
validityDay,
description,
}
planetInfo.value = res.data
}
}
catch (error) {

View File

@ -109,8 +109,14 @@ function handleSuccess() {
}
function goDetail(item: any) {
if (item.isJoin === 1) {
router.push(`/public-planet-detail?communityId=${item.id}&tenantId=${item.tenantId}`)
if (item.isJoin === 0) {
router.push({
path: '/public-planet-detail',
state: {
communityId: item.id,
tenantId: item.tenantId,
},
})
}
else {
router.push(`/planet-detail?communityId=${item.id}&tenantId=${item.tenantId}`)

View File

@ -1,10 +1,36 @@
<script setup lang="ts">
import planetBg from '@/assets/img/planetBg.png'
import { NConfigProvider, NImage, NMessageProvider } from 'naive-ui'
import { ref, watch } from 'vue'
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const { communityId, tenantId } = route.query
const router = useRouter()
// history state
const params = ref({
communityId: '',
tenantId: '',
})
onMounted(() => {
const state = history.state
if (state && state.communityId && state.tenantId) {
params.value = {
communityId: state.communityId,
tenantId: state.tenantId,
}
}
else {
// state退 URL
params.value = {
communityId: route.query.communityId as string,
tenantId: route.query.tenantId as string,
}
}
getCommunityDetail()
})
const userStore = useUserStore()
definePageMeta({
layout: 'planet',
@ -27,7 +53,7 @@ const selectUserInfo = ref<SelectUserInfo>({
const communityDetail = ref({})
async function getCommunityDetail() {
try {
const res = await request.get(`/community/detail?communityId=${communityId}&tenantId=${tenantId}`)
const res = await request.get(`/community/detail?communityId=${params.value.communityId}&tenantId=${params.value.tenantId}`)
if (res.code === 200) {
communityDetail.value = res.data
}
@ -36,7 +62,6 @@ async function getCommunityDetail() {
console.error(error)
}
}
getCommunityDetail()
//
async function getAttention() {
@ -47,7 +72,7 @@ async function getAttention() {
}
}
catch (err) {
console.log(err)
console.error(err)
}
}
getAttention()
@ -67,36 +92,38 @@ getAttention()
<!-- 用户基本信息 -->
<client-only>
<div class="flex items-center gap-4 mb-6">
<img :src="userStore.userInfo?.avatar" class="w-[224px] h-[224px] rounded" alt="头像">
<img :src="communityDetail.imageUrl" 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 }}
{{ communityDetail.communityName }}
</div>
<div class="text-[14px] text-[#878d95]">
最新更新时间: 3234-32432-32
最新更新时间: {{ communityDetail.lastUpdateTime }}
</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
成员数量: {{ communityDetail.userNum }}
</div>
</div>
<div>
累计更新内容: 1234
累计更新内容: {{ communityDetail.updateNum }}
</div>
<div>
星球创建天数: 1234
星球创建天数: {{ communityDetail.createDay }}
</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>
<span class="font-bold text-[28px]">{{ communityDetail.price ? communityDetail.price : '免费' }}</span> <span v-if="communityDetail.price" class="text-[16px]"></span>
</div>
<div class="text-[14px]">
<div
class="text-white text-[14px] flex items-center justify-center cursor-pointer w-[128px] h-[40px] bg-[linear-gradient(207deg,#3BEDFF_0%,#328AFE_100%)] rounded-lg"
>
立即加入
</div>
</div>
@ -105,6 +132,33 @@ getAttention()
</client-only>
</div>
</div>
<div class="max-w-[1140px] mx-auto">
<div class="text-[20px] py-4">
星球概况
</div>
<div class="flex gap-4">
<div class="w-[100px] h-[100px] rounded">
<!-- <img src="@/assets/img/planet-overview.png" alt="星球概况"> -->
</div>
<div class="flex flex-col justify-between">
<div class="flex gap-4">
<div>
name
</div>
<div>
关注
</div>
</div>
<div class="flex gap-4">
<div>1123粉丝</div>
<div>1123关注</div>
<div>1123获赞</div>
</div>
</div>
</div>
<div />
</div>
</div>
</div>
</template>