贺卡内容

src/api/shop.js

@@ -245,4 +245,8 @@ export const cloudConfigList = (params) => {
 // 新增、编辑云盒配置
 export const cloudConfigAdd = (params) => {
   return postJson('app/shop/cloud/card/add', params)
+}
+// 获取门店打印配置
+export const printConfig = (params) => {
+  return get('app/shop/cloud/card/getDevice', params)
 }

src/components/orderComponents/orderDetail.vue

@@ -133,26 +133,73 @@
       </div>
     </div>
     <!-- 打印贺卡 -->
-    <el-dialog title="打印贺卡" :visible.sync="dialogVisible" width="600px">
+    <el-dialog title="打印贺卡" :visible.sync="dialogVisible" width="835px" append-to-body>
       <div class="print-con">
-        打印贺卡内容
+        <div class="print-head">
+          <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">
+            <img class="img" src="../../../static/image/icon-small.png" alt="">
+            <div class="name">缩小</div>
+          </div>
+          <div class="but-item" @click="fontLeft">
+            <img class="img" src="../../../static/image/icon-left.png" alt="">
+            <div class="name">居左</div>
+          </div>
+          <div class="but-item" @click="fontCenter">
+            <img class="img" src="../../../static/image/icon-center.png" alt="">
+            <div class="name">居中</div>
+          </div>
+          <div class="but-item" @click="fontRight">
+            <img class="img" src="../../../static/image/icon-right.png" alt="">
+            <div class="name">居右</div>
+          </div>
+          <div class="but-item" @click="resetPrint">
+            <img class="img" src="../../../static/image/icon-reset.png" alt="">
+            <div class="name">恢复</div>
+          </div>
+          <div class="but-item" @click="print">
+            <img class="img" src="../../../static/image/icon-print.png" alt="">
+            <div class="name name1">打印</div>
+          </div>
+        </div>
+        <div class="print-html">
+          <i class="el-icon-arrow-down icon1" :style="`top:${params.paddingTop}mm;left:${params.paddingLeft}mm;`"></i>
+          <i class="el-icon-arrow-down icon2" :style="`top:${params.paddingTop}mm;right:${params.paddingRight}mm;`"></i>
+          <i class="el-icon-arrow-down icon3" :style="`bottom:${params.paddingBottom}mm;left:${params.paddingLeft}mm;`"></i>
+          <i class="el-icon-arrow-down icon4" :style="`bottom:${params.paddingBottom}mm;right:${params.paddingRight}mm;`"></i>
+          <div class="html" v-html="printHtml"></div>
+        </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">打 印</el-button>
-      </span>
     </el-dialog>
   </div>
 
 </template>
     
 <script>
+import { cloudPrint, printConfig } from "../../api/shop";
 export default {
   name: "OrderDetail",
   data() {
     return {
       dialogVisible: false,
       printContent: "",
+      fontSize: 30,
+      textAlign: "center",
+      params: {
+        cardWidth: 210,
+        cardHeight: 297,
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 10,
+        paddingRight: 10,
+        direction: 1, // 1：竖向 2：横向左 3：横向右
+        fontFamily: "FangZhengKaiTi",
+        shopIdList: [0],
+        sizeType: 9, // 纸张尺寸
+      },
     };
   },
   props: {
@@ -165,12 +212,38 @@ export default {
         return v.foodPic;
       });
     },
+    printHtml() {
+      return `<style type="text/css">
+                @font-face {
+                  font-family: ${this.params.fontFamily};
+                  src: url('https://h5.liebaoai.cn/font/${this.params.fontFamily}.woff2');
+                  font-weight: normal;
+                  font-style: normal;
+                } 
+                .card-left {
+                  position: relative;
+                  height: ${this.params.cardHeight}mm;
+                  width: ${this.params.cardWidth}mm;
+                }
+                .card-con {
+                  position: relative;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  text-align: ${this.textAlign};
+                  outline:none;
+                  font-family: ${this.params.fontFamily};
+                  padding:${this.params.paddingTop}mm ${this.params.paddingRight}mm ${this.params.paddingBottom}mm ${this.params.paddingLeft}mm;
+                  font-size:${this.fontSize}px;
+                }
+              </style>
+              <div class="card-left">
+                <div id="card-con" class="card-con" contenteditable="true">
+                  ${this.printContent}
+                </div>
+              </div>`;
+    },
   },
   methods: {
-    showPrintCard() {
-      this.dialogVisible = true;
-      this.printContent = this.initCardInfo(this.orderDetail.cardInfo);
-    },
     takeOUtType(type) {
       let name = "";
       switch (type) {
@@ -194,7 +267,60 @@ export default {
       let info = cardInfo.split("[其他备注]")[0].slice(6);
       return info;
     },
-    showPrintCard() {},
+    async showPrintCard() {
+      let res = await printConfig({ shopId: this.orderDetail.shopId });
+      this.params = res.data;
+      this.dialogVisible = true;
+      this.printContent = this.initCardInfo(this.orderDetail.cardInfo);
+    },
+    print() {
+      let html = this.$refs.html.innerHTML;
+      let params = {
+        orderId: this.orderDetail.orderId,
+        shopId: this.orderDetail.shopId,
+        jobFile: html,
+      };
+      cloudPrint(params).then((res) => {
+        console.log("云盒打印信息", res);
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: `成功发送云盒打印任务！`,
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    fontEnlarge() {
+      if (this.fontSize === 50) return;
+      this.printContent = document.getElementById("card-con").innerHTML;
+      this.fontSize += 5;
+    },
+    fontNarrow() {
+      if (this.fontSize === 20) return;
+      this.printContent = document.getElementById("card-con").innerHTML;
+      this.fontSize -= 5;
+    },
+    fontLeft() {
+      this.printContent = document.getElementById("card-con").innerHTML;
+      this.textAlign = "left";
+    },
+    fontCenter() {
+      this.printContent = document.getElementById("card-con").innerHTML;
+      this.textAlign = "center";
+    },
+    fontRight() {
+      this.printContent = document.getElementById("card-con").innerHTML;
+      this.textAlign = "right";
+    },
+    resetPrint() {
+      this.fontSize = 35;
+      this.textAlign = "center";
+    },
   },
 };
 </script>
@@ -299,4 +425,65 @@ export default {
     justify-content: space-between;
   }
 }
+.print-con {
+  border: 1px solid #ebe7e7;
+  .print-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background: #ebe7e7;
+    padding: 10px 0;
+    .disabled {
+      opacity: 0.5;
+      cursor: not-allowed !important;
+    }
+    .but-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      flex: 1;
+      .img {
+        width: 25px;
+        height: 25px;
+      }
+      .name {
+        font-size: 13px;
+        font-weight: bold;
+        color: #333333;
+        margin-top: 5px;
+      }
+      .name1 {
+        color: #fc7200;
+      }
+    }
+  }
+  .print-html {
+    position: relative;
+    /deep/ .el-icon-arrow-down {
+      position: absolute;
+      font-size: 30px;
+    }
+    .icon1 {
+      top: 10mm;
+      left: 10mm;
+      transform: rotate(-45deg);
+    }
+    .icon2 {
+      top: 10mm;
+      right: 10mm;
+      transform: rotate(45deg);
+    }
+    .icon3 {
+      bottom: 10mm;
+      left: 10mm;
+      transform: rotate(-135deg);
+    }
+    .icon4 {
+      bottom: 10mm;
+      right: 10mm;
+      transform: rotate(135deg);
+    }
+  }
+}
 </style>

src/components/settingComponents/print/greetingCardPrinter.vue

@@ -49,9 +49,7 @@
               <i class="el-icon-arrow-down icon2" :style="`top:${params.paddingTop}mm;right:${params.paddingRight}mm;`"></i>
               <i class="el-icon-arrow-down icon3" :style="`bottom:${params.paddingBottom}mm;left:${params.paddingLeft}mm;`"></i>
               <i class="el-icon-arrow-down icon4" :style="`bottom:${params.paddingBottom}mm;right:${params.paddingRight}mm;`"></i>
-              <div class="card-con" :style="`font-family: ${params.fontFamily};padding:${params.paddingTop}mm ${params.paddingRight}mm ${params.paddingBottom}mm ${params.paddingLeft}mm;`">
-                <font size="6">亲爱的，生日快乐！希望你开心快乐每一天！</font>
-              </div>
+              <div v-html="cardHtml"></div>
             </div>
             <div class="card-right">
               <div class="setting-params">
@@ -80,6 +78,14 @@
                 </el-select>
               </div>
               <div class="setting-params">
+                <div class="card-title">内容位置</div>
+                <el-select v-model="params.textAlign">
+                  <el-option v-for="item in textAlignList" :key="item.value" :value="item.value" :label="item.name">
+                    <div>{{ item.name }}</div>
+                  </el-option>
+                </el-select>
+              </div>
+              <div class="setting-params">
                 <div class="card-title">贺卡尺寸类型</div>
                 <el-select v-model="params.sizeType" @change="changeDmPaperSize">
                   <el-option v-for="item in paperSize" :key="item.value" :value="item.value" :label="item.name">
@@ -204,10 +210,11 @@ export default {
         paddingBottom: 10,
         paddingLeft: 10,
         paddingRight: 10,
-        direction: 1, // 1：竖向 2：横向左 3：横向右
+        direction: 1, // 1：竖向 2：横向
         fontFamily: "FangZhengKaiTi",
         shopIdList: [0],
         sizeType: 9, // 纸张尺寸
+        textAlign: 5,
       },
       printerList: [],
       shopList: [],
@@ -265,19 +272,85 @@ export default {
           value: 1,
         },
         {
-          name: "横向左",
+          name: "横向",
+          value: 2,
+        },
+      ],
+      textAlignList: [
+        {
+          name: "左上",
+          value: 1,
+        },
+        {
+          name: "左中",
           value: 2,
         },
         {
-          name: "横向右",
+          name: "左下",
           value: 3,
         },
+        {
+          name: "中上",
+          value: 4,
+        },
+        {
+          name: "中",
+          value: 5,
+        },
+        {
+          name: "中下",
+          value: 6,
+        },
+        {
+          name: "右上",
+          value: 7,
+        },
+        {
+          name: "右中",
+          value: 8,
+        },
+        {
+          name: "右下",
+          value: 9,
+        },
       ],
       dialogVisible: false,
     };
   },
   // 监听属性 类似于data概念
-  computed: {},
+  computed: {
+    cardHtml() {
+      return `<style type="text/css">
+                @font-face {
+                  font-family: ${this.params.fontFamily};
+                  src: url('https://h5.liebaoai.cn/font/${
+                    this.params.fontFamily
+                  }.woff2');
+                  font-weight: normal;
+                  font-style: normal;
+                }
+                .card-left {
+                  position: relative;
+                  ${
+                    this.params.direction === 1
+                      ? "height: 297mm;width: 210mm;"
+                      : "width: 297mm;height: 210mm;"
+                  }
+                }
+                .card-con {
+                  display: block;
+                  position: absolute;
+                  ${this.contentStyle()}
+                  font-size:35px;
+                  font-family: ${this.params.fontFamily};
+                  width:100%
+                }
+              </style>
+              <div class="card-left">
+                <div class="card-con">亲爱的，生日快乐！希望你开心快乐每一天</div>
+              </div>`;
+    },
+  },
   // 监控data中的数据变化
   watch: {
     "params.shopIdList": {
@@ -348,8 +421,12 @@ export default {
                     }
                   </style>
                   <div class="card-left">
-                    <div class="card-con" style="font-family: ${this.params.fontFamily};padding:${this.params.paddingTop}mm ${this.params.paddingRight}mm ${this.params.paddingBottom}mm ${this.params.paddingLeft}mm;">
-                      <font size="6">亲爱的，生日快乐！希望你开心快乐每一天！</font>
+                    <div class="card-con" style="font-family: ${
+                      this.params.fontFamily
+                    };padding:${this.params.paddingTop}mm ${
+          this.params.paddingRight
+        }mm ${this.params.paddingBottom}mm ${this.params.paddingLeft}mm;">
+                      <font style="font-size:35px;">亲爱的，生日快乐！希望你开心快乐每一天！</font>
                     </div>
                   </div>`,
       };
@@ -514,6 +591,7 @@ export default {
           this.configList = res.data;
           let data = this.$tool.deepClone(res.data[0]);
           data.shopIdList = [0];
+          data.textAlign = 5;
           this.params = data;
           console.log("params:", this.params);
         } else {
@@ -524,6 +602,47 @@ export default {
         }
       });
     },
+    contentStyle() {
+      let paddingTop = this.params.paddingTop,
+        paddingBottom = this.params.paddingBottom,
+        paddingRight = this.params.paddingRight,
+        paddingLeft = this.params.paddingLeft;
+      let style = ``;
+      if (this.params.direction === 1) {
+        switch (this.params.textAlign) {
+          case 1:
+            style = `top:${paddingTop}mm;text-align:left;`;
+            break;
+          case 2:
+            style = `top:50%;left:${paddingLeft}mm;transform: translateY(-50%);`;
+            break;
+          case 3:
+            style = `bottom:${paddingBottom}mm;left:${paddingLeft}mm;`;
+            break;
+          case 4:
+            style = `top:${paddingTop}mm;left:50%;transform: translateX(-50%);`;
+            break;
+          case 5:
+            style = `top:50%;transform: translateY(-50%);text-align:center;`;
+            break;
+          case 6:
+            style = `bottom:${paddingBottom}mm;left:50%;transform: translateX(-50%);`;
+            break;
+          case 7:
+            style = `top:${paddingTop}mm;right:${paddingRight}mm;`;
+            break;
+          case 8:
+            style = `top:50%;transform: translateY(-50%);right:${paddingRight}mm;`;
+            break;
+          case 9:
+            style = `bottom:${paddingBottom}mm;right:${paddingRight}mm;`;
+            break;
+          default:
+            break;
+        }
+      }
+      return style;
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {