mcwl-pc/app/components/PersonalCenterPublishCard.vue

<script setup lang="ts">
import {
Download, Play
} from 'lucide-vue-next';
import { NConfigProvider, NMessageProvider } from "naive-ui";
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  currentType: {
    type: String,
    default: '',
  },
})

// 定义 emit
const emit = defineEmits(['topedRefresh'])

const router = useRouter()

// 跳转详情
function toDetails() {
  if (props.currentType === '0') {
    router.push(`/model-details/${props.item.id}`)
  }
  else if (props.currentType === '1') {
    // console.log('object', 111);
    router.push(`/workflow-details/${props.item.id}`)
  }else if(props.currentType === '2'){
    // onEditPicture()
  }
}

// 获取图片详情进行编辑
const publishPictureData = ref<any>({})
async function getPublishPicture() {
  try {
    const res = await request.get(`/image/detail?id=${props.item.id}`)
    if (res.code === 200) {
      publishPictureData.value = res.data
      publishPictureData.value.imagePaths = res.data.imagePaths.split(',')
      // publishPictureData.value.tags = res.data.tags.split(',')
    }
  }
  catch (e) {
    console.log(e)
  }
}

function getFirstImagePath(imagePaths: string): string {
  if (!imagePaths)
    return ''
  return imagePaths.split(',')[0] || ''
}
// 关闭图片
const isShowPublishPicture = ref<boolean>(false)
const PublishPictureRef = ref<Payment | null>(null)

function showPublishImg() {
  isShowPublishPicture.value = true
  if (PublishPictureRef.value) {
    PublishPictureRef.value.isVisible = true
  }
}

function closePublishImg() {
  isShowPublishPicture.value = false
  if (PublishPictureRef.value) {
    PublishPictureRef.value.isVisible = false
  }
}

</script>

<template>
  <div>
    <div>
      <div
        class="h-80 rounded-2xl overflow-hidden cursor-pointer relative"
        @click="toDetails"
      >
        <img v-if="currentType === '0'" class="rounded-2xl w-full h-full object-cover block border border-solid border-[#e5e7eb]" :src="item.surfaceUrl" alt="">
        <img v-if="currentType === '1'" class="rounded-2xl w-full h-full object-cover block border border-solid border-[#e5e7eb]" :src="item.coverPath" alt="">
        <img v-if="currentType === '2'" class="rounded-2xl w-full h-full object-cover block border border-solid border-[#e5e7eb]" :src="getFirstImagePath(item.imagePaths)" alt="">
        <div
          v-if="item.isTop === 1"
          class="text-[#58c08e] border-[#58c08e] border-solid border-[1px] bg-white rounded-lg px-1 w-10 text-[12px] ml-2 text-center absolute top-4 right-8"
        >
          置顶
        </div>
        <div
          class="modelSelectByUserIdModel w-full h-full top-0 left-0 flex px-4 py-4 box-border"
        >
          <div
            v-if="currentType === '0'"
            class="text-white text-[12px] px-3 bg-[#000] bg-opacity-40 rounded-lg h-[20px] leading-relaxed"
          >
            <span>
              {{ item.modelType }}
            </span>
          </div>
          <div
            v-if="currentType === '1'"
            class="text-white text-[12px] px-3 bg-[#000] bg-opacity-40 rounded-lg h-[20px] leading-relaxed"
          >
            工作流
          </div>
          <div
            v-if="currentType !== '2'"
            class="absolute bottom-0 left-0 px-4 py-2 text-white box-border flex justify-between items-center"
          >
            <component :is="Play" class="h-[14px] w-[14px] text-white menu-icon m-1" />
            <span v-if="currentType === '0'">
              {{ item.reals || 0 }}
            </span>
            <span v-if="currentType === '1'">
              {{ item.useNumber || 0 }}
            </span>
            <component
              :is="Download"
              class="h-[14px] w-[14px] text-white menu-icon m-1"
            />
            <span v-if="currentType === '0'">
              {{ item.numbers || 0 }}
            </span>
            <span v-if="currentType === '1'">
              {{ item.downloadNumber || 0 }}
            </span>
          </div>
        </div>
      </div>
      <div v-if="currentType !== '2'" class="mt-2 text-[12px] text-[#67787e]">
        <div class="text-[#000] mb-1">
          <span v-if="currentType === '0'">
            {{ item.modelName }}
          </span>
          <span v-if="currentType === '1'">
            {{ item.workflowName }}
          </span>

          <!-- <span>{{ item.userName }}</span> -->
        </div>
        <div class="flex">
          <img
            class="block w-[20px] h-[20px] rounded-full mr-2"
            :src="item.userAvatar"
            alt=""
          >
          <span>{{ item.userName }} </span>
        </div>
      </div>
    </div>
    <NConfigProvider>
      <NMessageProvider>
        <Publish-picture v-if="isShowPublishPicture" type="edit" ref="PublishPictureRef" :form-data="publishPictureData" @close-publish-img="closePublishImg" />
      </NMessageProvider>
    </NConfigProvider>
  </div>
</template>

<style lang="scss">
.modelSelectByUserIdModel {
  position: absolute;
  &:hover {
    .modelSelectByUserIdModel-mask {
      display: block;
    }
  }
  .modelSelectByUserIdModel-mask {
    position: absolute;
    width: 100%;
    display: none;
    .menu-content {
      width: 20px;
      height: 30px;
      position: absolute;
      right: 10px;
    }
    .menu-content:hover {
      .menu-group {
        display: block;
      }
    }
    .menu-group {
      position: absolute;
      top: 10px;
      right: 0;
      .menu-item {
        padding: 4px 0 4px 0;
        margin: 4px;
        border-radius: 2px;
        &:hover {
          background-color: #eeeded;
          // border: solid;
        }
      }
    }
  }
}
</style>