From 0522cadeeea1403bcc178b47969f071bc9b19a7a Mon Sep 17 00:00:00 2001
From: liushiwei <499672082@qq.com>
Date: Wed, 25 Oct 2023 12:20:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AiCopyFromTemu.vue             |  38 +-
 src/components/AiLazyCascader.vue             | 466 ++++++++++++++++++
 src/components/AiPayment.vue                  |   2 +-
 src/utils/index.js                            |   4 +-
 src/utils/product.js                          |   1 +
 src/view/product/CopyProduct.vue              |  39 +-
 src/view/selection/NiubiCopy.vue              |   2 +-
 .../keywordtrack/components/Detail.vue        |  64 ++-
 .../keywordtrack/components/List.vue          |  76 ++-
 .../storetrack/components/Detail.vue          |  64 ++-
 .../selection/storetrack/components/List.vue  |  76 ++-
 11 files changed, 761 insertions(+), 71 deletions(-)
 create mode 100644 src/components/AiLazyCascader.vue

diff --git a/src/components/AiCopyFromTemu.vue b/src/components/AiCopyFromTemu.vue
index 8c545e9..cd23a7b 100644
--- a/src/components/AiCopyFromTemu.vue
+++ b/src/components/AiCopyFromTemu.vue
@@ -26,7 +26,11 @@
             </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>
+            <ai-lazy-cascader 
+              style="width: 380px" 
+              v-model="form.targetCatId" 
+              filterable
+              :props="props"></ai-lazy-cascader>
             </el-form-item>
         </el-form>
         <div class="bottom flex-center">
@@ -38,23 +42,25 @@
 
 <script>
 import {sendChromeAPIMessage, sendChromeWebReqMessage} from '@/api/chromeApi'
+import AiLazyCascader from "@/components/AiLazyCascader.vue"
 import { Message } from 'element-ui'
 
 export default {
     name: 'AiCopyFromTemu',
     props: ['params'],
+    components: {AiLazyCascader},
     data() {
         return {
             props: {
                 value: 'catId',
                 label: 'catName',
                 lazy: true,
-                lazyLoad (node, resolve) {
+                lazyLoad (value, resolve) {
                     sendChromeAPIMessage({
                         url: 'bg-anniston-mms/category/children/list',
                         needMallId: true,
                         data: {
-                            parentCatId: node.value || ''
+                            parentCatId: value || ''
                         }
                     }).then(res => {
                         if (res.errorCode === 1000000) {
@@ -66,6 +72,32 @@ export default {
                             }))
                         }
                     })
+                },
+                lazySearch(queryString, resolve) {
+                  sendChromeAPIMessage({
+                    url: 'bg-anniston-mms/category/search',
+                    needMallId: true,
+                    data: {
+                      searchText: queryString || ''
+                    }
+                  }).then(res => {
+                    if (res.errorCode === 1000000) {
+                      resolve(res.result.categoryPaths.map(v => {
+                        let value = []
+                        let label = []
+                        for (let i = 1; i <= 10; i++ ) {
+                          if (v['cat'+i+'NodeVO']) {
+                            value.push(v['cat'+i+'NodeVO'].catId)
+                            label.push(v['cat'+i+'NodeVO'].catName)
+                          }
+                        }
+                        return {
+                          catId: value,
+                          catName: label
+                        }
+                      }))
+                    }
+                  })
                 }
             },
             form: {
diff --git a/src/components/AiLazyCascader.vue b/src/components/AiLazyCascader.vue
new file mode 100644
index 0000000..bd39e1f
--- /dev/null
+++ b/src/components/AiLazyCascader.vue
@@ -0,0 +1,466 @@
+<template>
+  <div class="lazy-cascader" :style="{ width: width }">
+    <!-- 禁用状态 -->
+    <div
+      v-if="disabled"
+      class="el-input__inner lazy-cascader-input lazy-cascader-input-disabled"
+    >
+      <span class="lazy-cascader-placeholder" v-show="placeholderVisible">
+        {{ placeholder }}
+      </span>
+      <div class="lazy-cascader-tags" v-if="props.multiple">
+        <el-tag
+          class="lazy-cascader-tag"
+          type="info"
+          disable-transitions
+          v-for="(item, index) in labelArray"
+          :key="index"
+          closable
+        >
+          <span> {{ item.label.join(separator) }}</span>
+        </el-tag>
+      </div>
+      <div class="lazy-cascader-label" v-else>
+        <el-tooltip
+          placement="top-start"
+          :content="labelObject.label.join(separator)"
+        >
+          <span>{{ labelObject.label.join(separator) }}</span>
+        </el-tooltip>
+      </div>
+    </div>
+    <!-- 禁用状态 -->
+    <!-- 可选状态 -->
+    <el-popover v-else trigger="click" placement="bottom-start" ref="popover">
+      <!-- 搜索 -->
+      <div class="lazy-cascader-search">
+        <el-autocomplete
+          :style="{ width: searchWidth || '100%' }"
+          :popper-class="suggestionsPopperClass"
+          v-if="filterable"
+          class="inline-input"
+          prefix-icon="el-icon-search"
+          label="name"
+          v-model="keyword"
+          :fetch-suggestions="querySearch"
+          :trigger-on-focus="false"
+          placeholder="请输入"
+          @select="handleSelect"
+          @blur="isSearchEmpty = false"
+        >
+          <template slot-scope="{ item }">
+            <div class="name" :class="isChecked(item[props.value])">
+              {{ item[props.label].join(separator) }}
+            </div>
+          </template>
+        </el-autocomplete>
+        <div class="empty" v-show="isSearchEmpty">{{ searchEmptyText }}</div>
+      </div>
+      <!-- 搜索 -->
+      <!-- 级联面板 -->
+      <div class="lazy-cascader-panel">
+        <el-cascader-panel
+          ref="panel"
+          v-model="current"
+          :options="options"
+          :props="currentProps"
+          @change="change"
+        ></el-cascader-panel>
+      </div>
+      <!-- 级联面板 -->
+      <!--内容区域-->
+      <div
+        class="el-input__inner lazy-cascader-input"
+        :class="disabled ? 'lazy-cascader-input-disabled' : ''"
+        slot="reference"
+      >
+        <span class="lazy-cascader-placeholder" v-show="placeholderVisible">
+          {{ placeholder }}
+        </span>
+        <div class="lazy-cascader-tags" v-if="props.multiple">
+          <el-tag
+            class="lazy-cascader-tag"
+            type="info"
+            size="small"
+            disable-transitions
+            v-for="(item, index) in labelArray"
+            :key="index"
+            closable
+            @close="handleClose(item)"
+          >
+            <span> {{ item.label.join(separator) }}</span>
+          </el-tag>
+        </div>
+        <div class="lazy-cascader-label" v-else>
+          <el-tooltip
+            placement="top-start"
+            :content="labelObject.label.join(separator)"
+          >
+            <span>{{ labelObject.label.join(separator) }}</span>
+          </el-tooltip>
+        </div>
+        <span
+          class="lazy-cascader-clear"
+          v-if="clearable && current.length > 0"
+          @click.stop="clearBtnClick"
+        >
+          <i class="el-icon-close"></i>
+        </span>
+      </div>
+      <!--内容区域-->
+    </el-popover>
+    <!-- 可选状态 -->
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    separator: {
+      type: String,
+      default: " > "
+    },
+    placeholder: {
+      type: String,
+      default: "请选择"
+    },
+
+    width: {
+      type: String,
+      default: "400px"
+    },
+    filterable: Boolean,
+    clearable: Boolean,
+    disabled: Boolean,
+    props: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    suggestionsPopperClass: {
+      type: String,
+      default: "suggestions-popper-class"
+    },
+    searchWidth: {
+      type: String
+    },
+    searchEmptyText: {
+      type: String,
+      default: "暂无数据"
+    }
+  },
+  data() {
+    return {
+      isSearchEmpty: false,
+      keyword: "",
+      options: [],
+      current: [],
+      labelObject: { label: [], value: [] },
+      labelArray: [],
+      currentProps: {
+        multiple: this.props.multiple,
+        checkStrictly: this.props.checkStrictly,
+        value: this.props.value,
+        label: this.props.label,
+        leaf: this.props.leaf,
+        lazy: true,
+        lazyLoad: this.lazyLoad
+      }
+    };
+  },
+  computed: {
+    placeholderVisible() {
+      if (this.current) {
+        return this.current.length == 0;
+      } else {
+        return true;
+      }
+    }
+  },
+  watch: {
+    current() {
+      this.getLabelArray();
+    },
+    value(v) {
+      this.current = v;
+    },
+    keyword() {
+      this.isSearchEmpty = false;
+    }
+  },
+  created() {
+    this.initOptions();
+  },
+  methods: {
+    //搜索是否选中
+    isChecked(value) {
+      //多选
+      if (this.props.multiple) {
+        let index = this.current.findIndex(item => {
+          return item.join() == value.join();
+        });
+        if (index > -1) {
+          return "el-link el-link--primary";
+        } else {
+          return "";
+        }
+      } else {
+        if (value.join() == this.current.join()) {
+          return "el-link el-link--primary";
+        } else {
+          return "";
+        }
+      }
+    },
+    //搜索
+    querySearch(query, callback) {
+      this.props.lazySearch(query, list => {
+        callback(list);
+        if (!list || !list.length) this.isSearchEmpty = true;
+      });
+    },
+    //选中搜索下拉搜索项
+    handleSelect(item) {
+      if (this.props.multiple) {
+        let index = this.current.findIndex(obj => {
+          return obj.join() == item[this.props.value].join();
+        });
+        if (index == -1) {
+          this.$refs.panel.clearCheckedNodes();
+          this.current.push(item[this.props.value]);
+          this.$emit("change", this.current);
+        }
+      } else {
+        //选中下拉选变更值
+        if (
+          this.current == null ||
+          item[this.props.value].join() !== this.current.join()
+        ) {
+          this.$refs.panel.activePath = [];
+          this.current = item[this.props.value];
+          this.$emit("change", this.current);
+        }
+      }
+      this.keyword = "";
+    },
+    //初始化数据
+    async initOptions() {
+      this.props.lazyLoad(0, list => {
+        this.$set(this, "options", list);
+        if (this.props.multiple) {
+          this.current = [...this.value];
+        } else {
+          this.current = this.value;
+        }
+      });
+    },
+    async getLabelArray() {
+      if (this.props.multiple) {
+        let array = [];
+        for (let i = 0; i < this.current.length; i++) {
+          let obj = await this.getObject(this.current[i]);
+          array.push(obj);
+        }
+        this.labelArray = array;
+        this.$emit("input", this.current);
+        if (!this.disabled) {
+          this.$nextTick(() => {
+            this.$refs.popover.updatePopper();
+          });
+        }
+      } else {
+        this.labelObject = await this.getObject(this.current || []);
+        this.$emit("input", this.current);
+      }
+    },
+    /**格式化id=>object */
+    async getObject(id) {
+      try {
+        let options = this.options;
+        let nameArray = [];
+        for (let i = 0; i < id.length; i++) {
+          let index = options.findIndex(item => {
+            return item[this.props.value] == id[i];
+          });
+          nameArray.push(options[index][this.props.label]);
+          if (i < id.length - 1 && options[index].children == undefined) {
+            let list = new Promise(resolve => {
+              this.props.lazyLoad(id[i], list => {
+                resolve(list);
+              });
+            });
+            this.$set(options[index], "children", await list);
+            options = options[index].children;
+          } else {
+            options = options[index].children;
+          }
+        }
+        return { value: id, label: nameArray };
+      } catch (e) {
+        this.current = [];
+        return { value: [], label: [] };
+      }
+    },
+    //懒加载数据
+    async lazyLoad(node, resolve) {
+      let current = this.current;
+      if (this.props.multiple) {
+        current = [...this.current];
+      }
+      if (node.root) {
+        resolve();
+      } else if (node.data[this.props.leaf]) {
+        resolve();
+      } else if (node.data.children) {
+        if (this.props.multiple) {
+          this.current = current;
+        }
+        resolve();
+      } else {
+        this.props.lazyLoad(node.value, list => {
+          node.data.children = list;
+          if (this.props.multiple) {
+            this.current = current;
+          }
+          resolve(list);
+        });
+      }
+    },
+    //删除多选值
+    /**删除**/
+    handleClose(item) {
+      let index = this.current.findIndex(obj => {
+        return obj.join() == item.value.join();
+      });
+      if (index > -1) {
+        this.$refs.panel.clearCheckedNodes();
+        this.current.splice(index, 1);
+        this.$emit("change", this.current);
+      }
+    },
+    //点击清空按钮
+    clearBtnClick() {
+      this.$refs.panel.clearCheckedNodes();
+      this.current = [];
+      this.$emit("change", this.current);
+    },
+    change() {
+      this.$emit("change", this.current);
+    }
+  }
+};
+</script>
+<style lang="scss">
+.lazy-cascader {
+  display: inline-block;
+  width: 300px;
+  .lazy-cascader-input {
+    position: relative;
+    width: 100%;
+    background: #fff;
+    height: auto;
+    min-height: 36px;
+    padding: 5px;
+    line-height: 1;
+    cursor: pointer;
+    .lazy-cascader-placeholder {
+      padding: 0 2px;
+      line-height: 28px;
+      color: #999;
+      font-size: 14px;
+    }
+    .lazy-cascader-label {
+      padding: 0 2px;
+      line-height: 28px;
+      color: #606266;
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .lazy-cascader-clear {
+      position: absolute;
+      right: 0;
+      top: 0;
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+    }
+  }
+  .lazy-cascader-input-disabled {
+    background-color: #f5f7fa;
+    border-color: #e4e7ed;
+    color: #c0c4cc;
+    cursor: not-allowed;
+    .lazy-cascader-label {
+      color: #c0c4cc;
+    }
+    .lazy-cascader-placeholder {
+      color: #c0c4cc;
+    }
+  }
+}
+.lazy-cascader-tag {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  margin: 2px;
+  text-overflow: ellipsis;
+  background: #f0f2f5;
+  span {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .el-icon-close {
+    -webkit-box-flex: 0;
+    -ms-flex: none;
+    flex: none;
+    background-color: #c0c4cc;
+    color: #fff;
+  }
+}
+.lazy-cascader-panel {
+  margin-top: 10px;
+  display: inline-block;
+}
+.suggestions-popper-class {
+  width: auto !important;
+  min-width: 200px;
+}
+.lazy-cascader-search {
+  .empty {
+    width: calc(100% - 24px);
+    box-sizing: border-box;
+    background-color: #fff;
+    color: #999;
+    text-align: center;
+    position: absolute;
+    z-index: 999;
+    padding: 12px 0;
+    margin-top: 12px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    &:before {
+      content: "";
+      position: absolute;
+      top: -12px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid #fff;
+      filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.02));
+    }
+  }
+}
+</style>
diff --git a/src/components/AiPayment.vue b/src/components/AiPayment.vue
index 35eae2e..5ca2648 100644
--- a/src/components/AiPayment.vue
+++ b/src/components/AiPayment.vue
@@ -113,7 +113,7 @@ export default {
       search: {module: "0"},
       show: true,
       descriptionsModule0: ["抢仓发货", "数据下载", "复制商品", "会员服务"],
-      descriptionsModule1: ["智能复制"],
+      descriptionsModule1: ["商品采集", "店铺跟踪", "关键字跟踪"],
       payments: [],
       qrcode: "",
       amount: 0,
diff --git a/src/utils/index.js b/src/utils/index.js
index 976811b..156cf67 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -104,8 +104,8 @@ const userCheck = (mallId) => {
         tempMallId = store.state.mallId
       }
       if (res.type != 4 && tempMallId != store.state.userInfo.mallId) {
-        Message.error('您当前登录的TEMU账号与会员绑定账号不一致')
-        reject('您当前登录的TEMU账号与会员绑定账号不一致')
+        Message.error('您当前登录的卖家中心店铺与会员绑定店铺不一致')
+        reject('您当前登录的卖家中心店铺与会员绑定店铺不一致')
         return false
       }
 
diff --git a/src/utils/product.js b/src/utils/product.js
index 8257a31..af6f9db 100644
--- a/src/utils/product.js
+++ b/src/utils/product.js
@@ -16,6 +16,7 @@ export function transform(leftData) {
   // 普通属性
   rightData.productName = leftData.productName;
   rightData.materialMultiLanguages = leftData.productLocalExtAttr.materialMultiLanguages;
+  rightData.productI18nReqs = leftData.productI18nList;
   rightData.productPropertyReqs = [];
   for (let i = 0; i < leftData.productPropertyList.length; i++) {
     rightData.productPropertyReqs.push({
diff --git a/src/view/product/CopyProduct.vue b/src/view/product/CopyProduct.vue
index c80ee11..63f0539 100644
--- a/src/view/product/CopyProduct.vue
+++ b/src/view/product/CopyProduct.vue
@@ -110,7 +110,11 @@
           </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>
+          <ai-lazy-cascader 
+            style="width: 380px" 
+            v-model="form.targetCatId" 
+            filterable
+            :props="props"></ai-lazy-cascader>
         </el-form-item>
       </el-form>
       <div class="dialog-footer" slot="footer">
@@ -126,10 +130,11 @@ import {sendChromeAPIMessage} from '@/api/chromeApi'
 import {timestampToTime} from '@/utils/date'
 import {transform} from '@/utils/product'
 import { Message } from 'element-ui'
+import AiLazyCascader from "@/components/AiLazyCascader.vue"
 
   export default {
     name: 'CopyProduct',
-
+    components: {AiLazyCascader},
     data () {
       return {
         search: {
@@ -144,12 +149,12 @@ import { Message } from 'element-ui'
           value: 'catId',
           label: 'catName',
           lazy: true,
-          lazyLoad (node, resolve) {
+          lazyLoad (value, resolve) {
             sendChromeAPIMessage({
               url: 'bg-anniston-mms/category/children/list',
               needMallId: true,
               data: {
-                parentCatId: node.value || ''
+                parentCatId: value || ''
               }
             }).then(res => {
               if (res.errorCode === 1000000) {
@@ -161,6 +166,32 @@ import { Message } from 'element-ui'
                 }))
               }
             })
+          },
+          lazySearch(queryString, resolve) {
+            sendChromeAPIMessage({
+              url: 'bg-anniston-mms/category/search',
+              needMallId: true,
+              data: {
+                searchText: queryString || ''
+              }
+            }).then(res => {
+              if (res.errorCode === 1000000) {
+                resolve(res.result.categoryPaths.map(v => {
+                  let value = []
+                  let label = []
+                  for (let i = 1; i <= 10; i++ ) {
+                    if (v['cat'+i+'NodeVO']) {
+                      value.push(v['cat'+i+'NodeVO'].catId)
+                      label.push(v['cat'+i+'NodeVO'].catName)
+                    }
+                  }
+                  return {
+                    catId: value,
+                    catName: label
+                  }
+                }))
+              }
+            })
           }
         },
         colConfigs: [
diff --git a/src/view/selection/NiubiCopy.vue b/src/view/selection/NiubiCopy.vue
index ac82fae..15cd994 100644
--- a/src/view/selection/NiubiCopy.vue
+++ b/src/view/selection/NiubiCopy.vue
@@ -45,7 +45,7 @@
             @getList="getList">
             <el-table-column slot="url" label="商品地址" align="left">
               <template slot-scope="scope">
-                <div><a :href="scope.row.url" target="_blank">{{ scope.row.url }}</a></div>
+                <div><a class="el-link el-link--primary" :href="scope.row.url" target="_blank">{{ scope.row.url }}</a></div>
               </template>
             </el-table-column>
           </ai-table>
diff --git a/src/view/selection/keywordtrack/components/Detail.vue b/src/view/selection/keywordtrack/components/Detail.vue
index 8d689e1..86ff29c 100644
--- a/src/view/selection/keywordtrack/components/Detail.vue
+++ b/src/view/selection/keywordtrack/components/Detail.vue
@@ -7,14 +7,24 @@
         isShowBottomBorder isShowBack @onBackClick="cancel(false)">
       </ai-title>
       <template slot="content">
+        <div style="margin-right: 0px; margin-bottom: 10px;">
+          <el-select v-model="search.orderBy" :clearable="true" @change="search.current =1, getList()" placeholder="请选择排序方式" size="small">
+            <el-option
+              v-for="item in orderBys"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
         <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 style="display: inline; margin-left: 5px;">${{ item.price }}<sub style="margin-left: 2px;" v-html="getPricePercent(item.priceChange)"></sub></div>
+                  <div style="display: inline; margin-right: 5px; float: right;">{{ item.saleTotal }}<sub style="margin-left: 2px;" v-html="getSalePercent(item.saleChange)"></sub></div>
                 </div>
                 <ai-product-drop-down :params="item" :isShowDetail="true" @onGoDetail="goDetail(item.goodsId, item.monitorId)" style="float: right;"></ai-product-drop-down>
               </div>
@@ -61,8 +71,22 @@ import AiProductDropDown from '@/components/AiProductDropDown.vue';
         search: {
           current: 1,
           type: '1',
-          size: 120
+          size: 120,
+          orderBy: ''
         },
+        orderBys: [{
+          value: '0',
+          label: '按销量涨辐排序'
+        },{
+          value: '1',
+          label: '按价格涨辐排序'
+        },{
+          value: '2',
+          label: '按销量排序'
+        },{
+          value: '3',
+          label: '按价格排序'
+        }],
         tableData: [],
         total: 0,
         isShowDetailDlg: false,
@@ -77,7 +101,7 @@ import AiProductDropDown from '@/components/AiProductDropDown.vue';
 
     methods: {
       getList () {
-        this.$http.post('/api/monitorDetail/myPage',null,{
+        this.$http.post('/api/monitorDetail/myPageNew',null,{
           params: {
             monitorId: this.monitorId,
             ...this.search
@@ -94,32 +118,20 @@ import AiProductDropDown from '@/components/AiProductDropDown.vue';
         })
       },
       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 ''
+        if (data < 0) {
+          return '<div style="display: inline; color: green">↓' + data + '%</div>'
+        } else if (data > 0) {
+          return '<div style="display: inline; color: red">↑' + data + '%</div>'
         }
+        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 ''
+        if (data < 0) {
+          return '<div style="display: inline; color: green">↓' + data + '%</div>'
+        } else if (data > 0) {
+          return '<div style="display: inline; color: red">↑' + data + '%</div>'
         }
+        return ''
       },
       handleClose() {
         this.isShowDetailDlg = false
diff --git a/src/view/selection/keywordtrack/components/List.vue b/src/view/selection/keywordtrack/components/List.vue
index 6254a25..ec0a69d 100644
--- a/src/view/selection/keywordtrack/components/List.vue
+++ b/src/view/selection/keywordtrack/components/List.vue
@@ -26,16 +26,22 @@
             :current.sync="search.current" :size.sync="search.size"
             @selection-change="onChooseChange"
             @getList="getList">
-            <el-table-column slot="options" label="操作" width="200px" show-overflow-tooltip align="center" fixed="right">
+            <el-table-column slot="options" label="操作" width="240px" 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="toUpdateMonitor(row)">修改</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>
+            <el-table-column slot="content" label="关键字" show-overflow-tooltip align="center">
+              <template slot-scope="{ row }">
+                <div><a class="el-link el-link--primary" :href="'https://www.temu.com/search_result.html?search_key='+row.content+'&search_method=user&filter_items='+row.orderType" target="_blank">{{ row.content }}</a></div>
+              </template>
+            </el-table-column>
           </ai-table>
         </div>
       </template>
@@ -66,12 +72,45 @@
           :rules="[{ required: true, message: '请选择排序方式', trigger: 'blur' }]">
           <ai-select :selectList="$dict.getDict('monitor_order_type')" v-model="form.orderType"></ai-select>
         </el-form-item>
+        <el-form-item
+          prop="remark"
+          label="备注"
+          :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]">
+          <el-input placeholder="请输入备注" v-model="form.remark"></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>
+
+    <ai-dialog
+      title="修改店铺"
+      :visible.sync="isUpdateDlgShow"
+      :close-on-click-modal="false"
+      width="790px"
+      customFooter
+      @close="isDlgShow = false">
+      <el-form class="ai-form" :model="updateForm" label-width="120px" ref="updateForm">
+        <el-form-item
+          prop="mallId"
+          label="店铺ID"
+          :rules="[{ required: true, message: '请输入店铺ID', trigger: 'blur' }]">
+          <el-input placeholder="请输入店铺ID" disabled v-model="updateForm.mallId"></el-input>
+        </el-form-item>
+        <el-form-item
+          prop="remark"
+          label="备注"
+          :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]">
+          <el-input placeholder="请输入备注" v-model="updateForm.remark"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="isUpdateDlgShow = false">取 消</el-button>
+        <el-button type="primary" @click="updateStore">确定</el-button>
+      </div>
+    </ai-dialog>
   </div>
 </template>
 
@@ -91,8 +130,9 @@ import { Message } from 'element-ui'
         },
         colConfigs: [
           { type: "selection", width: '70px', align: 'left' },
-          { prop: 'content', label: '关键字', align: 'left' },
+          { slot: 'content', label: '关键字', align: 'left' },
           { prop: 'orderType', label: '排序方式', align: 'left', format: v => this.$dict.getLabel('monitor_order_type', v) },
+          { prop: 'remark', label: '备注', 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' },
@@ -103,7 +143,16 @@ import { Message } from 'element-ui'
 
         form: {
           content: '',
-          orderType: '0:1'
+          orderType: '0:1',
+          remark: ''
+        },
+
+        updateObj: {},
+        isUpdateDlgShow: false,
+        updateForm: {
+          id: '',
+          mallId: '',
+          remark: ''
         },
 
         isDlgShow: false,
@@ -142,7 +191,7 @@ import { Message } from 'element-ui'
           if (valid) {
             this.$http.post('/api/monitor/check',null, {params: {type: 0}}).then(res => {
               if (res.code == 0) {
-                this.$http.post(`/api/monitor/add`, {content: this.form.content, orderType: this.form.orderType, type: this.search.type}).then(res => {
+                this.$http.post(`/api/monitor/add`, {content: this.form.content, remark: this.form.remark, orderType: this.form.orderType, type: this.search.type}).then(res => {
                   if (res.code == 0) {
                     this.$message.success('添加成功！')
                     this.$store.dispatch('getUserInfo')
@@ -155,6 +204,25 @@ import { Message } from 'element-ui'
           }
         })
       },
+      toUpdateMonitor (obj) {
+        this.updateObj = obj
+        this.updateForm.mallId = obj.content
+        this.updateForm.remark = obj.remark
+        this.isUpdateDlgShow = true
+      },
+      updateStore () {
+        this.$refs.updateForm.validate((valid) => {
+          if (valid) {
+            this.$http.post(`/api/monitor/update`, {id: this.updateObj.id, remark: this.updateForm.remark}).then(res => {
+              if (res.code == 0) {
+                this.$message.success('修改成功！')
+                this.getList()
+                this.isUpdateDlgShow = false
+              }
+            })
+          }
+        })
+      },
       renew(id) {
         this.$confirm('确定要续费？', '温馨提示', {
           type: 'warning'
diff --git a/src/view/selection/storetrack/components/Detail.vue b/src/view/selection/storetrack/components/Detail.vue
index 5ac9bd6..301763b 100644
--- a/src/view/selection/storetrack/components/Detail.vue
+++ b/src/view/selection/storetrack/components/Detail.vue
@@ -7,14 +7,24 @@
         isShowBottomBorder isShowBack @onBackClick="cancel(false)">
       </ai-title>
       <template slot="content">
+        <div style="margin-right: 0px; margin-bottom: 10px;">
+          <el-select v-model="search.orderBy" :clearable="true" @change="search.current =1, getList()" placeholder="请选择排序方式" size="small">
+            <el-option
+              v-for="item in orderBys"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
         <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 style="display: inline; margin-left: 5px;">${{ item.price }}<sub style="margin-left: 2px;" v-html="getPricePercent(item.priceChange)"></sub></div>
+                  <div style="display: inline; margin-right: 5px; float: right;">{{ item.saleTotal }}<sub style="margin-left: 2px;" v-html="getSalePercent(item.saleChange)"></sub></div>
                 </div>
                 <ai-product-drop-down :params="item" :isShowDetail="true" @onGoDetail="goDetail(item.goodsId, item.monitorId)" style="float: right;"></ai-product-drop-down>
               </div>
@@ -59,8 +69,22 @@ import AiProductDropDown from '@/components/AiProductDropDown.vue';
         search: {
           current: 1,
           type: '1',
-          size: 120
+          size: 120,
+          orderBy: ''
         },
+        orderBys: [{
+          value: '0',
+          label: '按销量涨辐排序'
+        },{
+          value: '1',
+          label: '按价格涨辐排序'
+        },{
+          value: '2',
+          label: '按销量排序'
+        },{
+          value: '3',
+          label: '按价格排序'
+        }],
         tableData: [],
         total: 0,
         isShowDetailDlg: false,
@@ -75,7 +99,7 @@ import AiProductDropDown from '@/components/AiProductDropDown.vue';
 
     methods: {
       getList () {
-        this.$http.post('/api/monitorDetail/myPage',null,{
+        this.$http.post('/api/monitorDetail/myPageNew',null,{
           params: {
             monitorId: this.monitorId,
             ...this.search
@@ -92,32 +116,20 @@ import AiProductDropDown from '@/components/AiProductDropDown.vue';
         })
       },
       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 ''
+        if (data < 0) {
+          return '<div style="display: inline; color: green">↓' + data + '%</div>'
+        } else if (data > 0) {
+          return '<div style="display: inline; color: red">↑' + data + '%</div>'
         }
+        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 ''
+        if (data < 0) {
+          return '<div style="display: inline; color: green">↓' + data + '%</div>'
+        } else if (data > 0) {
+          return '<div style="display: inline; color: red">↑' + data + '%</div>'
         }
+        return ''
       },
       handleClose() {
         this.isShowDetailDlg = false
diff --git a/src/view/selection/storetrack/components/List.vue b/src/view/selection/storetrack/components/List.vue
index 5d90c46..1eec86f 100644
--- a/src/view/selection/storetrack/components/List.vue
+++ b/src/view/selection/storetrack/components/List.vue
@@ -26,16 +26,22 @@
             @selection-change="onChooseChange"
             :current.sync="search.current" :size.sync="search.size"
             @getList="getList">
-            <el-table-column slot="options" label="操作" width="200px" show-overflow-tooltip align="center" fixed="right">
+            <el-table-column slot="options" label="操作" width="240px" 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="toUpdateMonitor(row)">修改</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>
+            <el-table-column slot="content" label="店铺ID" show-overflow-tooltip align="center">
+              <template slot-scope="{ row }">
+                <div><a class="el-link el-link--primary" :href="'https://www.temu.com/mall.html?mall_id=' + row.content" target="_blank">{{ row.content }}</a></div>
+              </template>
+            </el-table-column>
           </ai-table>
         </div>
       </template>
@@ -60,12 +66,45 @@
           :rules="[{ required: true, message: '请输入店铺ID', trigger: 'blur' }]">
           <el-input placeholder="请输入店铺ID" v-model="form.mallId"></el-input>
         </el-form-item>
+        <el-form-item
+          prop="remark"
+          label="备注"
+          :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]">
+          <el-input placeholder="请输入备注" v-model="form.remark"></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>
+
+    <ai-dialog
+      title="修改店铺"
+      :visible.sync="isUpdateDlgShow"
+      :close-on-click-modal="false"
+      width="790px"
+      customFooter
+      @close="isDlgShow = false">
+      <el-form class="ai-form" :model="updateForm" label-width="120px" ref="updateForm">
+        <el-form-item
+          prop="mallId"
+          label="店铺ID"
+          :rules="[{ required: true, message: '请输入店铺ID', trigger: 'blur' }]">
+          <el-input placeholder="请输入店铺ID" disabled v-model="updateForm.mallId"></el-input>
+        </el-form-item>
+        <el-form-item
+          prop="remark"
+          label="备注"
+          :rules="[{ required: true, message: '请输入备注', trigger: 'blur' }]">
+          <el-input placeholder="请输入备注" v-model="updateForm.remark"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="isUpdateDlgShow = false">取 消</el-button>
+        <el-button type="primary" @click="updateStore">确定</el-button>
+      </div>
+    </ai-dialog>
   </div>
 </template>
 
@@ -84,7 +123,8 @@ import {sendTemuAPIMessage} from '@/api/chromeApi'
         },
         colConfigs: [
           { type: "selection", width: '70px', align: 'left' },
-          { prop: 'content', label: '店铺ID', align: 'left' },
+          { slot: 'content', label: '店铺ID', align: 'left' },
+          { prop: 'remark', label: '备注', 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' },
@@ -94,7 +134,16 @@ import {sendTemuAPIMessage} from '@/api/chromeApi'
         total: 0,
 
         form: {
-          mallId: ''
+          mallId: '',
+          remark: ''
+        },
+
+        updateObj: {},
+        isUpdateDlgShow: false,
+        updateForm: {
+          id: '',
+          mallId: '',
+          remark: ''
         },
 
         isDlgShow: false,
@@ -133,7 +182,7 @@ import {sendTemuAPIMessage} from '@/api/chromeApi'
           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 => {
+                this.$http.post(`/api/monitor/add`, {content: this.form.mallId, remark: this.form.remark, type: this.search.type}).then(res => {
                   if (res.code == 0) {
                     this.$message.success('添加成功！')
                     this.$store.dispatch('getUserInfo')
@@ -146,6 +195,25 @@ import {sendTemuAPIMessage} from '@/api/chromeApi'
           }
         })
       },
+      toUpdateMonitor (obj) {
+        this.updateObj = obj
+        this.updateForm.mallId = obj.content
+        this.updateForm.remark = obj.remark
+        this.isUpdateDlgShow = true
+      },
+      updateStore () {
+        this.$refs.updateForm.validate((valid) => {
+          if (valid) {
+            this.$http.post(`/api/monitor/update`, {id: this.updateObj.id, remark: this.updateForm.remark}).then(res => {
+              if (res.code == 0) {
+                this.$message.success('修改成功！')
+                this.getList()
+                this.isUpdateDlgShow = false
+              }
+            })
+          }
+        })
+      },
       batchRemove() {
         if (this.selectRows.length <= 0) {
           this.$message.error('请选择要删除的监测对象');