|
|
@@ -0,0 +1,263 @@
|
|
|
+<template>
|
|
|
+ <div class="label-container">
|
|
|
+ <!-- 第一行信息 -->
|
|
|
+ <div class="label-title">
|
|
|
+ <div class="label-info-left">
|
|
|
+ <div>{{ productName ? productName : ' ' }}</div>
|
|
|
+ <div>{{ purchaseOrigins ? purchaseOrigins : ' ' }}</div>
|
|
|
+ <div>{{ batchNo ? batchNo : ' ' }}</div>
|
|
|
+ <div>{{ specification ? specification : ' ' }}</div>
|
|
|
+ <div>{{ createDate ? createDate : ' ' }}</div>
|
|
|
+ <div>{{ layBy ? layBy : ' ' }}</div>
|
|
|
+ <div>{{ notice ? notice : ' ' }}</div>
|
|
|
+ <div>{{ enforceStandards ? enforceStandards : ' ' }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="label-info-right">
|
|
|
+ <div class="right-box">{{ level ? level : ' ' }}</div>
|
|
|
+ <div class="right-div"
|
|
|
+ >{{ netWeight ? netWeight : ' '
|
|
|
+ }}{{ weightUnit ? weightUnit : ' ' }}</div
|
|
|
+ >
|
|
|
+ <div class="right-div"
|
|
|
+ >{{ warrantyPeriod ? warrantyPeriod : ' '
|
|
|
+ }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // import JsBarcode from 'jsbarcode';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ productName: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ const {
|
|
|
+ batchNo,
|
|
|
+ createDate,
|
|
|
+ enforceStandards,
|
|
|
+ layBy,
|
|
|
+ level,
|
|
|
+ netWeight,
|
|
|
+ notice,
|
|
|
+ productName,
|
|
|
+ purchaseOrigins,
|
|
|
+ specification,
|
|
|
+ warrantyPeriod,
|
|
|
+ warrantyPeriodUnit,
|
|
|
+ weightUnit
|
|
|
+ } = this.$route.query;
|
|
|
+ this.productName = productName;
|
|
|
+ this.batchNo = batchNo;
|
|
|
+ this.createDate = createDate;
|
|
|
+ this.enforceStandards = enforceStandards;
|
|
|
+ this.layBy = layBy;
|
|
|
+ this.level = level;
|
|
|
+ this.netWeight = netWeight;
|
|
|
+ this.notice = notice;
|
|
|
+ this.purchaseOrigins = purchaseOrigins;
|
|
|
+ this.specification = specification;
|
|
|
+ this.warrantyPeriod = warrantyPeriod;
|
|
|
+ this.warrantyPeriodUnit = warrantyPeriodUnit;
|
|
|
+ this.weightUnit = weightUnit;
|
|
|
+
|
|
|
+ if (this.warrantyPeriodUnit === '1') {
|
|
|
+ this.warrantyPeriodUnit = '分钟';
|
|
|
+ } else if (this.warrantyPeriodUnit === '2') {
|
|
|
+ this.warrantyPeriodUnit = '小时';
|
|
|
+ } else if (this.warrantyPeriodUnit === '3') {
|
|
|
+ this.warrantyPeriodUnit = '日';
|
|
|
+ } else if (this.warrantyPeriodUnit === '4') {
|
|
|
+ this.warrantyPeriodUnit = '月';
|
|
|
+ } else if (this.warrantyPeriodUnit === '5') {
|
|
|
+ this.warrantyPeriodUnit = '年';
|
|
|
+ }
|
|
|
+
|
|
|
+ // const { id, name, price } = this.$route.query;
|
|
|
+ // this.order = { id, name, price };
|
|
|
+
|
|
|
+ // console.log('打印参数', this.$route.query);
|
|
|
+ // console.log('打印参数', this.$route.query);
|
|
|
+ // this.orderId = this.$route.query.orderId;
|
|
|
+ // this.type = this.$route.query.type;
|
|
|
+ // window.addEventListener('message', (event) => {
|
|
|
+ // console.log('接收到的参数', event.data);
|
|
|
+ // });
|
|
|
+ // JsBarcode('#barCode', '123456789012', {
|
|
|
+ // format: 'CODE128',
|
|
|
+ // width: 4,
|
|
|
+ // height: 40,
|
|
|
+ // displayValue: true
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .label-container {
|
|
|
+ // font-family: "Arial", "Helvetica", sans-serif;
|
|
|
+ width: 90mm;
|
|
|
+ height: 60mm;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 10px;
|
|
|
+ color: green;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label-title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 0 45px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .label-info-left {
|
|
|
+ display: flex;
|
|
|
+ // flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 54px 0 0 62px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ height: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label-info-right {
|
|
|
+ display: flex;
|
|
|
+ // flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ margin: 34px 0 1px 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-div {
|
|
|
+ margin: 0 0 1px 18px;
|
|
|
+ height: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .knife-table {
|
|
|
+ border-collapse: collapse;
|
|
|
+ width: 100%;
|
|
|
+ margin: 8px 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .knife-table th,
|
|
|
+ .knife-table td {
|
|
|
+ border: 1px solid #000;
|
|
|
+ padding: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .knife-table tbody {
|
|
|
+ height: 30px;
|
|
|
+
|
|
|
+ .knife-title {
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .knife-table img {
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0 62px 0 45px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ p {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 0 62px 0 45px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .phone-canvas-left-box {
|
|
|
+ width: 220px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ canvas {
|
|
|
+ width: 100px;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 9px;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone-canvas-right-box {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: flex-end;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ canvas {
|
|
|
+ width: 150px;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icons {
|
|
|
+ display: flex;
|
|
|
+ gap: 3px;
|
|
|
+ padding: 0 62px 0 45px;
|
|
|
+ margin-top: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .barcode {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .size {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 8px;
|
|
|
+ font-weight: normal;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expiry {
|
|
|
+ display: flex;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: normal;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+</style>
|