Startsida Utforska Hjälp
Registrera dig Logga in
liebao
/
liebao-web
2
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

贺卡打印优化

Funny 2 år sedan
förälder
7e188ea4eb
incheckning
57d2e868cc
2 ändrade filer med 107 tillägg och 44 borttagningar
Delad Vy Visa Diff Statistik
  1. 106 43
      src/components/orderComponents/orderDetail.vue
  2. 1 1
      src/components/settingComponents/print/greetingCardPrinter.vue

+ 106 - 43
src/components/orderComponents/orderDetail.vue
Visa fil 

@@ -249,12 +249,8 @@ export default {
 
                       }

 

                       .page {

-                          height: ${

-                           this.params.cardHeight

-                          }mm;

-                          width: ${

-                            this.params.cardWidth

-                          }mm;

+                          height: ${this.params.cardHeight}mm;

+                          width: ${this.params.cardWidth}mm;

                           position: relative;

                           box-sizing: border-box;

                       }

@@ -286,8 +282,8 @@ export default {
 
               <body>

                   <div class="page">

                       <div class="box">

-                          <div id="card-con" class="card-con" contenteditable="true">

-                              亲爱的，生日快乐！

+                          <div id="cardCon" class="card-con" contenteditable="true">

+                              ${this.printContent}

                           </div>

                       </div>

                   </div>

@@ -335,23 +331,90 @@ export default {
 
       this.printContent = this.initCardInfo(this.orderDetail.cardInfo);

     },

     print() {

-      let html = this.$refs.html.innerHTML;

-      if (this.params.direction === 2) {

-        html = html.replace(

-          `height: ${this.params.cardHeight}mm;`,

-          `height: ${this.params.cardWidth}mm;`

-        );

-        html = html.replace(

-          `width: ${this.params.cardWidth}mm;`,

-          `width: ${this.params.cardHeight}mm;`

-        );

-        html = html.replace(

-          `margin-right: ${this.params.paddingRight}mm`,

-          `margin-right: ${this.params.paddingRight + 15}mm`

-        );

-      }

-      html = html.replace(`</style>`, `</style><div class="card-a4">`);

-      html = `${html}</div>`;

+      let text = document.getElementById("cardCon").innerText;

+      let html = `<!DOCTYPE html>

+              <html lang="en">

+              <head>

+                  <meta charset="UTF-8">

+                  <title>提交三方打印任务html</title>

+                  <style>

+                      @font-face {

+                          font-family: ${this.params.fontFamily};

+                          src: url("https://h5.liebaoai.cn/font/${

+                            this.params.fontFamily

+                          }.woff2") format('woff2'),

+                              url("https://h5.liebaoai.cn/font/${

+                                this.params.fontFamily

+                              }.woff") format('woff'),

+                              url("https://h5.liebaoai.cn/font/${

+                                this.params.fontFamily

+                              }.ttf") format('truetype');

+                          font-weight: normal;

+                          font-style: normal;

+                      }

+

+                      body {

+                          margin: 0;

+                          box-sizing: border-box;

+                      }

+

+                      .page {

+                          height: ${

+                            this.params.direction === 1

+                              ? this.params.cardHeight

+                              : this.params.cardWidth

+                          }mm;

+                          width: ${

+                            this.params.direction === 1

+                              ? this.params.cardWidth

+                              : this.params.cardHeight

+                          }mm;

+                          position: relative;

+                          box-sizing: border-box;

+                      }

+

+                      .box {

+                          position: absolute;

+                          height: ${

+                            this.params.direction === 1

+                              ? this.params.cardHeight - 20

+                              : this.params.cardWidth - 10

+                          }mm;

+                          width: ${

+                            this.params.direction === 1

+                              ? this.params.cardWidth - 5

+                              : this.params.cardHeight - 10

+                          }mm;

+                          top: ${this.params.direction === 1 ? 2 : 8}mm;

+                          left: 0mm;

+                          display:flex;

+                          ${this.contentStyle(1)[0]}

+                      }

+

+                      .card-con {

+                          margin-top: ${this.params.paddingTop}mm;

+                          margin-right: ${this.params.paddingRight}mm;

+                          margin-bottom: ${this.params.paddingBottom}mm;

+                          margin-left: ${this.params.paddingLeft}mm;

+                          text-align: ${this.textAlign};

+                          outline:none;

+                          font-family: ${this.params.fontFamily};

+                          font-size:${this.fontSize}px;

+                          line-height:${this.fontSize + 5}px;

+                          ${this.contentStyle(1)[1]}

+                      }

+                  </style>

+              </head>

+              <body>

+                  <div class="page">

+                      <div class="box">

+                          <div id="card-con" class="card-con" contenteditable="true">

+                              ${text}

+                          </div>

+                      </div>

+                  </div>

+              </body>

+              </html>`;

 

       console.log("html:", html);

       let params = {

@@ -407,31 +470,31 @@ export default {
 
       let transform = ``;

       if (direction === 1) {

         switch (this.params.jpAutoAlign) {

-          case 'z1':

+          case "z1":

             style = `justify-content:flex-start;align-items:flex-start;`;

             break;

-          case 'z2':

+          case "z2":

             style = `justify-content:flex-start;align-items:center;`;

             break;

-          case 'z3':

+          case "z3":

             style = `justify-content:flex-start;align-items:flex-end;`;

             break;

-          case 'z4':

+          case "z4":

             style = `justify-content:center;align-items:flex-start;`;

             break;

-          case 'z5':

+          case "z5":

             style = `justify-content:center;align-items:center;`;

             break;

-          case 'z6':

+          case "z6":

             style = `justify-content:center;align-items:flex-end;`;

             break;

-          case 'z7':

+          case "z7":

             style = `justify-content:flex-end;align-items:flex-start;`;

             break;

-          case 'z8':

+          case "z8":

             style = `justify-content:flex-end;align-items:center;`;

             break;

-          case 'z9':

+          case "z9":

             style = `justify-content:flex-end;align-items:flex-end;`;

             break;

           default:

@@ -439,39 +502,39 @@ export default {
 
         }

       } else {

         switch (this.params.jpAutoAlign) {

-          case 'z1':

+          case "z1":

             style = `justify-content:flex-end;align-items:flex-start;`;

             transform = `transform: translateX(100%) rotate(90deg);transform-origin: left top;`;

             break;

-          case 'z2':

+          case "z2":

             style = `justify-content:center;align-items:flex-start;`;

             transform = `transform: translateX(50%) translateY(-50%) rotate(90deg);transform-origin: left;`;

             break;

-          case 'z3':

+          case "z3":

             style = `justify-content:flex-start;align-items:flex-start;`;

             transform = `transform: translateY(-100%) rotate(90deg);transform-origin: left bottom;`;

             break;

-          case 'z4':

+          case "z4":

             style = `justify-content:flex-end;align-items:center;`;

             transform = `transform: translateX(50%) rotate(90deg);transform-origin: center top;`;

             break;

-          case 'z5':

+          case "z5":

             style = `justify-content:center;align-items:center;`;

             transform = `transform: rotate(90deg);`;

             break;

-          case 'z6':

+          case "z6":

             style = `justify-content:flex-start;align-items:center;`;

             transform = `transform: translateX(-50%) rotate(90deg);`;

             break;

-          case 'z7':

+          case "z7":

             style = `justify-content:flex-end;align-items:flex-end;`;

             transform = `transform: translatey(100%) rotate(90deg);transform-origin: right top;`;

             break;

-          case 'z8':

+          case "z8":

             style = `justify-content:center;align-items:flex-end;`;

             transform = `transform: translateX(-50%) translateY(50%) rotate(90deg);transform-origin:right;`;

             break;

-          case 'z9':

+          case "z9":

             style = `justify-content:flex-start;align-items:flex-end;`;

             transform = `transform: translateX(-100%) rotate(90deg);transform-origin:right bottom;`;

             break;

+ 1 - 1
src/components/settingComponents/print/greetingCardPrinter.vue
Visa fil 

@@ -557,7 +557,7 @@ export default {
 
                           }mm;
 
                           width: ${
 
                             this.params.direction === 1
 
-                              ? this.params.cardWidth
 
+                              ? this.params.cardWidth - 5
 
                               : this.params.cardHeight - 10
 
                           }mm;
 
                           top: ${this.params.direction === 1 ? 2 : 8}mm;