mod:新增画布 编辑画布

frontend/src/views/components/PictureEditor/mixin/view/index.js

@@ -9,10 +9,8 @@ const viewMixins = {
         aspect: 1 // 宽高比  >1 横屏  ===1 正方形  小于1  竖屏
       },
       canvas: {
-        name: '画布1',
         width: 500,
-        height: 500,
-        color:'#fff',
+        height: 500
 
       },
       viewStatus: false,
@@ -95,8 +93,15 @@ const viewMixins = {
       this.fcanvas.requestRenderAll();
     },
     async viewInit() {
+
+      this.view.width = this.data[this.select].width
+      this.view.height = this.data[this.select].height
+      this.canvas.width = this.data[this.select].width
+      this.canvas.height = this.data[this.select].height
+      this.viewStatus = true;
+
         // 没有传值进来 默认基准宽度为基准算最大高度
-       await this.setMax()
+       // await this.setMax()
       //  if(this.resize) window.addEventListener('resize', this.handleResize);
     },
     // 获取容器的宽高最大值

frontend/src/views/components/marketingEdit/index.vue

@@ -49,6 +49,9 @@ export default {
   computed: {
     isEmpty(){
       return this.data.length === 0
+    },
+    this_canvas(){
+      return this.data[this.select]
     }
   },
   watch: {
@@ -64,18 +67,37 @@ export default {
   methods: {
     // 初始化
     async init() {
+
+
+      //不存在数据
       if(this.isEmpty ){
         this.addCanvas()
+
+        return;
+      }
+
+
+
+      //画布下不存在模板OSS地址
+
+      if(this.this_canvas.tpl_url){
+        console.log(this.select);
+        return;
       }
+      this.$emit('canvasStyle:update',{
+        width: this.this_canvas.width,
+        height: this.this_canvas.height
+      })
+      console.log(this.this_canvas);
       await this.viewInit()
       await  this.$nextTick()
       this.fcanvas = new fabric.Canvas('marketing-canvas', {
-        backgroundColor:"#ffffff",
+        backgroundColor: this.this_canvas.bg_color,
         containerClass:"fcanvas",
         // 元素对象被选中时保持在当前z轴，不会跳到最顶层
         preserveObjectStacking:true,
-        width: this.canvasStyle.width,
-        height: this.canvasStyle.height
+        width: this.this_canvas.width,
+        height: this.this_canvas.height
       })
       //保留最初的状态
       this.updateCanvasState()
@@ -89,43 +111,57 @@ export default {
     addCanvas(){
 
       this.canvasForm.type = 'add'
-      this.canvasForm.name = '画布_'+new Date().getTime()
+      this.canvasForm.name = '画布_'+new Date().getTime().toString().substr(8)+Math.round(100)
       this.canvasForm.width = 1024
       this.canvasForm.height = 1024
-      this.canvasForm.color = '#fff'
+      this.canvasForm.bg_color = '#fff'
       this.canvasForm.visible = true;
     },
     handleAdjustCanvas() {
       this.canvasForm.type = 'edit'
-      this.canvasForm.name = this.canvas.name
-      this.canvasForm.width = this.canvas.width
-      this.canvasForm.height = this.canvas.height
-      this.canvasForm.color = this.canvas.color
+      this.canvasForm.name = this.this_canvas.name
+      this.canvasForm.width = this.this_canvas.width
+      this.canvasForm.height = this.this_canvas.height
+      this.canvasForm.bg_color = this.this_canvas.bg_color
       this.canvasForm.visible = true;
     },
     submitCanvasInfo() {
       // 假设 this.canvasForm 包含最新的 width, height 和 color
 
-      if(this.canvasForm)
+      if(this.canvasForm.type === 'add'){
+        this.data.push({
+               tpl_url:"",
+               image_path:"",
+               name:this.canvasForm.name,
+               width:this.canvasForm.width,
+               height:this.canvasForm.height,
+               bg_color:this.canvasForm.bg_color,
+        })
+        this.$emit('select:update',this.data.length - 1)
+/*        this.select = this.data.length - 1*/
+        this.canvasForm.visible = false;
+        this.init();
+      }else{
+
 
-      this.canvas.name = this.canvasForm.name;
-      this.canvas.width = this.canvasForm.width;
-      this.canvas.height = this.canvasForm.height;
-      this.canvas.color = this.canvasForm.color;
-      const newWidth = this.canvasForm.width;
-      const newHeight = this.canvasForm.height;
-      const newColor = this.canvasForm.color;
+        const newWidth = this.canvasForm.width;
+        const newHeight = this.canvasForm.height;
+        const newColor = this.canvasForm.color;
 
-      // 更新 fcanvas 的宽度和高度
-      this.fcanvas.setWidth(newWidth);
-      this.fcanvas.setHeight(newHeight);
+        // 更新 fcanvas 的宽度和高度
+        if(newWidth !== this.this_canvas.width)this.fcanvas.setWidth(newWidth);
+        if(newHeight !== this.this_canvas.height)this.fcanvas.setHeight(newHeight);
+        if(newColor !== this.this_canvas.bg_color)this.fcanvas.setBackgroundColor(newColor);
 
-      // 更新 fcanvas 的背景颜色
-      this.fcanvas.setBackgroundColor(newColor);
+        this.data[this.select].name = this.canvasForm.name
+        this.data[this.select].width = this.canvasForm.width
+        this.data[this.select].height = this.canvasForm.height
+        this.data[this.select].bg_color = this.canvasForm.bg_color
+        // 重新渲染以应用更改
+        this.fcanvas.renderAll();
+        this.canvasForm.visible = false;
+      }
 
-      // 重新渲染以应用更改
-      this.fcanvas.renderAll();
-      this.canvasForm.visible = false;
 
     },
     resizeCanvas(width, height) {

frontend/src/views/components/marketingEdit/tpl/header.js

@@ -6,13 +6,22 @@ export  default function tpl(){
            
            <div class="flex mar-left-10"> 
                 <div class="title">编辑信息</div>
-                <el-select v-if="!isEmpty" v-model="canvas.name" class="mar-left-10" style="width: 100px;">
-                    <el-option v-for="item,index in data">{{item.name}}</el-option>
-                </el-select>
            </div>
            
            <div class="button" style="margin-right: 10px;">
-            <el-button @click="addCanvas">新增画布</el-button>
+           
+                
+                    <el-dropdown v-if="!isEmpty">
+                      <el-button>
+                        {{this_canvas.name}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item v-for="item,index in data"><span :class="select == index ? 'c-primary' : ''">{{item.name}}</span></el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                  </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>
            </div>
@@ -30,7 +39,7 @@ export  default function tpl(){
                   <el-input v-model.number="canvasForm.height" placeholder="请输入高度"></el-input>
                 </el-form-item>
                 <el-form-item label="背景颜色">
-                    <el-color-picker v-model="canvasForm.color" />
+                    <el-color-picker v-model="canvasForm.bg_color" />
                 </el-form-item>
               </el-form>
               <div slot="footer" class="dialog-footer flex right">

frontend/src/views/components/marketingEdit/tpl/index.js

@@ -14,7 +14,7 @@ export  default function tpl(){
           ${header()}
           <!--新增-->
            <template v-if="isEmpty">
-               <div> 数据为空，请点击左上角新增画布按钮。</div>
+               <div> 数据为空，请点击右上角新增画布按钮新增数据。</div>
           </template>
           <template v-else>