Merge branch 'label' of https://gitee.com/three-make-money/temu-plugin into label

src/api/chromeApi.js

@@ -1,5 +1,6 @@
 import store from '@/store'
-import {genAnti} from "@/api/genAnti";
+import { genAnti } from "@/api/genAnti";
+import { Message } from 'element-ui'
 
 /**
  * 向Chrome发送消息
@@ -20,9 +21,16 @@ export async function sendChromeAPIMessage(message) {
   if (message.anti) {
     message.anti = await genAnti.a()
   }
+
   return new Promise((resolve) => {
     // @ts-ignore
-    chrome.runtime.sendMessage(message, resolve)
+    // chrome.runtime.sendMessage(message, resolve)
+    chrome.runtime.sendMessage(message, res => {
+      if (res.error_code === 40001) {
+        Message.error('请先登录拼多多跨境卖家中心')
+      }
+      resolve(res)
+    })
   })
 }
 
@@ -164,4 +172,4 @@ export async function sendXcAPIMessage(message) {
     // @ts-ignore
     chrome.runtime.sendMessage(message, resolve)
   })
-}
+}

src/components/LablesMember.vue

@@ -20,64 +20,15 @@
               <div @click="tabIndex = 0, currIndex = 0, getPriceList(1)" :class="[tabIndex === 0 ? 'active' : '']">
                 <span>金币充值</span>
               </div>
-              <div @click="tabIndex = 1, currIndex = 0" :class="[tabIndex === 1 ? 'active' : '']">
+              <div @click="tabIndex = 1, currIndex = 0, getPriceList(0)" :class="[tabIndex === 1 ? 'active' : '']">
-                <span>基础功能</span>
+                <span>年度会员</span>
               </div>
               <div @click="tabIndex = 2, currIndex = 0, getPriceList(2)" :class="[tabIndex === 2 ? 'active' : '']">
                 <span>高级功能</span>
               </div>
             </div>
-            <div class="tab-content" v-if="tabIndex === 1">
-              <div class="title">金币充值</div>
-              <div class="tab-content__item--wrapper">
-                <el-form :model="form" label-position="top" ref="form" label-width="100px" class="form" style="width: 100%;">
-                  <el-form-item
-                    prop="mallName"
-                    label="当前绑定店铺"
-                    style="width: 100%;"
-                    :rules="[{ required: true, message: '请先登录拼多多跨境卖家中心', trigger: 'blur' }]">
-                    <el-input readonly placeholder="请先登录拼多多跨境卖家中心" v-model="form.mallName"></el-input>
-                  </el-form-item>
-                  <el-form-item
-                    prop="mallId"
-                    v-show="false"
-                    style="width: 100%;"
-                    :rules="[{ message: '请输入店铺ID', trigger: 'blur' }]">
-                    <el-input placeholder="请输入店铺ID" v-model="form.mallId"></el-input>
-                  </el-form-item>
-                  <el-form-item
-                    prop="code"
-                    label="激活码"
-                    :rules="[{ required: true, message: '请输入激活码', trigger: 'blur' }]">
-                    <el-input placeholder="请输入激活码" v-model="form.code"></el-input>
-                  </el-form-item>
-                </el-form>
-              </div>
-            </div>
             <div class="tab-content" v-if="tabIndex === 0">
-              <div class="title">基础功能</div>
+              <div class="title">金币充值</div>
-              <div class="tab-content__item--wrapper">
-                <div
-                  class="tab-content__item"
-                  :class="[currIndex === i ? 'active' : '']"
-                  v-for="(price, i) in priceList"
-                  :key="i"
-                  @click="currIndex = i, getQrcode(price)">
-                  <h3>{{ price.remark }}</h3>
-                  <div class="price">
-                    <i>¥</i>
-                    <span>{{ price.price }}</span>
-                  </div>
-                  <div class="original-price">
-                    <i>¥</i>
-                    <span>{{ price.originPrice }}</span>
-                  </div>
-                  <p>{{ price.coin }}金币</p>
-                </div>
-              </div>
-            </div>
-            <div class="tab-content" v-if="tabIndex === 2">
-              <div class="title">标签合成</div>
               <div class="tab-content__item--wrapper">
                 <div
                   class="tab-content__item"
@@ -98,9 +49,55 @@
                 </div>
               </div>
             </div>
+            <div class="tab-content" v-if="tabIndex === 1">
+              <div class="title">年度会员</div>
+              <div class="tab-content__item--wrapper">
+                <div
+                  class="tab-content__item"
+                  :class="[currIndex === i ? 'active' : '']"
+                  v-for="(price, i) in priceList"
+                  :key="i"
+                  @click="currIndex = i, getQrcode(price)">
+                  <h3>{{ price.title }}</h3>
+                  <div class="price">
+                    <i>¥</i>
+                    <span>{{ price.price }}</span>
+                  </div>
+                  <div class="original-price">
+                    <i>¥</i>
+                    <span>{{ price.originPrice }}</span>
+                  </div>
+                  <!-- <p>{{ price.coin }}条/每年</p> -->
+                </div>
+              </div>
+            </div>
+            <div class="tab-content" v-if="tabIndex === 2">
+              <div class="title">标签合成</div>
+              <div class="tab-content__item--wrapper">
+                <div
+                  class="tab-content__item"
+                  :class="[currIndex === i ? 'active' : (Number(labelInfo.level) >= Number(price.type) ? 'disabled' : '')]"
+                  :data-level="price.type"
+                  :data-index="labelInfo.level"
+                  v-for="(price, i) in priceList"
+                  :key="i"
+                  @click="getQrcode(price, i)">
+                  <h3>{{ price.remark }}</h3>
+                  <div class="price">
+                    <i>¥</i>
+                    <span>{{ price.price }}</span>
+                  </div>
+                  <div class="original-price">
+                    <i>¥</i>
+                    <span>{{ price.originPrice }}</span>
+                  </div>
+                  <p>{{ price.coin }}条/每年</p>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="title" v-if="tabIndex !== 1">支付方式</div>
+          <div class="title">支付方式</div>
-          <div class="bottom" v-if="tabIndex !== 1">
+          <div class="bottom">
             <div class="bottom-left">
               <div class="code">
                 <vue-qr v-if="qrcode" :text="qrcode" :size="110" :margin="0" :logoSrc="wechatLogo"/>
@@ -123,15 +120,6 @@
               </div>
             </div>
           </div>
-          <div class="bottom" v-else>
-            <div class="bottom-left">
-            </div>
-            <div class="bottom-right">
-              <div class="pay-btn">
-                <el-button round size="mini" type="warning" @click="onConfirm">确定</el-button>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -140,6 +128,7 @@
 
 <script>
   import VueQr from 'vue-qr'
+  import { mapState } from 'vuex'
   export default {
     components: {
       VueQr
@@ -163,8 +152,10 @@
     computed: {
       wechatLogo: () => require(`../assets/wechat_logo.png`),
 
+      ...mapState(['labelInfo']),
+
       currGoods () {
-        if (!this.priceList.length || this.tabIndex === 1) {
+        if (!this.priceList.length) {
           return {}
         }
 
@@ -182,13 +173,29 @@
           if (res.code === 0) {
             this.priceList = res.data.records
             if (res.data.records.length) {
-              this.getQrcode(res.data.records[0])
+              if (this.tabIndex !== 2) {
+                this.getQrcode(res.data.records[0])
+              } else {
+                for (let i = 0; i < res.data.records.length; i++) {
+                  if (res.data.records[i].type > this.labelInfo.level) {
+                    this.getQrcode(res.data.records[i], i)
+                    break
+                  }
+                }
+              }
             }
           }
         })
       },
 
-      getQrcode(item) {
+      getQrcode(item, index) {
+        if (this.tabIndex === 2 && item.type <= this.labelInfo.level) {
+          return false
+        }
+
+        if (this.tabIndex === 2) {
+          this.currIndex = index
+        }
         this.$http.post(`/api/order/createOrder`, null, {
           params: {
             priceConfigId: item.id
@@ -203,45 +210,20 @@
           }
         })
       },
-      show () {
+
+      show(i) {
+        this.currIndex = 0
+        this.tabIndex = {
+          '0': 1,
+          '1': 0,
+          '2': 2
+        }[i]
+        this.getPriceList(i)
         this.isShow = true
       },
 
       hide () {
         this.isShow = false
-      },
-
-      onConfirm () {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.$http.post(`/api/coupon/getDetail`, null, {
-              params: {
-                code: this.form.code
-              }
-            }).then(res => {
-              if (res.code == 0) {
-                let msg = this.getMessage(res.data.type);
-                this.$confirm(msg, '温馨提示', {
-                  confirmButtonText: '确定',
-                  cancelButtonText: '取消',
-                  type: 'info'
-                }).then(() => {
-                  this.$http.post(`/api/order/upgradeByCode`, null, {
-                    params: {
-                      ...this.form
-                    }
-                  }).then(res => {
-                    if (res.code == 0) {
-                      this.$message.success('激活成功')
-                      this.$store.dispatch('getUserInfo')
-                      this.isShow = false
-                    }
-                  })
-                })
-              }
-            })
-          }
-        })
       }
     }
   }
@@ -280,7 +262,7 @@
       top: 50%;
       left: 50%;
       z-index: 11;
-      min-width: 840px;
+      min-width: 916px;
       // height: 620px;
       padding: 40px 40px;
       transform: translate(-50%, -50%);
@@ -421,6 +403,11 @@
                 background: linear-gradient(33deg, #ffd1c5 -10%, #ffd1c5 21%, #ffe8e5 85%);
               }
 
+              &.disabled {
+                cursor: no-drop;
+                background: #f4f4f4;
+              }
+
               &:last-child {
                 margin-right: 0;
               }

src/components/print/Print.vue

@@ -181,17 +181,41 @@
         </el-form-item>
       </el-form>
     </ai-dialog>
-    <ai-dialog :visible.sync="isShowTemplate" title="模板库" width="960" customFooter>
+    <ai-dialog :visible.sync="isShowTemplate" title="模板库" width="1060px" customFooter>
-      <ai-table
+      <div class="templateList-wrapper" v-infinite-scroll="getTemplateList" :infinite-scroll-distance="20">
+        <div class="templateList">
+          <div class="templateList-item" v-for="(item, index) in templateList" :key="index">
+            <!-- <img :src="item.previewUrl" /> -->
+            <el-image
+              style="height: 180px;"
+              fit="contain"
+              :src="item.previewUrl"
+              :preview-src-list="[item.previewUrl]">
+            </el-image>
+            <h2>{{ item.name }}</h2>
+            <el-button type="warning" size="mini" @click="updateTempate(item)">使用模板</el-button>
+          </div>
+        </div>
+      </div>
+      <!-- <ai-table
         :tableData="templateList"
         :col-configs="templateColConfigs"
         :total="templateTotal"
         :current.sync="searchTemplate.current"
         :size.sync="searchTemplate.size"
-        style="margin-top: 8px;"
+        height="480"
-        height="400"
         @getList="getTemplateList"
         v-loading="templateLoading">
+        <el-table-column slot="img" label="预览图" align="center">
+          <template v-slot="{ row }">
+            <el-image
+              style="width: 200px; height: 200px"
+              fit="contain"
+              :src="row.previewUrl"
+              :preview-src-list="[row.previewUrl]">
+            </el-image>
+          </template>
+        </el-table-column>
         <el-table-column slot="options" label="操作" align="center" width="200">
           <template v-slot="{ row }">
             <div class="table-options">
@@ -200,9 +224,9 @@
             </div>
           </template>
         </el-table-column>
-      </ai-table>
+      </ai-table> -->
       <div class="dialog-footer" slot="footer">
-        <el-button @click="isShowImage = false">取消</el-button>
+        <el-button @click="isShowTemplate = false">取消</el-button>
       </div>
     </ai-dialog>
   </div>
@@ -311,7 +335,7 @@
         },
         searchTemplate: {
           current: 1,
-          size: 10,
+          size: 8,
           type: 1
         },
         templateTotal: 0,
@@ -319,9 +343,11 @@
         tableData: [],
         total: 0,
         templateColConfigs: [
-          { prop: 'name', label: '模板名称', align: 'left' }
+          { prop: 'name', label: '模板名称', align: 'left' },
+          { slot: 'img'}
         ],
-        templateLoading: false
+        templateLoading: false,
+        hasMore: true
       }
     },
 
@@ -421,12 +447,23 @@
       },
 
       getTemplateList() {
+        if (!this.hasMore) return
+        if (this.templateLoading) return
+        this.templateLoading = true
         this.$http.post(`/api/templateRecommend/getRecommendPage`, null, {
           params: this.searchTemplate
         }).then(res => {
           if (res.code === 0) {
-            this.templateList = res.data.records
+            this.templateList = [...this.templateList, ...res.data.records]
             this.templateTotal = res.data.total
+
+            if (res.data.records.length < this.searchTemplate.size) {
+              this.hasMore = false
+            } else {
+              this.searchTemplate.current = this.searchTemplate.current + 1
+            }
+
+            this.templateLoading = false
           }
         })
       },
@@ -459,7 +496,8 @@
             top: 58.5,
             src: src,
             width: 100,
-            height: 100
+            height: 100,
+            fit: 'contain'
           }
         })
         const el = this.hiprintTemplate.printPanels[0].printElements.at(-1)
@@ -622,8 +660,12 @@
         this.isShowPreview = true
       },
 
-      getHtml() {
+      getHtml(template, printData) {
-        return this.elementToString(this.hiprintTemplate.getHtml(this.printData))
+        this.hiprintTemplate = newHiprintPrintTemplate('temulables')
+
+        this.hiprintTemplate.update(template)
+        const html = this.elementToString(this.hiprintTemplate.getHtml(printData))
+        return html
       },
 
       clearPaper() {
@@ -846,5 +888,49 @@
     .print-viewer {
       color: #000;
     }
+
+    .templateList-wrapper {
+      padding-right: 10px;
+
+      .templateList {
+        display: flex;
+        flex-wrap: wrap;
+
+        .templateList-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+          width: 24%;
+          margin-bottom: 20px;
+          margin-right: 1.333%;
+          padding: 10px;
+          border-radius: 3px;
+          overflow: hidden;
+          background-color: #f4f4f4;
+
+          .el-button {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 1;
+          }
+
+          h2 {
+            margin-top: 12px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #333;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          &:nth-of-type(4n) {
+            margin-right: 0;
+          }
+        }
+      }
+    }
   }
 </style>

src/components/print/customProvider.js

@@ -41,7 +41,7 @@ export const customProvider = function () {
             $(`body>#codewrapper-${elId}`).remove()
 
             const resizeObserver = new ResizeObserver(() => {
-               JsBarcode('#' + elId, printData.labelCode, {
+              JsBarcode('#' + elId, printData.labelCode, {
                 format: "CODE128B",
                 width: 2,
                 height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
@@ -117,8 +117,11 @@ export const customProvider = function () {
         {
           tid: 'providerModule1.image',
           title: '图片',
-          data: 'https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200',
+          type: 'image',
-          type: 'image'
+          options: {
+            contain: 'contain',
+            src: 'http://lyshunong.oss-cn-beijing.aliyuncs.com/image/material/a6e14259412606502e49f1abd866039.png',
+          }
         }
       ])
     ])

src/store/index.js

@@ -57,7 +57,7 @@ export default new Vuex.Store({
       state.showTemuAlert = flag
     },
     setLabelInfo(state, info) {
-      state.info = info
+      state.labelInfo = info
     }
   },
 
@@ -70,7 +70,7 @@ export default new Vuex.Store({
             resolve(res.data)
           }
         })
-        // this.getLabelInfo()
+        store.dispatch('getLabelInfo')
       })
     },
 
@@ -78,7 +78,11 @@ export default new Vuex.Store({
       return new Promise(resolve => {
         request.post('/api/userExtend/getLabelDetail').then(res => {
           if (res.code === 0) {
-            store.commit('setLabelInfo', res.data)
+            const isExpires = new Date().getTime() > new Date(res.data.expireTime).getTime() || res.data.skuUsed > res.data.skuTotal
+            store.commit('setLabelInfo', {
+              ...res.data,
+              isExpires
+            })
             resolve(res.data)
           }
         })

src/view/Home.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="admin-right">
         <el-tooltip class="item" effect="dark" content="金币信息" placement="top">
-          <div class="left" @click="toActive">
+          <div class="left" @click="openMember(1)">
             <div :style="{marginLeft: '0px'}">{{ $store.state.userInfo.coin }}</div>
             <span style="margin-right: 10px;"><img src="../assets/coin.png" width="30"/></span>
           </div>
@@ -15,7 +15,7 @@
         <el-button type="button" :class="'el-button el-button--primary'" @click="sign">签到</el-button>
         <!--<el-button type="button" :class="'el-button el-button--primary'" @click="openFolder">打开文件夹</el-button>-->
         <el-tooltip class="item" effect="dark" content="用户激活" placement="top">
-          <div class="left" @click="toActive">
+          <div class="left" @click="openMember(0)">
             <span>会员信息:</span>
             <div :style="{marginLeft: '10px', color: $store.state.userInfo.flag == 1? 'green': 'red'}">{{ getStateInfo }}</div>
           </div>
@@ -203,7 +203,7 @@
               <template slot="title">
                 <div slot="title" style="display: inline-block; ">
                   <span>标签管理</span>
-                  <el-button type="text" style="margin-left: 57px; padding: 0;" @click.stop="openMember">开通</el-button>
+                  <el-button type="text" style="margin-left: 57px; padding: 0;" @click.stop="openMember(2)">开通</el-button>
                 </div>
               </template>
               <el-menu-item index="/labelsTemplate">模板管理</el-menu-item>
@@ -252,11 +252,6 @@
     <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>
@@ -338,8 +333,8 @@
         }
       },
 
-      openMember() {
+      openMember(index) {
-        this.$refs.LablesMember.show()
+        this.$refs.LablesMember.show(index)
       },
 
       handleClose() {

src/view/data/SyncDataTemu.vue

@@ -187,9 +187,9 @@ import {timestampToTime} from '@/utils/date'
             this.isLoading = false
         },
         async syncProduct(mallId, mallName) {
-            let res = await sendChromeAPIMessage({url: 'bg-visage-mms/product/skc/pageQuery', 
+            let res = await sendChromeAPIMessage({url: 'bg-visage-mms/product/skc/pageQuery',
-                anti:true, 
+                anti:true,
-                needMallId: true, 
+                needMallId: true,
                 mallId: mallId,
                 data: {
                     pageSize: this.pageSize,
@@ -250,9 +250,9 @@ import {timestampToTime} from '@/utils/date'
             let start = now.getTime()
             let end = start + 86400*1000 - 1000
 
-            let res = await sendChromeAPIMessage({url: 'bgSongbird-api/supplier/deliverGoods/management/pageQueryDeliveryBatch', 
+            let res = await sendChromeAPIMessage({url: 'bgSongbird-api/supplier/deliverGoods/management/pageQueryDeliveryBatch',
-                anti:true, 
+                anti:true,
-                needMallId: true, 
+                needMallId: true,
                 mallId: mallId,
                 data: {
                     pageNo: this.pageNo,
@@ -290,12 +290,12 @@ import {timestampToTime} from '@/utils/date'
                                 ...temp,
                                 sku: item2.productSkuId,
                                 num: item2.skuNum
-                            } 
+                            }
                         })
                         this.deliveryOrderList.push(temp)
                     })
                 })
-                
+
                 if (res.result.list.length == this.pageSize) {
                     this.pageNo ++
                     await this.syncDeliveryOrder(mallId, mallName)
@@ -357,5 +357,5 @@ import {timestampToTime} from '@/utils/date'
 </script>
 
 <style scoped lang="scss">
-  
+
-</style>
+</style>

src/view/lables/Print.vue

@@ -10,7 +10,7 @@
         <div class="left">
           <div class="search-item">
             <el-radio-group v-model="addType" @click="lableList = [], search.productSkuId = '', search.productSkcId = ''">
-              <el-radio-button label="1">按备货单打印</el-radio-button>
+              <el-radio-button label="1">按发货单打印</el-radio-button>
               <el-radio-button label="2">按SKC打印</el-radio-button>
               <el-radio-button label="3">按SKU打印</el-radio-button>
             </el-radio-group>
@@ -153,7 +153,7 @@
       toPrint(row) {
         this.isLoading = true
         if (this.addType === '1') {
-          this.$http.post(`/api/template/getPage?productSkuId=${row.productSkuId}`).then(res => {
+          this.$http.post(`/api/template/myTemplate?productSkuId=${row.productSkuId}`).then(res => {
             if (!res.data.records.length) {
               this.isLoading = false
               return this.$message.error('该SKU未配置模板')
@@ -222,7 +222,7 @@
       },
 
       getList () {
-        this.$http.post('/api/templateSku/getPage', null, {
+        this.$http.post('/api/templateSku/getMySkuPage', null, {
           params: this.search
         }).then(res => {
           if (res.code === 0) {

src/view/lables/SkuManage.vue

@@ -442,6 +442,7 @@
           await this.requestSKUList(true)
           await this.$sleepSync(500)
         }
+        this.isLoading = false
       },
 
       requestSKUList(flag) {
@@ -482,6 +483,8 @@
             } else {
               !flag && (this.isLoading = false)
             }
+          } else {
+            this.isLoading = false
           }
         })
       },
@@ -499,7 +502,7 @@
 
       getList () {
         this.pageShow = true
-        this.$http.post(`/api/templateSku/getPage`, null, {
+        this.$http.post(`/api/templateSku/getMySkuPage`, null, {
           params: {
             ...this.search,
             templateId: this.id
@@ -531,6 +534,8 @@
             this.getList()
           }
 
+          this.btnLoading = false
+        }).catch(() => {
           this.btnLoading = false
         })
       },

src/view/lables/Template.vue

@@ -4,6 +4,12 @@
       slot="title"
       title="模板管理"
       isShowBottomBorder>
+      <template #rightBtn>
+        <div class="tips" slot="rightBtn" :class="[$store.state.labelInfo.isExpires ? 'active' : '']">
+          <p>有效期：{{ $store.state.labelInfo.expireTime }}</p>
+          <p>已使用SKU数：{{ $store.state.labelInfo.skuUsed }}/{{ $store.state.labelInfo.skuTotal }}</p>
+        </div>
+      </template>
     </ai-title>
     <template slot="content">
       <ai-search-bar>
@@ -46,7 +52,7 @@
       </ai-search-bar>
       <ai-search-bar>
         <template #left>
-          <el-button type="button" :class="'el-button el-button--primary'" @click="toAdd('')">添加</el-button>
+          <el-button type="button" class="el-button el-button--primary" @click="toAdd('')">添加</el-button>
         </template>
       </ai-search-bar>
       <ai-table
@@ -58,30 +64,37 @@
         style="margin-top: 8px;"
         @getList="getList"
         :loading="isLoading">
-        <el-table-column slot="options" label="操作" align="center" fixed="right" width="220px">
+        <el-table-column slot="options" label="操作" align="center" fixed="right" width="240px">
           <template v-slot="{ row }">
             <div class="table-options">
               <el-button type="text" @click="toAddSku(row.id)">管理SKU</el-button>
+              <!-- <el-button type="text" @click="savePDF(row.id)">保存PDF</el-button> -->
               <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
               <el-button type="text" @click="remove(row.id)">删除</el-button>
             </div>
           </template>
         </el-table-column>
       </ai-table>
+      <Print ref="printRef" :isPrint="true"></Print>
     </template>
   </ai-list>
 </template>
 
 <script>
+  import Print from '@/components/print/Print'
   export default {
     name: 'PringTemplate',
 
+    components: {
+      Print
+    },
+
     data () {
       return {
         colConfigs: [
           { prop: 'name', label: '模板名称', align: 'left' },
           { prop: 'skuTotal', label: '绑定SKU数量', align: 'center' },
-          { prop: 'createTime', label: '创建时间', align: 'center' },
+          { prop: 'createTime', label: '创建时间', align: 'center' }
         ],
         isLoading: false,
         tableData: [],
@@ -105,13 +118,31 @@
         this.$router.push(`/addLabelsTemplate?id=${id}`)
       },
 
+      savePDF (id) {
+        this.isLoading = true
+
+        this.$http.post(`/api/template/detail?id=${id}`).then(res => {
+          if (res.code === 0) {
+            const template = JSON.parse(res.data.content)
+
+            this.$http.post(`/api/templateSku/getMySkuPage?size=-1&templateId=${id}`).then(res => {
+              if (res.code === 0) {
+                const html = this.$refs.printRef.toPrint(template, res.data.records)
+                console.log(html)
+                this.isLoading = false
+              }
+            })
+          }
+        })
+      },
+
       toAddSku (id) {
         this.$router.push(`/skuManage?id=${id}`)
       },
 
       getList () {
         this.isLoading = true
-        this.$http.post('/api/template/getPage', null, {
+        this.$http.post('/api/template/myTemplate', null, {
           params: {
             ...this.search
           }
@@ -151,5 +182,24 @@
     .search-item {
       margin-bottom: 0;
     }
+
+    .tips {
+      display: flex;
+      align-items: center;
+      color: green;
+
+      &.active {
+        color: red;
+      }
+
+      p {
+        font-size: 15px;
+        font-weight: 600;
+
+        &:first-child {
+          margin-right: 20px;
+        }
+      }
+    }
   }
 </style>