贺卡打印

src/assets/font/font.css

@@ -0,0 +1,52 @@
+@font-face {
+  font-family: "FangZhengKaiTi";
+  src: url('FangZhengKaiTi.woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "HongLeiBanShu";
+  src: url('HongLeiBanShu.woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "KaTongTi";
+  src: url('KaTongTi.woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "PinRu";
+  src: url('PinRu.woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "QianTuBiFengShouXieTi";
+  src: url('QianTuBiFengShouXieTi.woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "slideyouran";
+  src: url('slideyouran.woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "YaoSuiXinShouXieTi";
+  src: url('YaoSuiXinShouXieTi.woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "ZhongQiZhiXingShu";
+  src: url('ZhongQiZhiXingShu.woff');
+  font-weight: normal;
+  font-style: normal;
+}

src/components/settingComponents/print/greetingCardPrinter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="printer-list">
+  <div class="card-print">
     <div class="model">
       <div class="title">
         <div class="name">贺卡打印</div>
@@ -41,12 +41,54 @@
               </div>
               <div class="left-bot">设置贺卡尺寸、间距以及字体样式</div>
             </div>
-            <dis class="card-setting">
-              <div class="card-left">
 
+          </div>
+          <div class="card-setting">
+            <div class="card-right">
+              <div class="setting-params">
+                <div class="card-title">贺卡字体</div>
+                <el-select v-model="parmas.fontFamily" placeholder="请选择">
+                  <el-option v-for="item in fonts" :key="item.value" :value="item.value" :label="item.name">
+                    <div :style="`font-family: ${item.value};font-size:20px;`">{{ item.name }}</div>
+                  </el-option>
+                </el-select>
+              </div>
+              <div class="setting-params">
+                <div class="card-title">贺卡尺寸</div>
+                <el-input placeholder="请输入贺卡宽度" v-model="parmas.width">
+                  <template slot="prepend">宽</template>
+                  <template slot="append">mm</template>
+                </el-input>
+                <el-input placeholder="请输入贺卡高度" v-model="parmas.height">
+                  <template slot="prepend">高</template>
+                  <template slot="append">mm</template>
+                </el-input>
+              </div>
+              <div class="setting-params">
+                <div class="card-title">贺卡内容间距</div>
+                <el-input v-model="parmas.paddingTop">
+                  <template slot="prepend">上</template>
+                  <template slot="append">mm</template>
+                </el-input>
+                <el-input v-model="parmas.paddingBottom">
+                  <template slot="prepend">下</template>
+                  <template slot="append">mm</template>
+                </el-input>
+                <el-input v-model="parmas.paddingLeft">
+                  <template slot="prepend">左</template>
+                  <template slot="append">mm</template>
+                </el-input>
+                <el-input v-model="parmas.paddingRight">
+                  <template slot="prepend">右</template>
+                  <template slot="append">mm</template>
+                </el-input>
+              </div>
+            </div>
+            <div class="card-left" :style="`max-height: ${parmas.height}mm;max-width: ${parmas.width};`">
+              <div class="card-con" :style="`font-family: ${parmas.fontFamily};`">
+                <font size="6">祝您生意兴隆！财源广进！</font>
               </div>
-              <div class="card-right"></div>
-            </dis>
+            </div>
           </div>
         </div>
       </div>
@@ -83,7 +125,7 @@ export default {
           tips: "开启后订单一键打印贺卡，暂不支持自动打印",
         },
       ],
-      parmas:{
+      parmas: {
         width: 210,
         height: 297,
         paddingTop: 10,
@@ -91,9 +133,44 @@ export default {
         paddingLeft: 10,
         paddingRight: 10,
         printDirection: 0, // 0 竖向 1 横向（左） 2 横向（右）
-        printSizeStyle: 0 , // 0 A4  1 其他
-        fontFamily: 
-      }
+        printSizeStyle: 0, // 0 A4  1 其他
+        fontFamily: "FangZhengKaiTi",
+      },
+      shopList: [],
+      fonts: [
+        {
+          name: "方正楷体",
+          value: "FangZhengKaiTi",
+        },
+        {
+          name: "沐瑶随心手写体",
+          value: "YaoSuiXinShouXieTi",
+        },
+        {
+          name: "钟奇志莽行书",
+          value: "ZhongQiZhiXingShu",
+        },
+        {
+          name: "鸿雷板书简体",
+          value: "HongLeiBanShu",
+        },
+        {
+          name: "卡通体",
+          value: "KaTongTi",
+        },
+        {
+          name: "品如手写体",
+          value: "PinRu",
+        },
+        {
+          name: "千图笔锋手写体",
+          value: "QianTuBiFengShouXieTi",
+        },
+        {
+          name: "悠然小楷",
+          value: "slideyouran",
+        },
+      ],
     };
   },
   // 监听属性 类似于data概念
@@ -351,11 +428,35 @@ export default {
             color: #999999;
           }
         }
-        .card-setting {
-          display: flex;
-          .card-left {
-            height: 297mm;
-            width: 210mm;
+      }
+      .card-setting {
+        display: flex;
+        margin-top: 10px;
+        .card-title {
+          font-weight: bold;
+          font-size: 14px;
+          margin: 10px 0;
+        }
+        .card-right {
+          width: 300px;
+          flex-shrink: 0;
+          .setting-params {
+            width: 217px;
+          }
+        }
+        .card-left {
+          position: relative;
+          margin-right: 24px;
+          background-color: #fbfbfb;
+          flex-shrink: 0;
+          height: 297mm;
+          width: 210mm;
+          .card-con {
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+            padding: 10mm;
+            text-align: center;
           }
         }
       }
@@ -364,6 +465,7 @@ export default {
   .printer-list {
     display: flex;
     flex-wrap: wrap;
+
     .item {
       position: relative;
       display: flex;

src/main.js

@@ -10,6 +10,7 @@ import axios from 'axios'
 import AmapVue from '@amap/amap-vue';
 import { get, post, postJson } from './api/http'
 import Tool from './api/tool'
+import './assets/font/font.css'
 
 Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
 Vue.prototype.$tool = Tool;