TBtools-卡首屏接口

htmldev/TBTools/package-lock.json

@@ -3462,7 +3462,7 @@
     },
     "de-indent": {
       "version": "1.0.2",
-      "resolved": "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
       "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
       "dev": true
     },
@@ -16550,6 +16550,12 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrcodejs2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npm.taobao.org/qrcodejs2/download/qrcodejs2-0.0.2.tgz",
+      "integrity": "sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE=",
+      "dev": true
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",

htmldev/TBTools/package.json

@@ -75,6 +75,7 @@
     "portfinder": "1.0.13",
     "postcss-import": "11.0.0",
     "postcss-loader": "2.0.8",
+    "qrcodejs2": "0.0.2",
     "rimraf": "2.6.0",
     "sass-loader": "^6.0.6",
     "selenium-server": "3.0.1",

htmldev/TBTools/src/views/modules/tools/tools-promote.vue

@@ -49,9 +49,7 @@ export default {
     }
   },
   methods: {
-    handleClick (tab, event) {
-      console.log(tab, event)
-    }
+    handleClick (tab, event) {}
   }
 }
 </script>

htmldev/TBTools/src/views/modules/tools/tools-promote/commonform.vue

@@ -1,25 +1,47 @@
 <template>
   <el-row v-loading="dataListLoading">
     <el-col>
-      <el-form :model="dataForm" :rules="rules" label-width="120px" @keyup.enter.native="getDataList()" ref="dataForm">
-        <el-form-item label="搜索关键词：" prop="title">
-          <el-input v-model="dataForm.title" placeholder="请输入宝贝标题中包含的关键词" clearable></el-input>
+      <el-form :model="dataForm" :rules="formConfig.rules" label-width="120px" @keyup.enter.native="getDataList()"
+               ref="dataForm">
+        <el-form-item :label="formConfig.label.title" prop="title" v-show="formConfig.label.title">
+          <el-input v-model="dataForm.title" :placeholder="formConfig.placeholder.title" clearable></el-input>
         </el-form-item>
-        <el-form-item label="商品链接：" prop="productId">
-          <el-input v-model="dataForm.productId" placeholder="请输入您的宝贝链接或宝贝ID" clearable></el-input>
+        <el-form-item :label="formConfig.label.productId" prop="productId">
+          <el-input v-model="dataForm.productId" :placeholder="formConfig.placeholder.productId" clearable></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" size="medium" @click="getDataList()">生成</el-button>
         </el-form-item>
       </el-form>
     </el-col>
+    <el-col>
+      <div class="qr-code" ref="myQrCode"></div>
+    </el-col>
   </el-row>
 </template>
 
 <script>
+import QRCode from 'qrcodejs2'
+
 export default {
   name: 'commonform',
   props: {
+    formConfig: {
+      type: Object,
+      default: function () {
+        return {
+          label: {
+            title: '',
+            productId: ''
+          },
+          placeholder: {
+            title: '',
+            productId: ''
+          },
+          rules: {}
+        }
+      }
+    },
     promoteType: {
       type: Number,
       default: 0 // 卡首屏类型(0关键词1找相似入口2洋淘秀3猜你喜欢)
@@ -28,18 +50,11 @@ export default {
   data () {
     return {
       dataForm: {
-        title: '',
-        productId: '' // 602950702411
-      },
-      rules: {
-        title: [
-          { required: true, message: '请输入宝贝标题中包含的关键词', trigger: 'blur' }
-        ],
-        productId: [
-          { required: true, message: '请输入您的宝贝链接或宝贝ID', trigger: 'blur' }
-        ]
+        title: '', // 单鞋
+        productId: '' // 562665685690
       },
-      dataListLoading: false
+      dataListLoading: false,
+      qrcode: null
     }
   },
   methods: {
@@ -60,12 +75,25 @@ export default {
           })
         }).then(({ data }) => {
           if (data.status) {
+            const { url } = data.data
+            this.$nextTick(() => {
+              this.createQRCode(decodeURIComponent(url))
+            })
           } else {
             this.$message.error(data.msg)
           }
           this.dataListLoading = false
         })
       })
+    },
+    createQRCode (link) {
+      this.qrcode = new QRCode(this.$refs.myQrCode, {
+        width: 140,
+        height: 140,
+        text: link,
+        colorDark: '#000',
+        colorLight: '#fff'
+      })
     }
   }
 }
@@ -80,4 +108,10 @@ $--color-primary: #3E8EF7;
     }
   }
 }
+
+.qr-code {
+  /deep/ img {
+    margin: 0 auto;
+  }
+}
 </style>

htmldev/TBTools/src/views/modules/tools/tools-promote/firstPause.vue

@@ -9,7 +9,8 @@
       </div>
     </el-col>
     <el-col :span="12">
-      <Commonform
+      <Commonform :formConfig="formConfig"
+                  :promoteType="0"
       />
     </el-col>
     <el-col>
@@ -58,6 +59,28 @@ export default {
   name: 'firstPause',
   components: {
     Commonform
+  },
+  data () {
+    return {
+      formConfig: {
+        label: {
+          title: '搜索关键词：',
+          productId: '商品链接：'
+        },
+        placeholder: {
+          title: '请输入宝贝标题中包含的关键词',
+          productId: '请输入您的宝贝链接或宝贝ID'
+        },
+        rules: {
+          title: [
+            { required: true, message: '请输入宝贝标题中包含的关键词', trigger: 'blur' }
+          ],
+          productId: [
+            { required: true, message: '请输入您的宝贝链接或宝贝ID', trigger: 'blur' }
+          ]
+        }
+      }
+    }
   }
 }
 </script>

htmldev/TBTools/src/views/modules/tools/tools-promote/foreigntao.vue

@@ -4,7 +4,8 @@
       <p class="marginB-60"><b>洋淘秀卡首屏：</b>通过洋淘秀卡首屏扫码后出现在洋淘秀首屏，在生意参谋后台路径为【淘内免费-手淘洋淘秀】，配合补单增加权重</p>
     </el-col>
     <el-col :span="12">
-      <Commonform
+      <Commonform :formConfig="formConfig"
+                  :promoteType="2"
       />
     </el-col>
     <el-col>
@@ -37,6 +38,23 @@ export default {
   name: 'foreigntao',
   components: {
     Commonform
+  },
+  data () {
+    return {
+      formConfig: {
+        label: {
+          productId: '洋淘秀ID'
+        },
+        placeholder: {
+          productId: '请输入洋淘秀ID，非宝贝ID'
+        },
+        rules: {
+          productId: [
+            { required: true, message: '请输入洋淘秀ID，非宝贝ID', trigger: 'blur' }
+          ]
+        }
+      }
+    }
   }
 }
 </script>

htmldev/TBTools/src/views/modules/tools/tools-promote/guess.vue

@@ -4,7 +4,8 @@
       <p class="marginB-60"><b>猜你喜欢：</b>手淘首页的主要流量来源是手淘首页的“猜你喜欢”，猜你喜欢的构成是淘宝的个性化推荐，包含免费推荐及付费推荐，此功能可以帮助你快速得到手淘首页的流量来源</p>
     </el-col>
     <el-col :span="12">
-      <Commonform
+      <Commonform :formConfig="formConfig"
+                  :promoteType="3"
       />
     </el-col>
     <el-col>
@@ -53,6 +54,28 @@ export default {
   name: 'guess',
   components: {
     Commonform
+  },
+  data () {
+    return {
+      formConfig: {
+        label: {
+          title: '宝贝标题：',
+          productId: '商品链接：'
+        },
+        placeholder: {
+          title: '请输入您的宝贝标题',
+          productId: '请输入您的商品链接'
+        },
+        rules: {
+          title: [
+            { required: true, message: '请输入您的宝贝标题', trigger: 'blur' }
+          ],
+          productId: [
+            { required: true, message: '请输入您的商品链接', trigger: 'blur' }
+          ]
+        }
+      }
+    }
   }
 }
 </script>

htmldev/TBTools/src/views/modules/tools/tools-promote/similar.vue

@@ -4,7 +4,8 @@
       <p class="marginB-60"><b>手淘流量找相似入口：</b>提供多流量来源入口，多样化流量首选</p>
     </el-col>
     <el-col :span="12">
-      <Commonform
+      <Commonform :formConfig="formConfig"
+                  :promoteType="1"
       />
     </el-col>
     <el-col>
@@ -40,6 +41,28 @@ export default {
   name: 'similar',
   components: {
     Commonform
+  },
+  data () {
+    return {
+      formConfig: {
+        label: {
+          title: '搜索关键词：',
+          productId: '商品链接：'
+        },
+        placeholder: {
+          title: '请输入宝贝标题中包含的关键词',
+          productId: '请输入您的宝贝链接或宝贝ID'
+        },
+        rules: {
+          title: [
+            { required: true, message: '请输入宝贝标题中包含的关键词', trigger: 'blur' }
+          ],
+          productId: [
+            { required: true, message: '请输入您的宝贝链接或宝贝ID', trigger: 'blur' }
+          ]
+        }
+      }
+    }
   }
 }
 </script>