feat(app/circle): 功能开发：实现评论点赞功能和UI优化

packages/app/src/assets/svgs/thumbs-up-active.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.42562 3.17929C7.57957 1.71038 9.23209 0.656373 10.6019 1.47823C10.7337 1.55734 10.8976 1.67514 11.0236 1.857C11.2162 2.13509 11.5 2.68535 11.5 3.50021V5.50035C11.5 5.77641 11.7238 6.00021 12 6.00021H14.6126C15.6364 6.00021 16.3594 7.00326 16.0356 7.97456L13.7023 14.9746C13.4981 15.5871 12.9249 16.0002 12.2792 16.0002H6.5C5.67157 16.0002 5 15.3286 5 14.5002V9.50021C5 9.22407 5.22386 9.00021 5.5 9.00021C5.77614 9.00021 6 9.22407 6 9.50021V14.5002C6 14.7764 6.22386 15.0002 6.5 15.0002H12.2792C12.4945 15.0002 12.6855 14.8625 12.7536 14.6583L15.0869 7.65833C15.1948 7.33456 14.9539 7.00021 14.6126 7.00021H12C11.1717 7.00021 10.5 6.32887 10.5 5.50035V3.50021C10.5 2.92943 10.3038 2.57405 10.2016 2.4265C10.1905 2.41049 10.1619 2.38047 10.0874 2.33572C9.4464 1.95115 8.51064 2.42033 8.42017 3.28353C8.34714 3.98034 8.21299 4.73388 7.93961 5.23841C7.41288 6.21053 6.74468 6.67516 6.39904 6.86295C6.20019 6.97099 5.99384 7.00021 5.82167 7.00021H3C2.72386 7.00021 2.5 7.22407 2.5 7.50021V14.5002C2.5 14.7764 2.72386 15.0002 3 15.0002H3.5C3.77614 15.0002 4 15.2241 4 15.5002C4 15.7764 3.77614 16.0002 3.5 16.0002H3C2.17157 16.0002 1.5 15.3286 1.5 14.5002V7.50021C1.5 6.67179 2.17157 6.00021 3 6.00021H5.82167C5.88541 6.00021 5.91319 5.98886 5.92163 5.98427C6.13346 5.86918 6.6437 5.53104 7.06039 4.76201C7.23082 4.44746 7.35308 3.87135 7.42562 3.17929Z" fill="black" fill-opacity="0.85"/>
+</svg>

packages/app/src/core/libs/requests.ts

@@ -238,6 +238,13 @@ export const createCircleReviewUpvote = (data: {
   userName: string
   reviewId: number
 }) => httpPost('/app-api/member/circle-review-upvote/create', data)
+export const cancelCircleReviewUpvote = (query: {
+  circleId: string
+  userId: string
+  reviewId: string
+}) => httpGet('/app-api/member/circle-review-upvote/cancel', query)
+export const getCircleReviewUpvotes = (query: { circleId: string; reviewId?: string }) =>
+  httpGet('/app-api/member/circle-review-upvote/page', query)
 export const getReviewReplay = (query: { id: string }) =>
   httpGet('/app-api/member/circle-review/getReviewReplay', query)
 export const refreshToken = (refreshToken: string) =>

packages/app/src/core/libs/svgs.ts

@@ -8,6 +8,7 @@ import camera from '@/assets/svgs/camera.svg'
 import scheduleCardBg from '@/assets/svgs/schedule-card-bg.svg'
 import map from '@/assets/svgs/map.svg'
 import thumbsUp from '@/assets/svgs/thumbs-up.svg'
+import thumbsUpActive from '@/assets/svgs/thumbs-up-active.svg'
 import integral from '@/assets/svgs/integral.svg'
 import coupon from '@/assets/svgs/coupon.svg'
 import agent from '@/assets/svgs/agent.svg'
@@ -43,6 +44,7 @@ export {
   scheduleCardBg,
   map,
   thumbsUp,
+  thumbsUpActive,
   integral,
   coupon,
   agent,

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

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { useUserStore } from '../../../store'
-import { createCircleReviewUpvote, getReviewReplay } from '../../../core/libs/requests'
-import { thumbsUp } from '../../../core/libs/svgs'
+import {
+  cancelCircleReviewUpvote,
+  createCircleReviewUpvote,
+  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'
@@ -20,13 +24,22 @@ 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' })
+  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')
 }
 onMounted(async () => {
@@ -60,7 +73,7 @@ onMounted(async () => {
     </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>
+        <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]"