designer-hub/packages/app/src/pages/home/components/comment-item.vue

<script setup lang="ts">
import { useUserStore } from '../../../store'
import { createCircleReviewUpvote } from '../../../core/libs/requests'
import { thumbsUp } from '../../../core/libs/svgs'
import { Comment } from '../../../core/models/moment'
import { dayjs } from 'wot-design-uni'
import { storeToRefs } from 'pinia'

const props = defineProps({
  options: {
    type: Object as PropType<Comment>,
    default: () => ({}),
  },
  isChild: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits<{ upvote: [] }>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const handleUpvote = async () => {
  const { code, msg } = await createCircleReviewUpvote({
    circleId: props.options.circleId,
    userId: userInfo.value.userId,
    userName: userInfo.value.nickname,
    reviewId: props.options.id,
  })
  code === 0 && uni.showToast({ title: '点赞成功', icon: 'none' })
  emits('upvote')
}
</script>
<template>
  <view class="grid grid-cols-[28px_1fr_28px] gap-2.5" :class="isChild ? 'ml-9' : ''">
    <wd-img
      custom-class="rounded-full overflow-hidden col-start-1 row-start-1"
      width="28"
      height="28"
      :src="''"
    />
    <view class="col-start-2 row-start-1">
      <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
        {{ options.userName }}
      </div>
      <div class="my-3 text-black/90 text-sm font-normal font-['PingFang SC'] leading-[10.18px]">
        {{ options.reviewContent }}
      </div>
      <view class="flex items-center mt--2">
        <div class="text-black/30 text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]">
          {{ dayjs(options.reviewTime).format('YYYY/MM/DD') }}
        </div>
        <view class="ml-3">
          <wd-button custom-class="text-2.5!" type="text">回复</wd-button>
        </view>
      </view>
    </view>
    <view class="col-start-3 row-start-1 flex flex-col items-center" @click="handleUpvote">
      <div class="w-[18px] h-[18px] relative">
        <wd-img :src="thumbsUp" width="18" height="18"></wd-img>
      </div>
      <div
        class="mt-1.5 text-black/40 text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
      >
        {{ options.upvoteCount || 0 }}
      </div>
    </view>
  </view>
</template>