YzXyh_v3/UI/XYH.APP/src/components/listCard.vue

<script setup lang="ts">
import dayjs from "dayjs"
import "dayjs/locale/zh-cn" // 导入本地化语言
import route from "@/route"
import configs from "@/core/config"

dayjs.locale("zh-cn") // 使用本地化语言

const props = withDefaults(
  defineProps<{
    type: string
    item: any
    map: { id: string; date: string }
  }>(),
  {
    item: () => {
      return {}
    },
    map: () => {
      return {
        id: "id",
        date: "date",
      }
    },
  }
)
const emits = defineEmits<{
  (e: "click", item: any): void
}>()

const isActivity = computed(() => {
  return props.type && props.type.search("activity") >= 0
})

const isHelp = computed(() => {
  return props.type && props.type.search("help") >= 0
})

const isNews = computed(() => {
  return props.type && props.type.search("news") >= 0
})

const isHot = computed(() => {
  return props.item.isHot == "1" || props.item.readCount > 50
})
const content = computed(() => {
  if (props.item.content) {
    const len = props.item.images ? 55 : 80
    return props.item.content.length > len
      ? props.item.content.replace(/<[^>]+>/g, "").substring(0, len) + "..."
      : props.item.content
  }
  return ""
})
const image = computed(() => {
  if (props.item.images) {
    const arr = props.item.images.split(",")
    return `${configs.baseUrl}/oss/preview/${arr[0]}`
  }
  return ""
})
const date = computed(() => {
  return dayjs(new Date(props.item[props.map.date])).format("YYYY-MM-DD ddd")
})
const statusClass = computed(() => {
  if (props.item.isClose == "1" || props.item.auditStatus == "2") {
    return "bg-danger"
  }
  if (dayjs(props.item.expiryDate).isBefore(new Date())) {
    return "bg-warning"
  }
  if (props.item.auditStatus == "0") {
    return "bg-gray-5"
  }
  if (props.item.auditStatus == "1") {
    return "bg-vb"
  }
  return ""
})
const statusName = computed(() => {
  if (props.item.isClose == "1") {
    return "已结束"
  }
  if (dayjs(props.item.expiryDate).isBefore(new Date())) {
    return "已过期"
  }
  if (props.item.auditStatus == "0") {
    return "审核中"
  }
  if (props.item.auditStatus == "1") {
    return isActivity.value ? "报名中" : isHelp.value ? "互助中" : ""
  }
  if (props.item.auditStatus == "2") {
    return "未通过"
  }
  return ""
})

function onClick(item: any) {
  emits("click", item)
  route.navigate(props.type as any, { id: item[props.map.id] })
}

function init() {
  //
}

onMounted(init)
</script>
<template>
  <vb-cell-group custom-class="">
    <view class="flex-column p-15 pos-r" @click="onClick(item)">
      <view
        v-if="!isNews"
        class="pos-a px-8 py-3 fs-12 text-white"
        :class="statusClass"
        style="top: 0; right: 0; border-radius: 0 0 0 var(--vb-cell-group-radius)"
      >
        {{ statusName }}
      </view>
      <view class="pb-5 pt-2 d-flex">
        <vb-icon v-if="isHot" name="hot" :size="30" custom-class="text-danger"></vb-icon>
        <view class="fs-20 font-bold">{{ item.title }}</view>
        <vb-icon v-if="item.isHead == '1'" name="head" :size="30" custom-class="text-vb"></vb-icon>
      </view>
      <view class="d-flex py-5 ps-5">
        <view class="text-vb pe-20">{{ item.categoryName }}</view>
        <view class="d-fcv text-gray-5">
          <i class="iconfont icon-home text-gray-5 pe-5 fs-20"></i>
          {{ item.isSys == "1" || isNews ? "平台发布" : item.createdBy + " 发布" }}
        </view>
      </view>
      <view class="d-flex py-5">
        <view class="text-gray-8 w-100 me-10 text-indent">
          {{ content }}
        </view>
        <view v-if="item.images" class="w-150px h-80px">
          <image class="w-100 h-100 br-8" :src="image" :lazy-load="true" mode="aspectFill"></image>
        </view>
      </view>
      <view class="pt-10 d-flex justify-between">
        <view class="d-flex">
          <view class="px-10 d-fcv text-gray-5">
            <i class="iconfont icon-eye text-gray-5 pe-5 fs-20"></i>
            {{ item.readCount || 0 }}
          </view>
          <view class="px-10 d-fcv text-gray-5">
            <i class="iconfont icon-chat text-gray-5 pe-5 fs-20"></i>
            {{ item.commentCount || 0 }}
          </view>
        </view>
        <view class="px-10 d-fcv text-gray-5">
          <i class="iconfont icon-calendar text-gray-5 pe-5 fs-20"></i>
          {{ date }}
        </view>
      </view>
    </view>
  </vb-cell-group>
</template>