update

src/pages/taskDetails/components/TaskDetails.vue

@@ -5,6 +5,7 @@ import XImage from "../../../components/XImage.vue";
 import XSquareCarouselImage from "../../../components/XSquareCarouselImage.vue";
 import HF_ICON from "../../../static/icons/icon-wrapper.png";
 import {copy} from "../../../utils/uils.js";
+import {computed} from "vue";
 
 const {data, home} = defineProps({
     data: {
@@ -16,6 +17,8 @@ const {data, home} = defineProps({
         default: false
     }
 });
+
+const list = computed(() => [data.comment_arr]?.flatMap(v => v.children ? [v, ...v.children] : [v]));
 </script>
 
 <template>
@@ -53,21 +56,29 @@ const {data, home} = defineProps({
         <view class="block">
             <view class="block-title">评论区案例:</view>
             <view class="test-24r text-[#4E5969]">
-                <view v-if="data.comment_arr">
-                    评论1:
-                    <text v-if="data.comment_arr.pid!==0" class="text-[#86909C]">
-                        <image class="!size-[20rpx]" src="/static/icons/msgback.png"></image>
-                        回复1:
-                    </text>
-                    {{ data.comment_arr.intro }}
-                </view>
-                <view v-for="(v, index) in data.comment_arr.children">
-                    评论{{ index + 2 }}:
-                    <text class="text-[#86909C]">
-                        <image class="!size-[20rpx]" src="/static/icons/msgback.png"></image>
-                        回复1:
-                    </text>
-                    {{ v.intro }}
+                <view v-for="(v, index) in list">
+                    <view>
+                        评论{{ index + 1 }}:
+                        <text v-if="v.pid" class="text-[rgba(134,144,156)]">
+                            <image class="!size-[20rpx]" src="/static/icons/msgback.png"></image>
+                            回复{{
+                                list.findIndex(k => k.pid === v.pid)
+                            }}
+                        </text>
+                        {{ v.intro }}
+                    </view>
+                    <view class="!flex gap-[20rpx] flex-wrap !my-[10rpx]">
+                        <view class="!w-[96rpx] !h-[96rpx] !aspect-square" v-for="k in v.image_arr">
+                            <x-image
+                                :style="{
+                                    width: '96rpx',
+                                    height: '96rpx',
+                                }"
+                                :src="k"
+                                :list="v.image_arr">
+                            </x-image>
+                        </view>
+                    </view>
                 </view>
             </view>
         </view>