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 { useMemberLevelsStore } from '../store/member-levles'
import { useDictStore } from '../store'
import { DictType } from '../core/libs/models'
import { CircleRes } from '../core/libs/requests'

const props = withDefaults(
  defineProps<{
    options: CircleRes
    isOwn?: boolean
    isShared?: boolean
  }>(),
  {},
)
const emits = defineEmits<{
  delete: [id: number]
  like: [options: any]
  share: [options: CircleRes]
}>()
const router = useRouter()
const { features, clickByPermission } = usePermissions()
const memberLevelsStore = useMemberLevelsStore()
const { getMemberLevelLogo, getMemberAvatarFrame } = memberLevelsStore
const dictStore = useDictStore()
const { getOptionLabel } = dictStore
const imgClass = ref('')
// const isVideo = ref(false)
const isVideo = computed(
  () => props.options.bannerUrls?.length && isImageOrVideo(props.options.bannerUrls[0]) === 'video',
)
const toDetail = () => {
  uni.navigateTo({
    url: `/pages/home/moment/index?${stringify({ id: props.options.id })}${props.isShared ? '&isShared=true' : ''}`,
  })
}
const handleDelete = async () => {
  emits('delete', props.options.id)
}
onMounted(async () => {
  if (
    props.options.circleType === '1' &&
    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 gap-2">
        <view
          class="relative"
          @click.stop="
            features.toDesignerHomePage &&
            ['1', '2'].includes(options?.circleType) &&
            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"
            round
            :src="props.options.headUrl || NetImages.DefaultAvatar"
            mode="scaleToFill"
          />
          <wd-img
            v-if="getMemberAvatarFrame(options?.levelId)"
            custom-class="vertical-bottom absolute! top--1.25 left--1.25"
            :width="40"
            :height="40"
            :src="getMemberAvatarFrame(options?.levelId) || ''"
          ></wd-img>
        </view>
        <view class="">{{ props.options.stylistName || props.options.marketing }}</view>
        <template v-if="getMemberLevelLogo(options?.levelId)">
          <wd-img
            width="63"
            height="18.6"
            :src="getMemberLevelLogo(options?.levelId) || ''"
          ></wd-img>
        </template>
        <view class="flex-1"></view>
        <div class="text-black/40 text-sm font-medium font-['PingFang_SC'] leading-[10.18px]">
          {{ beforeNow(dayjs(props.options.createTime).toDate()) }}
        </div>
      </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="my-6">
        <template v-if="options.circleType === '1'">
          <div
            :class="[
              props.options.bannerUrls?.length > 1 ? 'grid grid-cols-3 grid-gap-1' : 'w-full',
              '',
            ]"
          >
            <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>
          </div>
        </template>
        <view class="aspect-[1.64/1] rounded-lg overflow-hidden" v-else>
          <wd-img
            custom-class="vertical-bottom"
            width="100%"
            height="100%"
            :src="options.bannerUrls[0]"
            mode="aspectFill"
          ></wd-img>
        </view>
      </view>
      <div
        v-if="options.circleType === '2'"
        class="text-black/90 text-xl font-normal font-['PingFang_SC']"
      >
        设计案例：{{ options?.caseName }}
      </div>
      <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 my-1 flex items-center">
        <template v-if="options.circleType === '2'">
          <!--          <span>-->
          <!--            {{ getOptionLabel(DictType.circleSpaceType, options.spaceType) }}-->
          <!--          </span>-->
          <!--          <div class="mx-2 h-3.5 w-[1.5px] bg-black/40"></div>-->
          <!--          <span>-->
          <!--            {{ getOptionLabel(DictType.memberDesignStyle, options.designStyle) }}-->
          <!--          </span>-->
          <!--          <div class="mx-2 h-3.5 w-[1.5px] bg-black/40"></div>-->
          <!--          <span>{{ options.caseName }}</span>-->
          <div class="w-full mt-4 flex items-center justify-between text-black/40 text-sm">
            <div class="font-normal font-['PingFang_SC']">
              类别:{{ getOptionLabel(DictType.circleSpaceType, options?.spaceType) }}
            </div>
            |
            <div class="text-black/40 text-sm font-normal font-['PingFang_SC']">
              风格:{{ getOptionLabel(DictType.memberDesignStyle, options.designStyle) }}
            </div>
            |
            <div class="text-black/40 text-sm font-normal font-['PingFang_SC']">
              面积:{{ options.spaceExtent }}
            </div>
          </div>
        </template>
        <template v-else>{{ options.circleDesc }}</template>
      </view>
      <view v-if="props.options.tagName !== ''" 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 v-if="!isShared" class="flex justify-between">
        <div>
          <template v-if="features.shareMoment">
            <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>
          </template>
          <template v-else>
            <view
              @click.stop="clickByPermission('share', () => {})"
              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>
          </template>
        </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="
            clickByPermission('thumbsUp', () =>
              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>