调整

src/components/AiProductDetail.vue

@@ -0,0 +1,53 @@
+<template>
+  <ai-detail class="audit">
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <ai-wrapper
+            label-width="120px">
+            <ai-info-item label="名称"   :value="info.name"></ai-info-item>
+            <ai-info-item label="显示顺序"   :value="info.showIndex"></ai-info-item>
+            <ai-info-item label="创建时间"   :value="info.createTime" ></ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+      <ai-card title="趋势信息">
+        <template #content>
+          <div id="chart"></div>
+        </template>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+<script>
+import { Message } from "element-ui"
+
+export default {
+  name: "AiProductDetail",
+  props: ['params'],
+  data() {
+    return {
+      info: {}
+    }
+  },
+  computed: {
+  },
+  created() {
+    console.log(this.params.goodsId)
+    this.getInfo()
+  },
+  methods: {
+    getInfo() {
+      this.$http.post('/api/monitorDetail/queryDetail',null,{
+        params: {
+          goodsId: this.params.goodsId
+        }
+      }).then(res => {
+        this.info = res.data
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>

src/components/AiTitle.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="AiTitle" :class="{ 'bottomBorder': isShowBottomBorder, AiTitleSub: isHasSub}">
-    <i class="iconfont iconBack_Large" v-if="isShowBack" @click="onBackBtnClick"/>
     <div class="fill">
       <div class="ailist-title">
         <div class="ailist-title__left">
+          <i class="el-icon-back" title="返回" style="color: #1989fa; cursor: pointer;" v-if="isShowBack" @click="onBackBtnClick"></i>
           <h2>{{ title }}</h2>
           <p>{{ tips }}</p>
         </div>
@@ -59,9 +59,7 @@
 
     methods: {
       onBackBtnClick() {
-        this.closePage()
         this.$emit('onBackClick')
-        this.$emit('back')
       }
     }
   }
@@ -131,6 +129,9 @@
       font-size: 12px;
       margin-top: 4px;
     }
+    .iconBack_Large:before {
+      content: "\e63d";
+    }
 
     .iconBack_Large {
       line-height: 48px;

src/view/selection/StoreTrack.vue

@@ -1,236 +0,0 @@
-<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>

src/view/selection/storetrack/components/Detail.vue

@@ -4,83 +4,177 @@
       <ai-title
         slot="title"
         title="商品列表"
-        isShowBottomBorder>
+        isShowBottomBorder isShowBack @onBackClick="cancel(false)">
       </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 style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 16px;">
+          <el-card v-for="item in tableData" :key="item.id" :body-style="{ padding: '0px', margin: '5px' }">
+            <img :src="item.imgUrl" class="image">
+            <div style="padding: 14px;">
+              <div class="bottom clearfix">
+                <div style="margin-bottom: 5px;">
+                  <div style="display: inline; margin-left: 5px;">${{ item.priceAndSale[0].price }}<sub style="margin-left: 2px;" v-html="getPricePercent(item.priceAndSale)"></sub></div>
+                  <div style="display: inline; margin-right: 5px; float: right;">{{ item.priceAndSale[0].sale_total }}<sub style="margin-left: 2px;" v-html="getSalePercent(item.priceAndSale)"></sub></div>
                 </div>
-              </template>
-            </el-table-column>
-          </ai-table>
+                <el-dropdown @command="handleClick" style="float: right;">
+                  <span class="el-dropdown-link">
+                    操作<i class="el-icon-arrow-down el-icon--right"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item :command="beforeGoDetail(item.goodsId)">查看详情</el-dropdown-item>
+                    <el-dropdown-item divided command="copy">复制商品</el-dropdown-item>
+                    <el-dropdown-item divided command="copy">访问商品</el-dropdown-item>
+                    <el-dropdown-item command="copy">访问店铺</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+            </div>
+          </el-card>
         </div>
       </template>
     </ai-list>
+
+    <el-dialog
+      title="商品详情"
+      :visible="isShowDetailDlg"
+      :close-on-click-modal="false"
+      width="1400"
+      :before-close="handleClose">
+      <ai-product-detail v-if="isShowDetailDlg" :params="detailParams"/>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {sendTemuAPIMessage} from '@/api/chromeApi'
-import {timestampToTime} from '@/utils/date'
+import AiProductDetail from "@/components/AiProductDetail.vue";
 
   export default {
-    name: 'Detail',
-
+    name: 'DetailPage',
+    props: ['params'],
+    components: {AiProductDetail},
     data () {
       return {
+        monitorId: '',
         search: {
           current: 1,
           type: '1',
-          size: 10
+          size: 120
         },
-        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
+        total: 0,
+        isShowDetailDlg: false,
+        detailParams: {}
       }
     },
 
     created () {
+      this.monitorId = this.params.id
       this.getList()
     },
 
     methods: {
       getList () {
         this.$http.post('/api/monitorDetail/myPage',null,{
-            params: {
-                ...this.search
-            }
+          params: {
+            monitorId: this.monitorId,
+            ...this.search
+          }
         }).then(res => {
-            this.tableData = res.data.records
-            this.total = res.data.total
+          this.tableData = res.data.records
+          this.total = res.data.total
         })
+      },
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'List',
+          isRefresh: !!isRefresh
+        })
+      },
+      getPricePercent(data) {
+        if (data.length == 2) {
+          let a = (data[0].price - data[1].price) / data[1].price
+          if (a < 0) {
+            return '<div style="display: inline; color: green">↓' + (a*100).toFixed(2) + '%</div>'
+          } else if (a == 0) {
+            return ''
+          } else if (a > 0) {
+            return '<div style="display: inline; color: red">↑' + (a*100).toFixed(2) + '%</div>'
+          }
+        } else {
+          return ''
+        }
+      },
+      getSalePercent(data) {
+        if (data.length == 2) {
+          let a = (data[0].sale_total - data[1].sale_total) / data[1].sale_total
+          if (a < 0) {
+            return '<div style="display: inline; color: green">↓' + (a*100).toFixed(2) + '%</div>'
+          } else if (a == 0) {
+            return ''
+          } else if (a > 0) {
+            return '<div style="display: inline; color: red">↑' + (a*100).toFixed(2) + '%</div>'
+          }
+        } else {
+          return ''
+        }
+      },
+      handleClose() {
+        this.isShowDetailDlg = false
+      },
+      handleClick (e) {
+        if (e.type === 'detail') {
+          this.detailParams = {goodsId: e.goodsId}
+          this.isShowDetailDlg = true
+        } else if (e === 'pwd') {
+          this.$router.push('changePwd')
+        } else if (e === 'message') {
+          this.$router.push('message')
+        } else if (e === 'coin') {
+          this.$router.push('coinFlow')
+        }
+      },
+      beforeGoDetail(goodsId) {
+        return {type: 'detail', goodsId: goodsId}
       }
     }
   }
 </script>
 
 <style scoped lang="scss">
+.time {
+    font-size: 13px;
+    color: #999;
+  }
+  
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+  
+  .clearfix:after {
+      clear: both
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
 </style>

src/view/selection/storetrack/components/List.vue

@@ -22,7 +22,6 @@
             :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 }">
@@ -64,7 +63,6 @@
 
 <script>
 import {sendTemuAPIMessage} from '@/api/chromeApi'
-import {timestampToTime} from '@/utils/date'
 
   export default {
     name: 'List',
@@ -85,7 +83,6 @@ import {timestampToTime} from '@/utils/date'
         ],
         tableData: [],
         total: 0,
-        ids: [],
 
         form: {
           mallId: ''
@@ -175,33 +172,10 @@ import {timestampToTime} from '@/utils/date'
           }
         })
       },
-      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