调整

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@antv/g2plot": "^2.4.31",
+    "@toast-ui/vue-image-editor": "^3.15.2",
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.9",

src/assets/css/index.scss

@@ -452,3 +452,20 @@ img {
 .fill {
   flex: 1;
 }
+
+.search-item {
+  display: flex;
+  align-items: center;
+  margin: 0 16px 12px;
+
+  label {
+    font-size: 14px;
+    color: #666;
+    font-weight: 500;
+    width: 100px;
+  }
+
+  input {
+    width: 240px;
+  }
+}

src/components/AiSearchBar.vue

@@ -8,7 +8,6 @@
         <slot name="right"/>
       </div>
     </div>
-    <ai-pull-down v-if="!isSingleRow" @change="handlePullDown" :height="rightHeight"/>
   </section>
 </template>
 

src/view/product/NiubiCopy.vue

@@ -11,11 +11,30 @@
         <div class="content">
           <ai-search-bar>
             <template #left>
-              <el-button type="button" :class="'el-button el-button--primary'" @click="beforeCopy(1)">从TEMU复制</el-button>
+              <div class="search-item">
-              <el-button type="button" :class="'el-button el-button--primary'" @click="beforeCopy(2)">从速卖通复制</el-button>
+                <label style="width:110px">商品来源：</label>
+                <ai-select :selectList="$dict.getDict('copy_from')" :clearable="true" v-model="search.type" @change="search.current =1, getList()"></ai-select>
+              </div>
+              <div class="search-item">
+                <label style="width:110px">店铺：</label>
+                <el-select v-model="search.mallId" :clearable="true" @change="search.current =1, getList()" placeholder="请选择店铺" size="small">
+                  <el-option
+                    v-for="item in $store.state.mallList"
+                    :key="item.mallId"
+                    :label="item.mallName"
+                    :value="item.mallId">
+                  </el-option>
+                </el-select>
+              </div>
             </template>
             <template #right>
-              <el-button size="small" circle icon="el-icon-refresh-right" @click="getList()"></el-button>
+              <el-button type="primary" @click="search.current =1, getList()">查询</el-button>
+            </template>
+          </ai-search-bar>
+          <ai-search-bar>
+            <template #left>
+              <el-button type="button" :class="'el-button el-button--primary'" @click="beforeCopy(1)">从TEMU复制</el-button>
+              <el-button type="button" :class="'el-button el-button--primary'" @click="beforeCopy(2)">从速卖通复制</el-button>
             </template>
           </ai-search-bar>
           <ai-table
@@ -70,8 +89,163 @@
 
 <script>
 import {sendChromeAPIMessage, sendChromeWebReqMessage} from '@/api/chromeApi'
+import 'tui-image-editor/dist/tui-image-editor.css'
+import 'tui-color-picker/dist/tui-color-picker.css'
 import { Message } from 'element-ui'
 
+const ImageEditor = require('tui-image-editor')
+  const localeZh = {
+    // override default English locale to your custom
+    Crop: '裁剪',
+    ZoomIn: '放大',
+    ZoomOut: '缩小',
+    Hand: '拖拽',
+    History: '历史记录',
+    DeleteAll: '全部删除',
+    Delete: '删除',
+    Undo: '撤销',
+    Redo: '反撤销',
+    Reset: '重置',
+    Flip: '镜像',
+    Rotate: '旋转',
+    Draw: '画',
+    Shape: '形状标注',
+    Icon: '图标标注',
+    Text: '文字标注',
+    Mask: '遮罩',
+    Filter: '滤镜',
+    Bold: '加粗',
+    Italic: '斜体',
+    Underline: '下划线',
+    Left: '左对齐',
+    Center: '居中',
+    Right: '右对齐',
+    Color: '颜色',
+    'Text size': '字体大小',
+    Custom: '自定义',
+    Square: '正方形',
+    Apply: '应用',
+    Cancel: '取消',
+    'Flip X': 'X 轴',
+    'Flip Y': 'Y 轴',
+    Range: '区间',
+    Stroke: '描边',
+    Fill: '填充',
+    Circle: '圆',
+    Triangle: '三角',
+    Rectangle: '矩形',
+    Free: '曲线',
+    Straight: '直线',
+    Arrow: '箭头',
+    'Arrow-2': '箭头2',
+    'Arrow-3': '箭头3',
+    'Star-1': '星星1',
+    'Star-2': '星星2',
+    Polygon: '多边形',
+    Location: '定位',
+    Heart: '心形',
+    Bubble: '气泡',
+    'Custom icon': '自定义图标',
+    'Load Mask Image': '加载蒙层图片',
+    Grayscale: '灰度',
+    Blur: '模糊',
+    Sharpen: '锐化',
+    Emboss: '浮雕',
+    'Remove White': '除去白色',
+    Distance: '距离',
+    Brightness: '亮度',
+    Noise: '噪音',
+    'Color Filter': '彩色滤镜',
+    Sepia: '棕色',
+    Sepia2: '棕色2',
+    Invert: '负片',
+    Pixelate: '像素化',
+    Threshold: '阈值',
+    Tint: '色调',
+    Multiply: '正片叠底',
+    Blend: '混合色'
+    // etc...
+  }
+  const customTheme = {
+    // image 左上角度图片
+    'common.bi.image': '', // 在这里换上你喜欢的logo图片
+    'common.bisize.width': '0px',
+    'common.bisize.height': '0px',
+    'common.backgroundImage': 'none',
+    'common.backgroundColor': '#f3f4f6',
+    'common.border': '1px solid #444',
+ 
+    // header
+    'header.backgroundImage': 'none',
+    'header.backgroundColor': '#f3f4f6',
+    'header.border': '0px',
+    'header.display': 'none',
+ 
+    // load button
+    'loadButton.backgroundColor': '#fff',
+    'loadButton.border': '1px solid #ddd',
+    'loadButton.color': '#222',
+    'loadButton.fontFamily': 'NotoSans, sans-serif',
+    'loadButton.fontSize': '12px',
+    'loadButton.display': 'none', // 可以直接隐藏掉
+ 
+    // download button
+    'downloadButton.backgroundColor': '#fdba3b',
+    'downloadButton.border': '1px solid #fdba3b',
+    'downloadButton.color': '#fff',
+    'downloadButton.fontFamily': 'NotoSans, sans-serif',
+    'downloadButton.fontSize': '12px',
+    'downloadButton.display': 'none', // 可以直接隐藏掉
+ 
+    // icons default
+    'menu.normalIcon.color': '#8a8a8a',
+    'menu.activeIcon.color': '#555555',
+    'menu.disabledIcon.color': '#434343',
+    'menu.hoverIcon.color': '#e9e9e9',
+    'submenu.normalIcon.color': '#8a8a8a',
+    'submenu.activeIcon.color': '#e9e9e9',
+ 
+    'menu.iconSize.width': '24px',
+    'menu.iconSize.height': '24px',
+    'submenu.iconSize.width': '32px',
+    'submenu.iconSize.height': '32px',
+ 
+    // submenu primary color
+    'submenu.backgroundColor': '#1e1e1e',
+    'submenu.partition.color': '#858585',
+ 
+    // submenu labels
+    'submenu.normalLabel.color': '#858585',
+    'submenu.normalLabel.fontWeight': 'lighter',
+    'submenu.activeLabel.color': '#fff',
+    'submenu.activeLabel.fontWeight': 'lighter',
+ 
+    // checkbox style
+    'checkbox.border': '1px solid #ccc',
+    'checkbox.backgroundColor': '#fff',
+ 
+    // rango style
+    'range.pointer.color': '#fff',
+    'range.bar.color': '#666',
+    'range.subbar.color': '#d1d1d1',
+ 
+    'range.disabledPointer.color': '#414141',
+    'range.disabledBar.color': '#282828',
+    'range.disabledSubbar.color': '#414141',
+ 
+    'range.value.color': '#fff',
+    'range.value.fontWeight': 'lighter',
+    'range.value.fontSize': '11px',
+    'range.value.border': '1px solid #353535',
+    'range.value.backgroundColor': '#151515',
+    'range.title.color': '#fff',
+    'range.title.fontWeight': 'lighter',
+ 
+    // colorpicker style
+    'colorpicker.button.border': '1px solid #1e1e1e',
+    'colorpicker.title.color': '#fff'
+  }
+
   export default {
     name: 'CopyProduct',
 
@@ -80,8 +254,8 @@ import { Message } from 'element-ui'
         search: {
           current: 1,
           size: 10,
-          productName: '',
+          type: '',
-          mallName: ''
+          mallId: ''
         },
         props: {
           value: 'catId',
@@ -107,9 +281,10 @@ import { Message } from 'element-ui'
           }
         },
         colConfigs: [
-          { prop: 'productName', label: '商品名称', align: 'left' },
+          { prop: 'url', label: '商品地址', align: 'left' },
-          { prop: 'mallName', label: '目标店铺', align: 'left'},
+          { prop: 'type', label: '来源', align: 'left',formart: v => this.$dict.getLabel('copy_from', v), },
-          { prop: 'createTime', label: '添加时间', width: '180px', fixed: 'right'}
+          { prop: 'mallName', label: '店铺名称', align: 'left'},
+          { prop: 'createTime', label: '复制时间', width: '180px', fixed: 'right'}
         ],
         tableData: [],
         total: 0,
@@ -128,11 +303,12 @@ import { Message } from 'element-ui'
     },
 
     created () {
+      this.$dict.load('copy_from');
     },
 
     methods: {
       getList () {
-        this.$http.post('/api/product/myPage',null,{
+        this.$http.post('/api/copyProduct/myPage',null,{
             params: {
                 ...this.search
             }
@@ -165,6 +341,10 @@ import { Message } from 'element-ui'
               url: this.form.url,
             }).then((res) => {
               if (this.form.type == '1') {
+                if (res.indexOf("rawData") == -1) {
+                  Message.error("请检查地址是否正确，或者“TEMU”网站是否出现图形验证码")
+                  return
+                }
                 let str = res.substring(res.indexOf("rawData"))
                 str = str.substring(0, str.indexOf("<\/script>"))
                 str = str.substring(str.indexOf("{"))
@@ -201,21 +381,43 @@ import { Message } from 'element-ui'
                   })
                   return 0
                 }))).then(() => {
-                  this.$http.post('/api/product/translate',{type: 1, goods: this.goods, sku: this.sku, productDetail: this.productDetail}).then(res => {
+                  this.$http.post('/api/copyProduct/translate',{type: 1, goods: this.goods, sku: this.sku, productDetail: this.productDetail}).then(res => {
                     if (res.code == 0) {
                       this.createDraft(res.data)
                     }
                   })
                 })
               } else if (this.form.type == '2') {
+                if (res.indexOf("runParams") == -1) {
+                  Message.error("请检查地址是否正确，或者“速卖通”网站是否出现滑动条")
+                  return
+                }
                 let str = res.substring(res.indexOf("runParams"))
                 str = str.substring(0, str.indexOf("<\/script>"))
                 str = str.substring(str.indexOf("{"))
                 str = str.substring(0, str.lastIndexOf("}"))
                 str = str.substring(str.indexOf('data'))
                 str = str.substring(5)
-                //str = str + "}"
+
-                console.log(str)
+                let obj = JSON.parse(str)
+
+                /*this.$http.post('/api/copyProduct/translate',{type: 2, productName: obj.productInfoComponent.subject, skuObj: obj.skuComponent, productDetail: this.productDetail}).then(res => {
+                  if (res.code == 0) {
+                    this.createDraft(res.data)
+                  }
+                })*/
+
+                sendChromeWebReqMessage({
+                  type: source,
+                  url: obj.productDescComponent.descriptionUrl,
+                }).then((res1) => {
+                  res1 = res1.substring(0, res1.indexOf("<script>"))
+                  let str = res1.replace(/<img[^>]+src="([^">]+)"[^>]+>/g, '$1\n').replace(/<.*?>/g, '[||]')
+                  let arr = str.split('[||]')
+                  for (let i = 0; i < arr.length; i++) {
+                    console.log(arr[i])
+                  }
+                })
               }
             })
           }
@@ -259,6 +461,19 @@ import { Message } from 'element-ui'
         }}).then((res) => {
           if (res.errorCode == 1000000) {
             Message.success("成功添加到草稿箱")
+            let mallInfo = this.$store.state.mallList.filter(item => {
+              return item.mallId == this.form.targetMallId
+            })
+            this.$http.post('/api/copyProduct/add', {
+                mallId: mallInfo[0].mallId,
+                mallName: mallInfo[0].mallName,
+                url: this.form.url,
+                type: this.form.type
+              }).then(res1 => {
+              if (res1.code == 0) {
+                this.getList()
+              }
+            })
           } else {
             setTimeout(() => {
               this.createProduct(content)