fe / yoho-shop-manage · Commits

Go to a project

Authored by OF1706
Commit 89f317bf88c0172ffe5fe184014fcc54e75962cd 1 parent 2831a9cd

product report

Inline Side-by-side
Showing 7 changed files with 411 additions and 2 deletions
... ... @@ -3,10 +3,12 @@ import sale from './sale-iframe';
import outinstore from './outinstore-iframe';
import stock from './stock-iframe';
import shop from './shop';
import product from './product';
export default {
overview,
sale,
outinstore,
stock,
shop
shop,
product
};
... ...
export default {
path: '/product.html',
name: 'product',
component: () => import(/* webpackChunkName: "statistics.product" */'./product'),
meta: {
pageName: '实时分析'
}
};
... ...
<template>
<div class="stat-shop">
<layout-body>
<Card class="shop-card">
<p slot="title">商品看板</p>
<layout-filter class="box-filter" :inline="true" :col="1">
<filter-item label="时间">
<Date-picker
type="daterange"
v-model="dateRange"
format="yyyy-MM-dd"
placeholder="选择开始结束日期"></Date-picker>
<div class="quick">
<a href="javascript:;" @click="() => {changeLimit(7)}">近7天</a>
<a href="javascript:;" @click="() => {changeLimit(30)}">近30天</a>
</div>
<Poptip trigger="hover" placement="bottom-end">
<div slot="content">
* 仅支持历史数据，时间跨度不得超过30天
</div>
<Button type="primary" @click="exportFile">导出</Button>
</Poptip>
</filter-item>
</layout-filter>
<layout-list>
<Table border :columns="tableCols" :data="tableData"></Table>
</layout-list>
</Card>
</layout-body>
</div>
</template>
<script>
import _ from 'lodash';
import moment from 'moment';
import productStore from './store';
import ProductService from 'services/statistics/product-service';
export default {
data() {
return productStore.call(this);
},
created() {
this.productService = new ProductService();
},
mounted() {
this.loadData();
},
watch: {
date() {
this.loadData();
},
day(newDay) {
let curDay = moment().format('YYYY-MM-DD');
if (newDay === this.beginDate || !newDay) {
return;
}
this.dateRange = newDay !== this.curDay ? [newDay, curDay] : [newDay, newDay];
},
dateRange(newDate) {
this.beginDate = Array.isArray(newDate) ? newDate[0] : newDate;
this.endDate = Array.isArray(newDate) ? newDate[1] : newDate;
this.day = this.beginDate === this.endDate === this.today ? '' : this.beginDate;
this.list();
}
},
methods: {
loadData() {
this.list();
},
changeLimit(limit) {
this.dateRange = [this[`day${limit}`], this.today];
},
list() {
console.log('哈哈哈哈哈，小样');
console.log(this.beginDate);
console.log(this.endDate);
this.productService.getShopOverview({
begin: this.beginDate,
end: this.endDate
}).then(ret => {
ret.data = [
{
"productId": 792270,
"productName": "PINKORANGE 笑脸刺绣渔夫帽",
"factoryCode": "1706YZ015M031",
"skn": 51624178,
"uv": 197,
"pv": 244,
"shopcartCount": 22,
"favoriteCount": 10,
"orderCount": 2,
"orderAmount": 198,
"paymentOrderCount": 2,
"paymentOrderAmount": 198,
"uidCount": 2,
"paymentOrderAmountUidsRate": 99
},
{
"productId": 804672,
"productName": "PINKORANGE 原创贴布腰带",
"factoryCode": "1706YZ020Y023R",
"skn": 51639020,
"uv": 149,
"pv": 192,
"shopcartCount": 19,
"favoriteCount": 15,
"orderCount": 3,
"orderAmount": 267.3,
"paymentOrderCount": 2,
"paymentOrderAmount": 178.2,
"uidCount": 2,
"paymentOrderAmountUidsRate": 89.1
}
];
console.log('ret-------');
console.log(ret.data);
});
},
exportFile() {
let param = {};
param.begin = this.beginDate;
param.end = this.endDate;
param.platform = '1,2';
const href = '/Api/platform/exportOneShopProductOverview?queryConf=' +
JSON.stringify(param);
window.open(href, '_blank');
}
}
};
</script>
<style lang="scss">
.stat-shop {
.ivu-tabs-tabpane {
height: 400px;
position: relative;
}
}
.layout-container {
min-height: 200px;
margin: 15px;
overflow: hidden;
background: #fff;
border-radius: 4px;
.layout-filter .line {
border-top: none;
margin-bottom: 0;
}
}
.shop-card {
margin-top: 10px;
margin-bottom: 10px;
}
.box-title {
font-weight: 700;
color: #495060;
font-size: 16px;
line-height: 22px;
margin: 5px;
&:before {
content: " ";
display: inline-block;
width: 5px;
margin-right: 2px;
height: 22px;
vertical-align: top;
background-color: #999;
}
}
.box-item {
width: 90%;
height: 50px;
padding: 0 0 0 15px;
line-height: 50px;
font-size: 14px;
overflow: hidden;
border-radius: 5px;
color: #fff;
margin-bottom: 10px;
.box-item-label {
display: inline-block;
min-width: 75px;
vertical-align: top;
font-weight: normal;
}
.box-item-value {
font-size: 20px;
font-weight: 600;
}
i {
display: inline-block;
width: 20px;
height: 20px;
font-size: 22px;
text-align: center;
margin-top: -7px;
vertical-align: middle;
margin-right: 3px;
}
}
.box-filter {
.ivu-date-picker {
margin-left: 0;
width: 220px !important;
}
.quick {
display: inline-block;
margin-left: 20px;
margin-right: 50px;
a {
margin-right: 5px;
}
}
}
</style>
... ...
/**
* on product page store
* @author: Gexuhui
* @date: 2017/08/23
*/
import moment from 'moment';
let curDay = moment().format('YYYY-MM-DD');
export default function() {
return {
day: curDay,
date: curDay,
dateRange: [curDay, curDay],
beginDate: curDay,
endDate: curDay,
today: moment().format('YYYY-MM-DD'),
yesterday: moment().add(-1, 'days').format('YYYY-MM-DD'),
day7: moment().add(-6, 'days').format('YYYY-MM-DD'),
day30: moment().add(-29, 'days').format('YYYY-MM-DD'),
timeLimit: true,
tableCols: [
{
title: '商品图片',
key: 'image',
width: 120,
align: 'center',
render: (h, params) => {
return (
<img v-prod-img={params.row.skn}/>
);
}
},
{
title: '商品',
align: 'center',
render: (h, params) => {
const row = params.row;
const infoItems = [
{
type: 'link',
label: row.productName,
value: `//item.yohobuy.com/${row.productSKN}.html`
},
{
label: '品牌',
value: row.brandName
}, {
label: '品类',
value: `${row.maxSortName}/${row.middleSortName}/${row.smallSortName}`
}
];
return h(CellInfo, {
props: {
items: infoItems
}
});
}
},
{
title: '访客数',
key: 'uv',
align: 'left',
render: (h, params) => {
const row = params.row;
return (
<div>
<p>UV：{row.uv.length > 0 ? row.uv : '—'}</p>
</div>
);
}
},
{
title: '浏览数',
key: 'pv',
align: 'left',
render: (h, params) => {
const row = params.row;
return (
<div>
<p>PV：{row.pv.length > 0 ? row.pv : '—'}</p>
</div>
);
}
},
{
title: '加购次数',
key: 'shopcartCount',
align: 'center'
},
{
title: '收藏数',
key: 'favoriteCount',
align: 'center'
},
{
title: '下单数',
key: 'orderCount',
align: 'center'
},
{
title: '下单金额',
key: 'orderAmount',
align: 'center'
},
{
title: '支付订单数',
key: 'paymentOrderCount',
align: 'center'
},
{
title: '支付订单金额',
key: 'paymentOrderAmount',
align: 'center'
},
{
title: '订单转化率',
key: 'paymentOrderAmountUidsRate',
align: 'center'
},
],
tableData: [],
filters: {
dateRange: {
model: ''
},
begin: {
model: ''
},
end: {
model: ''
}
}
};
}
... ...
import ShopService from './shop-service';
import ProductService from './shop-service';
export {
ShopService,
ProductService
};
... ...
/**
* product service
* @author: Gexuhui
* @date: 2017/08/23
*/
import Service from '../service';
const apiUrl = {
queryOneShopProductOverview: '/platform/queryOneShopProductOverview',
};
class ProductService extends Service {
getShopOverview(params) {
return this.post(apiUrl.queryOneShopOverview, params);
}
}
export default ProductService;
... ...
... ... @@ -99,7 +99,9 @@ let domainApis = {
sensitiveWordValidate: '/sensitiveWord/validate',
queryOneShopOverview: '/merchant/queryOneShopOverview',
queryOneShopHourTrend: '/merchant/queryOneShopHourTrend',
exportOneShopOverview: '/merchant/exportOneShopOverview'
exportOneShopOverview: '/merchant/exportOneShopOverview',
queryOneShopProductOverview: '/merchant/queryOneShopProductOverview',
exportOneShopProductOverview: '/merchant/exportOneShopProductOverview',
},
shop: {
login: '/loginInter',
... ...