feat: 稿件评论
This commit is contained in:
rd
@ -108,8 +108,8 @@ export const patchShareWorksConfirm = (id: string, shareCode: string) => {
|
||||
};
|
||||
|
||||
// 内容稿件-评论(客户)
|
||||
export const postShareWorksComments = (id: string, shareCode: string) => {
|
||||
return Http.post(`/v1/share/works/${id}/comments`, {}, {
|
||||
export const postShareWorksComments = (id: string, shareCode: string, params = {}) => {
|
||||
return Http.post(`/v1/share/works/${id}/comments`, params, {
|
||||
headers: { 'share-code': shareCode },
|
||||
});
|
||||
};
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
6
src/assets/svg/svg-comment.svg
Normal file
6
src/assets/svg/svg-comment.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M4.99935 6.33398C5.36739 6.33416 5.66602 6.63257 5.66602 7.00065C5.66602 7.36873 5.36739 7.66714 4.99935 7.66732H4.33333C3.96514 7.66732 3.66667 7.36884 3.66667 7.00065C3.66667 6.63246 3.96514 6.33398 4.33333 6.33398H4.99935Z" fill="#55585F"/>
|
||||
<path d="M8.33333 6.33398C8.70152 6.33398 9 6.63246 9 7.00065C9 7.36884 8.70152 7.66732 8.33333 7.66732H7.66602C7.29783 7.66732 6.99935 7.36884 6.99935 7.00065C6.99935 6.63246 7.29783 6.33398 7.66602 6.33398H8.33333Z" fill="#55585F"/>
|
||||
<path d="M11.666 6.33398C12.0341 6.33416 12.3327 6.63257 12.3327 7.00065C12.3327 7.36873 12.0341 7.66714 11.666 7.66732H11C10.6318 7.66732 10.3333 7.36884 10.3333 7.00065C10.3333 6.63246 10.6318 6.33398 11 6.33398H11.666Z" fill="#55585F"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.666 1.33398C15.0342 1.33398 15.3327 1.63246 15.3327 2.00065V12.0007C15.3327 12.3688 15.0342 12.6673 14.666 12.6673H9.94206L8.4707 14.1387C8.21035 14.399 7.78834 14.399 7.528 14.1387L6.05664 12.6673H1.33268C0.964492 12.6673 0.666016 12.3688 0.666016 12.0007V2.00065C0.666016 1.63246 0.964492 1.33398 1.33268 1.33398H14.666ZM1.99935 11.334H6.33268C6.50949 11.334 6.67901 11.4043 6.80404 11.5293L7.99935 12.7246L9.19466 11.5293L9.24349 11.485C9.36213 11.3878 9.51129 11.334 9.66602 11.334H13.9993V2.66732H1.99935V11.334Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -1,175 +0,0 @@
|
||||
<script lang="jsx">
|
||||
import { Image, Spin, Button } from '@arco-design/web-vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
|
||||
import { RESULT_LIST, ENUM_OPINION } from './constants';
|
||||
|
||||
import icon1 from '@/assets/img/creative-generation-workshop/icon-line.png';
|
||||
|
||||
const _iconMap = new Map([
|
||||
[1, { icon: <icon-check-circle-fill size={16} class="color-#25C883" /> }],
|
||||
[2, { icon: <icon-exclamation-circle-fill size={16} class="color-#F64B31" /> }],
|
||||
[3, { icon: <icon-exclamation-circle-fill size={16} class="color-#FFAE00" /> }],
|
||||
[4, { icon: <icon-exclamation-circle-fill size={16} class="color-#939499" /> }],
|
||||
]);
|
||||
|
||||
const data1 = [
|
||||
{
|
||||
label: '色情检测',
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
label: '涉政检测',
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
label: '涉政正负向检测',
|
||||
level: 3,
|
||||
},
|
||||
{
|
||||
label: '涉政正负向检测',
|
||||
level: 3,
|
||||
},
|
||||
{
|
||||
label: '涉政正负向检测',
|
||||
level: 3,
|
||||
},
|
||||
{
|
||||
label: '涉政正负向检测',
|
||||
level: 3,
|
||||
},
|
||||
{
|
||||
label: '暴恐检测',
|
||||
level: 4,
|
||||
},
|
||||
{
|
||||
label: '暴恐检测',
|
||||
level: 4,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
isExpand: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
emits: ['toggle'],
|
||||
setup(props, { emit, expose }) {
|
||||
return () => (
|
||||
<section class="py-16px absolute right-16px w-440px h-full">
|
||||
<div class="ai-suggest-box p-24px">
|
||||
<div class="mb-16px w-full flex justify-between">
|
||||
<div class="mb-24px relative w-fit">
|
||||
<span class="ai-text">AI 智能审核</span>
|
||||
<img src={icon1} class="w-80px h-10.8px absolute bottom-1px left--9px" />
|
||||
</div>
|
||||
<icon-menu-unfold
|
||||
size={20}
|
||||
class="color-#55585F cursor-pointer hover:color-#6D4CFE"
|
||||
onClick={() => emit('toggle', false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="result-box p-16px rounded-8px mb-16px">
|
||||
<div class="flex items-center justify-between mb-16px">
|
||||
<p class="cts bold !color-#000 !text-16px">审核结果</p>
|
||||
<Button type="text" class="!color-#6D4CFE hover:!color-#8A70FE">
|
||||
展开详情
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
{RESULT_LIST.map((item, index) => (
|
||||
<div class="flex flex-col justify-center items-center flex-1 result-item" key={index}>
|
||||
<span class={`s1 ${item.class}`}>30</span>
|
||||
<span class="cts mt-4px !lh-20px !text-12px !color-#737478">{item.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-box p-16px rounded-8px mb-16px">
|
||||
<p class="cts bold !color-#000 !text-16px mb-16px">敏感词检测</p>
|
||||
<div class="grid grid-cols-3 gap-x-24px gap-y-8px">
|
||||
{
|
||||
data1.map((item, index) => (
|
||||
<div class="audit-item" key={index}>
|
||||
<div class="flex items-center">
|
||||
{_iconMap.get(item.level)?.icon}
|
||||
<TextOverTips context={item.label} class="cts ml-4px" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-box p-16px rounded-8px mb-16px">
|
||||
<p class="cts bold !color-#000 !text-16px mb-16px">图片内容违规检测</p>
|
||||
<p class="cts bold !color-#000 !text-16px mb-16px">图片文字违规检测</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-suggest-box {
|
||||
.cts {
|
||||
color: #939499;
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
&.bold {
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
}
|
||||
width: 440px;
|
||||
height: fit-content;
|
||||
max-height: 100%;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(126deg, #eef2fd 8.36%, #f5ebfe 49.44%, #fdebf3 90.52%);
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
.ai-text {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.result-box {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(4px);
|
||||
.result-item {
|
||||
.s1 {
|
||||
color: var(--Brand-6, #6d4cfe);
|
||||
font-family: $font-family-manrope-regular;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px; /* 133.333% */
|
||||
}
|
||||
&:first-child {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 32px;
|
||||
background: var(--Border-1, #d7d7d9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,266 @@
|
||||
<script lang="jsx">
|
||||
import { Image, Spin, Button, Input } from '@arco-design/web-vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import SvgIcon from '@/components/svg-icon/index.vue';
|
||||
|
||||
import { RESULT_LIST, ENUM_OPINION, formatRelativeTime } from '../../constants';
|
||||
import { postShareWorksComments, deleteShareWorksComments } from '@/api/all/generationWorkshop.ts';
|
||||
import { exactFormatTime } from '@/utils/tools.ts';
|
||||
|
||||
import icon1 from '@/assets/img/creative-generation-workshop/icon-line.png';
|
||||
import icon2 from '@/assets/img/creative-generation-workshop/icon-avatar-default.png';
|
||||
import icon3 from '@/assets/img/error-img.png';
|
||||
|
||||
const _iconMap = new Map([
|
||||
[1, { icon: <icon-check-circle-fill size={16} class="color-#25C883 flex-shrink-0" /> }],
|
||||
[2, { icon: <icon-exclamation-circle-fill size={16} class="color-#F64B31 flex-shrink-0" /> }],
|
||||
[3, { icon: <icon-exclamation-circle-fill size={16} class="color-#FFAE00 flex-shrink-0" /> }],
|
||||
[4, { icon: <icon-exclamation-circle-fill size={16} class="color-#939499 flex-shrink-0" /> }],
|
||||
]);
|
||||
|
||||
const data1 = [
|
||||
{
|
||||
label: '色情检测',
|
||||
level: 1,
|
||||
},
|
||||
{
|
||||
label: '涉政检测',
|
||||
level: 2,
|
||||
},
|
||||
{
|
||||
label: '涉政正负向检测',
|
||||
level: 3,
|
||||
},
|
||||
{
|
||||
label: '涉政正负向检测',
|
||||
level: 3,
|
||||
},
|
||||
{
|
||||
label: '涉政正负向检测',
|
||||
level: 3,
|
||||
},
|
||||
{
|
||||
label: '涉政正负向检测',
|
||||
level: 3,
|
||||
},
|
||||
{
|
||||
label: '暴恐检测',
|
||||
level: 4,
|
||||
},
|
||||
{
|
||||
label: '暴恐检测',
|
||||
level: 4,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
isExpand: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
dataSource: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
emits: ['toggle', 'updateComment', 'deleteComment'],
|
||||
setup(props, { emit, expose }) {
|
||||
const route = useRoute();
|
||||
|
||||
const isCollapse = ref(false);
|
||||
const comment = ref('');
|
||||
const isReplay = ref(false);
|
||||
const commentId = ref(undefined);
|
||||
|
||||
const onComment = async () => {
|
||||
const { code, data } = await postShareWorksComments(props.dataSource.id, route.params.shareCode, {
|
||||
content: comment.value,
|
||||
comment_id: commentId.value,
|
||||
});
|
||||
if (code === 200) {
|
||||
emit('updateComment');
|
||||
comment.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const onClearComment = () => {
|
||||
isReplay.value = false;
|
||||
commentId.value = undefined;
|
||||
comment.value = '';
|
||||
};
|
||||
|
||||
const deleteComment = async (comment_id) => {
|
||||
emit('deleteComment', comment_id);
|
||||
|
||||
deleteShareWorksComments(props.dataSource.id, comment_id, route.params.shareCode);
|
||||
};
|
||||
|
||||
const getCommentName = (item) => {
|
||||
if (item.commenter_id === 0) {
|
||||
return '佚名';
|
||||
}
|
||||
// 姓名脱敏：保留首尾字符，中间拼接6个****
|
||||
const maskName = (name) => {
|
||||
if (!name || name.length <= 1) return name; // 单字符不脱敏
|
||||
return name[0] + '****' + name[name.length - 1];
|
||||
};
|
||||
// 手机号脱敏：保留前3位和后4位，中间4位替换为****
|
||||
const maskMobile = (mobile) => mobile?.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
|
||||
|
||||
const maskedName = maskName(item.commenter?.name);
|
||||
const maskedMobile = maskMobile(item.commenter?.mobile);
|
||||
return maskedName || maskedMobile;
|
||||
};
|
||||
|
||||
return () => (
|
||||
<section class="py-16px absolute right-16px w-440px h-full overflow-hidden">
|
||||
<div class="ai-suggest-box py-24px flex flex-col">
|
||||
<div class="mb-16px w-full flex justify-between px-24px">
|
||||
<div class="relative w-fit">
|
||||
<span class="ai-text">AI 智能审核</span>
|
||||
<img src={icon1} class="w-80px h-10.8px absolute bottom-1px left--9px" />
|
||||
</div>
|
||||
<icon-menu-unfold
|
||||
size={20}
|
||||
class="color-#55585F cursor-pointer hover:color-#6D4CFE"
|
||||
onClick={() => emit('toggle', false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/**主体 */}
|
||||
<div class="flex-1 overflow-y-auto px-24px">
|
||||
<div class="result-box p-16px rounded-8px">
|
||||
<div class="flex items-center justify-between mb-16px">
|
||||
<p class="cts bold !color-#000 !text-16px">审核结果</p>
|
||||
<Button
|
||||
type="text"
|
||||
class="!color-#6D4CFE hover:!color-#8A70FE"
|
||||
onClick={() => (isCollapse.value = !isCollapse.value)}
|
||||
>
|
||||
{isCollapse.value ? '展开详情' : '收起详情'}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
{RESULT_LIST.map((item, index) => (
|
||||
<div class="flex flex-col justify-center items-center flex-1 result-item" key={index}>
|
||||
<span class={`s1 ${item.class}`}>30</span>
|
||||
<span class="cts mt-4px !lh-20px !text-12px !color-#737478">{item.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/**敏感词检测 */}
|
||||
<div class={`collapse-box overflow-hidden ${isCollapse.value ? 'h-0 ' : 'h-auto'}`}>
|
||||
<div class="result-box p-16px rounded-8px mt-16px">
|
||||
<p class="cts bold !color-#000 !text-16px mb-16px">敏感词检测</p>
|
||||
<div class="grid grid-cols-3 gap-x-24px gap-y-8px">
|
||||
{data1.map((item, index) => (
|
||||
<div class="audit-item" key={index}>
|
||||
<div class="flex items-center h-20px">
|
||||
{_iconMap.get(item.level)?.icon}
|
||||
<TextOverTips context={item.label} class="cts ml-4px !color-#000" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-box p-16px rounded-8px mt-16px">
|
||||
<p class="cts bold !color-#000 !text-16px mb-16px">图片内容违规检测</p>
|
||||
<div class="grid grid-cols-3 gap-x-24px gap-y-8px mb-16px">
|
||||
{data1.map((item, index) => (
|
||||
<div class="audit-item" key={index}>
|
||||
<div class="flex items-center h-20px">
|
||||
{_iconMap.get(item.level)?.icon}
|
||||
<TextOverTips context={item.label} class="cts ml-4px !color-#000" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p class="cts bold !color-#000 !text-16px mb-16px">图片文字违规检测</p>
|
||||
<div class="grid grid-cols-3 gap-x-24px gap-y-8px">
|
||||
{data1.map((item, index) => (
|
||||
<div class="audit-item" key={index}>
|
||||
<div class="flex items-center h-20px">
|
||||
{_iconMap.get(item.level)?.icon}
|
||||
<TextOverTips context={item.label} class="cts ml-4px !color-#000" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 评论与回复 */}
|
||||
<div class="comment-box">
|
||||
<p class="my-16px">
|
||||
<span class="cts bold cm !text-16px !lh-24px mr-8px">评论</span>
|
||||
{props.dataSource.comments?.length > 0 && (
|
||||
<span class="cts !text-16px !lh-24px bold">{props.dataSource.comments?.length}</span>
|
||||
)}
|
||||
</p>
|
||||
<div class="comment-list flex flex-col my-16px rounded-8px">
|
||||
{props.dataSource.comments?.map((item) => (
|
||||
<div class="comment-item flex px-12px py-8px" key={item.id}>
|
||||
<Image
|
||||
src={item.commenter_id === 0 ? icon2 : item.commenter?.head_image}
|
||||
width={40}
|
||||
height={40}
|
||||
preview={false}
|
||||
fit="cover"
|
||||
class="rounded-50% mr-13px"
|
||||
v-slots={{
|
||||
error: () => <img src={icon3} class="w-40 h-40 rounded-50%" />,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="flex flex-col flex-1">
|
||||
<div class="flex justify-between">
|
||||
<p class="mb-4px">
|
||||
<span class="cts !color-#211F24 mr-8px">{getCommentName(item)}</span>
|
||||
<span class="cts !color-#939499">{formatRelativeTime(item.created_at)}</span>
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<SvgIcon
|
||||
name="svg-comment"
|
||||
size={16}
|
||||
class="color-#55585F mr-12px cursor-pointer hover:color-#6D4CFE"
|
||||
/>
|
||||
<icon-delete
|
||||
class="cursor-pointer color-#55585F hover:color-#6D4CFE"
|
||||
size={16}
|
||||
onClick={() => deleteComment(item.id)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="cts !color-#211F24">{item.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input size="large" placeholder="输入评论" v-model={comment.value} onPressEnter={onComment} />
|
||||
{comment.value && (
|
||||
<div class="flex justify-end mt-12px">
|
||||
<Button type="outline" class="mr-12px rounded-8px" size="medium" onClick={onClearComment}>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="primary" class="rounded-8px" size="medium" onClick={onComment}>
|
||||
发送
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
.ai-suggest-box {
|
||||
width: 440px;
|
||||
height: fit-content;
|
||||
max-height: 100%;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(126deg, #eef2fd 8.36%, #f5ebfe 49.44%, #fdebf3 90.52%);
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
.cts {
|
||||
color: #939499;
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
&.bold {
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
}
|
||||
.ai-text {
|
||||
font-family: $font-family-medium;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.result-box {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(4px);
|
||||
.result-item {
|
||||
.s1 {
|
||||
color: var(--Brand-6, #6d4cfe);
|
||||
font-family: $font-family-manrope-regular;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
}
|
||||
&:first-child {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 32px;
|
||||
background: var(--Border-1, #d7d7d9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.collapse-box {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.comment-box {
|
||||
.cm {
|
||||
background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
:deep(.arco-input-wrapper) {
|
||||
padding: 8px 16px;
|
||||
height: 38px;
|
||||
border-radius: 8px !important;
|
||||
background-color: rgba(255, 255, 255, 0.8) !important;
|
||||
color: #211f24 !important;
|
||||
&:hover {
|
||||
border-color: #6d4cfe !important;
|
||||
}
|
||||
}
|
||||
.comment-list {
|
||||
backdrop-filter: blur(4px);
|
||||
.comment-item {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,4 +24,44 @@ export const RESULT_LIST = [
|
||||
export const ENUM_OPINION = {
|
||||
wait: 0, // 待确认
|
||||
confirm: 1, // 已确认
|
||||
};
|
||||
};
|
||||
|
||||
export const formatRelativeTime = (date: number): string => {
|
||||
const target = dayjs(date * 1000);
|
||||
|
||||
if (!target.isValid()) return '';
|
||||
|
||||
const now = dayjs();
|
||||
// 处理未来时间
|
||||
if (target.isAfter(now)) return '刚刚';
|
||||
|
||||
const diffInMinutes = now.diff(target, 'minute');
|
||||
const diffInHours = now.diff(target, 'hour');
|
||||
const diffInDays = now.diff(target, 'day');
|
||||
const diffInYears = now.diff(target, 'year');
|
||||
|
||||
// 1分钟内
|
||||
if (diffInMinutes < 1) {
|
||||
return '刚刚';
|
||||
}
|
||||
// 1分钟 ~ 1小时
|
||||
else if (diffInMinutes < 60) {
|
||||
return `${diffInMinutes}分钟前`;
|
||||
}
|
||||
// 1小时 ~ 24小时
|
||||
else if (diffInHours < 24) {
|
||||
return `${diffInHours}小时前`;
|
||||
}
|
||||
// 1天 ~ 30天
|
||||
else if (diffInDays < 30) {
|
||||
return `${diffInDays}天前`;
|
||||
}
|
||||
// 超过30天但不到1年
|
||||
else if (diffInYears < 1) {
|
||||
return target.format('MM-DD HH:mm');
|
||||
}
|
||||
// 超过1年
|
||||
else {
|
||||
return target.format('YYYY-MM-DD HH:mm');
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<script lang="jsx">
|
||||
import { Image, Spin, Button } from '@arco-design/web-vue';
|
||||
import AiSuggest from './aiSuggest.vue';
|
||||
import AiSuggest from './components/ai-suggest/';
|
||||
|
||||
import { getShareWorksList, getShareWorksDetail, patchShareWorksConfirm } from '@/api/all/generationWorkshop.ts';
|
||||
import { convertVideoUrlToCoverUrl, exactFormatTime } from '@/utils/tools.ts';
|
||||
import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
|
||||
import { RESULT_LIST, ENUM_OPINION } from './constants';
|
||||
import { useUserStore } from '@/stores';
|
||||
|
||||
import icon1 from '@/assets/logo.svg';
|
||||
import icon2 from '@/assets/img/creative-generation-workshop/icon-confirm.png';
|
||||
@ -15,6 +16,7 @@ export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const dataSource = ref({});
|
||||
const shareWorks = ref({});
|
||||
@ -54,6 +56,7 @@ export default {
|
||||
try {
|
||||
dataSource.value = {};
|
||||
loading.value = true;
|
||||
|
||||
const { id } = route.params;
|
||||
const { code, data } = await getShareWorksDetail(id, shareCode.value);
|
||||
if (code === 200) {
|
||||
@ -65,6 +68,14 @@ export default {
|
||||
}
|
||||
};
|
||||
|
||||
const updateCommentList = async () => {
|
||||
const { id } = route.params;
|
||||
const { code, data } = await getShareWorksDetail(id, shareCode.value);
|
||||
if (code === 200) {
|
||||
dataSource.value.comments = data.comments;
|
||||
}
|
||||
};
|
||||
|
||||
const getShareWorks = async () => {
|
||||
const { code, data } = await getShareWorksList(shareCode.value);
|
||||
if (code === 200) {
|
||||
@ -138,7 +149,18 @@ export default {
|
||||
dataSource.value.customer_opinion = ENUM_OPINION.confirm;
|
||||
}
|
||||
};
|
||||
const onUpdateComment = () => {
|
||||
updateCommentList();
|
||||
};
|
||||
const onDeleteComment = (id) => {
|
||||
const index = dataSource.value.comments.findIndex((item) => item.id === id);
|
||||
if (index === -1) return;
|
||||
|
||||
console.log({ index });
|
||||
dataSource.value.comments.splice(index, 1);
|
||||
};
|
||||
const renderConfirmBtn = () => {
|
||||
if (userStore.isLogin) return null;
|
||||
if (dataSource.value.customer_opinion === ENUM_OPINION.confirm) return null;
|
||||
|
||||
return (
|
||||
@ -228,7 +250,13 @@ export default {
|
||||
)}
|
||||
</section>
|
||||
{isExpand.value && (
|
||||
<AiSuggest isExpand={isExpand.value} onToggle={(expand) => (isExpand.value = expand)} />
|
||||
<AiSuggest
|
||||
isExpand={isExpand.value}
|
||||
dataSource={dataSource.value}
|
||||
onToggle={(expand) => (isExpand.value = expand)}
|
||||
onUpdateComment={onUpdateComment}
|
||||
onDeleteComment={onDeleteComment}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user