temu-plugin/src/view/product/NiubiCopy.vue

<template>
  <div>
    <ai-list class="list">
      <ai-title
        slot="title"
        title="智能复制"
        tips="请先在当前浏览器登录“拼多多跨境卖家中心”，期间保持登录状态"
        isShowBottomBorder>
      </ai-title>
      <template slot="content">
        <div class="content">
          <ai-search-bar>
            <template #left>
              <div class="search-item">
                <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 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()">开始复制</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"
            @getList="getList">
          </ai-table>
        </div>
      </template>
    </ai-list>

    <ai-dialog
      title="复制"
      :visible.sync="copyFromDlgShow"
      :close-on-click-modal="false"
      width="790px"
      customFooter
      @close="handleClose">
      <el-form class="ai-form" :model="form" label-width="140px" ref="form">
        <el-form-item label="商品来源：" style="width: 100%;" prop="type" :rules="[{ required: true, message: '请选择商品来源', trigger: 'blur' }]">
          <el-radio-group v-model="form.type" size="medium">
            <el-radio :label="1">TEMU</el-radio>
            <!--<el-radio :label="2">速卖通</el-radio>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品地址：" style="width: 100%;" prop="url" :rules="[{ required: true, message: '请输入商品地址', trigger: 'blur' }]">
          <el-input type="textarea" :rows="5" v-model="form.url"></el-input>
        </el-form-item>
        <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="copyFromDlgShow = false">取 消</el-button>
        <el-button type="primary" @click="addToDraft">确定</el-button>
      </div>
    </ai-dialog>
  </div>
</template>

<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: 'NiubiCopy',

    data () {
      return {
        search: {
          current: 1,
          size: 10,
          type: '',
          mallId: ''
        },
        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: [
          { prop: 'url', label: '商品地址', align: 'left' },
          { prop: 'type', label: '来源', align: 'left',formart: v => this.$dict.getLabel('copy_from', v), },
          { prop: 'mallName', label: '店铺名称', align: 'left'},
          { prop: 'createTime', label: '复制时间', width: '180px', fixed: 'right'}
        ],
        tableData: [],
        total: 0,

        copyFromDlgShow: false,
        form: {
          url: '',
          type: 1,  // 默认从temu复制
          targetMallId: '',
          targetCatId: []
        },
        goods: {},
        sku: {},
        productDetail: {}
      }
    },

    created () {
      this.$dict.load('copy_from');
    },

    methods: {
      getList () {
        this.$http.post('/api/copyProduct/myPage',null,{
            params: {
                ...this.search
            }
        }).then(res => {
            this.tableData = res.data.records
            this.total = res.data.total
        })
      },

      // 添加模板
      handleClose() {
        this.copyFromDlgShow = false
      },
      beforeCopy() {
        this.form.type = 1
        this.form.url = ''
        this.copyFromDlgShow = true
      },
      async addToDraft() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let source
            if (this.form.type == '1') {
              source = 'temu'
            } else if (this.form.type == '2') {
              source = 'aliexpress'
            }
            sendChromeWebReqMessage({
              type: source,
              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("{"))
                str = str.substring(0, str.lastIndexOf("}"))
                str = str + "}"

                let goodsObj = JSON.parse(str)
                this.goods = goodsObj.store.goods
                this.sku = goodsObj.store.sku
                this.productDetail = goodsObj.store.productDetail

                let specIds = []
                this.sku.forEach(item => {
                  item.specs.forEach(item1 => {
                    let flag = false
                    specIds.forEach(item2 => {
                      if (item2.specValue == item1.specValue) {
                        flag = true
                      }
                    })
                    if (!flag) {
                      specIds.push({specKeyId: item1.specKeyId, specValue: item1.specValue})
                    }
                  })
                })

                Promise.all(specIds.map(item => this.getSpecId(item).then(res => {
                  this.sku.forEach(item1 => {
                    item1.specs.forEach(item2 => {
                      if (item2.specValue == item.specValue) {
                        item2.specValueId = res.result.specId
                      }
                    })
                  })
                  return 0
                }))).then(() => {
                  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)

                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])
                  }
                })
              }
            })
          }
        })
      },
      createDraft(data) {
        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 = data
            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

            this.createProduct(content)
          } else {
            setTimeout(() => {
              this.createDraft(data)
            }, 500)
          }
        })
      },
      createProduct(content) {
        sendChromeAPIMessage({
          url: 'bg-visage-mms/product/draft/save',
          needMallId: true,
          mallId: this.form.targetMallId,
          data: {
            ...content
        }}).then((res) => {
          if (res.errorCode == 1000000) {
            Message.success("成功添加到草稿箱")
            this.saveInfo()
          } else {
            setTimeout(() => {
              this.createProduct(content)
            }, 500)
          }
        })
      },
      getSpecId(data) {
        return sendChromeAPIMessage({
          url: 'bg-anniston-mms/sku/spec/byName/queryOrAdd',
          needMallId: true,
          mallId: this.form.targetMallId,
          data: {
            parentSpecId: data.specKeyId,
            specName: data.specValue
        }}).then((res) => {
          if (res.errorCode == 1000000) {
            return res
          } else {
            this.getSpecId(data)
          }
        })
      },
      saveInfo() {
        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.$store.dispatch('getUserInfo')
            this.getList()
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
</style>