提交 599362d7 authored 作者: 王鹏飞's avatar 王鹏飞

chore: 新增在线设计图片

上级 d0c1e2b0
...@@ -49,3 +49,12 @@ export function postAIChat(data: { marketing_material_id: string; context: strin ...@@ -49,3 +49,12 @@ export function postAIChat(data: { marketing_material_id: string; context: strin
export function postGenerateImage(data: { marketing_material_id: string; context: string; type: number; chart_id: string | null }) { export function postGenerateImage(data: { marketing_material_id: string; context: string; type: number; chart_id: string | null }) {
return httpRequest.post('/api/lab/v1/experiment/marketing-ai/sky-agent3-generate-image', data) return httpRequest.post('/api/lab/v1/experiment/marketing-ai/sky-agent3-generate-image', data)
} }
// 创客贴-查询我的设计(排序+筛选)
export function getChuanKitDesignList(data: { user_flag: string; page_no: number; page_size: number; time_order: number }) {
return httpRequest.post('/api/lab/v1/experiment/marketing-ai/chuangkit-designs', data)
}
// 创客贴-服务端图片获取
export function getChuanKitSourceImage(data: { userFlag: string; designId: string }) {
return httpRequest.post('/api/lab/v1/experiment/marketing-ai/chuangkit-source-image', data)
}
<script setup>
import { getChuanKitDesignList } from '../api'
import { useUserStore } from '@/stores/user'
import { uploadFileByUrl } from '@/utils/upload'
const ChuangKitDesign = defineAsyncComponent(() => import('./ChuangKitDesign.vue'))
const userStore = useUserStore()
const model = defineModel()
const active = ref('')
const designVisible = ref(false)
const data = reactive({
list: [],
count: 0
})
async function fetchList() {
const res = await getChuanKitDesignList({ user_flag: userStore.user.id, page_no: 1, page_size: 1000, time_order: 1 })
Object.assign(data, res.data)
}
onMounted(fetchList)
async function handleClick(item) {
active.value = item.designId
model.value = await uploadFileByUrl(item.thumbUrl)
}
function onClose() {
designVisible.value = false
fetchList()
}
</script>
<template>
<div class="image-design">
<el-button type="primary" @click="designVisible = true">打开编辑器</el-button>
<ul>
<li v-for="item in data.list" :key="item.designId" :class="{ active: item.designId === active }" @click="handleClick(item)">
<img :src="item.thumbUrl" />
</li>
</ul>
<ChuangKitDesign v-model="model" @close="onClose" v-if="designVisible"></ChuangKitDesign>
</div>
</template>
<style lang="scss">
.image-design {
width: 100%;
ul {
margin: 30px auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
}
li {
width: 200px;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
&.active {
border: 5px solid var(--main-color);
}
}
img {
width: 100%;
}
}
</style>
...@@ -4,7 +4,7 @@ import { getNameByValue, materialMethodList } from '@/utils/dictionary' ...@@ -4,7 +4,7 @@ import { getNameByValue, materialMethodList } from '@/utils/dictionary'
import AppUpload from '@/components/base/AppUpload.vue' import AppUpload from '@/components/base/AppUpload.vue'
import AIChat from './AIChat.vue' import AIChat from './AIChat.vue'
const ChuangKitDesign = defineAsyncComponent(() => import('./ChuangKitDesign.vue')) const ImageDesign = defineAsyncComponent(() => import('./ImageDesign.vue'))
defineProps(['action']) defineProps(['action'])
...@@ -17,7 +17,7 @@ const form = defineModel() ...@@ -17,7 +17,7 @@ const form = defineModel()
const formRef = ref() const formRef = ref()
const rules = ref({ const rules = ref({
content: [{ required: true, message: '请输入内容名称' }] content: [{ required: true, message: '请输入' }]
}) })
const typeName = computed(() => { const typeName = computed(() => {
...@@ -36,8 +36,6 @@ async function handleSubmit() { ...@@ -36,8 +36,6 @@ async function handleSubmit() {
await handleValidate() await handleValidate()
emit('submit') emit('submit')
} }
const designVisible = ref(false)
</script> </script>
<template> <template>
...@@ -53,18 +51,20 @@ const designVisible = ref(false) ...@@ -53,18 +51,20 @@ const designVisible = ref(false)
<el-form-item label="创作方式">{{ getNameByValue(form.way, materialMethodList) }}</el-form-item> <el-form-item label="创作方式">{{ getNameByValue(form.way, materialMethodList) }}</el-form-item>
</el-form> </el-form>
<el-divider></el-divider> <el-divider></el-divider>
<el-form label-suffix=":" label-width="110" :model="form" :rules="rules" ref="formRef" :disabled="action === 'view'"> <el-form :model="form" :rules="rules" ref="formRef" :disabled="action === 'view'">
<el-form-item :label="`${typeName}资源`" prop="content"> <el-form-item prop="content">
<template v-if="form.type == 1"> <template v-if="form.type == 1">
<!-- 文本 --> <!-- 文本 -->
<el-input type="textarea" rows="14" v-model="form.content"></el-input> <el-input type="textarea" rows="14" v-model="form.content"></el-input>
</template> </template>
<template v-if="['2', '6', '7', '8'].includes(form.type)"> <template v-if="['2', '6', '7', '8'].includes(form.type)">
<div> <!-- 图片|二维码|小程序|卡券 -->
<!-- 图片|二维码|小程序|卡券 --> <template v-if="form.way == 3">
<ImageDesign v-model="form.content"></ImageDesign>
</template>
<template v-else>
<AppUpload v-model="form.content" accept="image/*"></AppUpload> <AppUpload v-model="form.content" accept="image/*"></AppUpload>
<el-button type="primary" @click="designVisible = true" style="width: 178px" v-if="form.way == 3">打开编辑器</el-button> </template>
</div>
</template> </template>
<template v-if="form.type == 3"> <template v-if="form.type == 3">
<!-- 语音 --> <!-- 语音 -->
...@@ -100,7 +100,6 @@ const designVisible = ref(false) ...@@ -100,7 +100,6 @@ const designVisible = ref(false)
<el-button type="primary" @click="handleSubmit" v-if="action !== 'view'">提交</el-button> <el-button type="primary" @click="handleSubmit" v-if="action !== 'view'">提交</el-button>
</el-row> </el-row>
</el-card> </el-card>
<ChuangKitDesign v-model="form.content" @close="designVisible = false" v-if="designVisible"></ChuangKitDesign>
</div> </div>
</template> </template>
......
...@@ -114,8 +114,8 @@ export const wayList = [ ...@@ -114,8 +114,8 @@ export const wayList = [
export const materialMethodList = [ export const materialMethodList = [
{ label: '离线上传 ', value: '2' }, { label: '离线上传 ', value: '2' },
{ label: '在线AI', value: '1' } { label: '在线AI', value: '1' },
// { label: '在线设计', value: '3' } { label: '在线设计', value: '3' }
] ]
// 使用场景 // 使用场景
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论