1. 优化实体卡模型

src/views/tourism/membershipManagement/physicalCard/formBox/physicalCardTemplateForm.vue

@@ -71,7 +71,7 @@
               </el-upload>
               <el-button style="margin-left: 10px;" size="small" type="primary" @click="centerDialogVisibleOpen('addText','fm')">添加文本</el-button>
               <!-- <el-button size="small" type="primary" @click="centerDialogVisibleOpen('addImage','fm')">添加图片</el-button> -->
-              <el-button style="margin-left: 10px;" size="small" type="primary" @click="centerDialogVisibleOpen('addQR','fm')">添加二维</el-button>
+              <el-button style="margin-left: 10px;" size="small" type="primary" @click="centerDialogVisibleOpen('addQr','fm')">添加二维</el-button>
             </div>
             <!-- 样式  -->
             <div class="form-make_fm-style">
@@ -119,7 +119,7 @@
               <el-color-picker v-model="ruleForm.color"></el-color-picker>
             </el-form-item>
           </div>
-          <div v-if="editFun == 'addQR'">
+          <div v-if="editFun == 'addQr'">
             <el-form-item label="宽度" prop="width">
               <el-input-number v-model="ruleForm.width" controls-position="right" :min="1"></el-input-number>
             </el-form-item>
@@ -207,7 +207,8 @@ export default {
       },
       editType: '',
       editFun: '',
-      
+      topNum: 0,
+      leftNum: 0
     };
   },
   methods: {
@@ -275,11 +276,13 @@ export default {
         parent.querySelectorAll('div').forEach((child) => {
           child.addEventListener('dragend',this.dragendFun)
           child.addEventListener('click',this.clickFun)
+          child.addEventListener('dragstart',this.dragstart)
         });
         const parent1 = document.getElementById('styleInfo_fm');
         parent1.querySelectorAll('div').forEach((child) => {
           child.addEventListener('dragend',this.dragendFun_fm)
           child.addEventListener('click',this.clickFun)
+          child.addEventListener('dragstart',this.dragstart)
         });
       })
       
@@ -390,6 +393,7 @@ export default {
         }else {
           div.addEventListener('dragend',this.dragendFun_fm)
         }
+        div.addEventListener('dragstart',this.dragstart)
         div.addEventListener('click',this.clickFun)
         let box = document.getElementById(idName)
         box.appendChild(div)
@@ -432,6 +436,7 @@ export default {
         }else {
           div.addEventListener('dragend',this.dragendFun_fm)
         }
+        div.addEventListener('dragstart',this.dragstart)
         div.addEventListener('click',this.clickFun)
         let box = document.getElementById(idName)
         
@@ -448,7 +453,17 @@ export default {
       this.centerDialogVisible = false
       this.ruleForm = {}
     },
-    
+    // 拖拽开始位置
+    dragstart(e) {
+      e.dataTransfer.effectAllowed = 'move';
+      console.log(e.target);
+      e.dataTransfer.setData('text', e.target.innerText);
+      let dropzone = document.getElementById(e.target.id);
+      let parentRect = dropzone.getBoundingClientRect();
+      // 计算元素在父元素中的位置
+      this.leftNum =e.clientX - parentRect.x;
+      this.topNum =e.clientY - parentRect.y;
+    },
     /** 正面 拖拽事件  */
     dragendFun(e){
       let draggedItem = document.getElementById(e.target.id);
@@ -458,8 +473,9 @@ export default {
       let parentRect = dropzone.getBoundingClientRect();
     
       // 计算元素在父元素中的位置
-      let left =e.clientX - parentRect.x;
-      let top =e.clientY - parentRect.y;
+      let left =e.clientX - parentRect.x - this.leftNum;
+      let top =e.clientY - parentRect.y - this.topNum;
+      console.log("ondragstart事件11====",e.target.offsetLeft ,e.target.offsetTop)
       console.log("dragend事件====",e.clientX,e.clientY)
       // 设置元素的新位置
       draggedItem.style.left = left + 'px';
@@ -474,8 +490,8 @@ export default {
       let parentRect = dropzone.getBoundingClientRect();
     
       // 计算元素在父元素中的位置
-      let left =e.clientX - parentRect.x;
-      let top =e.clientY - parentRect.y;
+      let left =e.clientX - parentRect.x - this.leftNum;
+      let top =e.clientY - parentRect.y - this.topNum;
       console.log("dragend事件====",e.clientX,e.clientY)
       // 设置元素的新位置
       draggedItem.style.left = left + 'px';
@@ -528,7 +544,7 @@ export default {
         if(this.editFun == 'addImage'){
           this.$set(this.ruleForm,'zIndex',1)
         }
-        if(this.editFun == 'addQR'){
+        if(this.editFun == 'addQr'){
           this.$set(this.ruleForm,'zIndex',1)
         }
       })
@@ -538,7 +554,7 @@ export default {
       switch(this.editFun){
         case 'addText' : this.addText(this.editType); break;
         case 'addImage' : this.addImage(this.editType); break;
-        case 'addQR' : this.addQR(this.editType); break;
+        case 'addQr' : this.addQR(this.editType); break;
       }
     },
     /**  删除div  */

src/views/tourism/membershipManagement/physicalCard/formBox/printForm.vue

@@ -9,22 +9,24 @@
     <div class="form-dialog-box" v-loading="loading" :element-loading-text="loadingText"
       element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
       <div class="form-make">
-        <div class="form-make_zm" :style="{ '--crad-zm': form.mainBg ? `url(${form.mainBg})`:'none' }">
+        <div class="form-make_zm">
           <div class="form-make_zm-title">正面</div>
           <div class="form-make_zm-info">
             <!-- 工具  -->
             <div class="form-make_zm-tool">
             </div>
             <!-- 样式  -->
-            <div class="form-make_zm-style">
-              <div class="form-make_zm-style-bgm" id="myElement" ref="myElement"></div>
+            <div class="form-make_zm-style" ref="myElement">
+              <div class="form-make_zm-style-bgm" id="myElement">
+                <img crossorigin="anonymous" v-if="form.mainBgCopy" :src="form.mainBgCopy" alt="">
+              </div>
               <div ref="styleInfo_zm" id="styleInfo_zm" class="form-make_zm-style-info">
 
               </div>
             </div>
           </div>
         </div>
-        <div class="form-make_fm" :style="{ '--crad-zm': form.backBg ? `url(${form.backBg})`:'none' }">
+        <div class="form-make_fm">
           <div class="form-make_fm-title">反面</div>
           <div class="form-make_fm-info">
             <!-- 工具  -->
@@ -32,7 +34,9 @@
             </div>
             <!-- 样式  -->
             <div class="form-make_fm-style">
-              <div class="form-make_fm-style-bgm" id="myElement1" ref="myElement1"></div>
+              <div class="form-make_fm-style-bgm" id="myElement1" ref="myElement1">
+                <img crossorigin="anonymous" v-if="form.backBgCopy" :src="form.backBgCopy" alt="">
+              </div>
               <div ref="styleInfo_fm" id="styleInfo_fm" class="form-make_fm-style-info">
 
               </div>
@@ -106,17 +110,15 @@ export default {
       this.loading = true
       this.actionUrlLoading = false
       this.model = model
+      this.form = {}
       this.formCopy = JSON.parse(JSON.stringify(row))
       this.formStatus = 0
       this.cardNo = row.cardNo //row.cardNo
       if(this.cardNo.length > 16 ) {
-        console.log("sdfadff",this.cardNo.length)
         this.width = 1
       }else if(this.cardNo.length >= 10 && this.cardNo.length <= 16) {
-        console.log("sdfadff",this.cardNo.length)
         this.width = 2
       }else {
-        console.log("sdfadff",this.cardNo.length)
         this.width = 3
       }
       await this.getTableDeatilsCodeFun(row)
@@ -139,6 +141,8 @@ export default {
             ...res.data,
           }
           this.$set(this, 'form', JSON.parse(JSON.stringify(obj)))
+          this.downloadIamge(this.form.mainBg,'mainBgCopy')
+          this.downloadIamge(this.form.backBg,'backBgCopy')
           this.formStatus = 1
         } else {
           this.$message.error('获取详情失败!!!');
@@ -169,6 +173,7 @@ export default {
                     // lineColor: "#0aa",  //线条颜色
                     width:1, //线宽
                     height:40,  //条码高度
+                    fontOptions: 'bold',// 设置条形码文本的粗体和斜体样式 bold / italic / bold italic
                     // displayValue: false //是否显示文字信息
                 });
               })
@@ -191,6 +196,7 @@ export default {
                     // lineColor: "#0aa",  //线条颜色
                     width:1, //线宽
                     height:40,  //条码高度
+                    fontOptions: 'bold',// 设置条形码文本的粗体和斜体样式 bold / italic / bold italic
                     // displayValue: false //是否显示文字信息
                 });
               })
@@ -214,13 +220,13 @@ export default {
         this.loadingText = "打印数据中..."
         this.loading = true
         let cardImgFrontFile = await this.captureCanvas('myElement')
-        let cardImgFrontFile1 = await this.captureCanvas('styleInfo_zm')
+        //let cardImgFrontFile1 = await this.captureCanvas('styleInfo_zm')
         let cardImgBackFile = await this.captureCanvas('myElement1')
         let cardFontBackFilee = await this.captureCanvas('styleInfo_fm')
         const formData = new FormData();
         formData.append("ip", '172.16.90.128');
         formData.append("cardImgFrontFile", cardImgFrontFile);
-        formData.append("cardFontFrontFile", cardImgFrontFile1);
+        formData.append("cardFontFrontFile", null);
         formData.append("cardImgBackFile", cardImgBackFile);
         formData.append("cardFontBackFile", cardFontBackFilee);
         let res1 = await fetch(process.env.VUE_APP_PRINT_URL, {  
@@ -312,6 +318,24 @@ export default {
     },
     addQR(type){
 
+    },
+    downloadIamge(imgsrc,key) {
+      if(!imgsrc) return
+      //下载图片地址和图片名
+      let image = new Image();
+      // 解决跨域 Canvas 污染问题
+      image.setAttribute("crossOrigin", "anonymous");
+      image.onload = () => {
+        let canvas = document.createElement("canvas");
+        canvas.width = image.width;
+        canvas.height = image.height;
+        let context = canvas.getContext("2d");
+        context.drawImage(image, 0, 0, image.width, image.height);
+        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+        this.$set(this.form,key,url)
+       // this.form[key] = url
+      };
+      image.src = imgsrc;
     },
     async captureCanvas(el) {
       // 选择你想要转换成图片的 DOM 元素
@@ -321,9 +345,9 @@ export default {
       // canvas.toDataURL() 可以获取图片的 base64 编码
       const dataUrl = canvas.toDataURL();
       // 你可以将 dataUrl 设置为一个 img 标签的 src 属性，或者下载图片等
-      console.log(dataUrl);
+      console.log(el+"=====",dataUrl);
       let file = this.dataURLtoBlob(dataUrl,'ceshi')
-      console.log(file);
+      console.log(el+"=====",file);
       return file
     },
     base64ToFile(base64,fileName){
@@ -515,8 +539,6 @@ export default {
   justify-content: space-between;
   width: 100%;
   height: 100%;
-  --crad-zm: none;
-  --crad-fm: none;
   // --crad-w: 860px;
   // --crad-h: 540px;
   --crad-w: 460px;
@@ -524,6 +546,8 @@ export default {
   .form-make_zm {
     display: flex;
     height: 350px;
+    --crad-zm: none;
+    --crad-fm: none;
     .form-make_zm-title {
       width: 20px;
       height: 100%;
@@ -550,7 +574,7 @@ export default {
       .form-make_zm-style {
         width: 100%;
         height: var(--crad-h);
-        border: 1px dashed #000;
+        //border: 1px dashed #000;
         border-radius: 20px;
         box-sizing: border-box;
         overflow: hidden;
@@ -558,10 +582,17 @@ export default {
         .form-make_zm-style-bgm {
           width: 100%;
           height: 100%;
-          background-image: var(--crad-zm);
+          //background-image: var(--crad-zm);
           background-size: 100% 100%;
           background-repeat: no-repeat;
           border-radius: 20px;
+          position: absolute;
+          z-index: 1;
+          img{
+            width: 100%;
+            height: 100%;
+            display: block;
+          }
         }
         .form-make_zm-style-info {
           width: 100%;
@@ -581,6 +612,8 @@ export default {
   .form-make_fm {
     display: flex;
     height: 350px;
+    --crad-zm: none;
+    --crad-fm: none;
     .form-make_fm-title {
       width: 20px;
       height: 100%;
@@ -607,7 +640,7 @@ export default {
       .form-make_fm-style {
         width: 100%;
         height: var(--crad-h);
-        border: 1px dashed #000;
+        //border: 1px dashed #000;
         border-radius: 20px;
         box-sizing: border-box;
         overflow: hidden;
@@ -615,10 +648,15 @@ export default {
         .form-make_fm-style-bgm {
           width: 100%;
           height: 100%;
-          background-image: var(--crad-zm);
+          //background-image: var(--crad-zm);
           background-size: 100% 100%;
           background-repeat: no-repeat;
           border-radius: 20px;
+          img{
+            width: 100%;
+            height: 100%;
+            display: block;
+          }
         }
         .form-make_fm-style-info {
           width: 100%;