From ce9bb7b15b9c8ebb5b585974a83842a7c9290cca Mon Sep 17 00:00:00 2001
From: liushiwei <499672082@qq.com>
Date: Thu, 12 Oct 2023 13:16:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/chromeApi.js                          |  17 +
 src/entry/background.js                       |  19 +
 src/router/index.js                           |  21 +-
 src/view/Home.vue                             |   2 +
 src/view/selection/KeywordTrack.vue           | 340 ++++++++++++++++++
 src/view/{product => selection}/NiubiCopy.vue |   0
 src/view/selection/StoreTrack.vue             | 236 ++++++++++++
 src/view/selection/storetrack/Index.vue       |  57 +++
 .../storetrack/components/Detail.vue          |  86 +++++
 .../selection/storetrack/components/List.vue  | 264 ++++++++++++++
 10 files changed, 1037 insertions(+), 5 deletions(-)
 create mode 100644 src/view/selection/KeywordTrack.vue
 rename src/view/{product => selection}/NiubiCopy.vue (100%)
 create mode 100644 src/view/selection/StoreTrack.vue
 create mode 100644 src/view/selection/storetrack/Index.vue
 create mode 100644 src/view/selection/storetrack/components/Detail.vue
 create mode 100644 src/view/selection/storetrack/components/List.vue

diff --git a/src/api/chromeApi.js b/src/api/chromeApi.js
index 0e1611f..a625c18 100644
--- a/src/api/chromeApi.js
+++ b/src/api/chromeApi.js
@@ -24,6 +24,23 @@ export async function sendChromeAPIMessage(message) {
     })
 }
 
+/**
+ * 向Chrome发送消息
+ * @param message 消息
+ */
+export async function sendTemuAPIMessage(message) {
+    message.type = 'temuApi'
+    message.url = "https://www.temu.com/" + message.url;
+    message.anti = message.anti || false
+    if (message.anti) {
+        message.anti = await genAnti.a()
+    }
+    return new Promise((resolve) => {
+        // @ts-ignore
+        chrome.runtime.sendMessage(message, resolve)
+    })
+}
+
 /**
  * 向Chrome发送消息
  * @param message 消息
diff --git a/src/entry/background.js b/src/entry/background.js
index 99a2946..516d21c 100644
--- a/src/entry/background.js
+++ b/src/entry/background.js
@@ -24,6 +24,25 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         resolve(res.json());
       });
     }).then(sendResponse);
+  } else if (request.type == 'temuApi') {
+    new Promise((resolve) => {
+      let headers = {};
+      if (request.anti) {
+        headers["Anti-Content"] = request.anti
+      }
+      headers['Content-Type'] = 'application/json';
+      headers.cookie = getTemuCookie();
+      Promise.resolve().then(() => fetch(request.url, {
+        'headers': headers,
+        'method': 'POST',
+        'referrerPolicy': 'no-referrer',
+        'credentials': 'include',
+        'body': JSON.stringify(request.data),
+        'mode': 'cors'
+      })).then((res) => {
+        resolve(res.json());
+      });
+    }).then(sendResponse);
   } else if (request.type == 'temu') {
     new Promise((resolve) => {
       let headers = {};
diff --git a/src/router/index.js b/src/router/index.js
index 030e335..9b6d477 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,17 +56,28 @@ const router = new VueRouter({
           name: 'copyProduct',
           component: () => import('../view/product/CopyProduct.vue')
         },
-        {
-          path: 'niubiCopy',
-          name: 'niubiCopy',
-          component: () => import('../view/product/NiubiCopy.vue')
-        },
         {
           path: 'reducePrice',
           name: 'reducePrice',
           component: () => import('../view/product/ReducePrice.vue')
         },
 
+        {
+          path: 'niubiCopy',
+          name: 'niubiCopy',
+          component: () => import('../view/selection/NiubiCopy.vue')
+        },
+        {
+          path: 'storeTrack',
+          name: 'storeTrack',
+          component: () => import('../view/selection/storetrack/Index.vue')
+        },
+        {
+          path: 'keywordTrack',
+          name: 'keywordTrack',
+          component: () => import('../view/selection/KeywordTrack.vue')
+        },
+
         {
           path: 'message',
           name: 'message',
diff --git a/src/view/Home.vue b/src/view/Home.vue
index bad5f81..66d20a2 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -72,6 +72,8 @@
               <span slot="title">选品采集</span>
             </template>
             <el-menu-item index="/niubiCopy">智能复制</el-menu-item>
+            <el-menu-item index="/storeTrack">店铺跟踪</el-menu-item>
+            <el-menu-item index="/keywordTrack">关键字跟踪</el-menu-item>
           </el-submenu>
 
           <el-menu-item index="/saleData">
diff --git a/src/view/selection/KeywordTrack.vue b/src/view/selection/KeywordTrack.vue
new file mode 100644
index 0000000..93b7ebf
--- /dev/null
+++ b/src/view/selection/KeywordTrack.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <ai-list class="list">
+      <ai-title
+        slot="title"
+        title="店铺跟踪"
+        isShowBottomBorder>
+      </ai-title>
+      <template slot="content">
+        <div class="content">
+          <ai-search-bar>
+            <template #left>
+              <el-button type="button" :icon="'el-icon-delete'" :class="'el-button el-button--primary'" @click="remove()">删除</el-button>
+              <el-button v-if="$store.state.mallName" type="button" :class="'el-button el-button--primary'" @click="toAddTemplate()">添加商品模板</el-button>
+              <el-button v-if="$store.state.mallName" type="button" :class="'el-button el-button--primary'" @click="beforeAddToDraft">添加到草稿箱</el-button>
+            </template>
+            <template #right>
+              <el-button size="small" circle icon="el-icon-refresh-right" @click="getList()"></el-button>
+            </template>
+          </ai-search-bar>
+          <ai-table
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="total"
+            style="margin-top: 8px;"
+            :current.sync="search.current" :size.sync="search.size"
+            @selection-change="handleSelectionChange"
+            @getList="getList">
+          </ai-table>
+        </div>
+      </template>
+    </ai-list>
+
+    <ai-dialog
+      title="添加店铺"
+      :visible.sync="mallDlgShow"
+      :close-on-click-modal="false"
+      width="790px"
+      customFooter
+      @close="handleClose">
+      <el-form class="ai-form" :model="form" label-width="120px" ref="form">
+        <el-form-item label="店铺" style="width: 100%;" prop="targetMallId" :rules="[{ required: true, message: '请选择店铺', trigger: 'blur' }]">
+          <el-select style="width: 380px" v-model="form.targetMallId" placeholder="请选择">
+            <el-option
+              v-for="item in $store.state.mallList"
+              :key="item.mallId"
+              :label="item.mallName"
+              :value="item.mallId">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品分类" style="width: 100%;" prop="targetCatId" :rules="[{ required: true, message: '请选择商品分类', trigger: 'blur' }]">
+          <el-cascader style="width: 380px" v-model="form.targetCatId" :props="props"></el-cascader>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="mallDlgShow = false">取 消</el-button>
+        <el-button type="primary" @click="addToDraft">确定</el-button>
+      </div>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+import {sendChromeAPIMessage} from '@/api/chromeApi'
+import {timestampToTime} from '@/utils/date'
+import {transform} from '@/utils/product'
+import { Message } from 'element-ui'
+
+  export default {
+    name: 'CopyProduct',
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          productName: '',
+          mallName: '',
+          startDate: '',
+          endDate: ''
+        },
+        props: {
+          value: 'catId',
+          label: 'catName',
+          lazy: true,
+          lazyLoad (node, resolve) {
+            sendChromeAPIMessage({
+              url: 'bg-anniston-mms/category/children/list',
+              needMallId: true,
+              data: {
+                parentCatId: node.value || ''
+              }
+            }).then(res => {
+              if (res.errorCode === 1000000) {
+                resolve(res.result.categoryNodeVOS.map(v => {
+                  return {
+                    ...v,
+                    leaf: v.isLeaf
+                  }
+                }))
+              }
+            })
+          }
+        },
+        colConfigs: [
+          { type: "selection", width: '70px', align: 'left', fixed: 'left'},
+          { prop: 'productSpu', label: 'SPU', align: 'left' },
+          { prop: 'productName', label: '商品名称', align: 'left' },
+          { prop: 'mallName', label: '来源店铺', align: 'left'},
+          { prop: 'createTime', label: '添加时间', width: '180px', fixed: 'right'}
+        ],
+        tableData: [],
+        total: 0,
+        ids: [],
+
+        dlgShow: false,
+        productTableData: [],
+        productPage: {page: 1, pageSize: 10, mallId: '', productName: '', productSkcIds: '', total: 0},
+        productColConfigs: [
+          { type: "selection", width: '70px', align: 'left', fixed: 'left'},
+          { prop: 'productSpu', label: 'SPU ID', align: 'left' },
+          { prop: 'productSkc', label: 'SKC ID', align: 'left' },
+          { prop: 'productName', label: '商品名称', align: 'left' },
+          { prop: 'createTime', label: '创建时间', align: 'left' }
+        ],
+
+        mallDlgShow: false,
+        productIds: [],
+        form: {
+          targetMallId: '',
+          targetCatId: []
+        }
+      }
+    },
+
+    created () {
+      this.getList()
+      if (this.$store.state.mallList.length > 0) {
+        this.productPage.mallId = this.$store.state.mallList[0].mallId
+      }
+    },
+
+    methods: {
+      getList () {
+        this.$http.post('/api/product/myPage',null,{
+            params: {
+                ...this.search
+            }
+        }).then(res => {
+            this.tableData = res.data.records
+            this.total = res.data.total
+        })
+      },
+      remove () {
+        if (this.ids.length <= 0) {
+          alert('请选择要删除的商品');
+          return;
+        }
+        this.$confirm('确定要删除？', '温馨提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$http.post('/api/product/delByIds',this.ids
+          ).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+      handleSelectionChange(val) {
+        this.ids = [];
+        val.forEach(e => {
+          this.ids.push(e.id);
+        });
+      },
+
+      // 添加模板
+      handleClose() {
+        this.productTableData = []
+        this.productPage = {page: 1, pageSize: 10, total: 0}
+        this.dlgShow = false
+      },
+      toAddTemplate() {
+        this.$http.post('/api/malluser/info').then(res => {
+          if (res.code == 0) {
+            this.$store.commit('setUserInfo', res.data)
+            if (res.data.flag != 1) {
+              Message.error('您的账号未激活或已失效，请激活后使用')
+              this.$store.commit('setActiveDlgShow', true)
+              return;
+            }
+            this.dlgShow = true
+            this.getProductList()
+          }
+        })
+      },
+      getProductList() {
+        let params = {};
+        params.page = this.productPage.page;
+        params.pageSize = this.productPage.pageSize;
+        if (this.productPage.productName) {
+          params.productName = this.productPage.productName
+        }
+        if (this.productPage.productSkcIds) {
+          params.productSkcIds = this.productPage.productSkcIds.split(',')
+        }
+        sendChromeAPIMessage({
+          url: 'bg-visage-mms/product/skc/pageQuery',
+          needMallId: true,
+          mallId: this.productPage.mallId,
+          data: {
+            ...params
+        }}).then((res) => {
+          if (res.errorCode == 1000000) {
+            this.productPage.total = res.result.total
+            this.productTableData = res.result.pageItems.map((item) => {
+              return {
+                productSpu: item.productId,
+                productSkc: item.productSkcId,
+                productName: item.productName,
+                createTime: timestampToTime(item.createdAt)
+              };
+            })
+          } else {
+            this.getProductList()
+          }
+        });
+      },
+      productHandleSelectionChange(val) {
+        this.productIds = [];
+        val.forEach(e => {
+          this.productIds.push(e.productSpu);
+        });
+      },
+      saveProduct() {
+        if (this.productIds.length <= 0) {
+          Message.error('请选择商品');
+          return;
+        }
+        this.productIds.map((productSpu, index) => {
+          setTimeout(() => {
+            this.saveTemplate(productSpu, index)
+          }, 200 * index)
+        })
+      },
+      saveTemplate(spu, index) {
+        sendChromeAPIMessage({
+          url: 'bg-visage-mms/product/query',
+          needMallId: true,
+          mallId: this.productPage.mallId,
+          data: {
+            productEditTaskUid: '',
+            productId: spu
+        }}).then((res) => {
+          if (res.errorCode == 1000000) {
+            let content = transform(res.result)
+            let mallInfo = this.$store.state.mallList.filter(item => {
+              return item.mallId == this.productPage.mallId
+            })
+            this.$http.post('/api/product/add', {
+                mallId: mallInfo[0].mallId,
+                mallName: mallInfo[0].mallName,
+                productSpu: res.result.productId,
+                productName: res.result.productName,
+                content: content
+              }).then(res1 => {
+              if (res1.code == 0) {
+                Message.success("商品【" + res.result.productName + "】成功添加为商品模板")
+                if (index == this.productIds.length - 1) {
+                  this.getList()
+                }
+              }
+            })
+          } else {
+            this.saveTemplate(spu, index)
+          }
+        })
+      },
+      beforeAddToDraft() {
+        if (this.ids.length <= 0) {
+          Message.error('请选择商品模板');
+          return;
+        }
+        this.mallDlgShow = true
+      },
+      addToDraft() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.ids.map((id, index) => {
+              let product = this.tableData.filter((item) => {
+                return item.id == id
+              })
+              setTimeout(() => {
+                sendChromeAPIMessage({
+                  url: 'bg-visage-mms/product/draft/add',
+                  needMallId: true,
+                  mallId: this.form.targetMallId,
+                  data: {
+                    catId: this.form.targetCatId[this.form.targetCatId.length - 1]
+                }}).then((res) => {
+                  if (res.errorCode == 1000000) {
+                    let draftId = res.result.productDraftId
+                    let content = JSON.parse(product[0].content)
+                    let i = 0
+                    for (; i < this.form.targetCatId.length; i++) {
+                      content['cat' + (i+1) + 'Id'] = this.form.targetCatId[i]
+                    }
+                    for (; i < 10; i++) {
+                      content['cat' + (i+1) + 'Id'] = ''
+                    }
+                    content.productDraftId = draftId
+                    sendChromeAPIMessage({
+                      url: 'bg-visage-mms/product/draft/save',
+                      needMallId: true,
+                      mallId: this.form.targetMallId,
+                      data: {
+                        ...content
+                    }}).then((res) => {
+                      if (res.errorCode == 1000000) {
+                        Message.success("商品【" + product[0].productName + "】成功添加到草稿箱")
+                      }
+                    })
+                  } else {
+                    Message.error("【拼多多】" + res.errorMsg)
+                  }
+                })
+              }, 1000*index)
+            })
+            this.mallDlgShow = false
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/view/product/NiubiCopy.vue b/src/view/selection/NiubiCopy.vue
similarity index 100%
rename from src/view/product/NiubiCopy.vue
rename to src/view/selection/NiubiCopy.vue
diff --git a/src/view/selection/StoreTrack.vue b/src/view/selection/StoreTrack.vue
new file mode 100644
index 0000000..97014d3
--- /dev/null
+++ b/src/view/selection/StoreTrack.vue
@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <ai-list class="list">
+      <ai-title
+        slot="title"
+        title="店铺跟踪"
+        isShowBottomBorder>
+      </ai-title>
+      <template slot="content">
+        <div class="content">
+          <ai-search-bar>
+            <template #left>
+              <el-button type="button" :class="'el-button el-button--primary'" @click="addStore()">添加店铺</el-button>
+            </template>
+            <template #right>
+              <el-button size="small" circle icon="el-icon-refresh-right" @click="getList()"></el-button>
+            </template>
+          </ai-search-bar>
+          <ai-table
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="total"
+            style="margin-top: 8px;"
+            :current.sync="search.current" :size.sync="search.size"
+            @selection-change="handleSelectionChange"
+            @getList="getList">
+            <el-table-column slot="options" label="操作" width="180px" show-overflow-tooltip align="center" fixed="right">
+              <template slot-scope="{ row }">
+                <div class="table-options">
+                  <el-button type="text" @click="renew(row.id)">续费</el-button>
+                  <el-button type="text" @click="detail(row.id)">详情</el-button>
+                  <el-button type="text" @click="toBegin(row)">采集数据</el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+      </template>
+    </ai-list>
+
+    <ai-dialog
+      title="添加店铺"
+      :visible.sync="isDlgShow"
+      :close-on-click-modal="false"
+      width="790px"
+      customFooter
+      @close="handleClose">
+      <el-form class="ai-form" :model="form" label-width="120px" ref="form">
+        <el-form-item
+          prop="mallId"
+          label="店铺ID"
+          :rules="[{ required: true, message: '请输入店铺ID', trigger: 'blur' }]">
+          <el-input placeholder="请输入店铺ID" v-model="form.mallId"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="isDlgShow = false">取 消</el-button>
+        <el-button type="primary" @click="saveStore">确定</el-button>
+      </div>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+import {sendTemuAPIMessage} from '@/api/chromeApi'
+import {timestampToTime} from '@/utils/date'
+
+  export default {
+    name: 'StoreTrack',
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          type: '1',
+          size: 10
+        },
+        colConfigs: [
+          { prop: 'content', label: '店铺ID', align: 'left' },
+          { prop: 'lastUpdateTime', label: '最后一次更新时间', align: 'left' },
+          { prop: 'status', label: '状态', align: 'left', format: v => this.$dict.getLabel('monitor_status', v), },
+          { prop: 'expireTime', label: '失效时间', align: 'left' },
+          { prop: 'createTime', label: '添加时间', width: '180px', fixed: 'right'}
+        ],
+        tableData: [],
+        total: 0,
+        ids: [],
+
+        form: {
+          mallId: ''
+        },
+
+        isDlgShow: false,
+        detailsVo: {},
+        pageNo: 1,
+        pageSize: 120
+      }
+    },
+
+    created () {
+      this.$dict.load('monitor_status');
+      this.getList()
+    },
+
+    methods: {
+      getList () {
+        this.$http.post('/api/monitor/myPage',null,{
+            params: {
+                ...this.search
+            }
+        }).then(res => {
+            this.tableData = res.data.records
+            this.total = res.data.total
+        })
+      },
+      saveStore () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.$http.post('/api/monitor/check',null, {params: {type: 1}}).then(res => {
+              if (res.code == 0) {
+                this.$http.post(`/api/monitor/add`, {content: this.form.mallId, type: this.search.type}).then(res => {
+                  if (res.code == 0) {
+                    this.$message.success('添加成功！')
+                    this.$store.dispatch('getUserInfo')
+                    this.getList()
+                  }
+                })
+              }
+            })
+          }
+        })
+      },
+      renew(id) {
+        this.$confirm('确定要续费？', '温馨提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$http.post('/api/monitor/renew',null, {
+            params: {
+              id: id
+            }
+          }
+          ).then(res => {
+            if (res.code == 0) {
+              this.$message.success('续费成功！')
+              this.$store.dispatch('getUserInfo')
+              this.getList()
+            }
+          })
+        })
+      },
+      remove () {
+        if (this.ids.length <= 0) {
+          alert('请选择要删除的店铺跟踪');
+          return;
+        }
+        this.$confirm('确定要删除？', '温馨提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$http.post('/api/monitor/delByIds',this.ids
+          ).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+      addStore() {
+        this.form.mallId = ''
+        this.isDlgShow = true
+      },
+      handleSelectionChange(val) {
+        this.ids = [];
+        val.forEach(e => {
+          this.ids.push(e.id);
+        });
+      },
+      toBegin(row) {
+        this.detailsVo = {}
+        this.detailsVo.monitorId = row.id
+        this.detailsVo.details = []
+        this.pageNo = 1
+
+        this.beginCollect(row)
+      }, 
+      beginCollect(row) {
+        sendTemuAPIMessage({
+          url: 'api/bg/circle/c/mall/newGoodsList',
+          anti: true,
+          data: {
+            "mall_id": row.content,
+            "filter_items": "0:1",
+            "page_number": this.pageNo,
+            "page_size": this.pageSize
+          }}).then((res) => {
+            if (res.errorCode == 1000000) {
+              res.result.data.goods_list.map(item => {
+                let total = item.sales_tip_text[0]
+                total = total.replace('+', '')
+                if (total.indexOf('K') != -1) {
+                  total = total.replace('K', '')
+                  total = total * 1000
+                } else if (total.indexOf('M') != -1) {
+                  total = total.replace('M', '')
+                  total = total * 1000000
+                }
+                this.detailsVo.details.push({
+                  url: item.link_url,
+                  price: item.price_info.price_schema,
+                  saleTotal: total,
+                  imgUrl: item.thumb_url,
+                  mallId: item.mall_id
+                })
+              })
+
+              if (res.result.data.goods_list.length == this.pageSize) {
+                this.pageNo = this.pageNo + 1
+                this.beginCollect(row)
+              } else {
+                this.$http.post('/api/monitorDetail/addDetails',this.detailsVo
+                ).then(res => {
+                  if (res.code == 0) {
+                    this.$message.success('店铺ID【' + row.content + '】数据采集成功！')
+                    this.getList()
+                  }
+                })
+              }
+            }
+          })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/view/selection/storetrack/Index.vue b/src/view/selection/storetrack/Index.vue
new file mode 100644
index 0000000..ba93a2c
--- /dev/null
+++ b/src/view/selection/storetrack/Index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div style="height: 100%;">
+    <transition name="fade-transform" mode="out-in">
+      <keep-alive :include="['List']">
+        <component ref="component" :is="component" @change="onChange" :params="params"></component>
+      </keep-alive>
+    </transition>
+  </div>
+</template>
+
+<script>
+  import List from './components/List.vue'
+  import Detail from './components/Detail.vue'
+
+  export default {
+    name: 'StoreTrack',
+    label: '店铺跟踪',
+
+    components: {
+      List,
+      Detail
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {}
+      }
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Detail') {
+          this.component = 'Detail'
+          this.params = data.params
+        }
+
+        if (data.type === 'List') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              setTimeout(() => {
+                this.$refs.component.getList()
+              }, 600)
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
+
diff --git a/src/view/selection/storetrack/components/Detail.vue b/src/view/selection/storetrack/components/Detail.vue
new file mode 100644
index 0000000..da94301
--- /dev/null
+++ b/src/view/selection/storetrack/components/Detail.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <ai-list class="list">
+      <ai-title
+        slot="title"
+        title="商品列表"
+        isShowBottomBorder>
+      </ai-title>
+      <template slot="content">
+        <div class="content">
+          <ai-search-bar>
+            <template #left>
+            </template>
+            <template #right>
+              <el-button size="small" circle icon="el-icon-refresh-right" @click="getList()"></el-button>
+            </template>
+          </ai-search-bar>
+          <ai-table
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="total"
+            style="margin-top: 8px;"
+            :current.sync="search.current" :size.sync="search.size"
+            @selection-change="handleSelectionChange"
+            @getList="getList">
+            <el-table-column slot="options" label="操作" width="180px" show-overflow-tooltip align="center" fixed="right">
+              <template slot-scope="{ row }">
+                <div class="table-options">
+                  <el-button type="text" @click="statistic(row.id)">统计数据</el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+      </template>
+    </ai-list>
+  </div>
+</template>
+
+<script>
+import {sendTemuAPIMessage} from '@/api/chromeApi'
+import {timestampToTime} from '@/utils/date'
+
+  export default {
+    name: 'Detail',
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          type: '1',
+          size: 10
+        },
+        colConfigs: [
+          { prop: 'content', label: '店铺ID', align: 'left' },
+          { prop: 'lastUpdateTime', label: '最后一次更新时间', align: 'left' },
+          { prop: 'status', label: '状态', align: 'left', format: v => this.$dict.getLabel('monitor_status', v), },
+          { prop: 'expireTime', label: '失效时间', align: 'left' },
+          { prop: 'createTime', label: '添加时间', width: '180px', fixed: 'right'}
+        ],
+        tableData: [],
+        total: 0
+      }
+    },
+
+    created () {
+      this.getList()
+    },
+
+    methods: {
+      getList () {
+        this.$http.post('/api/monitorDetail/myPage',null,{
+            params: {
+                ...this.search
+            }
+        }).then(res => {
+            this.tableData = res.data.records
+            this.total = res.data.total
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/view/selection/storetrack/components/List.vue b/src/view/selection/storetrack/components/List.vue
new file mode 100644
index 0000000..3b3cedb
--- /dev/null
+++ b/src/view/selection/storetrack/components/List.vue
@@ -0,0 +1,264 @@
+<template>
+  <div>
+    <ai-list class="list">
+      <ai-title
+        slot="title"
+        title="店铺跟踪"
+        isShowBottomBorder>
+      </ai-title>
+      <template slot="content">
+        <div class="content">
+          <ai-search-bar>
+            <template #left>
+              <el-button type="button" :class="'el-button el-button--primary'" @click="addStore()">添加店铺</el-button>
+            </template>
+            <template #right>
+              <el-button size="small" circle icon="el-icon-refresh-right" @click="getList()"></el-button>
+            </template>
+          </ai-search-bar>
+          <ai-table
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="total"
+            style="margin-top: 8px;"
+            :current.sync="search.current" :size.sync="search.size"
+            @selection-change="handleSelectionChange"
+            @getList="getList">
+            <el-table-column slot="options" label="操作" width="200px" show-overflow-tooltip align="center" fixed="right">
+              <template slot-scope="{ row }">
+                <div class="table-options">
+                  <el-button type="text" @click="deleteMonitor(row.id)">删除</el-button>
+                  <el-button type="text" @click="renew(row.id)">续费</el-button>
+                  <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+                  <el-button type="text" @click="toBegin(row)">采集数据</el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+      </template>
+    </ai-list>
+
+    <ai-dialog
+      title="添加店铺"
+      :visible.sync="isDlgShow"
+      :close-on-click-modal="false"
+      width="790px"
+      customFooter
+      @close="isDlgShow = false">
+      <el-form class="ai-form" :model="form" label-width="120px" ref="form">
+        <el-form-item
+          prop="mallId"
+          label="店铺ID"
+          :rules="[{ required: true, message: '请输入店铺ID', trigger: 'blur' }]">
+          <el-input placeholder="请输入店铺ID" v-model="form.mallId"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="isDlgShow = false">取 消</el-button>
+        <el-button type="primary" @click="saveStore">确定</el-button>
+      </div>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+import {sendTemuAPIMessage} from '@/api/chromeApi'
+import {timestampToTime} from '@/utils/date'
+
+  export default {
+    name: 'List',
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          type: '1',
+          size: 10
+        },
+        colConfigs: [
+          { prop: 'content', label: '店铺ID', align: 'left' },
+          { prop: 'lastUpdateTime', label: '最后一次更新时间', align: 'left' },
+          { prop: 'status', label: '状态', align: 'left', format: v => this.$dict.getLabel('monitor_status', v), },
+          { prop: 'expireTime', label: '失效时间', align: 'left' },
+          { prop: 'createTime', label: '添加时间', width: '180px', fixed: 'right'}
+        ],
+        tableData: [],
+        total: 0,
+        ids: [],
+
+        form: {
+          mallId: ''
+        },
+
+        isDlgShow: false,
+        detailsVo: {},
+        pageNo: 1,
+        pageSize: 120
+      }
+    },
+
+    created () {
+      this.$dict.load('monitor_status');
+      this.getList()
+    },
+
+    methods: {
+      getList () {
+        this.$http.post('/api/monitor/myPage',null,{
+            params: {
+                ...this.search
+            }
+        }).then(res => {
+            this.tableData = res.data.records
+            this.total = res.data.total
+        })
+      },
+      saveStore () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.$http.post('/api/monitor/check',null, {params: {type: 1}}).then(res => {
+              if (res.code == 0) {
+                this.$http.post(`/api/monitor/add`, {content: this.form.mallId, type: this.search.type}).then(res => {
+                  if (res.code == 0) {
+                    this.$message.success('添加成功！')
+                    this.$store.dispatch('getUserInfo')
+                    this.getList()
+                    this.isDlgShow = false
+                  }
+                })
+              }
+            })
+          }
+        })
+      },
+      renew(id) {
+        this.$confirm('确定要续费？', '温馨提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$http.post('/api/monitor/renew',null, {
+            params: {
+              id: id
+            }
+          }
+          ).then(res => {
+            if (res.code == 0) {
+              this.$message.success('续费成功！')
+              this.$store.dispatch('getUserInfo')
+              this.getList()
+            }
+          })
+        })
+      },
+      deleteMonitor(id) {
+        this.$confirm('确定要删除？', '温馨提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$http.post('/api/monitor/del',null, {
+            params: {
+              id: id
+            }
+          }
+          ).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+      remove () {
+        if (this.ids.length <= 0) {
+          alert('请选择要删除的店铺跟踪');
+          return;
+        }
+        this.$confirm('确定要删除？', '温馨提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$http.post('/api/monitor/delByIds',this.ids
+          ).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+      addStore() {
+        this.form.mallId = ''
+        this.isDlgShow = true
+      },
+      handleSelectionChange(val) {
+        this.ids = [];
+        val.forEach(e => {
+          this.ids.push(e.id);
+        });
+      },
+      toBegin(row) {
+        this.detailsVo = {}
+        this.detailsVo.monitorId = row.id
+        this.detailsVo.details = []
+        this.pageNo = 1
+
+        this.beginCollect(row)
+      }, 
+      beginCollect(row) {
+        sendTemuAPIMessage({
+          url: 'api/bg/circle/c/mall/newGoodsList',
+          anti: true,
+          data: {
+            "mall_id": row.content,
+            "filter_items": "0:1",
+            "page_number": this.pageNo,
+            "page_size": this.pageSize
+          }}).then((res) => {
+            if (res.errorCode == 1000000) {
+              res.result.data.goods_list.map(item => {
+                let total = item.sales_tip_text[0]
+                total = total.replace('+', '')
+                if (total.indexOf('K') != -1) {
+                  total = total.replace('K', '')
+                  total = total * 1000
+                } else if (total.indexOf('M') != -1) {
+                  total = total.replace('M', '')
+                  total = total * 1000000
+                }
+                this.detailsVo.details.push({
+                  url: item.link_url,
+                  price: item.price_info.price_schema,
+                  saleTotal: total,
+                  goodsId: item.goods_id,
+                  imgUrl: item.thumb_url,
+                  mallId: item.mall_id
+                })
+              })
+
+              if (res.result.data.goods_list.length == this.pageSize) {
+                this.pageNo = this.pageNo + 1
+                this.beginCollect(row)
+              } else {
+                this.$http.post('/api/monitorDetail/addDetails',this.detailsVo
+                ).then(res => {
+                  if (res.code == 0) {
+                    this.$message.success('店铺ID【' + row.content + '】数据采集成功！')
+                    this.getList()
+                  }
+                })
+              }
+            }
+          })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>