From 1bd35dc13b68c588b3c9b8b2200461567a24c510 Mon Sep 17 00:00:00 2001
From: shenhan000 <shenhanfly@163.com>
Date: Sat, 26 Apr 2025 15:45:01 +0800
Subject: [PATCH] update

---
 app/components.d.ts                      |   2 -
 app/components/GoldPayment.vue           |   8 +-
 app/components/IntPayment.vue            |   6 +-
 app/components/planet-item.vue           |   1 +
 app/pages/public-planet-detail/index.vue | 133 ++++++++++++++++-------
 5 files changed, 100 insertions(+), 50 deletions(-)

diff --git a/app/components.d.ts b/app/components.d.ts
index 0c20810..5e686aa 100644
--- a/app/components.d.ts
+++ b/app/components.d.ts
@@ -22,12 +22,10 @@ declare module 'vue' {
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
-    NImageGroup: typeof import('naive-ui')['NImageGroup']
     NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
     NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NPagination: typeof import('naive-ui')['NPagination']
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
diff --git a/app/components/GoldPayment.vue b/app/components/GoldPayment.vue
index 424f3a6..9a02477 100644
--- a/app/components/GoldPayment.vue
+++ b/app/components/GoldPayment.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { RotateCcw, X } from 'lucide-vue-next';
-import type { FormInst } from 'naive-ui';
-import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue';
+import type { FormInst } from 'naive-ui'
+import { RotateCcw, X } from 'lucide-vue-next'
+import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue'
 
 const props = defineProps({
   isMember: {
@@ -167,7 +167,7 @@ onBeforeUnmount(() => {
           label-placement="left"
           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-form-item>
         </n-form>
diff --git a/app/components/IntPayment.vue b/app/components/IntPayment.vue
index bee0293..0df5837 100644
--- a/app/components/IntPayment.vue
+++ b/app/components/IntPayment.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { RotateCcw, X } from 'lucide-vue-next';
-import type { FormInst } from 'naive-ui';
-import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue';
+import type { FormInst } from 'naive-ui'
+import { RotateCcw, X } from 'lucide-vue-next'
+import { defineProps, onBeforeMount, onBeforeUnmount, ref } from 'vue'
 
 const props = defineProps({
   isMember: {
diff --git a/app/components/planet-item.vue b/app/components/planet-item.vue
index 94a6256..a322058 100644
--- a/app/components/planet-item.vue
+++ b/app/components/planet-item.vue
@@ -115,6 +115,7 @@ function goDetail(item: any) {
       state: {
         communityId: item.id,
         tenantId: item.tenantId,
+        userId: item.userId,
       },
     })
   }
diff --git a/app/pages/public-planet-detail/index.vue b/app/pages/public-planet-detail/index.vue
index b319c01..93ee11a 100644
--- a/app/pages/public-planet-detail/index.vue
+++ b/app/pages/public-planet-detail/index.vue
@@ -4,6 +4,7 @@ import { NConfigProvider, NImage, NMessageProvider } from 'naive-ui'
 import { onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+const message = useMessage()
 const route = useRoute()
 const router = useRouter()
 
@@ -11,6 +12,7 @@ const router = useRouter()
 const params = ref({
   communityId: '',
   tenantId: '',
+  userId: '',
 })
 
 onMounted(() => {
@@ -19,6 +21,7 @@ onMounted(() => {
     params.value = {
       communityId: state.communityId,
       tenantId: state.tenantId,
+      userId: state.userId,
     }
   }
   else {
@@ -26,9 +29,12 @@ onMounted(() => {
     params.value = {
       communityId: route.query.communityId as string,
       tenantId: route.query.tenantId as string,
+      userId: route.query.userId as string,
     }
   }
   getCommunityDetail()
+  getUserInfo()
+  getAttention()
 })
 
 const userStore = useUserStore()
@@ -36,20 +42,6 @@ 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 {
@@ -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() {
   try {
-    const res = await request.get('/attention/selectUserInfo')
+    const res = await request.get(`/attention/selectUserInfo?userId=${params.value.userId}`)
     if (res.code === 200) {
       selectUserInfo.value = res.data
     }
   }
   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>
 
 <template>
@@ -87,7 +127,7 @@ getAttention()
       </div>
 
       <!-- 主要内容区域 -->
-      <div class="absolute inset-x-0 top-[80px]">
+      <div class="absolute inset-x-0 top-[30px]">
         <div class="max-w-[1140px] mx-auto">
           <!-- 用户基本信息 -->
           <client-only>
@@ -103,7 +143,7 @@ getAttention()
                   </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="头像">
+                      <img v-for="(item, index) in communityDetail.avatarList" :key="index" :src="item" class="w-[20px] h-[20px] rounded-full" alt="头像">
                       <div>
                         成员数量: {{ communityDetail.userNum }}
                       </div>
@@ -123,6 +163,7 @@ getAttention()
                   </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"
+                    @click="handleJoin"
                   >
                     立即加入
                   </div>
@@ -130,34 +171,44 @@ getAttention()
               </div>
             </div>
           </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 class="max-w-[1140px] mx-auto bg-white rounded-lg p-4">
+            <div class="text-[20px] pb-4">
+              星球概况
+            </div>
+            <div class="flex gap-4 bg-[#F9FBFF] rounded-lg p-2">
+              <div class="w-[80px] h-[80px] rounded">
+                <img class="rounded-full" :src="userInfo.avatar" alt="星球概况">
               </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 class="flex gap-4">
-              <div>1123粉丝</div>
-              <div>1123关注</div>
-              <div>1123获赞</div>
+            <div class="text-[16px] text-[#4a5563] my-5">
+              {{ communityDetail.description }}
+            </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>