right-small-cover.uvue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <view
  3. :to="'/uni_modules/uni-cms-article/pages/detail/detail?id=' + data?._id"
  4. :key="data?._id"
  5. class="list-item"
  6. >
  7. <view class="main">
  8. <text class="title">{{ data?.title }}</text>
  9. <view class="info">
  10. <text class="author">{{ data!.user_id!.length > 0 ? data!.user_id[0]!.nickname : '' }}</text>
  11. <text class="publish_date">{{ publishTime(data?.publish_date ?? 0) }}</text>
  12. </view>
  13. </view>
  14. <image class="thumbnail" :src="data!.thumbnail[0]" mode="aspectFill"></image>
  15. </view>
  16. </template>
  17. <script lang="uts">
  18. import { type PropType } from 'vue'
  19. import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time.uts";
  20. type ArticleAuthor = {
  21. _id: string
  22. nickname: string
  23. }
  24. type ArticleItem = {
  25. _id: string
  26. title: string
  27. publish_date: number
  28. thumbnail: string[]
  29. user_id: ArticleAuthor[]
  30. }
  31. export default {
  32. name: "right-small-cover",
  33. props: {
  34. data: {
  35. type: Object as PropType<ArticleItem>
  36. }
  37. },
  38. methods: {
  39. // 格式化时间戳
  40. publishTime(timestamp: number): string {
  41. return translatePublishTime(timestamp)
  42. },
  43. }
  44. }
  45. </script>
  46. <style scoped lang="scss">
  47. @import "./style.scss";
  48. </style>