designer-hub/packages/app/src/components/moment-item.vue

<script lang="ts" setup>
import Card from '@/components/card.vue'
import dayjs from 'dayjs'
import TiltedButton from './tilted-button.vue'
import { beforeNow } from '@/utils/date-util'
import Tag from './tag.vue'
const props = defineProps({
  options: {
    type: Object as PropType<{
      id: number
      headUrl?: string
      stylistId?: number
      stylistName?: string
      marketing?: string
      circleDesc?: string
      tagName?: string
      detailsType?: string
      detailsUrl?: string
      detailsDesc?: string
      circleType?: string
      spaceType?: string
      designStyle?: string
      spaceAddr?: string
      customerDemand?: string
      createTime: number
      bannerUrls: string[]
      shareCount?: number
      upvoteCount?: number
      ownUpvote: boolean
      reviewCount: number
    }>,
    default: () => ({
      author: {
        nickname: '张三',
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      },
      createTime: new Date(),
      images: [
        'https://via.placeholder.com/104x104',
        'https://via.placeholder.com/104x104',
        'https://via.placeholder.com/104x104',
      ],
      content: '',
      tags: [],
      shares: 0,
      comments: 0,
      likes: 0,
    }),
  },
})
const imgClass = ref('')
const toDetail = () => {
  uni.navigateTo({
    url: '/pages/home/moment/index',
  })
}

onMounted(async () => {
  // console.log('加载')
  if (props.options.bannerUrls.length === 1) {
    const { width, height } = await uni.getImageInfo({
      src: props.options.bannerUrls[0],
    })

    if (Number(width / height) > 1) {
      imgClass.value = 'w-[60vw]'
    } else {
      imgClass.value = 'w-[44vw]'
    }
  }
})
</script>
<template>
  <Card @click="toDetail" @tap="toDetail">
    <view class="flex items-center">
      <view class="overflow-hidden rounded-full mr-2">
        <wd-img
          custom-class="vertical-bottom"
          :width="35"
          :height="35"
          :src="props.options.headUrl"
          mode="scaleToFill"
        />
      </view>
      <view class="">{{ props.options.stylistName }}</view>
      <view class="flex-1"></view>
      <view>{{ beforeNow(dayjs(props.options.createTime).toDate()) }}</view>
    </view>
    <view
      :class="[
        props.options.bannerUrls.length > 1 ? 'grid grid-cols-3 grid-gap-1' : 'w-full',
        'my-6',
      ]"
    >
      <template v-for="it of props.options.bannerUrls" :key="it">
        <view
          :class="[
            props.options.bannerUrls.length > 1 ? 'aspect-square' : '',
            'rounded-lg overflow-hidden',
            imgClass,
          ]"
        >
          <wd-img
            custom-class="vertical-bottom"
            :width="'100%'"
            :src="it"
            :height="props.options.bannerUrls.length > 1 ? '100%' : 'auto'"
            :mode="props.options.bannerUrls.length > 1 ? 'aspectFill' : 'widthFix'"
          ></wd-img>
        </view>
      </template>
    </view>
    <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 line-height-2.5 my-1">
      {{ props.options.circleDesc }}
    </view>
    <view class="my-5.5">
      <!-- <TiltedButton>按钮</TiltedButton> -->
      <template v-for="it of props.options.tagName?.split(',')" :key="it">
        <Tag>{{ it }}</Tag>
      </template>
    </view>
    <view class="flex justify-between">
      <view class="flex items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5">
        <wd-img width="15" height="15" src="/static/svgs/share.svg"></wd-img>
        <view class="ml-1">{{ props.options.shareCount }}</view>
      </view>
      <view class="flex items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5">
        <wd-img width="15" height="15" src="/static/svgs/comment.svg"></wd-img>
        <view class="ml-1">{{ props.options.shareCount }}</view>
      </view>
      <view class="flex items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5">
        <wd-img width="15" height="15" src="/static/svgs/like.svg"></wd-img>
        <view class="ml-1">{{ props.options.shareCount }}</view>
      </view>
    </view>
  </Card>
</template>