a4打印

src/components/settingComponents/print.vue

@@ -43,7 +43,7 @@ export default {
       tabList: [
         { name: "云打印", index: 0, activeName: "printerList" },
         { name: "有线打印", index: 1, activeName: "usbPrinter" },
-        // { name: "A4打印", index: 2, activeName: "a4Printer" },
+        { name: "A4打印", index: 2, activeName: "a4Printer" },
         { name: "贺卡打印", index: 3, activeName: "greetingCardPrinter" },
       ],
       tabNum: 0,

src/components/settingComponents/print/a4Printer.vue

@@ -1,11 +1,28 @@
 <template>
   <div class="printer-list">
     <div class="model">
-      <div class="title">
-        <div class="name">A4打印</div>
-      </div>
       <div class="setting-model">
         <div class="list">
+          <div class="item">
+            <div class="left">
+              <div class="left-top">
+                <div class="name">选择打印模板</div>
+              </div>
+              <div class="left-bot">根据您的制作和配送的场景选择适合的模板</div>
+              <div class="module-list">
+                <div class="module" v-for="(module,index) in moduleList" :key=index>
+                  <div class="img-wrap">
+                    <img class="img" src="../../../../static/image/print-module.png" alt="">
+                  </div>
+                  <div class="module-right">
+                    <div class="module-name">{{module.name}}</div>
+                    <div class="module-tips">{{module.tips}}</div>
+                  </div>
+                  <div v-if="activeModuleIndex === index" class="module-status">使用中</div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="item" v-for="(v,i) in list" :key=i>
             <div class="left">
               <div class="left-top">
@@ -43,15 +60,7 @@
 <script>
 import printerAdd from "./printerAdd";
 import {
-  getShopList,
-  shopDeviceList,
-  deviceDetail,
-  deviceList,
-  deviceAdd,
-  deviceDelete,
-  deviceStatus,
-  printTest,
-  shopListNew,
+ 
 } from "../../../api/shop";
 export default {
   name: "a4Printer",
@@ -60,6 +69,21 @@ export default {
   },
   data() {
     return {
+      moduleList:[
+        {
+          name: '默认模板',
+          tips: '配送单，不包含回执'
+        },
+        {
+          name: '配送模板',
+          tips: '配货单，包含预定人信息'
+        },
+        {
+          name: '签收模板',
+          tips: '配货签收'
+        },
+      ],
+      activeModuleIndex: 0,
       list: [
         {
           name: "开启电脑打印",
@@ -78,7 +102,7 @@ export default {
           value: 1,
           field: "openAutoorder",
           tips: "开通后将使用云盒模式自动打印订单",
-        }
+        },
       ],
     };
   },
@@ -86,137 +110,12 @@ export default {
   computed: {},
   // 监控data中的数据变化
   watch: {},
-  // 方法集合
-  methods: {
-    printTest(v) {
-      printTest({ deviceSn: v.deviceSn }).then((res) => {
-        if (res.code === 200) {
-          this.$message({
-            type: "success",
-            message: "操作成功！",
-          });
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    deletePrinter(v) {
-      this.$confirm("此操作将删除打印机, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-        center: true,
-      })
-        .then(() => {
-          deviceDelete({ id: v.id }).then((res) => {
-            if (res.code === 200) {
-              this.$message({
-                type: "error",
-                message: "删除成功！",
-              });
-              this.refreshData();
-            } else {
-              this.$message({
-                type: "error",
-                message: res.msg,
-              });
-            }
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
-        });
-    },
-    refreshData() {
-      this.getPrinterNum();
-      this.getPrinterList();
-    },
-    addPrinter(e) {
-      console.log(e);
-      if (!e) {
-        this.$refs.printerAdd.init();
-      } else {
-        this.$refs.printerAdd.init(JSON.parse(JSON.stringify(e)));
-      }
-    },
-    getPrinterList() {
-      shopDeviceList({ deviceType: 2 }).then((res) => {
-        if (res.code === 200) {
-          this.printerList = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    getPrinterNum() {
-      deviceStatus().then((res) => {
-        if (res.code === 200) {
-          this.pinter = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    getDeviceList() {
-      deviceList({ type: 2 }).then((res) => {
-        if (res.code === 200) {
-          this.deviceList = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    getShopList() {
-      shopListNew().then((res) => {
-        if (res.code === 200) {
-          this.shopList = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-  },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    this.getPrinterNum();
-    this.getPrinterList();
-    this.getDeviceList();
-    this.getShopList();
-  },
+  created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
-  // 生命周期 - 创建之前
-  beforeCreate() {},
-  // 生命周期 - 挂载之前
-  beforeMount() {},
-  // 生命周期 - 更新之前
-  beforeUpdate() {},
-  // 生命周期 - 更新之后
-  updated() {},
-  // 生命周期 - 销毁之前
-  beforeDestroy() {},
-  // 生命周期 - 销毁完成
-  destroyed() {},
-  // 如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
+  // 方法集合
+  methods: {},
 };
 </script>
 
@@ -310,6 +209,58 @@ export default {
             line-height: 17px;
             color: #999999;
           }
+          .module-list {
+            display: flex;
+            align-items: center;
+            margin-top: 10px;
+            .module {
+              position: relative;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: 250px;
+              height: 150px;
+              background: #f7f1f1;
+              border-radius: 5px;
+              cursor: pointer;
+              margin-right: 20px;
+              .module-status {
+                position: absolute;
+                top: 0;
+                right: 0;
+                color: #fc7200;
+                font-size: 12px;
+                font-weight: bold;
+                padding: 4px;
+              }
+              .img-wrap {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 60px;
+                height: 60px;
+                background: #fc7200;
+                border-radius: 50%;
+                .img {
+                  width: 30px;
+                  height: 30px;
+                }
+              }
+              .module-right {
+                margin-left: 5px;
+
+                .module-name {
+                  font-size: 14px;
+                  color: #666;
+                }
+                .module-tips {
+                  font-size: 12px;
+                  color: #999;
+                  margin-top: 5px;
+                }
+              }
+            }
+          }
         }
         .right {
           display: flex;