QTApp_800/uni_modules/uni-cms-article/components/list-template/three-cover.uvue

<template>
  <view
      :to="'/uni_modules/uni-cms-article/pages/detail/detail?id=' + data?._id"
      :key="data?._id"
      class="list-item"
      direction="column"
  >
      <view class="main">
        <text class="title">{{ data?.title }}</text>
        <view class="thumbnails">
          <image
              v-for="image in data?.thumbnail"
              :src="image"
              mode="aspectFill"
              class="img"
          ></image>
        </view>
        <view class="info">
          <text class="author">{{ data!.user_id!.length > 0 ? data!.user_id[0]!.nickname : '' }}</text>
          <text class="publish_date">{{ publishTime(data?.publish_date ?? 0) }}</text>
        </view>
      </view>
  </view>
</template>

<script lang="uts">
import { type PropType } from 'vue'
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time.uts";
type ArticleAuthor = {
    _id: string
    nickname: string
}
type ArticleItem = {
    _id: string
    title: string
    publish_date: number
    thumbnail: string[]
    user_id: ArticleAuthor[]
}
export default {
  name: "three-cover",
  props: {
    data: {
      type: Object as PropType<ArticleItem>
    }
  },
  methods: {
    // 格式化时间戳
    publishTime(timestamp: number): string {
      return translatePublishTime(timestamp)
    },
  }
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>