kubbo/temu-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
liushiwei
2023-10-15 22:09:33 +08:00
parent a903092aab
commit 122e339857
12 changed files with 964 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/AiAvatar.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<section class="AiAvatar">
<el-row type="flex" v-if="type=='rect'">
<div class="image-box">
<el-image :src="value" :preview-src-list="preview?[value]:null"/>
</div>
</el-row>
<el-avatar v-else-if="type=='circle'" :src="value">
<slot v-if="!value"/>
</el-avatar>
</section>
</template>
<script>
export default {
name: "AiAvatar",
model: {
prop: "value",
event: "change"
},
props: {
value: {type: String, default: ""},
preview: {type: Boolean, default: true},
type: {default: "rect"}
},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.AiAvatar {
font-size: 12px;
line-height: initial;
.iconProfile_Picture {
color: #89b;
}
:deep(.el-avatar) {
background: #26f;
}
.image-box {
width: 104px !important;
height: 120px;
text-align: center;
background-color: #f5f5f5;
border: 1px solid rgba(208, 212, 220, 1);
border-radius: 2px;
padding: 0;
.iconfont {
font-size: 32px
}
.el-image {
width: 100%;
height: 100%;
}
}
}
</style>

1
src/components/AiCard.vue
View File

@@ -44,7 +44,6 @@
.ai-card__body {
height: calc(100% - 72px);
padding: 0 20px 0;
overflow-y: auto;
}
&.panel, &.headerPanel {

264
src/components/AiCopyFromTemu.vue Normal file
View File

@@ -0,0 +1,264 @@
<template>
<div>
<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="bottom flex-center">
<el-button @click="$emit('onClose')">取 消</el-button>
<el-button type="primary" @click="addToDraft">确定</el-button>
</div>
</div>
</template>
<script>
import {sendChromeAPIMessage, sendChromeWebReqMessage} from '@/api/chromeApi'
import { Message } from 'element-ui'
export default {
name: 'AiCopyFromTemu',
props: ['params'],
data() {
return {
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
}
}))
}
})
}
},
form: {
url: '',
type: 1, // 默认从temu复制
targetMallId: '',
targetCatId: []
},
goods: {},
sku: {},
productDetail: {}
}
},
created () {
console.log(this.params?.url)
if (this.params?.url) {
this.form.url = this.params.url
}
},
methods: {
async addToDraft() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$http.post('/api/copyProduct/check',null, {params: {type: 0}}).then(res => {
if (res.code == 0) {
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)
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.$emit('onSuccess')
}
})
}
}
}
</script>
<style scoped lang="scss">
.bottom {
justify-content: center;
}
</style>

48
src/components/AiProductDetail.vue
View File

@@ -2,13 +2,16 @@
<ai-detail class="audit">
<template slot="content">
<ai-card title="基本信息">
<ai-product-drop-down v-if="info" :params="info" slot="right"></ai-product-drop-down>
<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>
<div class="flex">
<ai-avatar v-model="info.imgUrl" :editable="false" :preview="true"/>
<ai-wrapper
label-width="120px" class="fill">
<ai-info-item label="价格：" :value="'$' + info.price"></ai-info-item>
<ai-info-item label="销量：" :value="info.saleTotal"></ai-info-item>
</ai-wrapper>
</div>
</template>
</ai-card>
<ai-card title="趋势信息">
@@ -20,11 +23,15 @@
</ai-detail>
</template>
<script>
import { Message } from "element-ui"
import AiProductDropDown from './AiProductDropDown.vue'
import { DualAxes } from '@antv/g2plot'
export default {
name: "AiProductDetail",
props: ['params'],
components: {
AiProductDropDown
},
data() {
return {
info: {}
@@ -33,7 +40,6 @@ export default {
computed: {
},
created() {
console.log(this.params.goodsId)
this.getInfo()
},
methods: {
@@ -44,6 +50,32 @@ export default {
}
}).then(res => {
this.info = res.data
const dualAxes = new DualAxes('chart', {
data: [this.info.priceAndSale, this.info.priceAndSale],
xField: '日期',
yField: ['价格', '销量'],
geometryOptions: [
{
geometry: 'line',
color: '#5B8FF9',
},
{
geometry: 'line',
color: '#5AD8A6',
}
],
smooth: true,
// @TODO 后续会换一种动画方式
animation: {
appear: {
animation: 'path-in',
duration: 5000,
},
},
});
dualAxes.render();
})
}
}

80
src/components/AiProductDropDown.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div>
<el-dropdown @command="handleClick">
<span class="el-dropdown-link">
操作<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="isShowDetail" :command="beforeGoDetail(params.goodsId)">查看详情</el-dropdown-item>
<el-dropdown-item divided :command="beforeCopy(params.url)">复制商品</el-dropdown-item>
<el-dropdown-item divided :command="beforeGoWeb(params.url)">访问商品</el-dropdown-item>
<el-dropdown-item :command="beforeGoMal(params.mallId)">访问店铺</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<ai-dialog
title="复制"
:visible.sync="copyFromDlgShow"
:close-on-click-modal="false"
width="790px"
customFooter
:append-to-body="true"
@close="handleClose">
<ai-copy-from-temu v-if="copyFromDlgShow" :params="temuParams" @onClose="handleClose" @onSuccess="handleSuccess"></ai-copy-from-temu>
</ai-dialog>
</div>
</template>
<script>
import AiCopyFromTemu from "./AiCopyFromTemu.vue";
export default {
name: "AiProductDropDown",
components: {AiCopyFromTemu},
props: ['params', 'isShowDetail'],
data() {
return {
info: {},
copyFromDlgShow: false,
temuParams: {}
}
},
computed: {
},
created() {
},
methods: {
handleClick(e) {
if (e.type == 'detail') {
this.$emit('onGoDetail')
} else if (e.type == 'copy') {
this.temuParams = {url: 'https://www.temu.com/' + e.url}
this.copyFromDlgShow = true
} else if (e.type == 'goMall') {
window.open('https://www.temu.com/mall.html?mall_id=' + e.mallId, '_blank');
} else if (e.type == 'goWeb') {
console.log(e.url)
window.open('https://www.temu.com/' + e.url, '_blank');
}
},
beforeGoDetail(goodsId) {
return {type: 'detail', goodsId: goodsId}
},
beforeCopy(url) {
return {type: 'copy', url: url}
},
beforeGoMal(mallId) {
return {type: 'goMall', mallId: mallId}
},
beforeGoWeb (url) {
return {type: 'goWeb', url: url}
},
handleClose() {
this.copyFromDlgShow = false
},
handleSuccess() {
this.copyFromDlgShow = false
}
}
}
</script>
<style scoped lang="scss">
</style>