feat(moment): 圈子空白评论

src/pages/home/moment/index.vue

@@ -93,27 +93,46 @@ onMounted(async () => {
       <!-- <SectionHeading :title="`评论 ${data.comments}`"></SectionHeading> -->
       <view class="flex items-center my-8">
         <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]">
-          {{ `评论 ${data?.comments}` }}
+          <span>评论</span>
+          <span v-if="data?.comments">{{ data?.comments }}</span>
         </div>
         <view class="flex-1"></view>
-        <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
-          按热度
-        </div>
-        <div class="mx-2 text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
-          |
-        </div>
-        <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
-          按时间
-        </div>
+        <view v-if="data?.comments" class="flex">
+          <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
+            按热度
+          </div>
+          <div
+            class="mx-2 text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]"
+          >
+            |
+          </div>
+          <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
+            按时间
+          </div>
+        </view>
       </view>
 
       <view>
-        <template v-for="it of data?.commentList" :key="it.id">
-          <CommentItem :options="it" :isChild="false"></CommentItem>
-          <template v-for="child of it.childrens" :key="child.id">
-            <CommentItem :options="child" :isChild="true"></CommentItem>
+        <template v-if="data?.commentList.length">
+          <template v-for="it of data?.commentList" :key="it.id">
+            <CommentItem :options="it" :isChild="false"></CommentItem>
+            <template v-for="child of it.childrens" :key="child.id">
+              <CommentItem :options="child" :isChild="true"></CommentItem>
+            </template>
           </template>
         </template>
+        <template v-else>
+          <view class="flex items-center justify-center mt-26 mb-36">
+            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
+              这里空空的
+            </div>
+            <div
+              class="ml-1.5 text-[#2f4471]/90 text-xs font-normal font-['PingFang SC'] leading-[10.18px]"
+            >
+              点击评论~
+            </div>
+          </view>
+        </template>
       </view>
     </view>
     <div