mcwl-pc/app/components/PersonalCenterCard.vue

<script setup lang="ts">
import {
  CircleAlert,
  Download,
  EllipsisVertical,
  ImagePlay,
  Play,
} from 'lucide-vue-next'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  currentType: {
    type: String,
    default: '',
  },
  currentState: {
    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}`)
  }
}

// 处理下拉菜单选项 编辑/删除/置顶
function handleSelect(event: Event, key: string) {
  event.stopPropagation() // 阻止事件冒泡
  if (key === 'top') {
    handleTop()
  }
  else if (key === 'delete') {
    handleDelete()
  }
}

// 置顶
interface TopUrlType {
  [key: string]: string
}
const topUrl = ref<TopUrlType>({
  0: 'model',
  1: 'WorkFlow',
  2: 'image',
})
async function handleTop() {
  try {
    const res = await request.get(
      `/${topUrl.value[props.currentType]}/${props.item.id}/top?isTop=${!props.item
        .isTop}`,
    )
    if (res.code === 200) {
      // 刷新列表
      emit('topedRefresh')
    }
  }
  catch (e) {}
}

// 删除
async function handleDelete() {
  if (props.currentType === '0') {
  }
  else if (props.currentType === '1') {
    try {
      const res = await request.get(`/WorkFlow/deleteWorkFlow?id=${props.item.id}`)
      if (res.code === 200) {
        // 刷新列表
        emit('topedRefresh')
      }
    }
    catch (e) {}
  }
  else {
    try {
      const res = await request.get(`/image/delete/${props.item.id}`)
      if (res.code === 200) {
        // 刷新列表
        emit('topedRefresh')
      }
    }
    catch (e) {}
  }
}
</script>

<template>
  <div>
    <div v-if="currentState === 'like' && currentType === '2'">
      <div
        class="h-80 rounded-2xl overflow-hidden cursor-pointer relative"
        @click="toDetails"
      >
        <img class="w-full h-full object-cover block" :src="item.userAvatar" alt="">
        <div
          class="absolute w-full h-full top-0 left-0 flex justify-between items-center px-4 py-4 box-border bg-[#000] bg-opacity-40"
        >
          <div>
            <img class="w-[40px] h-[40px] rounded-full" :src="item.avatar" alt="">
            <span>元影AIATIDD</span>
          </div>
          <div class="flex items-center justify-center rounded-lg bg-[#fceceb] p-2">
            <img src="@/assets/img/heart.png" class="w-[20px] h-[20px] mr-1" alt="">
            <span class="font-bold text-[12px] text-[#ff5e5e]">123</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div
        class="h-80 rounded-2xl overflow-hidden cursor-pointer relative"
        @click="toDetails"
      >
        <img class="w-full h-full object-cover block" :src="item.userAvatar" alt="">
        <div
          v-if="currentState === 'mallProduct' && 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>
        <!-- 在发布中 auditStatus等于代表没有审批通过 -->
        <div
          v-if="currentState === 'mallProduct' && item.auditStatus === 4"
          class="absolute top-0 left-0 w-full h-full text-gray-400 bg-black/50 flex justify-center items-center flex-col"
        >
          <component
            :is="CircleAlert"
            class="h-[40px] w-[40px] text-white menu-icon m-1 text-gray-400"
          />
          未通过
        </div>
        <div
          class="modelSelectByUserIdModel w-full h-full top-0 left-0 flex px-4 py-4 box-border"
        >
          <div
            v-if="currentState === 'mallProduct' && currentType === '0' && item.modelName"
            class="text-white text-[12px] px-3 bg-[#000] bg-opacity-40 rounded-lg h-[20px]"
          >
            <span>
              {{ item.modelName }}
            </span>
          </div>
          <div
            v-if="currentState === 'mallProduct' && currentType === '1'"
            class="text-white text-[12px] px-3 bg-[#000] bg-opacity-40 rounded-lg h-[20px]"
          >
            <span> 工作流 </span>
          </div>
          <div
            v-if="currentState === 'mallProduct'"
            class="modelSelectByUserIdModel-mask h-1/3 absolute top-0 left-0 bg-gradient-to-b from-black/100 to-transparent px-4 py-4 text-white box-border flex justify-end"
          >
            <div class="menu-content">
              <component
                :is="EllipsisVertical"
                class="h-[18px] w-[18px] text-white menu-icon"
              />
              <div
                class="menu-group text-[#000000] text-[12px] bg-white rounded-lg text-center w-20 mt-2 hidden"
              >
                <div class="menu-item" @click="(event) => handleSelect(event, 'edit')">
                  编辑
                </div>
                <div
                  class="menu-item text-red"
                  @click="(event) => handleSelect(event, 'delete')"
                >
                  删除
                </div>
                <div class="menu-item" @click="(event) => handleSelect(event, 'top')">
                  {{ item.isTop === 1 ? "取消置顶" : "置顶" }}
                </div>
              </div>
            </div>
          </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 }}
            </span>
            <span v-if="currentType === '1'">
              {{ item.useNumber }}
            </span>
            <component
              :is="Download"
              class="h-[14px] w-[14px] text-white menu-icon m-1"
            />
            <span v-if="currentType === '0'">
              {{ item.numbers }}
            </span>
            <span v-if="currentType === '1'">
              {{ item.downloadNumber }}
            </span>
            <!-- <component
              :is="ImagePlay"
              class="h-[14px] w-[14px] text-white menu-icon m-1"
            />0 -->
          </div>
        </div>
      </div>
      <div v-if="currentType !== '2'" class="mt-2 text-[12px] text-[#67787e]">
        <div class="text-[#000] mb-1">
          版本名称1 版本名称12
          <!-- <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>
  </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>