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'
import { likeActived, likeBlack } from '@designer-hub/assets/src/icons'
import { NetImages } from '../core/libs/net-images'
import { currRoute } from '../utils'
import { usePermissions } from '../composables/permissions'
import { levelsByLevel } from '@/core/libs/levels'

const props = withDefaults(
  defineProps<{
    options: {
      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
    }
    isOwn?: boolean
  }>(),
  {},
)
const emits = defineEmits<{ delete: [id: number]; like: [options: any] }>()
const router = useRouter()
const { features } = usePermissions()
const imgClass = ref('')
const isVideo = ref(false)
const toDetail = () => {
  uni.navigateTo({
    url: `/pages/home/moment/index?${stringify({ id: props.options.id })}`,
  })
}
const handleDelete = async () => {
  emits('delete', props.options.id)
}
onMounted(async () => {
  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>
  <div @click="toDetail">
    <Card>
      <view class="flex items-center">
        <view
          class="overflow-hidden rounded-full mr-2"
          @click.stop="
            features.toDesignerHomePage &&
              currRoute().path !== '/pages/mine/homepage/index' &&
              router.push(`/pages/mine/homepage/index?id=${options.stylistId}`)
          "
        >
          <wd-img
            custom-class="vertical-bottom"
            :width="35"
            :height="35"
            :src="props.options.headUrl || NetImages.DefaultAvatar"
            mode="scaleToFill"
          />
        </view>
        <view class="">{{ props.options.stylistName }}</view>
        <div v-if="levelsByLevel[options?.member?.level]?.badge">
          <wd-img
            width="63"
            height="18.6"
            :src="levelsByLevel[options?.member?.level]?.badge"
          ></wd-img>
        </div>
        <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">
        <div>
          <button
            open-type="share"
            class="bg-transparent! p-0!"
            :data-options="options"
            @click.stop
          >
            <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>
          </button>
        </div>
        <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-3.5 font-400 line-height-5.5"
          :class="[options.ownUpvote ? 'text-[#ca5141]' : 'text-[rgba(0,0,0,0.85)]']"
          @click.stop="emits('like', { upvote: options.ownUpvote, circleId: options.id })"
        >
          <template v-if="options.ownUpvote">
            <wd-img width="18" height="18" :src="likeActived"></wd-img>
          </template>
          <template v-else>
            <wd-img width="18" height="18" :src="likeBlack"></wd-img>
          </template>
          <view class="ml-1">{{ props.options.upvoteCount }}</view>
        </view>
        <div v-if="isOwn" @click.stop="handleDelete()">
          <wd-button type="text" size="small">
            <span class="text-black/30 text-xs font-normal font-['PingFang_SC']">
              删除
              <wd-icon name="close" size="12"></wd-icon>
            </span>
          </wd-button>
        </div>
      </view>
    </Card>
  </div>
</template>