|
|
@@ -78,8 +78,8 @@
|
|
|
</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">
|
|
|
+ <el-select v-model="params.jpAutoAlign">
|
|
|
+ <el-option v-for="item in jpAutoAlignList" :key="item.value" :value="item.value" :label="item.name">
|
|
|
<div>{{ item.name }}</div>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
@@ -215,7 +215,7 @@ export default {
|
|
|
fontFamily: "FangZhengKaiTi",
|
|
|
shopIdList: [0],
|
|
|
sizeType: 9, // 纸张尺寸
|
|
|
- textAlign: 5,
|
|
|
+ jpAutoAlign: "z5",
|
|
|
},
|
|
|
printerList: [],
|
|
|
shopList: [],
|
|
|
@@ -277,42 +277,42 @@ export default {
|
|
|
value: 2,
|
|
|
},
|
|
|
],
|
|
|
- textAlignList: [
|
|
|
+ jpAutoAlignList: [
|
|
|
{
|
|
|
name: "左上",
|
|
|
- value: 1,
|
|
|
+ value: "z1",
|
|
|
},
|
|
|
{
|
|
|
name: "左中",
|
|
|
- value: 2,
|
|
|
+ value: "z2",
|
|
|
},
|
|
|
// {
|
|
|
// name: "左下",
|
|
|
- // value: 3,
|
|
|
+ // value: 'z3',
|
|
|
// },
|
|
|
{
|
|
|
name: "中上",
|
|
|
- value: 4,
|
|
|
+ value: "z4",
|
|
|
},
|
|
|
{
|
|
|
name: "中",
|
|
|
- value: 5,
|
|
|
+ value: "z5",
|
|
|
},
|
|
|
// {
|
|
|
// name: "中下",
|
|
|
- // value: 6,
|
|
|
+ // value: 'z6',
|
|
|
// },
|
|
|
{
|
|
|
name: "右上",
|
|
|
- value: 7,
|
|
|
+ value: "z7",
|
|
|
},
|
|
|
{
|
|
|
name: "右中",
|
|
|
- value: 8,
|
|
|
+ value: "z8",
|
|
|
},
|
|
|
// {
|
|
|
// name: "右下",
|
|
|
- // value: 9,
|
|
|
+ // value: 'z9',
|
|
|
// },
|
|
|
],
|
|
|
dialogVisible: false,
|
|
|
@@ -321,41 +321,70 @@ export default {
|
|
|
// 监听属性 类似于data概念
|
|
|
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") 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;
|
|
|
- }
|
|
|
- .card-left {
|
|
|
- position: relative;
|
|
|
- height: ${this.params.cardHeight}mm;
|
|
|
- width: ${this.params.cardWidth}mm;
|
|
|
- display:flex;
|
|
|
- ${this.contentStyle(this.params.direction)[0]}
|
|
|
- }
|
|
|
- .card-con {
|
|
|
- margin-top: ${this.directionPadding("top")}mm;
|
|
|
- margin-right: ${this.directionPadding("right")}mm;
|
|
|
- margin-bottom: ${this.directionPadding("bottom")}mm;
|
|
|
- margin-left: ${this.directionPadding("left")}mm;
|
|
|
- font-size:35px;
|
|
|
- font-family: ${this.params.fontFamily};
|
|
|
- ${this.contentStyle(this.params.direction)[1]}
|
|
|
- }
|
|
|
- </style>
|
|
|
- <div class="card-left">
|
|
|
- <div class="card-con">亲爱的，生日快乐！</div>
|
|
|
- </div>`;
|
|
|
+ return `<!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.cardHeight}mm;
|
|
|
+ width: ${this.params.cardWidth}mm;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ position: absolute;
|
|
|
+ height: ${this.params.cardHeight}mm;
|
|
|
+ width: ${this.params.cardWidth}mm;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display:flex;
|
|
|
+ ${this.contentStyle(this.params.direction)[0]}
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-con {
|
|
|
+ margin-top: ${this.directionPadding("top")}mm;
|
|
|
+ margin-right: ${this.directionPadding("right")}mm;
|
|
|
+ margin-bottom: ${this.directionPadding("bottom")}mm;
|
|
|
+ margin-left: ${this.directionPadding("left")}mm;
|
|
|
+ font-size:35px;
|
|
|
+ font-family: ${this.params.fontFamily};
|
|
|
+ ${this.contentStyle(this.params.direction)[1]}
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="page">
|
|
|
+ <div class="box">
|
|
|
+ <div class="card-con">
|
|
|
+ 亲爱的，生日快乐！
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+ </html>`;
|
|
|
},
|
|
|
},
|
|
|
// 监控data中的数据变化
|
|
|
@@ -464,16 +493,6 @@ 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毫米！`);
|
|
|
- // }
|
|
|
- // }
|
|
|
cloudConfigAdd(this.params).then((res) => {
|
|
|
console.log("添加贺卡配置信息", res);
|
|
|
if (res.code === 200) {
|
|
|
@@ -488,65 +507,86 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
printTest() {
|
|
|
- let html = `<style type="text/css">
|
|
|
- @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;
|
|
|
- }
|
|
|
- .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.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]}
|
|
|
- }
|
|
|
- .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;
|
|
|
- font-size:35px;
|
|
|
- font-family: ${this.params.fontFamily};
|
|
|
- ${this.contentStyle(1)[1]}
|
|
|
- }
|
|
|
- </style>
|
|
|
- <div class="card-a4">
|
|
|
- <div class="card-left">
|
|
|
- <div class="card-con">
|
|
|
- 亲爱的，生日快乐！
|
|
|
+ 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
|
|
|
+ : this.params.cardHeight - 10
|
|
|
+ }mm;
|
|
|
+ top: ${this.params.direction === 1 ? 2 : 8}mm;
|
|
|
+ left: 0;
|
|
|
+ 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;
|
|
|
+ font-size:35px;
|
|
|
+ font-family: ${this.params.fontFamily};
|
|
|
+ ${this.contentStyle(1)[1]}
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="page">
|
|
|
+ <div class="box">
|
|
|
+ <div class="card-con">
|
|
|
+ 亲爱的，生日快乐！
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>`;
|
|
|
+ </body>
|
|
|
+ </html>`;
|
|
|
|
|
|
let params = {
|
|
|
orderId: 0,
|
|
|
@@ -748,72 +788,72 @@ export default {
|
|
|
let style = ``;
|
|
|
let transform = ``;
|
|
|
if (direction === 1) {
|
|
|
- switch (this.params.textAlign) {
|
|
|
- case 1:
|
|
|
+ switch (this.params.jpAutoAlign) {
|
|
|
+ case "z1":
|
|
|
style = `justify-content:flex-start;align-items:flex-start;`;
|
|
|
break;
|
|
|
- case 2:
|
|
|
+ case "z2":
|
|
|
style = `justify-content:flex-start;align-items:center;`;
|
|
|
break;
|
|
|
- case 3:
|
|
|
+ case "z3":
|
|
|
style = `justify-content:flex-start;align-items:flex-end;`;
|
|
|
break;
|
|
|
- case 4:
|
|
|
+ case "z4":
|
|
|
style = `justify-content:center;align-items:flex-start;`;
|
|
|
break;
|
|
|
- case 5:
|
|
|
+ case "z5":
|
|
|
style = `justify-content:center;align-items:center;`;
|
|
|
break;
|
|
|
- case 6:
|
|
|
+ case "z6":
|
|
|
style = `justify-content:center;align-items:flex-end;`;
|
|
|
break;
|
|
|
- case 7:
|
|
|
+ case "z7":
|
|
|
style = `justify-content:flex-end;align-items:flex-start;`;
|
|
|
break;
|
|
|
- case 8:
|
|
|
+ case "z8":
|
|
|
style = `justify-content:flex-end;align-items:center;`;
|
|
|
break;
|
|
|
- case 9:
|
|
|
+ case "z9":
|
|
|
style = `justify-content:flex-end;align-items:flex-end;`;
|
|
|
break;
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
} else {
|
|
|
- switch (this.params.textAlign) {
|
|
|
- case 1:
|
|
|
+ switch (this.params.jpAutoAlign) {
|
|
|
+ case "z1":
|
|
|
style = `justify-content:flex-end;align-items:flex-start;`;
|
|
|
transform = `transform: translateX(100%) rotate(90deg);transform-origin: left top;`;
|
|
|
break;
|
|
|
- case 2:
|
|
|
+ case "z2":
|
|
|
style = `justify-content:center;align-items:flex-start;`;
|
|
|
transform = `transform: translateX(50%) translateY(-50%) rotate(90deg);transform-origin: left;`;
|
|
|
break;
|
|
|
- case 3:
|
|
|
+ case "z3":
|
|
|
style = `justify-content:flex-start;align-items:flex-start;`;
|
|
|
transform = `transform: translateY(-100%) rotate(90deg);transform-origin: left bottom;`;
|
|
|
break;
|
|
|
- case 4:
|
|
|
+ case "z4":
|
|
|
style = `justify-content:flex-end;align-items:center;`;
|
|
|
transform = `transform: translateX(50%) rotate(90deg);transform-origin: center top;`;
|
|
|
break;
|
|
|
- case 5:
|
|
|
+ case "z5":
|
|
|
style = `justify-content:center;align-items:center;`;
|
|
|
transform = `transform: rotate(90deg);`;
|
|
|
break;
|
|
|
- case 6:
|
|
|
+ case "z6":
|
|
|
style = `justify-content:flex-start;align-items:center;`;
|
|
|
transform = `transform: translateX(-50%) rotate(90deg);`;
|
|
|
break;
|
|
|
- case 7:
|
|
|
+ case "z7":
|
|
|
style = `justify-content:flex-end;align-items:flex-end;`;
|
|
|
transform = `transform: translatey(100%) rotate(90deg);transform-origin: right top;`;
|
|
|
break;
|
|
|
- case 8:
|
|
|
+ case "z8":
|
|
|
style = `justify-content:center;align-items:flex-end;`;
|
|
|
transform = `transform: translateX(-50%) translateY(50%) rotate(90deg);transform-origin:right;`;
|
|
|
break;
|
|
|
- case 9:
|
|
|
+ case "z9":
|
|
|
style = `justify-content:flex-start;align-items:flex-end;`;
|
|
|
transform = `transform: translateX(-100%) rotate(90deg);transform-origin:right bottom;`;
|
|
|
break;
|
Funny