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

<script setup lang="ts">
import { useUserStore } from '../../../store'
import {
  cancelCircleReviewUpvote,
  createCircleReviewUpvote,
  deleteCircleReview,
  getReviewReplay,
} from '../../../core/libs/requests'
import { thumbsUp, thumbsUpActive } 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: []; delete: [] }>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const handleUpvote = async () => {
  if (!props.options.upvote) {
    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' })
  } else {
    const { code, msg } = await cancelCircleReviewUpvote({
      circleId: props.options.circleId.toString(),
      userId: userInfo.value.userId.toString(),
      reviewId: props.options.id.toString(),
    })
    code === 0 && uni.showToast({ title: '取消点赞成功', icon: 'none' })
  }
  emits('upvote')
}
const handleDelect = async () => {
  uni.showModal({
    content: '确定删除评论？',
    showCancel: true,
    success: async (res) => {
      if (res.confirm) {
        // TODO: 删除评论
        const { code, msg } = await deleteCircleReview(props.options.id)
        if (code === 0) {
          uni.showToast({ title: '删除评论成功', icon: 'none' })
        } else {
          uni.showToast({ title: msg, icon: 'none' })
        }
        emits('delete')
      }
    },
  })
}
onMounted(async () => {
  const { data } = await getReviewReplay({ id: props.options.id.toString() })
  console.log(data)
})
</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="options.userAvatar"
    />
    <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 gap-3">
        <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="">
          <wd-button custom-class="text-2.5!" type="text">回复</wd-button>
        </view>
        <div v-if="userInfo.userId === options.userId">
          <wd-button custom-class="text-2.5!" type="text" @click="handleDelect">删除</wd-button>
        </div>
      </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="options.upvote ? thumbsUpActive : 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>