Quellcode durchsuchen

feat(marketingEdit): 实现画布保存功能并优化调整逻辑

- 为保存按钮添加点击事件处理函数 handleSave
- 在保存前更新当前激活画布的快照
- 上传每个画布的预览图并生成线上地址
- 优化画布销毁逻辑,安全移除DOM元素避免NotFoundError
- 调整画布容器样式,移除最小高度限制
- 注释掉画布宽度表单项(固定为800)
panqiuyao vor 2 Wochen
Ursprung
Commit
b8ba5873a3

+ 34 - 5
frontend/src/views/components/marketingEdit/index.vue

@@ -250,6 +250,34 @@ export default {
       }
       return style
     },
+    async handleSave(){
+      // 先确保当前激活画布的快照是最新的
+      this.saveCanvasSnapshot()
+      // 上传每个画布的预览图,生成线上地址
+      const payload = await Promise.all(this.data.map(async (item, idx) => {
+        let previewUrl = item.preview || ''
+        if(item.preview && typeof item.preview === 'string' && item.preview.indexOf('data:') === 0){
+          try{
+            const res = await uploadBaseImg({ image: item.preview })
+            previewUrl = res?.data?.url || res?.url || previewUrl
+          }catch (e){
+            console.warn('[marketingEdit] upload preview failed', e)
+          }
+        }
+        return {
+          index: idx,
+          preview: previewUrl,
+          canvas_json: item.canvas_json || '',
+          width: item.width,
+          height: item.height,
+          bg_color: item.bg_color,
+          name: item.name || '',
+          tpl_url: item.tpl_url || '',
+          image_path: item.image_path || ''
+        }
+      }))
+      this.$emit('save', payload)
+    },
     saveCanvasSnapshot(targetIndex){
       const snapshotIndex = typeof targetIndex === 'number' ? targetIndex : this.index
       if(!this.fcanvas || snapshotIndex === undefined || snapshotIndex === null) return
@@ -286,12 +314,14 @@ export default {
       }catch(err){
         console.warn('[marketingEdit] dispose canvas failed', err)
       }finally{
-        if(wrapper && parentNode){
+        // 安全移除 DOM,避免 NotFoundError
+        if(wrapper && parentNode && parentNode.contains(wrapper)){
           parentNode.removeChild(wrapper)
-        }else if(canvasEl && parentNode){
-          parentNode.removeChild(canvasEl)
+        }else if(canvasEl && canvasEl.parentNode && canvasEl.parentNode.contains(canvasEl)){
+          canvasEl.parentNode.removeChild(canvasEl)
         }
-        if(parentNode && this.fcanvasId){
+        // 仅当当前 id 对应的 canvas 不存在时,才补一个占位 canvas,避免重复
+        if(parentNode && this.fcanvasId && !document.getElementById(this.fcanvasId)){
           const placeholder = document.createElement('canvas')
           placeholder.id = this.fcanvasId
           placeholder.width = Number(this.this_canvas?.width) || FIXED_CANVAS_WIDTH
@@ -408,7 +438,6 @@ export default {
   padding: 0;
   box-sizing: border-box;
   position: relative;
-  min-height: 200px;
   overflow: hidden;
   transition: background 0.2s, box-shadow 0.2s, border 0.2s;
 }

+ 3 - 3
frontend/src/views/components/marketingEdit/tpl/header.js

@@ -29,7 +29,7 @@ export  default function tpl(){
                   </el-dropdown>
             <el-button @click="addCanvas"  class="mar-left-10">新增画布</el-button>
             <el-button class="mar-left-10"  v-if="!isEmpty"  @click="handleAdjustCanvas">调整画布</el-button>
-            <el-button type="primary">保存</el-button>
+            <el-button type="primary" @click="handleSave">保存</el-button>
            </div>
            
             <!-- 新增:调整画布尺寸弹窗 -->
@@ -38,9 +38,9 @@ export  default function tpl(){
                 <el-form-item label="画布名称">
                   <el-input v-model.number="canvasForm.name" placeholder="请输入宽度"></el-input>
                 </el-form-item>
-                <el-form-item label="宽度">
+          <!--      <el-form-item label="宽度">
                   <div class="fixed-width-tip">800(固定)</div>
-                </el-form-item>
+                </el-form-item>-->
                 <el-form-item label="高度">
                   <el-input v-model.number="canvasForm.height" placeholder="请输入高度"></el-input>
                 </el-form-item>