update

src/components/base/EditStyle.vue

@@ -22,19 +22,15 @@
         <div v-for="(item, index) in data.tool" :key="index">
           <div class="tool-item" v-if="item.name === 'fontSize'">
             <div class="tit">字体大小</div>
-            <el-select @change="changeStyle" v-model="item.value" filterable placeholder="请选择">
-              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
-            </el-select>
+            <el-input @input="changeStyle" v-model="item.value" placeholder="请输入字号"></el-input>
           </div>
           <div class="tool-item" v-if="item.name === 'fontColor'">
             <div class="tit">字体颜色</div>
             <el-color-picker @change="changeStyle" v-model="item.value"></el-color-picker>
           </div>
           <div class="tool-item" v-if="item.name === 'fontLineH'">
-            <div class="tit">字间距</div>
-            <el-select v-model="item.value" filterable placeholder="请选择">
-              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
-            </el-select>
+            <div class="tit">字体行高</div>
+            <el-input @input="changeStyle" v-model="item.value" placeholder="请输入字体行高"></el-input>
           </div>
           <div class="tool-item" v-if="item.name === 'fontFamily'">
             <div class="tit">字体</div>
@@ -82,6 +78,24 @@
               <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
             </el-select>
           </div>
+          <div class="tool-item" v-if="item.name === 'fontWeight'">
+            <div class="tit">加粗</div>
+            <el-select @change="changeStyle()" v-model="item.value" filterable placeholder="请选择">
+              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
+            </el-select>
+          </div>
+          <div class="tool-item" v-if="item.name === 'fontUnderline'">
+            <div class="tit">下划线</div>
+            <el-select @change="changeStyle()" v-model="item.value" filterable placeholder="请选择">
+              <el-option v-for="opt in item.option" :key="opt.value" :label="opt.label" :value="opt.value"> </el-option>
+            </el-select>
+          </div>
+          <div class="tool-item" v-if="item.name === 'align'">
+            <div class="tit">对齐方式</div>
+            <el-select @change="changeStyle()" v-model="item.value" filterable placeholder="请选择">
+              <el-option v-for="opt in item.option" :key="opt.label" :label="opt.label" :value="opt.value"></el-option>
+            </el-select>
+          </div>
         </div>
       </div>
     </div>
@@ -124,9 +138,12 @@ export default {
             const [min, max, count = 1, symbol = ''] = item.option
             item.option = this.setOption(min, max, count, symbol)
           }
+          if (item.optionDiv) {
+            item.option = item.optionDiv
+            console.log(item.option, 'item.option')
+          }
           return item
         })
-        console.log(this.data.tool, '123')
       }
     },
     // 重新组合对象变成样式
@@ -136,6 +153,8 @@ export default {
         { name: 'fontColor', styleName: 'color' },
         { name: 'fontLineH', styleName: 'line-height', symbol: 'px' },
         { name: 'fontFamily', styleName: 'font-family' },
+        { name: 'fontWeight', styleName: 'font-weight' },
+        { name: 'fontUnderline', styleName: 'text-decoration' },
         { name: 'bgColor', styleName: 'background' },
         { name: 'width', styleName: 'width', symbol: 'px' },
         { name: 'height', styleName: 'height', symbol: 'px' },
@@ -149,6 +168,18 @@ export default {
             const certBox = document.getElementById('edit-dom-1')
             const [propWidth, propHeight] = this.data.tool
             a.push(`height: ${(propHeight.value / propWidth.value) * certBox.offsetWidth}px;`)
+          } else if (b.name === 'align') {
+            const alignStyle = {
+              2: 'display: flex;justify-content: center;',
+              3: 'display: flex;justify-content: right;',
+              4: 'display: flex;align-items:center;',
+              5: 'display: flex;align-items:center;justify-content: center;',
+              6: 'display: flex;align-items:center;justify-content: right;',
+              7: 'display: flex;align-items:end;',
+              8: 'display: flex;align-items:end;justify-content: center;',
+              9: 'display: flex;align-items:end;justify-content: right;'
+            }
+            a.push(alignStyle[b.value])
           } else {
             if (b.value !== '') {
               const findItem = styleData.find(item => item.name === b.name)

src/modules/template/components/stepTwo.vue

@@ -41,8 +41,22 @@
             <div class="pop"></div>
             <div v-html="item.html"></div>
           </div>
+          <div
+            :style="item.style"
+            v-if="item.type === 2 && isParamsShow"
+            :class="item.show ? 'text2 active' : 'text2'"
+            :key="item.id"
+            :id="item.id"
+            @click="domShow(item.id)"
+          >
+            <div class="pop"></div>
+            <div>{{ item.value }}</div>
+          </div>
         </template>
       </div>
+      <div style="display: flex; justify-content: center; padding: 30px">
+        <el-button type="primary" @click="submit()">提 交</el-button>
+      </div>
     </div>
     <el-dialog title="添加元素" :visible.sync="dialogVisible" width="30%" :destroy-on-close="true">
       <div style="display: flex; justify-content: center">
@@ -50,7 +64,7 @@
           <el-radio :label="0">图片</el-radio>
           <el-radio :label="1">文字</el-radio>
           <el-radio :label="2">动态变量</el-radio>
-          <el-radio :label="3">背景图片</el-radio>
+          <!-- <el-radio :label="3">背景图片</el-radio> -->
         </el-radio-group>
       </div>
       <div style="display: flex; justify-content: center; padding: 30px" v-if="selectElement === 2">
@@ -102,7 +116,9 @@ export default {
       },
       // 所有添加的dom元素
       certElement: [],
-      isShowFlag: true
+      isShowFlag: true,
+      isParamsShow: true,
+      toCanvasImg: ''
     }
   },
   computed: {},
@@ -117,14 +133,69 @@ export default {
       }
     }
     this.setCertBox()
+    this.getParamOptions()
   },
   methods: {
+    // 提交
+    submit() {
+      // 过去dom颜色
+      const getRgb = (dom, name) => {
+        const getColor = getComputedStyle(dom)[name]
+        return getColor
+          .substring(getColor.indexOf('(') + 1, getColor.indexOf(')'))
+          .replace(/\s*/g, '')
+          .split(',')
+      }
+      // 获取画板信息
+      const bgDom = document.getElementById('edit-dom-1')
+      const bgDomRgb = getRgb(bgDom, 'backgroundColor')
+      // 提交的参数
+      const params = {
+        elements: [{
+          // end 吧截图插入
+        }],
+        bg_width: bgDom.offsetWidth,
+        bg_height: bgDom.offsetHeight,
+        bg_color: JSON.stringify({ r: bgDomRgb[0], g: bgDomRgb[1], b: bgDomRgb[2] })
+      }
+      // 让动态变量隐藏，为了html2canvas截图
+      this.isParamsShow = false
+      // 寻找工具对应的值
+      const findTool = (data, name) => {
+        return data.find(item => item.name === name)
+      }
+      this.certElement.map(item => {
+        if (item.type === 2) {
+          const domRgb = getRgb(document.getElementById(item.id), 'color')
+          params.elements.push({
+            type: 'dynamic_text',
+            index: findTool(item.tool, 'zIndex').value,
+            key: item.value,
+            widht: findTool(item.tool, 'width').value,
+            height: findTool(item.tool, 'height').value,
+            dst_x: item.left,
+            dst_y: item.top,
+            font: findTool(item.tool, 'fontFamily').value,
+            size: findTool(item.tool, 'fontSize').value,
+            color: JSON.stringify({ r: domRgb[0], g: domRgb[1], b: domRgb[2] }),
+            line_height: findTool(item.tool, 'fontLineH').value,
+            font_weight: findTool(item.tool, 'fontWeight').value,
+            underline: !!(findTool(item.tool, 'fontUnderline').value !== 'none'),
+            align: findTool(item.tool, 'align').value
+          })
+        }
+        item.show = false
+        return item
+      })
+      this.toImage()
+      console.log(params, 'params')
+    },
     // 删除工具
     deleteEdit(data) {
       const index = this.certElement.findIndex(item => item.id === data.id)
       this.certElement.splice(index, 1)
     },
-    // 吧html生成图片
+    // html生成图片
     toImage() {
       html2canvas(this.$refs.imageTofile, {
         backgroundColor: null,
@@ -133,9 +204,9 @@ export default {
         // const url = canvas.toDataURL('image/png')
         // this.htmlUrl = url
         canvas.toBlob(function (blob) {
-          console.log(blob, 'blob')
           uploadBlob(blob).then(res => {
-            console.log(res, '123123')
+            console.log(res)
+            this.toCanvasImg = res
           })
         })
       })
@@ -193,6 +264,70 @@ export default {
             this.dragInit(`edit-dom-${this.dynamicId}`)
           }, 1000)
           this.dialogVisible = false
+        } else {
+          this.certElement.push({
+            top: '0',
+            left: '0',
+            title: '动态变量',
+            value: this.paramValue,
+            type: this.selectElement,
+            tool: [
+              {
+                name: 'fontFamily',
+                value: 'songti',
+                optionDiv: [
+                  { label: '宋体', value: 'songti' },
+                  { label: '黑体', value: 'heiti' },
+                  { label: '楷体', value: 'kaiti' },
+                  { label: '行楷', value: 'hangkai' }
+                ]
+              },
+              { name: 'fontSize', value: '16' },
+              { name: 'fontColor', value: '#000000' },
+              { name: 'fontLineH', value: '20' },
+              {
+                name: 'fontWeight',
+                value: 'normal',
+                optionDiv: [
+                  { label: 'normal', value: 'normal' },
+                  { label: 'bold', value: 'bold' }
+                ]
+              },
+              {
+                name: 'fontUnderline',
+                value: 'none',
+                optionDiv: [
+                  { label: 'underline', value: 'underline' },
+                  { label: 'none', value: 'none' }
+                ]
+              },
+              {
+                name: 'align',
+                value: '1',
+                optionDiv: [
+                  { label: '左上', value: '1' },
+                  { label: '中上', value: '2' },
+                  { label: '右上', value: '3' },
+                  { label: '左中', value: '4' },
+                  { label: '中中', value: '5' },
+                  { label: '右中', value: '6' },
+                  { label: '左下', value: '7' },
+                  { label: '中下', value: '8' },
+                  { label: '右下', value: '9' }
+                ]
+              },
+              { name: 'width', value: '100' },
+              { name: 'height', value: '100' },
+              { name: 'zIndex', value: '1' }
+            ],
+            show: true,
+            id: `edit-dom-${this.dynamicId}`
+          })
+          // 添加成功后添加拖拽
+          setTimeout(() => {
+            this.dragInit(`edit-dom-${this.dynamicId}`)
+          }, 1000)
+          this.dialogVisible = false
         }
       }, 100)
     },
@@ -248,10 +383,45 @@ export default {
     position: relative;
     border: 1px solid rgb(227, 227, 227);
     overflow: hidden;
+    background: #ffffff;
     .text {
       position: absolute;
       top: 0;
       left: 0;
+      font-family: 'songti';
+      &.active {
+        .pop {
+          &::after {
+            content: '';
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border: 3px dashed red;
+            box-sizing: border-box;
+          }
+        }
+      }
+      .pop {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+    .text2 {
+      position: absolute;
+      top: 0;
+      left: 0;
+      font-family: 'songti';
+      width: 100px;
+      height: 100px;
+      font-size: 16px;
+      color: #000;
+      line-height: 20px;
       &.active {
         .pop {
           &::after {
@@ -305,4 +475,20 @@ export default {
     z-index: 1;
   }
 }
+@font-face {
+  font-family: 'kaiti';
+  src: url('@/assets/font/AaBanRuoKaiShu-2.ttf');
+}
+@font-face {
+  font-family: 'songti';
+  src: url('@/assets/font/RuiZiChaoPaiYanWeiSongJian-Shan-ZhunCu(REEJI-SwallowGB-Flash-Medium)-2.ttf');
+}
+@font-face {
+  font-family: 'hangkai';
+  src: url('@/assets/font/JiZiJingDianFangSongJianFan-Shan(GEETYPE-FangSongGBT-Flash)-2.ttf');
+}
+@font-face {
+  font-family: 'heiti';
+  src: url('@/assets/font/No.164-ShangShouJianZhengTi-2.ttf');
+}
 </style>

src/modules/template/views/Update.vue

@@ -41,7 +41,7 @@ export default {
   },
   data() {
     return {
-      active: 1,
+      active: 0,
       form: {
         title: '',
         rule: '0'