feat(property-marketing): 实现媒体账号作品详情页面数据展示

- 添加作品标题、内容展示，无数据时显示默认值
- 移除静态图片展示模块，待后续动态实现
-评论列表支持无数据提示展示- 接入 getMediaAccountWorkDetail 接口获取真实数据
- 完成页面基础数据结构定义与渲染逻辑调整

src/views/property-marketing/media-account/node-detail/index.vue

@@ -15,23 +15,23 @@
           </Tooltip>
         </div>
       </div>
-      <p class="mt-16px cts bold !text-24px !lh-32px">{{ dataSource.title }}</p>
+      <p class="mt-16px cts bold !text-24px !lh-32px">{{ dataSource.title || '-' }}</p>
-      <div class="mt-16px">
+      <!--      <div class="mt-16px">-->
-        <ImagePreviewGroup>
+      <!--        <ImagePreviewGroup>-->
-          <Image
+      <!--          <Image-->
-            :height="100"
+      <!--            :height="100"-->
-            :width="100"
+      <!--            :width="100"-->
-            class="rounded-8px mr-8px"
+      <!--            class="rounded-8px mr-8px"-->
-            src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"
+      <!--            src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"-->
-          />
+      <!--          />-->
-          <Image
+      <!--          <Image-->
-            :height="100"
+      <!--            :height="100"-->
-            :width="100"
+      <!--            :width="100"-->
-            class="rounded-8px mr-8px"
+      <!--            class="rounded-8px mr-8px"-->
-            src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"
+      <!--            src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"-->
-          />
+      <!--          />-->
-        </ImagePreviewGroup>
+      <!--        </ImagePreviewGroup>-->
-      </div>
+      <!--      </div>-->
       <p class="mt-16px cts whitespace-pre-line">{{ dataSource.content }}</p>
     </div>
 
@@ -47,7 +47,13 @@
       </div>
 
       <div class="flex-1 overflow-y-auto !px-24px">
-        <div v-for="(item, index) in dataSource.comments" :key="index" class="flex items-start justify-between mb-8px">
+        <NoData v-if="!dataSource.comments?.length" class="!p-0" />
+        <div
+          v-for="(item, index) in dataSource.comments"
+          v-else
+          :key="index"
+          class="flex items-start justify-between mb-8px"
+        >
           <TextOverTips :context="item.commenter" class="cts !color-#737478 !w-120px mr-20px" />
           <div class="flex-1 flex justify-between items-start">
             <div class="flex-1 flex items-start">
@@ -93,6 +99,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { Image, ImagePreviewGroup, Tooltip } from 'ant-design-vue';
 import TextOverTips from '@/components/text-over-tips/index.vue';
 import { exactFormatTime, formatNumberShow } from '@/utils/tools';
+import { getMediaAccountWorkDetail } from '@/api/all/propertyMarketing';
 
 const noteData = [
   // { label: '曝光量', prop: 'exposure_number', tooltip: '内容被展示给用户的总次数，不代表用户实际观看。' },
@@ -137,92 +144,92 @@ const handleBack = () => {
 };
 
 const getData = async () => {
-  dataSource.value = {
+  // dataSource.value = {
-    title: '挖到宝了！这个平价好物让我素颜出门都自信✨',
+  //   title: '挖到宝了！这个平价好物让我素颜出门都自信✨',
-    view_number: 424242,
+  //   view_number: 424242,
-    like_number: 424242,
+  //   like_number: 424242,
-    collect_number: 424242,
+  //   collect_number: 424242,
-    comment_number: 424242,
+  //   comment_number: 424242,
-    share_number: 424242,
+  //   share_number: 424242,
-    cover_click_rate: 424242,
+  //   cover_click_rate: 424242,
-    content: `谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+  //   content: `谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
-      最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+  //     最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
-      （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+  //     （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
-      最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+  //     最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
-      （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+  //     （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
-      最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+  //     最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
-      （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+  //     （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
-      最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+  //     最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
-      （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）
+  //     （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）
-      #电影票 #电影分享 #省钱小妙招 #电影票 #电影分享 #省钱小妙招
+  //     #电影票 #电影分享 #省钱小妙招 #电影票 #电影分享 #省钱小妙招
-    `,
+  //   `,
+  //
+  //   comments: [
+  //     {
+  //       id: 1,
+  //       commenter: '小红薯650EC5A小红薯650EC5A小红薯650EC5A',
+  //       content: '太麻烦了，有没有简单一点的方法',
+  //       like_number: 628,
+  //       reply_number: 200,
+  //       commented_at: '2024-08-13',
+  //     },
+  //     {
+  //       id: 2,
+  //       commenter: '汪汪汪',
+  //       content: '电影票太贵了，不去看电影了@小哥',
+  //       like_number: 329,
+  //       reply_number: 132,
+  //       commented_at: '2024-08-13',
+  //     },
+  //     {
+  //       id: 3,
+  //       commenter: '小情绪',
+  //       content:
+  //         '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
+  //       like_number: 217,
+  //       reply_number: 89,
+  //       commented_at: '2024-08-13',
+  //     },
+  //     {
+  //       id: 4,
+  //       commenter: '鱼Sir爱生活',
+  //       content: '8.15开始两边券不通用了，大麦的订单也同步不到淘票票了',
+  //       like_number: 183,
+  //       reply_number: 64,
+  //       commented_at: '2024-08-13',
+  //     },
+  //     {
+  //       id: 5,
+  //       commenter: 'Duku',
+  //       content: '用大麦买就可以了，把淘票票账号绑进大麦是一样的',
+  //       like_number: 128,
+  //       reply_number: 32,
+  //       commented_at: '2024-08-13',
+  //     },
+  //     {
+  //       id: 6,
+  //       commenter: '小情绪',
+  //       content:
+  //         '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
+  //       like_number: 92,
+  //       reply_number: 73,
+  //       commented_at: '2024-08-13',
+  //     },
+  //     {
+  //       id: 7,
+  //       commenter: '一鸣的歌单',
+  //       content: '今天问的KF，直接答非所问，很气人！',
+  //       like_number: 81,
+  //       reply_number: 63,
+  //       commented_at: '2024-08-13',
+  //     },
+  //   ],
+  // };
 
-    comments: [
+  const { code, data } = await getMediaAccountWorkDetail(route.params.id);
-      {
+  if (code === 200) {
-        id: 1,
+    dataSource.value = data;
-        commenter: '小红薯650EC5A小红薯650EC5A小红薯650EC5A',
+  }
-        content: '太麻烦了，有没有简单一点的方法',
-        like_number: 628,
-        reply_number: 200,
-        commented_at: '2024-08-13',
-      },
-      {
-        id: 2,
-        commenter: '汪汪汪',
-        content: '电影票太贵了，不去看电影了@小哥',
-        like_number: 329,
-        reply_number: 132,
-        commented_at: '2024-08-13',
-      },
-      {
-        id: 3,
-        commenter: '小情绪',
-        content:
-          '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
-        like_number: 217,
-        reply_number: 89,
-        commented_at: '2024-08-13',
-      },
-      {
-        id: 4,
-        commenter: '鱼Sir爱生活',
-        content: '8.15开始两边券不通用了，大麦的订单也同步不到淘票票了',
-        like_number: 183,
-        reply_number: 64,
-        commented_at: '2024-08-13',
-      },
-      {
-        id: 5,
-        commenter: 'Duku',
-        content: '用大麦买就可以了，把淘票票账号绑进大麦是一样的',
-        like_number: 128,
-        reply_number: 32,
-        commented_at: '2024-08-13',
-      },
-      {
-        id: 6,
-        commenter: '小情绪',
-        content:
-          '电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂电影票太贵了，不去看电影了😂',
-        like_number: 92,
-        reply_number: 73,
-        commented_at: '2024-08-13',
-      },
-      {
-        id: 7,
-        commenter: '一鸣的歌单',
-        content: '今天问的KF，直接答非所问，很气人！',
-        like_number: 81,
-        reply_number: 63,
-        commented_at: '2024-08-13',
-      },
-    ],
-  };
-
-  // const { code, data } = await getMediaAccountWorkDetail(route.params.id);
-  // if (code === 200) {
-  //   dataSource.value = data;
-  // }
 };
 onMounted(() => {
   getData();