You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
517 lines
13 KiB
517 lines
13 KiB
<template>
|
|
<div class="about">
|
|
<a-tabs @change="changeTab">
|
|
<a-tab-pane
|
|
key="-1"
|
|
:tab="'竞品分析'"
|
|
>
|
|
</a-tab-pane>
|
|
<a-tab-pane
|
|
key="0"
|
|
:tab="'待比价（' + getTaskCount(0) + '）'"
|
|
>
|
|
</a-tab-pane>
|
|
<a-tab-pane
|
|
key="6"
|
|
:tab="'已比价（' + getTaskCount(6) + '）'"
|
|
>
|
|
</a-tab-pane>
|
|
<a-tab-pane
|
|
key="1"
|
|
:tab="'精选（' + getTaskCount(1) + '）'"
|
|
>
|
|
</a-tab-pane>
|
|
<a-tab-pane
|
|
key="8"
|
|
:tab="'待上架（' + getTaskCount(8) + '）'"
|
|
>
|
|
</a-tab-pane>
|
|
<a-tab-pane
|
|
key="2"
|
|
:tab="'已上架（' +getTaskCount(2) + '）'"
|
|
>
|
|
</a-tab-pane>
|
|
<a-tab-pane
|
|
key="3"
|
|
:tab="'放弃（' + getTaskCount(3) + '）'"
|
|
>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
|
|
<!-- <a-row :gutter="10" style="margin-bottom:10px">
|
|
|
|
<a-col :span="5">
|
|
<a-input
|
|
v-model="catKeyWord"
|
|
placeholder="搜索品类词"
|
|
>
|
|
</a-input>
|
|
</a-col>
|
|
|
|
<a-col :span="1">
|
|
<a-button @click="searchDatas">搜索</a-button>
|
|
</a-col>
|
|
</a-row> -->
|
|
|
|
|
|
<div class="border">
|
|
<!--标题-->
|
|
<div style="background-color: #f3f2f7;border: 1px solid #d7d7d7;border-left: 0; border-right: 0;background: #f3f2f7;justify-items: center;text-align: center;display: flex;align-items: center; vertical-align: center;height: 35px;">
|
|
<div style="width: 171px;" class="titleDiv">
|
|
<div>
|
|
来源</div>
|
|
</div>
|
|
<div style="width: 177px;" class="titleDiv">
|
|
战场
|
|
</div>
|
|
<div style="width: 177px;" class="titleDiv">
|
|
竞争环境
|
|
</div>
|
|
<div style="width: 177px;" class="titleDiv">
|
|
兵力规划
|
|
</div>
|
|
<div style="width: 801px;" class="titleDiv">
|
|
对手信息
|
|
</div>
|
|
<div style="width: 177px;" class="titleDiv">
|
|
操作
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--内容页面-->
|
|
<div v-for="item in datas"
|
|
:key="item.Id">
|
|
|
|
<div style="padding-left: 10px;display: flex;align-items: center;color: #333333;background: #f3f2f7;height: 35px; border: 1px solid #d7d7d7;border-left: 0; border-right: 0;">
|
|
SKU名称:{{item.Title}}
|
|
|
|
售价:{{item.Price}}
|
|
|
|
付款人数:{{item.Sales}}
|
|
</div>
|
|
<div style="background-color: #f3f2f7;border-bottom: 0px solid #d7d7d7;background: #ffffff;justify-items: center;text-align: center;display: flex;align-items: center; vertical-align: center;height: 171px;">
|
|
<div style="width: 171px;" class="contentDiv">
|
|
<img :src="item.ItemImg" style="width: 151px;height: 151px;" >
|
|
</div>
|
|
<div style="width: 177px;" class="contentDiv">
|
|
TOP1 评价量 200+
|
|
</div>
|
|
<div style="width: 177px;flex-direction: column" class="contentDiv">
|
|
中
|
|
<div>
|
|
达到该战场定义的</div>
|
|
<div>
|
|
评价量商家个数为3</div>
|
|
</div>
|
|
<div style="width: 177px;" class="contentDiv">
|
|
所需兵力:500+
|
|
</div>
|
|
<div style="width: 801px;" class="contentDiv">
|
|
对手信息
|
|
</div>
|
|
<div style="flex-direction: column;width: 177px;color: #02a7f0;" class="contentDiv" >
|
|
<div >查找竞品</div>
|
|
<div style="margin-top: 10px;">完成分析</div>
|
|
<div style="margin-top: 10px;">编辑修改</div>
|
|
<div style="margin-top: 10px;">放弃</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--分页条-->
|
|
<div style="float: right; margin-top: 30px">
|
|
<a-pagination
|
|
v-model="pagination.current"
|
|
:default-current="1"
|
|
:total="pagination.total"
|
|
:page-size="pagination.pageSize"
|
|
@change="changePage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showSearchPic:false,
|
|
searchpicurl:undefined,
|
|
searchPicType:undefined,
|
|
datas: [],
|
|
pagination: {
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
showTotal: (total, range) =>
|
|
`总数:${total} 当前:${range[0]}-${range[1]}`,
|
|
},
|
|
filters: {},
|
|
sorter: { field: "Id", order: "asc" },
|
|
loading: false,
|
|
queryParam: { condition: "State", keyword: 0 },
|
|
selectedRowKeys: [],
|
|
currentTab: "0",
|
|
catKeyWord:undefined,
|
|
lastEditData: undefined,
|
|
extFormList: ["以图搜款"],
|
|
stateList: [],
|
|
platformList: [
|
|
{ id: 0, name: "淘宝" },
|
|
{ id: 1, name: "京东" },
|
|
{ id: 2, name: "1688" },
|
|
{ id: 3, name: "拼多多" },
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
window.getDatas = this.getDatas;
|
|
this.getDatas(0);
|
|
this.getTabCount();
|
|
},
|
|
activated() {
|
|
//this.getDatas(0)
|
|
},
|
|
methods: {
|
|
searchPicByUrl(){
|
|
this.getImgBase64(this.getImgPath(this.searchpicurl), 2)
|
|
this.showSearchPic=false
|
|
},
|
|
showSearchPicModel(type){
|
|
this.searchpicurl=undefined
|
|
this.searchPicType=type
|
|
this.showSearchPic=true
|
|
},
|
|
getTabCount() {
|
|
this.http.get("/HuiYan/teamitems/GetTeamCount").then((res) => {
|
|
this.stateList = res.Data;
|
|
});
|
|
},
|
|
getTaskCount(id){
|
|
var task= this.stateList.find(c=>c.Id==id)
|
|
if(task==null||task==undefined)
|
|
{
|
|
return 0
|
|
}
|
|
return task.Count
|
|
},
|
|
getImgPath(img) {
|
|
if (!img||img==undefined) return;
|
|
|
|
if (img.indexOf("http") >= 0) {
|
|
return img;
|
|
} else {
|
|
return "http:" + img;
|
|
}
|
|
},
|
|
// 实现select选择框可下拉单选，也可输入赋值
|
|
handleSearch(value, ext, item) {
|
|
this.handleChange(value, ext, item);
|
|
},
|
|
handleChange(value, ext, item) {
|
|
ext.SupplierFrom = value != null && value != "" ? value : [];
|
|
|
|
if (
|
|
item.Extensions.filter((c) => c.SupplierFrom == "以图搜款").length > 2
|
|
) {
|
|
this.$message.error("以图搜款最多可选择2个！");
|
|
ext.SupplierFrom = "";
|
|
}
|
|
},
|
|
handleBlur(value, ext) {
|
|
ext.SupplierFrom = value;
|
|
if (value && this.extFormList.indexOf(value) == -1) {
|
|
this.extFormList.push(value);
|
|
}
|
|
},
|
|
openItemInfoWeb(item){
|
|
if(item==undefined||item.RivalGoodsId==undefined||item.RivalGoodsId==null)
|
|
{
|
|
this.$message.error("请先输入竞品链接！");
|
|
return
|
|
}
|
|
hyCoreModel.getItemInfoByUrl(item.RivalGoodsId).then(res=>{
|
|
var result= JSON.parse(res)
|
|
if(result.success)
|
|
{
|
|
|
|
var data=result.data
|
|
item.RivalTitle=data.title
|
|
item.RivalPrice=data.price
|
|
item.RivalPLCount=data.commont
|
|
item.RivalImg=data.img
|
|
this.$message.success("获取成功");
|
|
|
|
}else{
|
|
this.$message.error(result.msg);
|
|
}
|
|
})
|
|
},
|
|
changeTab(e) {
|
|
this.getDatas(e);
|
|
this.currentTab = e;
|
|
this.pagination.current = 1;
|
|
},
|
|
changePage(page, pageSize) {
|
|
this.pagination.current = page;
|
|
this.getDatas(this.currentTab);
|
|
},
|
|
searchDatas(){
|
|
this.pagination.current = 1;
|
|
this.getDatas(this.currentTab);
|
|
},
|
|
getDatas(type) {
|
|
var that = this;
|
|
var url='/HuiYan/teamitems/GetItems'
|
|
if(this.catKeyWord&&this.catKeyWord.length>0)
|
|
{
|
|
url="/HuiYan/teamitems/GetItems?keyword="+this.catKeyWord
|
|
}
|
|
this.http
|
|
.post(url, {
|
|
PageIndex: this.pagination.current,
|
|
PageRows: this.pagination.pageSize,
|
|
SortField: this.sorter.field || "Id",
|
|
SortType: this.sorter.order,
|
|
Search: { condition: "State", keyword: -1 },
|
|
...this.filters,
|
|
})
|
|
.then((res) => {
|
|
that.pagination.total = res.Total;
|
|
res.Data.forEach((item) => {
|
|
item.isEdit = false;
|
|
item.Extensions.forEach((ext) => {
|
|
var keys= Object.keys(ext)
|
|
keys.forEach(key=>{
|
|
if(ext[key]==null)
|
|
ext[key]=undefined
|
|
})
|
|
this.initProfits(item,ext)
|
|
});
|
|
});
|
|
this.datas = res.Data;
|
|
});
|
|
},
|
|
//获取利润率
|
|
initProfits(item,ext){
|
|
|
|
|
|
if(item.RivalPrice!=undefined){
|
|
ext.PlatformPoint = parseFloat(item.RivalPrice * 0.05).toFixed(2);
|
|
}
|
|
|
|
|
|
if(ext.BuyPrice>0)
|
|
{
|
|
if(ext.TaxPrice==undefined||ext.TaxPrice==''){
|
|
ext.TaxPrice = parseFloat(ext.BuyPrice * 0.03).toFixed(2);
|
|
}
|
|
}
|
|
|
|
if(ext.KDPrice==undefined)
|
|
{
|
|
ext.KDPrice=parseFloat(6)
|
|
}
|
|
|
|
ext.Profit =
|
|
parseFloat(item.RivalPrice) -
|
|
parseFloat(ext.BuyPrice) -
|
|
parseFloat(ext.KDPrice) -
|
|
parseFloat(ext.PlatformPoint)-
|
|
(ext.TaxPrice==undefined||ext.TaxPrice==null?0:parseFloat(ext.TaxPrice))
|
|
|
|
ext.Profit=parseFloat(
|
|
ext.Profit
|
|
).toFixed(2);
|
|
|
|
if (ext.BuyPrice == 0) {
|
|
ext.Profits = 0;
|
|
} else {
|
|
ext.Profits = parseFloat(
|
|
(ext.Profit / (parseFloat(ext.BuyPrice)+parseFloat(ext.KDPrice))) * 100
|
|
).toFixed(2);
|
|
}
|
|
},
|
|
editData(data) {
|
|
data.isEdit = true;
|
|
|
|
data.isRival=true;
|
|
this.lastEditData = JSON.parse(JSON.stringify(data));
|
|
},
|
|
canelEdit(data) {
|
|
this.lastEditData.isEdit = false;
|
|
Object.assign(data, this.lastEditData);
|
|
},
|
|
setData(data) {
|
|
data.Extensions.forEach((ext) => {
|
|
this.initProfits(data,ext)
|
|
});
|
|
this.http.post("/HuiYan/teamitems/SetItem", data).then((res) => {
|
|
if (res.Success) {
|
|
this.$message.success("操作成功！");
|
|
|
|
data.isEdit = false;
|
|
} else {
|
|
this.$message.error(res.Msg);
|
|
}
|
|
});
|
|
},
|
|
setState(id, type) {
|
|
///发布比价
|
|
if (type == 5) {
|
|
this.sendPriceTask(id);
|
|
} else if (type == 0) {
|
|
this.canelPriceTask(id);
|
|
} else {
|
|
this.http
|
|
.post(`/HuiYan/teamitems/SetState?id=${id}&state=${type}`)
|
|
.then((res) => {
|
|
if (res.Success) {
|
|
this.$message.success("操作成功！");
|
|
this.getDatas(this.currentTab);
|
|
} else {
|
|
this.$message.error(res.Msg);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
sendPriceTask(id) {
|
|
this.http.post(`/HuiYan/pricetasklog/AddTask?id=${id}`).then((res) => {
|
|
if (res.Success) {
|
|
this.$message.success("操作成功！");
|
|
this.getDatas(this.currentTab);
|
|
} else {
|
|
this.$message.error(res.Msg);
|
|
}
|
|
});
|
|
},
|
|
canelPriceTask(id) {
|
|
this.http.post(`/HuiYan/pricetasklog/CanelTask?id=${id}`).then((res) => {
|
|
if (res.Success) {
|
|
this.$message.success("操作成功！");
|
|
this.getDatas(this.currentTab);
|
|
} else {
|
|
this.$message.error(res.Msg);
|
|
}
|
|
});
|
|
},
|
|
getImgBase64(src, type) {
|
|
hyCoreModel.getImgBase64(src, type).then((res) => {
|
|
console.log(res);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.titleDiv{
|
|
/* border: 1px solid #d7d7d7; */
|
|
border-right: 1px solid #d7d7d7;
|
|
background-color: #f3f2f7;
|
|
box-sizing: border-box;
|
|
font-family: "Arial", sans-serif;
|
|
color: #333333;
|
|
text-align: center;
|
|
height: 35px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-content: center;
|
|
|
|
}
|
|
.titleDiv:last-child
|
|
{
|
|
border-right: 0px;
|
|
}
|
|
.contentDiv{
|
|
border-right: 1px solid #d7d7d7;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
font-family: "Arial", sans-serif;
|
|
color: #333333;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-content: center;
|
|
height: 170px;
|
|
}
|
|
.headCol {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-left: 0px;
|
|
text-align: center;
|
|
background-color: rgba(243, 242, 247, 1);
|
|
}
|
|
|
|
.headColFirst {
|
|
border-left: 1px solid rgba(215, 215, 215, 1);
|
|
}
|
|
|
|
.borderNoTop {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-top: 0px;
|
|
border-bottom: 0px;
|
|
|
|
}
|
|
|
|
.borderT {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
}
|
|
|
|
.border {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
width: 1708px;
|
|
}
|
|
|
|
.borderLeft {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
.borderRight {
|
|
border: 1px solid rgba(215, 215, 215, 1);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
.itemtitle {
|
|
height: 50px;
|
|
max-height: 50px;
|
|
display: block;
|
|
overflow: auto;
|
|
}
|
|
|
|
.spanValue {
|
|
display: block;
|
|
overflow-x: scroll;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 6px;
|
|
background: rgba(144, 147, 153, 0.5);
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
}
|
|
|
|
|
|
</style>
|