planet
shenhan000 2025-04-26 15:45:01 +08:00
parent 4ae33d30bf
commit 1bd35dc13b
5 changed files with 100 additions and 50 deletions

2
app/components.d.ts vendored
View File

@ -22,12 +22,10 @@ declare module 'vue' {
NForm: typeof import('naive-ui')['NForm'] NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem'] NFormItem: typeof import('naive-ui')['NFormItem']
NIcon: typeof import('naive-ui')['NIcon'] NIcon: typeof import('naive-ui')['NIcon']
NImageGroup: typeof import('naive-ui')['NImageGroup']
NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll'] NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
NInput: typeof import('naive-ui')['NInput'] NInput: typeof import('naive-ui')['NInput']
NInputGroup: typeof import('naive-ui')['NInputGroup'] NInputGroup: typeof import('naive-ui')['NInputGroup']
NInputNumber: typeof import('naive-ui')['NInputNumber'] NInputNumber: typeof import('naive-ui')['NInputNumber']
NMessageProvider: typeof import('naive-ui')['NMessageProvider']
NModal: typeof import('naive-ui')['NModal'] NModal: typeof import('naive-ui')['NModal']
NPagination: typeof import('naive-ui')['NPagination'] NPagination: typeof import('naive-ui')['NPagination']
NPopconfirm: typeof import('naive-ui')['NPopconfirm'] NPopconfirm: typeof import('naive-ui')['NPopconfirm']

View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { RotateCcw, X } from 'lucide-vue-next'; import type { FormInst } from 'naive-ui'
import type { FormInst } from 'naive-ui'; import { RotateCcw, X } from 'lucide-vue-next'
import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue'; import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue'
const props = defineProps({ const props = defineProps({
isMember: { isMember: {
@ -167,7 +167,7 @@ onBeforeUnmount(() => {
label-placement="left" label-placement="left"
style="width: 240px" style="width: 240px"
> >
<n-form-item label="输入积分" path="modelProduct.modelName"> <n-form-item label="输入金币" path="modelProduct.modelName">
<n-input v-model:value="amount" type="number" placeholder="输入积分" /> <n-input v-model:value="amount" type="number" placeholder="输入积分" />
</n-form-item> </n-form-item>
</n-form> </n-form>

View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { RotateCcw, X } from 'lucide-vue-next'; import type { FormInst } from 'naive-ui'
import type { FormInst } from 'naive-ui'; import { RotateCcw, X } from 'lucide-vue-next'
import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue'; import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue'
const props = defineProps({ const props = defineProps({
isMember: { isMember: {

View File

@ -115,6 +115,7 @@ function goDetail(item: any) {
state: { state: {
communityId: item.id, communityId: item.id,
tenantId: item.tenantId, tenantId: item.tenantId,
userId: item.userId,
}, },
}) })
} }

View File

@ -4,6 +4,7 @@ import { NConfigProvider, NImage, NMessageProvider } from 'naive-ui'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
const message = useMessage()
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
@ -11,6 +12,7 @@ const router = useRouter()
const params = ref({ const params = ref({
communityId: '', communityId: '',
tenantId: '', tenantId: '',
userId: '',
}) })
onMounted(() => { onMounted(() => {
@ -19,6 +21,7 @@ onMounted(() => {
params.value = { params.value = {
communityId: state.communityId, communityId: state.communityId,
tenantId: state.tenantId, tenantId: state.tenantId,
userId: state.userId,
} }
} }
else { else {
@ -26,9 +29,12 @@ onMounted(() => {
params.value = { params.value = {
communityId: route.query.communityId as string, communityId: route.query.communityId as string,
tenantId: route.query.tenantId as string, tenantId: route.query.tenantId as string,
userId: route.query.userId as string,
} }
} }
getCommunityDetail() getCommunityDetail()
getUserInfo()
getAttention()
}) })
const userStore = useUserStore() const userStore = useUserStore()
@ -36,20 +42,6 @@ definePageMeta({
layout: 'planet', 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({}) const communityDetail = ref({})
async function getCommunityDetail() { async function getCommunityDetail() {
try { try {
@ -63,19 +55,67 @@ async function getCommunityDetail() {
} }
} }
// //
const userInfo = ref({})
async function getUserInfo() {
try {
const res = await request.get(
`/system/user/selectUserById?id=${params.value.userId}`,
)
if (res.code === 200) {
userInfo.value = res.data
}
}
catch (error) {
console.log(error)
}
}
//
const selectUserInfo = ref({})
async function getAttention() { async function getAttention() {
try { try {
const res = await request.get('/attention/selectUserInfo') const res = await request.get(`/attention/selectUserInfo?userId=${params.value.userId}`)
if (res.code === 200) { if (res.code === 200) {
selectUserInfo.value = res.data selectUserInfo.value = res.data
} }
} }
catch (err) { catch (err) {
console.error(err) console.log(err)
} }
} }
getAttention()
async function handleJoin() {
try {
const data = {
communityId: params.value.communityId,
tenantId: params.value.tenantId,
}
const res = await request.post(`/community/join`, data)
if (res.code === 200) {
message.success('加入成功')
setTimeout(() => {
router.push(`/planet-detail?communityId=${params.value.communityId}&tenantId=${params.value.tenantId}`)
}, 1000)
}
}
catch (err) {
console.log(err)
}
}
//
// async function getAttention() {
// try {
// const res = await request.get('/attention/selectUserInfo')
// if (res.code === 200) {
// selectUserInfo.value = res.data
// }
// }
// catch (err) {
// console.error(err)
// }
// }
// getAttention()
</script> </script>
<template> <template>
@ -87,7 +127,7 @@ getAttention()
</div> </div>
<!-- 主要内容区域 --> <!-- 主要内容区域 -->
<div class="absolute inset-x-0 top-[80px]"> <div class="absolute inset-x-0 top-[30px]">
<div class="max-w-[1140px] mx-auto"> <div class="max-w-[1140px] mx-auto">
<!-- 用户基本信息 --> <!-- 用户基本信息 -->
<client-only> <client-only>
@ -103,7 +143,7 @@ getAttention()
</div> </div>
<div class="text-[14px] flex gap-8"> <div class="text-[14px] flex gap-8">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img :src="userStore.userInfo?.avatar" class="w-[20px] h-[20px] rounded-full" alt="头像"> <img v-for="(item, index) in communityDetail.avatarList" :key="index" :src="item" class="w-[20px] h-[20px] rounded-full" alt="头像">
<div> <div>
成员数量: {{ communityDetail.userNum }} 成员数量: {{ communityDetail.userNum }}
</div> </div>
@ -123,6 +163,7 @@ getAttention()
</div> </div>
<div <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" 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"
@click="handleJoin"
> >
立即加入 立即加入
</div> </div>
@ -130,34 +171,44 @@ getAttention()
</div> </div>
</div> </div>
</client-only> </client-only>
</div> <div class="max-w-[1140px] mx-auto bg-white rounded-lg p-4">
</div> <div class="text-[20px] pb-4">
星球概况
<div class="max-w-[1140px] mx-auto"> </div>
<div class="text-[20px] py-4"> <div class="flex gap-4 bg-[#F9FBFF] rounded-lg p-2">
星球概况 <div class="w-[80px] h-[80px] rounded">
</div> <img class="rounded-full" :src="userInfo.avatar" alt="星球概况">
<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 class="flex flex-col justify-between py-2">
<div class="flex gap-4">
<div class="text-[20px] font-medium text-[#192029]">
{{ userInfo.nickName }}
</div>
<!-- <div>
关注 关注
</div> -->
</div>
<div class="flex gap-4">
<div>{{ selectUserInfo.bean }}粉丝</div>
<div>{{ selectUserInfo.attention }}关注</div>
<div>{{ Number(selectUserInfo.imageLikeNum) + Number(selectUserInfo.modelLikeNum) }}获赞</div>
</div>
</div> </div>
</div> </div>
<div class="flex gap-4"> <div class="text-[16px] text-[#4a5563] my-5">
<div>1123粉丝</div> {{ communityDetail.description }}
<div>1123关注</div> </div>
<div>1123获赞</div> <div>
<div class="font-bold text-[20px]">
付费通知
</div>
<div class="bg-[#F9FBFF] rounded-lg p-4 mt-2">
<div>1付费后你可以使用当前付款的帐号在有效期内查看参与内容互动向星主群成员提问 </div>
<div>2本星球由星主自行创建加入前请确认风险平台不提供相关保证若发现违反法律法规的星球请勿加入并投诉</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div />
</div> </div>
</div> </div>
</div> </div>