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

<script lang="ts" setup>
import Card from '@/components/card.vue'
import dayjs from 'dayjs'
import { beforeNow } from '../utils/date-util'
import Tag from './tag.vue'
import { stringify } from 'qs'
import { isImageOrVideo } from '../core/utils/common'
import { useRouter } from '../core/utils/router'

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 router = useRouter()
const imgClass = ref('')
const isVideo = ref(false)
const toDetail = () => {
  uni.navigateTo({
    url: `/pages/home/moment/index?${stringify({ id: props.options.id })}`,
  })
}
onMounted(async () => {
  // console.log('加载')
  if (
    props.options.bannerUrls?.length === 1 &&
    isImageOrVideo(props.options.bannerUrls[0]) === 'image'
  ) {
    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]'
    }
  }
  if (
    props.options.bannerUrls?.length === 1 &&
    isImageOrVideo(props.options.bannerUrls[0]) === 'video'
  ) {
    isVideo.value = true
  }
})
</script>
<template>
  <Card @click="toDetail" @tap="toDetail">
    <view class="flex items-center">
      <view
        class="overflow-hidden rounded-full mr-2"
        @click.stop="router.push(`/pages/mine/homepage/index?id=${options.stylistId}`)"
      >
        <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>
    <div v-if="isVideo" class="aspect-[1.64/1] rounded-lg overflow-hidden my-6" @click.stop>
      <video class="w-full h-full" :src="options.bannerUrls[0]"></video>
    </div>
    <view
      v-if="!isVideo"
      :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 my-1">
      {{ props.options.circleDesc }}
    </view>
    <view class="my-5.5 flex flex-wrap gap-3.5">
      <template v-if="props.options.tagName !== ''">
        <template v-for="it of props.options.tagName?.split(',')" :key="it">
          <Tag>{{ it }}</Tag>
        </template>
      </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.reviewCount }}</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.upvoteCount }}</view>
      </view>
    </view>
  </Card>
</template>