perf: 修改路由配置、新增写手路由
This commit is contained in:
rd
@ -212,7 +212,7 @@ export default {
|
||||
action="/"
|
||||
draggable
|
||||
custom-request={uploadVideo}
|
||||
accept=".mp4,.webm,.ogg,.mov,.avi,.flv,.wmv,.mkv"
|
||||
accept=".mp4,.mov,.avi,.flv,.wmv"
|
||||
show-file-list={false}
|
||||
>
|
||||
{{
|
||||
@ -386,10 +386,10 @@ export default {
|
||||
onInput={onChange}
|
||||
placeholder="请输入作品描述"
|
||||
size="large"
|
||||
class="h-200px !w-784px"
|
||||
class="h-300px !w-784px"
|
||||
show-word-limit
|
||||
max-length={1000}
|
||||
auto-size={{ minRows: 7, maxRows: 9 }}
|
||||
auto-size={{ minRows: 7, maxRows: 12 }}
|
||||
/>
|
||||
</FormItem>
|
||||
{isVideo.value ? renderVideo() : renderImage()}
|
||||
|
||||
@ -12,7 +12,8 @@ import {
|
||||
Textarea,
|
||||
} from '@arco-design/web-vue';
|
||||
import { useClipboard } from '@vueuse/core';
|
||||
import { getWriterLinksGenerate, getTemplateUrl } from '@/api/all/generationWorkshop';
|
||||
import { getWriterLinksGenerate, getTemplateUrl, postWorksByLink, postWorksByFile } from '@/api/all/generationWorkshop';
|
||||
import { generateFullUrl } from '@/utils/tools';
|
||||
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
import icon1 from '@/assets/img/media-account/icon-feedback-fail.png';
|
||||
@ -33,17 +34,10 @@ const UPLOAD_TYPE = {
|
||||
|
||||
// 初始表单数据
|
||||
const INITIAL_FORM = {
|
||||
linkUrl: '',
|
||||
link: '',
|
||||
writerLink: '',
|
||||
};
|
||||
|
||||
// 模拟数据生成
|
||||
const generateMockData = (count = 20) =>
|
||||
Array.from({ length: count }, (_, i) => ({
|
||||
id: `item-${i + 1}`,
|
||||
content: '挖到宝了！这个平价好物让我素颜出门都自信✨挖到宝了！这个平价好物让我素颜出门都自信✨',
|
||||
}));
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const update = inject('update');
|
||||
@ -55,8 +49,7 @@ export default {
|
||||
const uploadType = ref(UPLOAD_TYPE.LINK);
|
||||
const taskStatus = ref(TASK_STATUS.DEFAULT);
|
||||
const form = ref(cloneDeep(INITIAL_FORM));
|
||||
const uploadList = ref([]);
|
||||
const totalCount = ref(0);
|
||||
const works = ref([]);
|
||||
|
||||
// 剪贴板功能
|
||||
const { copy } = useClipboard({ source: form.value.writerLink });
|
||||
@ -83,26 +76,18 @@ export default {
|
||||
uploadType.value = UPLOAD_TYPE.LINK;
|
||||
taskStatus.value = TASK_STATUS.DEFAULT;
|
||||
form.value = cloneDeep(INITIAL_FORM);
|
||||
uploadList.value = [];
|
||||
totalCount.value = 0;
|
||||
works.value = [];
|
||||
};
|
||||
|
||||
const getWriterLink = async () => {
|
||||
const data = {
|
||||
code: 1,
|
||||
};
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('writer_code', data.code);
|
||||
form.value.writerLink = url.toString();
|
||||
console.log('getWriterLinksGenerate -----writer-code---->', form.value.writerLink);
|
||||
|
||||
// const { code, data } = await getWriterLinksGenerate();
|
||||
// if (code === 200) {
|
||||
// const url = new URL(window.location.href);
|
||||
// url.searchParams.set('writer_code', data.code);
|
||||
// form.value.writerLink = url.toString();
|
||||
// console.log('getWriterLinksGenerate -----writer-code---->', form.value.writerLink);
|
||||
// }
|
||||
const { code, data } = await getWriterLinksGenerate();
|
||||
if (code === 200) {
|
||||
const url = router.resolve({
|
||||
path: `/writer/manuscript/list/${data.code}`,
|
||||
}).href;
|
||||
form.value.writerLink = generateFullUrl(url);
|
||||
console.log('getWriterLinksGenerate -----writer-code---->', form.value.writerLink);
|
||||
}
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
@ -121,15 +106,17 @@ export default {
|
||||
handleHandwriteSubmit();
|
||||
return;
|
||||
}
|
||||
|
||||
taskStatus.value = TASK_STATUS.LOADING;
|
||||
|
||||
// 模拟上传过程
|
||||
setTimeout(() => {
|
||||
taskStatus.value = TASK_STATUS.SUCCESS;
|
||||
totalCount.value = 30;
|
||||
uploadList.value = generateMockData();
|
||||
}, 2000);
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
taskStatus.value = TASK_STATUS.LOADING;
|
||||
const { link } = form.value;
|
||||
const { code, data } = await postWorksByLink({ link });
|
||||
if (code === 200) {
|
||||
taskStatus.value = TASK_STATUS.SUCCESS;
|
||||
works.value = data;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
|
||||
// 提交处理
|
||||
@ -156,15 +143,28 @@ export default {
|
||||
};
|
||||
|
||||
// 文件上传处理
|
||||
const handleUpload = async (file) => {
|
||||
console.log('handleUpload', file);
|
||||
taskStatus.value = TASK_STATUS.LOADING;
|
||||
const handleUpload = async (option) => {
|
||||
try {
|
||||
taskStatus.value = TASK_STATUS.LOADING;
|
||||
|
||||
setTimeout(() => {
|
||||
taskStatus.value = TASK_STATUS.SUCCESS;
|
||||
totalCount.value = 30;
|
||||
uploadList.value = generateMockData();
|
||||
}, 2000);
|
||||
const {
|
||||
fileItem: { file },
|
||||
} = option;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const { code, data } = await postWorksByFile(formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
if (code === 200) {
|
||||
taskStatus.value = TASK_STATUS.SUCCESS;
|
||||
works.value = data;
|
||||
}
|
||||
} finally {
|
||||
taskStatus.value = TASK_STATUS.DEFAULT;
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转编辑
|
||||
@ -174,11 +174,9 @@ export default {
|
||||
};
|
||||
|
||||
// 删除项目
|
||||
const onDelete = (item) => {
|
||||
console.log('onDelete', item);
|
||||
uploadList.value = uploadList.value.filter((i) => i.id !== item.id);
|
||||
totalCount.value = uploadList.value.length;
|
||||
AMessage.success('删除成功');
|
||||
const onDelete = (index) => {
|
||||
works.value.splice(index, 1);
|
||||
// AMessage.success('删除成功');
|
||||
};
|
||||
|
||||
// 上传方式切换
|
||||
@ -200,11 +198,11 @@ export default {
|
||||
|
||||
// 渲染链接上传表单
|
||||
const renderLinkForm = () => (
|
||||
<FormItem label="链接地址">
|
||||
<FormItem label="链接地址" field="link" required>
|
||||
<Textarea
|
||||
v-model={form.value.linkUrl}
|
||||
v-model={form.value.link}
|
||||
size="large"
|
||||
placeholder="请输入..."
|
||||
placeholder="请输入链接地址"
|
||||
autoSize={{ minRows: 5, maxRows: 8 }}
|
||||
/>
|
||||
</FormItem>
|
||||
@ -212,8 +210,8 @@ export default {
|
||||
|
||||
// 渲染手写上传表单
|
||||
const renderHandwriteForm = () => (
|
||||
<FormItem label="上传链接">
|
||||
<Input v-model={form.value.writerLink} placeholder="请输入..." disabled size="large" />
|
||||
<FormItem label="上传链接" field="writerLink">
|
||||
<Input v-model={form.value.writerLink} placeholder="请输入上传链接" disabled size="large" />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
@ -267,18 +265,18 @@ export default {
|
||||
// 渲染成功状态
|
||||
const renderSuccessState = () => (
|
||||
<div class="flex flex-col py-12px max-h-540px rounded-8px bg-#F7F8FA">
|
||||
<span class="tip mb-8px px-12px fs-14px !text-left">共 {totalCount.value} 个内容稿件</span>
|
||||
<span class="tip mb-8px px-12px fs-14px !text-left">共 {works.value.length} 个内容稿件</span>
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden px-12px">
|
||||
{uploadList.value.map((item) => (
|
||||
{works.value.map((item, index) => (
|
||||
<div key={item.id} class="rounded-8px bg-#fff px-8px py-8px flex justify-between items-center mt-8px">
|
||||
<div class="flex-1 overflow-hidden flex items-center mr-12px">
|
||||
<img width="32" height="32" class="rounded-3px mr-8px" />
|
||||
<TextOverTips class="text" context={item.content} />
|
||||
<img src={item.cover} width="32" height="32" class="rounded-3px mr-8px" />
|
||||
<TextOverTips class="text" context={item.title} />
|
||||
</div>
|
||||
<icon-delete
|
||||
size="16px"
|
||||
class="color-#737478 cursor-pointer hover:!color-#211F24"
|
||||
onClick={() => onDelete(item)}
|
||||
onClick={() => onDelete(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
@ -364,7 +362,15 @@ export default {
|
||||
footer: () => renderFooterButtons(),
|
||||
}}
|
||||
>
|
||||
<Form ref="formRef" model={form.value} layout="horizontal" auto-label-width>
|
||||
<Form
|
||||
ref={formRef}
|
||||
rules={{
|
||||
link: [{ required: true, message: '请输入链接地址' }],
|
||||
}}
|
||||
model={form.value}
|
||||
layout="horizontal"
|
||||
auto-label-width
|
||||
>
|
||||
{isDefault.value && (
|
||||
<FormItem label="上传方式">
|
||||
<RadioGroup v-model={uploadType.value} onChange={onUploadTypeChange}>
|
||||
|
||||
Reference in New Issue
Block a user