贺卡打印

src/components/orderComponents/orderDetail.vue

@@ -144,11 +144,11 @@
     <div class="wrap-card" @click="dialogVisible=false" v-show="dialogVisible">
       <div @click.stop="" class="print-con" :style="`width:${this.params.cardWidth+10}mm;`">
         <div class="print-head">
-          <div class="but-item" :class="[fontSize===50?'disabled':'']" @click="fontEnlarge">
+          <div class="but-item" :class="[fontSize >= 50?'disabled':'']" @click="fontEnlarge">
             <img class="img" src="../../../static/image/icon-big.png" alt="">
             <div class="name">放大</div>
           </div>
-          <div class="but-item" :class="[fontSize===20?'disabled':'']" @click="fontNarrow">
+          <div class="but-item" :class="[fontSize<=16?'disabled':'']" @click="fontNarrow">
             <img class="img" src="../../../static/image/icon-small.png" alt="">
             <div class="name">缩小</div>
           </div>
@@ -195,7 +195,7 @@ export default {
     return {
       dialogVisible: false,
       printContent: "",
-      fontSize: 30,
+      fontSize: 26,
       textAlign: "center",
       params: {
         cardWidth: 210,
@@ -237,7 +237,19 @@ export default {
                   font-weight: normal;
                   font-style: normal;
                 }
+                .card-a4 {
+                  display: flex;
+                  justify-content: ${
+                    this.params.htmlContentAlign ? "center" : "flex-start"
+                  };
+                  align-items: ${
+                    this.params.direction === 2 ? "center" : "flex-start"
+                  };
+                  height: 297mm;
+                  width: 210mm;
+                }
                 .card-left {
+                  margin-top: -8mm;
                   position: relative;
                   height: ${this.params.cardHeight}mm;
                   width: ${this.params.cardWidth}mm;
@@ -253,6 +265,7 @@ export default {
                   outline:none;
                   font-family: ${this.params.fontFamily};
                   font-size:${this.fontSize}px;
+                  line-height:${this.fontSize + 5}px;
                   ${this.contentStyle(1)[1]}
                 }
               </style>
@@ -315,6 +328,8 @@ export default {
         );
         console.log("html:", html);
       }
+      html = html.replace(`</style>`, `</style><div class="card-a4">`);
+      html = `${html}</div>`;
       let params = {
         orderId: this.orderDetail.orderId,
         shopId: this.orderDetail.shopId,
@@ -338,12 +353,12 @@ export default {
       });
     },
     fontEnlarge() {
-      if (this.fontSize === 50) return;
+      if (this.fontSize >= 50) return;
       this.printContent = document.getElementById("card-con").innerHTML;
       this.fontSize += 5;
     },
     fontNarrow() {
-      if (this.fontSize === 20) return;
+      if (this.fontSize <= 16) return;
       this.printContent = document.getElementById("card-con").innerHTML;
       this.fontSize -= 5;
     },
@@ -360,7 +375,7 @@ export default {
       this.textAlign = "right";
     },
     resetPrint() {
-      this.fontSize = 35;
+      this.fontSize = 26;
       this.textAlign = "center";
     },
     contentStyle(direction) {

src/components/settingComponents/print/greetingCardPrinter.vue

@@ -152,8 +152,8 @@
         </el-form-item>
         <el-form-item label="选择打印机">
           <el-select style="width:300px;" v-model="form.deviceName" placeholder="请选择打印机">
-            <el-option v-for="item in cloudList" :key="item.id" :value="`${ item.printerName }(USB${item.port})`">
-              <div>{{ item.printerName }}(USB{{item.port}})</div>
+            <el-option v-for="item in cloudList" :key="item.id" :value="`${ item.driverName }(USB${item.port})`">
+              <div>{{ item.driverName }}(USB{{item.port}})</div>
             </el-option>
           </el-select>
           <el-button type="success" @click="getCloudPrinterInfo">获取打印机信息</el-button>
@@ -464,16 +464,16 @@ export default {
     },
     ...mapMutations(["SET_USERINFO"]),
     saveCard() {
-      if (this.params.sizeType === 0) {
-        if (this.params.cardWidth < 195) {
-          this.$refs.cardWidth.focus();
-          return this.$message.error(`自定义纸张宽度不可小于195毫米！`);
-        }
-        if (this.params.cardHeight < 145) {
-          this.$refs.cardHeight.focus();
-          return this.$message.error(`自定义纸张高度不可小于145毫米！`);
-        }
-      }
+      // if (this.params.sizeType === 0) {
+      //   if (this.params.cardWidth < 195) {
+      //     this.$refs.cardWidth.focus();
+      //     return this.$message.error(`自定义纸张宽度不可小于195毫米！`);
+      //   }
+      //   if (this.params.cardHeight < 145) {
+      //     this.$refs.cardHeight.focus();
+      //     return this.$message.error(`自定义纸张高度不可小于145毫米！`);
+      //   }
+      // }
       cloudConfigAdd(this.params).then((res) => {
         console.log("添加贺卡配置信息", res);
         if (res.code === 200) {
@@ -488,19 +488,7 @@ export default {
       });
     },
     printTest() {
-      if (this.params.sizeType === 0) {
-        if (this.params.cardWidth < 195) {
-          this.$refs.cardWidth.focus();
-          return this.$message.error(`自定义纸张宽度不可小于195毫米！`);
-        }
-        if (this.params.cardHeight < 145) {
-          this.$refs.cardHeight.focus();
-          return this.$message.error(`自定义纸张高度不可小于145毫米！`);
-        }
-      }
-      let html = this.cardHtml;
-      if (this.params.direction === 2) {
-        html = `<style type="text/css">
+      let html = `<style type="text/css">
                 @font-face {
                   font-family: ${this.params.fontFamily};
                   src:  url("https://h5.liebaoai.cn/font/${
@@ -515,10 +503,29 @@ export default {
                   font-weight: normal;
                   font-style: normal;
                 }
+                .card-a4 {
+                  display: flex;
+                  justify-content: ${
+                    this.params.htmlContentAlign ? "center" : "flex-start"
+                  };
+                  align-items: ${
+                    this.params.direction === 2 ? "center" : "flex-start"
+                  };
+                  height: 297mm;
+                  width: 210mm;
+                }
                 .card-left {
                   position: relative;
-                  height: ${this.params.cardWidth}mm;
-                  width: ${this.params.cardHeight}mm;
+                  height: ${
+                    this.params.direction === 1
+                      ? this.params.cardHeight
+                      : this.params.cardWidth
+                  }mm;
+                  width: ${
+                    this.params.direction === 1
+                      ? this.params.cardWidth
+                      : this.params.cardHeight
+                  }mm;
                   display:flex;
                   ${this.contentStyle(1)[0]}
                 }
@@ -532,10 +539,14 @@ export default {
                   ${this.contentStyle(1)[1]}
                 }
               </style>
-              <div class="card-left">
-                <div class="card-con">亲爱的，生日快乐！</div>
+              <div class="card-a4">
+                <div class="card-left">
+                  <div class="card-con">
+                    今天有了你，世界更精彩;今晚有了你，星空更灿烂;今生拥有你，人间更温暖。生日快乐!每个生日都有礼物，都有祝福，无论你有多少个愿望，多少个梦想，我的礼物是我的心，陪着你成长!生日快乐!
+                  </div>
+                </div>
               </div>`;
-      }
+
       let params = {
         orderId: 0,
         shopId: this.params.shopIdList[0],
@@ -612,7 +623,7 @@ export default {
           this.cloudList = res.data;
           let cloud = this.cloudList[0];
           if (!cloud) return;
-          this.form.deviceName = `${cloud.printerName}(USB${cloud.port})`;
+          this.form.deviceName = `${cloud.driverName}(USB${cloud.port})`;
         } else {
           this.$message({
             type: "error",