comment-item.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <script setup lang="ts">
  2. import { useUserStore } from '../../../store'
  3. import { createCircleReviewUpvote } from '../../../core/libs/requests'
  4. import { thumbsUp } from '../../../core/libs/svgs'
  5. import { Comment } from '../../../core/models/moment'
  6. import { dayjs } from 'wot-design-uni'
  7. import { storeToRefs } from 'pinia'
  8. const props = defineProps({
  9. options: {
  10. type: Object as PropType<Comment>,
  11. default: () => ({}),
  12. },
  13. isChild: {
  14. type: Boolean,
  15. default: false,
  16. },
  17. })
  18. const emits = defineEmits<{ upvote: [] }>()
  19. const userStore = useUserStore()
  20. const { userInfo } = storeToRefs(userStore)
  21. const handleUpvote = async () => {
  22. const { code, msg } = await createCircleReviewUpvote({
  23. circleId: props.options.circleId,
  24. userId: userInfo.value.userId,
  25. userName: userInfo.value.nickname,
  26. reviewId: props.options.id,
  27. })
  28. code === 0 && uni.showToast({ title: '点赞成功', icon: 'none' })
  29. emits('upvote')
  30. }
  31. </script>
  32. <template>
  33. <view class="grid grid-cols-[28px_1fr_28px] gap-2.5" :class="isChild ? 'ml-9' : ''">
  34. <wd-img
  35. custom-class="rounded-full overflow-hidden col-start-1 row-start-1"
  36. width="28"
  37. height="28"
  38. :src="''"
  39. />
  40. <view class="col-start-2 row-start-1">
  41. <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
  42. {{ options.userName }}
  43. </div>
  44. <div class="my-3 text-black/90 text-sm font-normal font-['PingFang SC'] leading-[10.18px]">
  45. {{ options.reviewContent }}
  46. </div>
  47. <view class="flex items-center mt--2">
  48. <div class="text-black/30 text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]">
  49. {{ dayjs(options.reviewTime).format('YYYY/MM/DD') }}
  50. </div>
  51. <view class="ml-3">
  52. <wd-button custom-class="text-2.5!" type="text">回复</wd-button>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="col-start-3 row-start-1 flex flex-col items-center" @click="handleUpvote">
  57. <div class="w-[18px] h-[18px] relative">
  58. <wd-img :src="thumbsUp" width="18" height="18"></wd-img>
  59. </div>
  60. <div
  61. class="mt-1.5 text-black/40 text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
  62. >
  63. {{ options.upvoteCount || 0 }}
  64. </div>
  65. </view>
  66. </view>
  67. </template>