打印组件

src/assets/css/index.scss

@@ -37,6 +37,7 @@ html {
 
 body {
   margin: 0;
+  overflow: hidden;
 }
 
 h1 {
@@ -545,3 +546,32 @@ img {
   display: flex;
   justify-content: center;
 }
+
+
+.print-images {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 420px;
+  max-height: 400px;
+  padding: 0 10px;
+  overflow-y: auto;
+
+  img {
+    width: 180px;
+    margin-bottom: 10px;
+    cursor: pointer;
+  }
+
+  p {
+    width: 100%;
+    line-height: 1.3;
+    margin-bottom: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+}

src/components/LablesMember.vue

@@ -0,0 +1,343 @@
+<template>
+  <transition name="fade">
+    <div class="LablesMember" v-if="isShow">
+      <div class="mask"></div>
+      <div class="LablesMember-wrapper">
+        <i class="el-icon-close" @click="hide"></i>
+        <div class="top">
+          <img src="../assets/images/avatar.png" />
+          <div class="top-right">
+            <div class="top-user">
+              <h2>用户：嫣然</h2>
+              <span>正式版</span>
+            </div>
+            <p>开通SVIP，享黑胶VIP、数字专辑、有声书等特权</p>
+          </div>
+        </div>
+        <div class="middle">
+          <div class="left">
+            <div class="tab">
+              <div @click="tabIndex = 0" :class="[tabIndex === 0 ? 'active' : '']">
+                <span>VIP</span>
+              </div>
+              <div @click="tabIndex = 1" :class="[tabIndex === 1 ? 'active' : '']">
+                <span>SVIP</span>
+              </div>
+              <div @click="tabIndex = 2" :class="[tabIndex === 2 ? 'active' : '']">
+                <span>超级VIP</span>
+              </div>
+            </div>
+            <div class="tab-content"
+              :class="[tabIndex === index ? 'active' : '']"
+              v-for="(item, index) in 3"
+              :key="index">
+              <div
+                class="tab-content__item"
+                :class="[currIndex === i ? 'active' : '']"
+                v-for="(price, i) in 4"
+                :key="i"
+                @click="currIndex = i">
+                <h3>12个月</h3>
+                <div class="price">
+                  <i>¥</i>
+                  <span>88</span>
+                </div>
+                <div class="original-price">
+                  <i>¥</i>
+                  <span>88</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="right-price">
+              <i>¥</i>
+              <span class="price">88</span>
+            </div>
+            <div class="code">
+              <img src="../assets/code.png" />
+            </div>
+            <div class="paytype">
+              <svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12.11 0H.89A.89.89 0 0 0 0 .89v11.22c0 .491.399.89.89.89h11.22a.89.89 0 0 0 .89-.89V.89a.89.89 0 0 0-.89-.89zM6.5 10.65a5.592 5.592 0 0 1-1.848-.311c-.364.241-.975.639-1.215.75-.352.162-.25-.188-.25-.188L3.395 9.7C2.24 8.895 1.499 7.654 1.499 6.26c0-2.426 2.239-4.392 5-4.392 1.693 0 3.188.74 4.093 1.869l-4.905 2.27s-.4.152-.75-.062c-.35-.213-.813-.564-.813-.564s-.538-.458-.25.376l.751 1.756s.089.524.687.189c.468-.262 4.103-2.454 5.666-3.397a3.94 3.94 0 0 1 .523 1.954c0 2.425-2.239 4.391-5.001 4.391z" fill="#09BB07" fill-rule="nonzero"></path>
+              </svg>
+              <span>微信支付</span>
+            </div>
+            <div class="pay-btn">
+              <el-button round size="mini" style="margin-right: 10px;" @click="isShow = false">取消支付</el-button>
+              <el-button round size="mini" type="warning">我已支付</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        isShow: false,
+        tabIndex: 0,
+        currIndex: 0
+      }
+    },
+
+    methods: {
+      show () {
+        this.isShow = true
+      },
+
+      hide () {
+        this.isShow = false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .LablesMember {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1111;
+    width: 100%;
+    height: 100%;
+
+    .mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      background: rgba($color: #000000, $alpha: 0.8);
+    }
+
+    .LablesMember-wrapper {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 11;
+      width: 900px;
+      padding: 40px 40px;
+      transform: translate(-50%, -50%);
+      border-radius: 12px;
+      overflow: hidden;
+      background: linear-gradient(41deg, #ffebd3, #fff8e3 61%, #fae2c4 99%);
+
+      .top {
+        display: flex;
+        align-items: center;
+        margin-bottom: 30px;
+
+        img {
+          width: 40px;
+          height: 40px;
+          margin-right: 10px;
+        }
+
+
+        p {
+          color: #632e2e;
+          opacity: 0.8;
+        }
+
+        .top-user {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          h2 {
+            margin-right: 6px;
+            font-size: 16px;
+            color: #333;
+          }
+
+          span {
+            font-size: 12px;
+            color: #666;
+          }
+        }
+      }
+
+      .el-icon-close {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        z-index: 11;
+        font-size: 40px;
+        color: #333;
+        transition: transform ease-in-out 0.2;
+        cursor: pointer;
+        transform-origin: center center;
+
+        &:hover {
+          opacity: 0.6;
+          // transform: translate(50%, -50%) rotate(180deg);
+        }
+      }
+
+      .middle {
+        display: flex;
+
+        .left {
+          flex: 1;
+          padding: 0 0;
+          border-radius: 20px;
+          overflow: hidden;
+          background-color: #fff;
+          box-shadow: 0 0 20px 0 hsla(0, 39%, 56%, .1), 0 0 16px 0 rgba(0, 0, 0, .08);
+
+          .tab {
+            display: flex;
+            align-items: center;
+            height: 50px;
+            margin-bottom: 40px;
+            background: #fff3ee;
+
+            div {
+              position: relative;
+              flex: 1;
+              height: 50px;
+              line-height: 50px;
+              text-align: center;
+              font-size: 22px;
+              font-weight: 600;
+              cursor: pointer;
+              color: #b69593;
+
+              span {
+                position: relative;
+                z-index: 2;
+              }
+
+              &.active {
+                color: #6f3333;
+
+                &::after {
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  z-index: 1;
+                  width: 100%;
+                  height: 100%;
+                  background: url(../assets/tab_middle.png) no-repeat center;
+                  background-size: contain;
+                  content: '';
+                }
+              }
+            }
+          }
+
+          .tab-content {
+            display: none;
+            align-items: center;
+            padding: 0 20px;
+
+            &.active {
+              display: flex;
+            }
+
+            &__item {
+              display: flex;
+              align-items: center;
+              flex-direction: column;
+              width: 140px;
+              height: 190px;
+              margin-right: 14px;
+              padding-top: 40px;
+              background-color: #fff;
+              border-radius: 10px;
+              cursor: pointer;
+              border: 1px solid rgba(0, 0, 0, .08);
+
+              &.active {
+                border: 1px solid #ff7548;
+                background: linear-gradient(33deg, #ffd1c5 -10%, #ffd1c5 21%, #ffe8e5 85%);
+              }
+
+              &:last-child {
+                margin-right: 0;
+              }
+
+              h3 {
+                margin-bottom: 20px;
+                font-size: 15px;
+                font-weight: 600;
+              }
+
+              .original-price {
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+                color: #888;
+                text-decoration: line-through;
+              }
+
+              .price {
+                display: flex;
+                align-items: baseline;
+                margin-bottom: 6px;
+                color: #f13d3d;
+                font-size: 16px;
+
+                span {
+                  font-weight: 700;
+                  font-size: 36px;
+                }
+              }
+            }
+          }
+        }
+
+        .right {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-left: 40px;
+          padding: 20px 0 20px 0;
+
+          .paytype {
+            display: flex;
+            align-items: center;
+
+            span {
+              margin-left: 8px;
+              font-size: 14px;
+              color: #666;
+            }
+          }
+
+          .pay-btn {
+            display: flex;
+            align-items: center;
+            margin-top: 40px;
+          }
+
+          .right-price {
+            display: flex;
+            align-items: baseline;
+            margin-bottom: 16px;
+            color: #f13d3d;
+            font-size: 18px;
+            font-weight: 600;
+
+            span {
+              margin-left: 4px;
+              font-size: 30px;
+              font-weight: 900;
+            }
+          }
+
+          .code img {
+            width: 150px;
+            height: 150px;
+            margin: 14px 0;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/print/Print.vue

@@ -17,10 +17,6 @@
               <i class="iconfont">&#xea3f;</i>
               <span>表格</span>
             </div>
-            <div class="ep-draggable-item item" tid="defaultModule.html">
-              <i class="iconfont">&#xea3f;</i>
-              <span>html</span>
-            </div>
           </div>
           <div class="title">辅助元素</div>
           <div class="left-item__wrapper">
@@ -44,6 +40,38 @@
           <div class="title">常用元素</div>
           <div class="left-item__wrapper" id="custom-provider">
           </div>
+          <div class="title">
+            <span>素材</span>
+            <el-button type="primary" size="mini" @click="addField">添加</el-button>
+          </div>
+          <div class="left-item__wrapper">
+            <el-popover
+              title="图片素材(点击添加)"
+              trigger="hover">
+              <div
+                class="item"
+                slot="reference"
+                style="cursor: pointer;">
+                <div>图片素材</div>
+              </div>
+              <div class="print-images">
+                <img src="../../assets/images/triman1.png" v-for="(item, index) in 20" :key="index"  @click="addImage(`https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200`)" />
+              </div>
+            </el-popover>
+            <el-popover
+              title="图片素材(点击添加)"
+              trigger="hover">
+              <div
+                class="item"
+                slot="reference"
+                style="cursor: pointer;">
+                <div>文字素材</div>
+              </div>
+              <div class="print-images">
+                <p v-for="(item, index) in 20" @click="addText(`EVATOST CONSULTING LTD CONSULTING CONSULTING CONSULTING CONSULTING`)" :key="index">EVATOST CONSULTING LTD</p>
+              </div>
+            </el-popover>
+          </div>
           <div class="title">
             <span>动态数据（如日期）</span>
             <el-button type="primary" size="mini" @click="addField">添加</el-button>
@@ -259,32 +287,14 @@
         this.isShowDynamicForm = true
       },
 
-      addItemToCanvas(name) {
-        this.panel.addPrintText({
+      addImage(src) {
+        this.panel.addPrintImage({
           options: {
-            field: name,
-            testData: name,
             title: '',
             left: 70.5,
             top: 58.5,
-            height: 18,
-            width: 116,
-            coordinateSync: false,
-            widthHeightSync: false,
-            hideTitle: true,
-            fontFamily: 'Microsoft YaHei',
-            fontWeight: '700',
-            textContentVerticalAlign: 'middle',
-            contentPaddingLeft: 5.25,
-            qrCodeLevel: 0,
-            right: 186.5,
-            bottom: 73.5,
-            vCenter: 128.5,
-            hCenter: 64.5
-          },
-          printElementType: {
-            title: '文本',
-            type: 'text'
+            src: src,
+            widthHeightSync: true
           }
         })
         const el = this.hiprintTemplate.printPanels[0].printElements.at(-1)
@@ -293,6 +303,33 @@
         el.design(void 0, designPaper)
       },
 
+      addText(text) {
+        this.panel.addPrintText({
+          options: {
+            field: text || '',
+            testData: text || '',
+            title: '',
+            left: 70.5,
+            top: 58.5,
+            width: 140,
+            height: 20,
+            coordinateSync: true,
+            widthHeightSync: true,
+            hideTitle: true,
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '700'
+          }
+        })
+        const el = this.hiprintTemplate.printPanels[0].printElements.at(-1)
+        const designPaper = this.hiprintTemplate.printPanels[0].designPaper
+        this.hiprintTemplate.printPanels[0].appendDesignPrintElement(designPaper, el, true)
+        el.design(void 0, designPaper)
+      },
+
+      addItemToCanvas(name) {
+        this.addText(name)
+      },
+
       onConfirm() {
         this.$refs.form.validate((valid) => {
           if (valid) {
@@ -341,11 +378,11 @@
 
 
         this.$nextTick(() => {
-          !this.isPrint && this.hiprintTemplate.design('#hiprint-printTemplate', {
+          this.hiprintTemplate.design('#hiprint-printTemplate', {
             grid: true
           })
 
-          // this.panel = this.hiprintTemplate.printPanels[0]
+          this.panel = this.hiprintTemplate.printPanels[0]
         })
       },
 
@@ -413,6 +450,7 @@
     }
   }
 </script>
+
 <style lang="scss" scoped>
   .print {
     height: 100%;
@@ -519,8 +557,8 @@
               margin-right: 0;
             }
 
-            span {
-              margin-top: 10px;
+            i {
+              margin-bottom: 10px;
             }
           }
 

src/view/Home.vue

@@ -64,7 +64,6 @@
             <el-menu-item index="/myUrgencyOrder">紧急备货单</el-menu-item>
             <el-menu-item index="/productLabel">商品条码管理</el-menu-item>
           </el-submenu>
-
           <el-submenu index="/copyProduct">
             <template slot="title">
               <i class="el-icon-goods"></i>
@@ -188,7 +187,10 @@
           <el-submenu index="/labelsTemplate">
             <template slot="title">
               <i class="el-icon-s-goods"></i>
-              <span slot="title">标签管理</span>
+              <div slot="title" style="display: inline-block;">
+                <span>标签管理</span>
+                <el-button type="text" style="margin-left: 72px; padding: 0;" @click.stop="openMember">开通</el-button>
+              </div>
             </template>
             <el-menu-item index="/labelsTemplate">模板管理</el-menu-item>
             <el-menu-item index="/labelsPrint">标签打印</el-menu-item>
@@ -232,20 +234,26 @@
         <el-button @click="closeTemuAlert">关 闭</el-button>
       </span>
     </el-dialog>
-
     <div id="kefu" @click="gotoKefu">
       <label slot="reference" class="topBtn" title="联系客服"></label>
     </div>
+    <el-dialog
+      title="开通标签会员"
+      :close-on-click-modal="false"
+      width="1200">
+    </el-dialog>
+    <LablesMember ref="LablesMember"></LablesMember>
   </div>
 </template>
 
 <script>
   import {mapMutations, mapState} from 'vuex'
   import AiPayment from "@/components/AiPayment.vue";
-import {sendAliexpressAPIMessage, sendTemuSellerAgentMessage, sendGoodcangAPIMessage} from "@/api/chromeApi";
+  import LablesMember from '@/components/LablesMember'
+  import {sendAliexpressAPIMessage, sendGoodcangAPIMessage} from "@/api/chromeApi";
 
   export default {
-  components: {AiPayment},
+    components: {AiPayment, LablesMember},
     data() {
       return {
         isCollapse: false,
@@ -314,6 +322,11 @@ export default {
           this.$router.push('coinFlow')
         }
       },
+
+      openMember() {
+        this.$refs.LablesMember.show()
+      },
+
       handleClose() {
         this.form.mallId = "";
         this.form.mallName = "";