mod:动态图 和 动态文字

frontend/src/views/Tpl/Edit/index.vue

@@ -4,6 +4,42 @@
   <marketingEdit
       v-model:data="data"
       v-model:index="index"
+      :goods_text="[
+          {
+            key: '设计理念',
+            value: '经典凹出兼具动感同时带来轻盈\\n步调轻软，松弛自在蔓延\\n立体质感让朝气肆意绽放'
+          },
+          {
+            key: '标题',
+            value: '休闲运动'
+          },
+          {
+            key: '帮面',
+            value: '网布+合成革'
+          },
+          {
+            key: '鞋底',
+            value: '橡胶底'
+          }
+      ]"
+      :goods_images="[
+          {
+            key: '俯视',
+            value: 'https://ossimg.valimart.net/uploads/vali_ai/20250613/174979820315694.png'
+          },
+          {
+            key: '侧视',
+            value: 'https://ossimg.valimart.net/uploads/vali_ai/20250613/174979823853439.png'
+          },
+          {
+            key: '鞋底',
+            value: 'https://ossimg.valimart.net/uploads/vali_ai/20250613/174979826640079.png'
+          },
+          {
+            key: '内里',
+            value: 'https://ossimg.valimart.net/uploads/vali_ai/20250613/174979828870818.png'
+          }
+      ]"
       @save="save"
   />
 

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

@@ -10,11 +10,11 @@ const DEFAULT_CLIP_SETTINGS = {
   width: 100,
   height: 100,
   radius: 50,
-  offsetX: 0,
-  offsetY: 0,
+  offsetX: 50,
+  offsetY: 50,
   showClipStroke: true,
   strokeColor: '#000000',
-  strokeWidth: 2,
+  strokeWidth: 1,
   rectRadius: 0,
   svgUrl: '',
   svgWidth: 100,

frontend/src/views/components/PictureEditor/mixin/edit/module/tools.js

@@ -139,8 +139,18 @@ cutout(){
     <!-- 圆形参数 -->
     
       <div v-else  class="flex left mar-top-10 ">
-        <div class="label fs-14 c-333 te-l"  style="width: 35px;">圆角</div>
-        <el-input-number v-model="clipSettings.radius" @input="applyClipPath" :step="1" :min="1" size="small"/>
+        <div class="label fs-14 c-333 te-l"  style="width: 35px;">半径</div>
+                <el-slider
+                  size="small"
+                  v-model="clipSettings.radius"
+                  :step="1"
+                  :min="1"
+        :max="canvas.width / 2"
+                  style="width:120px;"
+                  :show-tooltip="false"
+                   @input="applyClipPath"
+
+                ></el-slider>
       </div>
 
     <!-- 描边参数 -->

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

@@ -24,6 +24,18 @@ export default {
       type: Number,
       default: 0
     },
+    goods_text:{
+      type: Array,
+      default: ()=>{
+        return []
+      }
+    },
+    goods_images:{
+      type: Array,
+      default: ()=>{
+        return []
+      }
+    },
 
   },
   data() {
@@ -72,23 +84,19 @@ export default {
       //不存在数据
       if(this.isEmpty ){
         this.addCanvas()
-
         return;
       }
 
 
 
       //画布下不存在模板OSS地址
-
       if(this.this_canvas.tpl_url){
-        console.log(this.index);
         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', {
@@ -106,10 +114,6 @@ export default {
       this.layerInit();
       await  this.$nextTick()
       this.$emit('init')
-      this.addMaps('https://ossimg.valimart.net/uploads/vali_ai/20250613/174978643465498.png',{
-        maxWidth:1024,
-        maxHeight:1024,
-      })
 
     },
     addCanvas(){
@@ -224,29 +228,14 @@ export default {
     box-shadow: 0px 2px 4px 0px rgba(170,177,255,0.54);
 
     .el-button {
-      display: block;
-      padding: 0;
-      margin: 0;
-      width: 100%;
-      line-height: 28px;
-      background: none;
-      margin-top: 10px;
-      border: none;
-      margin-left: 20px;
-      text-align: left;
-      &.el-button--primary {
-        background: none;
-        color: #000;
-      }
     }
     .icon {
-      display: block;
+      margin-right: 5px;
+    }
+    .icon-img {
       width: 30px;
       height: 30px;
       border-radius: 5px;
-      margin: 0 auto;
-      font-size: 28px;
-      color: #000;
       margin-right: 10px;
     }
 

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

@@ -6,47 +6,108 @@ let add = () => {
 
   return `
       <div class="add-action-wrap">
-          <div class="flex left w-full">
-          <div class="w-full" v-show="!disabled">
               <div class="text te-l fw-b add-action_title step-label mar-left-10 fs-16 line-40"><div class="step-row_color small">调整工具</div></div>
-
-              <el-button @click="toSelect" :type=" action == 'select' ? 'primary' : ''" class="mar-left-10">
-                        <div class="icon flex"><img src="${xz}" class="icon"></div>
-                        <div>选择</div>
-              </el-button>
-        <!--      <el-button @click="toErase" :type=" action == 'erase' ? 'primary' : ''"  class="mar-left-10">
-                  <svg-icon icon-class="xpc" class="icon"  />
-                  <div>橡皮擦</div>
-              </el-button>-->
-              <el-button @click="toReset">
-                        <div class="icon flex"><img src="${shanyibu}" class="icon" style="width:22px; margin-left:5px;"></div>
-                        <div>重置</div>
-              </el-button>
+              <el-menu
+                default-active="0"
+                class="el-menu-vertical-demo"
+              >
               
+                <el-menu-item index="0"  @click.native="toSelect" >
+                      
+                                <div class="icon flex"><img src="${xz}" class="icon"></div>
+                                <div>选择</div>
+                </el-menu-item>
+                <el-menu-item index="1"  @click.native="toReset">
+                                    <div class="icon flex"><img src="${shanyibu}" class="icon" style="width:22px; margin-left:5px;"></div>
+                                    <div>上一步</div>
+                </el-menu-item>
+              </el-menu>
+      
+      
               <div class="text te-l fw-b add-action_title step-label mar-left-10 fs-16 line-40"><div class="step-row_color small">新增素材</div></div>
-       
-               <el-button @click="toReset">
-                               <UploadSlot background='none' ref="upload"
-                        class="upload-wrap " 
-                         @input="(url)=>addMaps(url,{
-                            left:10,
-                            top:10,
-                            maxWidth:fcanvas.width*0.8,
-                            maxHeight:fcanvas.height*0.8,
-                          })"><div>新增图片</div>
-                         </UploadSlot>
-                </el-button>
-             
-              <el-button @click="addText">
-                        <div>新增文字</div>
-              </el-button>
               
-     
               
-        
+              <el-menu
+                default-active="0"
+                class="el-menu-vertical-demo"
+              >
               
-            </div>
-          </div>
+                <el-sub-menu index="1">
+                  <template #title>
+                    <span>文字</span>
+                  </template>
+                  <el-menu-item-group >
+                        <el-menu-item index="1-1" @click.native="addText">普通文字</el-menu-item>
+                        <el-sub-menu index="1-2">
+                          <template #title>
+                            <span>商品文字</span>
+                          </template>
+                          <el-menu-item-group >
+                            <el-menu-item v-for="item,index  in goods_text"
+                              @click.native="addText({
+                                  left:50,
+                                  top:50,
+                                  'data-key':item.key,
+                                  'data-value':item.value,
+                                  text:item.value
+                              })"
+                             :index="'1-2-'+index">
+                                <el-tooltip
+                                    class="box-item"
+                                    effect="light"
+                                    :content="item.value"
+                                    placement="right"
+                                  >
+                                    {{item.key}}
+                                  </el-tooltip>
+                            
+                           </el-menu-item>
+                          </el-menu-item-group>
+                        </el-sub-menu>
+                  </el-menu-item-group>
+                </el-sub-menu>
+                           
+                <el-sub-menu index="2">
+                  <template #title>
+                    <span>图片</span>
+                  </template>
+                  <el-menu-item-group >
+                        <el-menu-item index="2-1">
+                                  <UploadSlot background='none' ref="upload"
+                                class="upload-wrap " 
+                                 @input="(url)=>addMaps(url,{
+                                    left:10,
+                                    top:10,
+                                    maxWidth:fcanvas.width*0.8,
+                                    maxHeight:fcanvas.height*0.8,
+                                  })"><div>普通图片</div>
+                                 </UploadSlot>
+                        
+                          </el-menu-item>
+                        <el-sub-menu index="2-2">
+                          <template #title>
+                                商品图片
+                          </template>
+                          <el-menu-item-group >
+                            <el-menu-item v-for="item,index  in goods_images"
+                             
+                              @click.native="addMaps(item.value,{
+                                  left:50,
+                                  top:50,
+                                    maxWidth:fcanvas.width*0.8,
+                                    maxHeight:fcanvas.height*0.8,
+                                  'data-key':item.key,
+                                  'data-value':item.value,
+                              })"
+                             
+                             :index="'2-2-'+index">
+                                <img :src="item.value"  class="icon-img"> {{item.key}}
+                           </el-menu-item>
+                          </el-menu-item-group>
+                        </el-sub-menu>
+                  </el-menu-item-group>
+                </el-sub-menu>
+              </el-menu>
         
             
       </div>

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

@@ -10,9 +10,9 @@ export  default function tpl(){
     <transition name="fade">
       <div ref="wrap" class="picture-editor-wrap flex">
       
-          <!--新增-->
+          <!--头部-->
           ${header()}
-          <!--新增-->
+          <!--头部-->
            <template v-if="isEmpty">
                <div> 数据为空，请点击右上角新增画布按钮新增数据。</div>
           </template>