mcwl-pc/app/components/PlanetBaseInfo.vue

<script setup lang="ts">
import {
  FileChartColumnIncreasing,
} from 'lucide-vue-next'
import { ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import DownPlanetFile from './DownPlanetFile.vue'
import QuestionPublish from './QuestionPublish.vue'

const props = defineProps<Props>()
const router = useRouter()
const message = useMessage()

const userStore = useUserStore()

interface Props {
  communityId: string | number
  tenantId: string | number
}
const planetInfo = ref({
  imageUrl: '',
  communityName: '',
  description: '',
  createDay: 0,
  publishNum: 0,
})

const defaultCover = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU4IiBoZWlnaHQ9IjI1OCIgdmlld0JveD0iMCAwIDI1OCAyNTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI1OCIgaGVpZ2h0PSIyNTgiIGZpbGw9IiNmMmYzZjUiLz48cGF0aCBkPSJNMTI5IDg2QzExMC43NzQgODYgOTYgMTAwLjc3NCA5NiAxMTlDOTYgMTM3LjIyNiAxMTAuNzc0IDE1MiAxMjkgMTUyQzE0Ny4yMjYgMTUyIDE2MiAxMzcuMjI2IDE2MiAxMTlDMTYyIDEwMC43NzQgMTQ3LjIyNiA4NiAxMjkgODZaTTg0LjU3MTQgMTUyQzc1LjE0MjkgMTUyIDY3LjQyODYgMTU5LjcxNCA2Ny40Mjg2IDE2OVYxNzQuNzE0QzY3LjQyODYgMTc0LjcxNCA4NC41NzE0IDE5MiAxMjkgMTkyQzE3My40MjkgMTkyIDE5MC41NzEgMTc0LjcxNCAxOTAuNTcxIDE3NC43MTRWMTY5QzE5MC41NzEgMTU5LjcxNCAxODIuODU3IDE1MiAxNzMuNDI5IDE1MkMxNjQuNTcxIDE1MiAxMjkgMTUyIDg0LjU3MTQgMTUyWiIgZmlsbD0iI2U1ZTZlYiIvPjwvc3ZnPg=='

// 获取星球详情
async function getCommunityDetail() {
  try {
    const res = await request.get(`/community/detail?communityId=${props.communityId}&tenantId=${props.tenantId}`)
    if (res.code === 200) {
      planetInfo.value = res.data
    }
  }
  catch (error) {
    console.error(error)
  }
}
// 获取用户信息
const currentUserInfo = ref({})
async function getUserInfo() {
  try {
    const res = await request.get(
      `/system/user/selectUserById?id=${props.tenantId}`,
    )
    if (res.code === 200) {
      currentUserInfo.value = res.data
    }
  }
  catch (error) {
    console.log(error)
  }
}
getUserInfo()

// 获取是否关注
const isSelectAttention = ref(null)
async function getSelectAttention() {
  try {
    const res = await request.get(
      `/attention/selectAttention?userId=${props.tenantId}`,
    )
    if (res.code === 200) {
      isSelectAttention.value = res.data
    }
  }
  catch (error) {
    console.log(error)
  }
}
getSelectAttention()

// 关注/取消关注
async function onAddAttention() {
  try {
    const res = await request.get(
      `/attention/addAttention?userId=${props.tenantId}`,
    )
    if (res.code === 200) {
      isSelectAttention.value = res.data
      if (res.data) {
        message.success('关注成功')
      }
      else {
        message.success('取消关注成功')
      }
    }
  }
  catch (error) {
    console.log(error)
  }
}

// 添加控制弹窗显示的变量
const showQuestionModal = ref(false)

// 处理显示提问弹窗
function handleShowQuestion() {
  showQuestionModal.value = true
}

const showFileModal = ref(false)

function toFileList() {
  router.push({
    path: '/planetAllFile',
    query: {
      communityId: props.communityId,
      tenantId: props.tenantId,
    },
  })
}
// 监听 id 变化，获取详情
watchEffect(() => {
  if (props.communityId && props.tenantId)
    getCommunityDetail()
})
</script>

<template>
  <div class="bg-white rounded-lg w-[290px] p-4 h-fit">
    <div class="flex flex-col gap-4">
      <!-- 左侧图片 -->
      <div class="w-[258px] h-[258px] rounded-lg relative bg-[#f2f3f5] overflow-hidden">
        <img
          :src="planetInfo.imageUrl || defaultCover"
          class="w-full h-full object-cover flex-shrink-0 rounded-lg"
          :alt="planetInfo.communityName"
          @error="$event.target.src = defaultCover"
        >
        <div class="flex justify-between text-xs items-center absolute left-0 bottom-0 w-full p-2">
          <div class="flex items-center">
            <div class="w-6 h-6 rounded-full bg-[#f2f3f5] overflow-hidden mr-2 flex-shrink-0">
              <img
                :src="currentUserInfo.avatar"
                :alt="currentUserInfo.nickName"
                class="w-full h-full object-cover"
                @error="$event.target.src = defaultAvatar"
              >
            </div>
            <div class="text-white">
              {{ currentUserInfo.nickName }}
            </div>
          </div>
          <div v-if="Number(userStore.userInfo.userId) !== Number(tenantId)" class="bg-[#1e80ff] text-white py-1 px-2 rounded-lg cursor-pointer" @click="onAddAttention">
            {{ isSelectAttention ? '已关注' : '关注' }}
          </div>
        </div>
      </div>

      <!-- 右侧信息 -->
      <div class="flex flex-col justify-between flex-1">
        <div class="space-y-2">
          <h1 class="text-xl font-bold">
            {{ planetInfo.communityName }}
          </h1>
        </div>
        <div class="flex items-center gap-8 text-xs text-[#878d95] mt-1 mb-4">
          <div>创建{{ planetInfo.validityDay }}天</div>
        </div>
        <div class="text-sm text-[#4a5563] line-clamp-3">
          {{ planetInfo.description }}
        </div>
      </div>
    </div>
    <div
      class="flex items-center bg-[#F4F9FF] px-2 py-3 rounded-lg mt-4 text-sm text-gray-800 cursor-pointer"
      @click="toFileList"
    >
      <FileChartColumnIncreasing class="w-4 h-4 mr-2" />
      全部文件
    </div>
    <!-- 在线咨询 -->
    <div class="mt-6">
      <button
        class="w-full bg-[#1e80ff] hover:bg-[#3b8fff] text-white rounded-lg py-3 mt-4"
        @click="handleShowQuestion"
      >
        我要提问
      </button>

      <n-modal
        v-model:show="showQuestionModal"
        :style="{ width: '640px' }"
        preset="card"
        :mask-closable="false"
        class="rounded-lg"
      >
        <QuestionPublish
          :community-id="communityId"
          :tenant-id="tenantId"
          @success="showQuestionModal = false"
        />
      </n-modal>
    </div>

    <DownPlanetFile
      v-model:show="showFileModal"
      :community-id="props.communityId"
      :tenant-id="props.tenantId"
    />
  </div>
</template>

<style scoped>
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>