235 lines
9.9 KiB
Vue
235 lines
9.9 KiB
Vue
<template>
|
||
<div class="note-detail-wrap h-full flex flex-col">
|
||
<div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
|
||
<icon-left size="16" />
|
||
<span class="cts ml-8px bold">账号详情</span>
|
||
</div>
|
||
|
||
<!--作品详情-->
|
||
<div class="bg-#fff rounded-8px px-24px pb-20px max-h-552px flex flex-col mb-16px">
|
||
<div class="title-row">
|
||
<div class="flex items-center">
|
||
<span class="cts !text-18px !lh-26px mr-4px bold">作品详情</span>
|
||
<Tooltip title="展示作品的标题、图文、视频等详细内容">
|
||
<icon-question-circle class="color-#737478" size="14" />
|
||
</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 whitespace-pre-line">{{ dataSource.content }}</p>
|
||
</div>
|
||
|
||
<!--评论列表-->
|
||
<div class="bg-#fff rounded-8px pb-12px max-h-422px flex flex-col mb-16px">
|
||
<div class="title-row !px-24px">
|
||
<div class="flex items-center">
|
||
<span class="cts !text-18px !lh-26px mr-4px bold">评论列表</span>
|
||
<Tooltip title="展示用户对作品的评论">
|
||
<icon-question-circle class="color-#737478" size="14" />
|
||
</Tooltip>
|
||
</div>
|
||
</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">
|
||
<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">
|
||
<p class="mr-4px cts">{{ item.content }}</p>
|
||
<p class="cts !color-#737478 flex-shrink-0 num">{{ exactFormatTime(item.commented_at) }}</p>
|
||
</div>
|
||
<TextOverTips
|
||
:context="`${formatNumberShow(item.like_number)}点赞 ${formatNumberShow(item.reply_number)}回复`"
|
||
class="cts !color-#737478 ml-20px !w-fit max-w-200px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--作品数据-->
|
||
<div class="bg-#fff rounded-8px px-24px pb-20px h-184px flex flex-col">
|
||
<div class="title-row">
|
||
<div class="flex items-center">
|
||
<span class="cts !text-18px !lh-26px mr-4px bold">作品数据</span>
|
||
<Tooltip title="展示作品的曝光量、点赞量等数据指标">
|
||
<icon-question-circle class="color-#737478" size="14" />
|
||
</Tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 grid grid-cols-4 gap-24px">
|
||
<div v-for="(item, index) in noteData" :key="index">
|
||
<div class="flex items-center mb-4px">
|
||
<span class="cts !color-#737478 mr-4px">{{ item.label }}</span>
|
||
<Tooltip :title="item.tooltip">
|
||
<icon-question-circle class="color-#737478" size="16" />
|
||
</Tooltip>
|
||
</div>
|
||
<span class="cts num">{{ formatNumberShow(dataSource[item.prop]) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
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';
|
||
|
||
const noteData = [
|
||
// { label: '曝光量', prop: 'exposure_number', tooltip: '内容被展示给用户的总次数，不代表用户实际观看。' },
|
||
{
|
||
label: '观看量',
|
||
prop: 'view_number',
|
||
tooltip: '用户点击内容并实际观看的次数，是内容实际触达的重要指标。',
|
||
},
|
||
{
|
||
label: '点赞量',
|
||
prop: 'like_number',
|
||
tooltip: '单篇笔记获得的点赞总数，反映用户喜好程度。',
|
||
},
|
||
{
|
||
label: '收藏量',
|
||
prop: 'collect_number',
|
||
tooltip: '用户将内容保存到收藏夹的次数，代表内容被认可为“值得保留”。',
|
||
},
|
||
{
|
||
label: '评论数',
|
||
prop: 'comment_number',
|
||
tooltip: '内容下方用户留言的总数，体现用户参与度与讨论热度。',
|
||
},
|
||
{
|
||
label: '分享量',
|
||
prop: 'share_number',
|
||
tooltip: '内容被转发或分享至其他平台或私信的次数，代表外扩传播意愿。',
|
||
},
|
||
{
|
||
label: '点击率',
|
||
prop: 'cover_click_rate',
|
||
tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
|
||
},
|
||
];
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
const dataSource = ref({});
|
||
const handleBack = () => {
|
||
router.go(-1);
|
||
};
|
||
|
||
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：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）
|
||
#电影票 #电影分享 #省钱小妙招 #电影票 #电影分享 #省钱小妙招
|
||
`,
|
||
|
||
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;
|
||
// }
|
||
};
|
||
onMounted(() => {
|
||
getData();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import './style.scss';
|
||
</style>
|