renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(media-account): 更新节点详情页数据展示逻辑

Browse Source 
- 修改曝光量计算方式，使用观看量乘以10进行展示
- 恢复曝光量字段在noteData中的注释状态
- 移除点击率字段的展示及相关逻辑
- 调整头像组件宽度样式为max-w-126px以优化响应式表现
This commit is contained in:
rd
2025-09-23 16:46:54 +08:00
parent 9877f2e6bd
commit 73996dad2d
2 changed files with 128 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,23 +15,23 @@
</Tooltip>
</div>
</div>
<p class="mt-16px cts bold !text-24px !lh-32px">{{ dataSource.title }}</p>
<div class="mt-16px">
<ImagePreviewGroup>
<Image
:height="100"
:width="100"
class="rounded-8px mr-8px"
src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"
/>
<Image
:height="100"
:width="100"
class="rounded-8px mr-8px"
src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"
/>
</ImagePreviewGroup>
</div>
<p class="mt-16px cts bold !text-24px !lh-32px">{{ dataSource.title || '-' }}</p>
<!-- <div class="mt-16px">-->
<!-- <ImagePreviewGroup>-->
<!-- <Image-->
<!-- :height="100"-->
<!-- :width="100"-->
<!-- class="rounded-8px mr-8px"-->
<!-- src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"-->
<!-- />-->
<!-- <Image-->
<!-- :height="100"-->
<!-- :width="100"-->
<!-- class="rounded-8px mr-8px"-->
<!-- src="https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/443fb5d6-54ba-4f4e-9a9a-d0a09e83ffb8.png"-->
<!-- />-->
<!-- </ImagePreviewGroup>-->
<!-- </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">
@ -81,7 +87,17 @@
<icon-question-circle class="color-#737478" size="16" />
</Tooltip>
</div>
<span class="cts num">{{ formatNumberShow(dataSource[item.prop]) }}</span>
<span v-if="item.prop === 'exposure_number'">
{{
dataSource.view_number
? formatNumberShow({
value: dataSource.view_number * 10,
showExactValue: true,
})
: '-'
}}
</span>
<span v-else class="cts num">{{ formatNumberShow(dataSource[item.prop]) }}</span>
</div>
</div>
</div>
@ -93,9 +109,10 @@ 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: '内容被展示给用户的总次数，不代表用户实际观看。' },
{ label: '曝光量', prop: 'exposure_number', tooltip: '内容被展示给用户的总次数，不代表用户实际观看。' },
{
label: '观看量',
prop: 'view_number',
@ -121,11 +138,11 @@ const noteData = [
prop: 'share_number',
tooltip: '内容被转发或分享至其他平台或私信的次数，代表外扩传播意愿。',
},
{
label: '点击率',
prop: 'cover_click_rate',
tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
},
// {
// label: '点击率',
// prop: 'cover_click_rate',
// tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
// },
];
const router = useRouter();
@ -137,92 +154,92 @@ const handleBack = () => {
};
const getData = async () => {
dataSource.value = {
title: '挖到宝了！这个平价好物让我素颜出门都自信✨',
view_number: 424242,
like_number: 424242,
collect_number: 424242,
comment_number: 424242,
share_number: 424242,
cover_click_rate: 424242,
content: `谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
（PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
（PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
（PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
（PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）
#电影票 #电影分享 #省钱小妙招 #电影票 #电影分享 #省钱小妙招
`,
// dataSource.value = {
// title: '挖到宝了！这个平价好物让我素颜出门都自信✨',
// view_number: 424242,
// like_number: 424242,
// collect_number: 424242,
// comment_number: 424242,
// share_number: 424242,
// cover_click_rate: 424242,
// content: `谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
// 最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
// （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
// 最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
// （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
// 最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
// （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 —— 质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
// 最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3 瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
// （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: [
{
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',
},
],
};
// const { code, data } = await getMediaAccountWorkDetail(route.params.id);
// if (code === 200) {
// dataSource.value = data;
// }
const { code, data } = await getMediaAccountWorkDetail(route.params.id);
if (code === 200) {
dataSource.value = data;
}
};
onMounted(() => {
getData();