zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化订单统计

master
lemon橪 2022-05-09 18:37:53 +08:00
parent 84e0803558
commit c83eddd62e
3 changed files with 213 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

253
manager/src/views/statistics/order.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<Affix :offset-top="100"> <Affix :offset-top="100">
<Card class="card fixed-bottom"> <Card class="card fixed-bottom">
@ -12,67 +11,89 @@
<h4>交易概况</h4> <h4>交易概况</h4>
<div class="flex"> <div class="flex">
<div class="transactionList"> <div class="transactionList">
<div class="transaction-item" v-for="(item,index) in transactionList" :key="index"> <div
<h4>{{item.label}}</h4> class="transaction-item"
<div class="transaction-card" v-if="item.label=='转换'"> v-for="(item, index) in transactionList"
:key="index"
>
<h4>{{ item.label }}</h4>
<div class="transaction-card" v-if="item.label == '转换'">
<div class="card-item"> <div class="card-item">
<div class="card-item-label">访客数UV</div> <div class="card-item-label">访客数UV</div>
<div class="card-item-value">{{overViewList.uvNum || 0}}</div> <div class="card-item-value">
{{ overViewList.uvNum || 0 }}
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-label">下单转化率</div> <div class="card-item-label">下单转化率</div>
<div class="card-item-value">{{overViewList.orderConversionRate || '0%'}}</div> <div class="card-item-value">
{{ overViewList.orderConversionRate || "0%" }}
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-label">付款转化率</div> <div class="card-item-label">付款转化率</div>
<div class="card-item-value">{{overViewList.paymentsConversionRate ||'0%'}}</div> <div class="card-item-value">
{{ overViewList.paymentsConversionRate || "0%" }}
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-label">全店转化率</div> <div class="card-item-label">全店转化率</div>
<div class="card-item-value">{{overViewList.overallConversionRate || '0%'}}</div> <div class="card-item-value">
{{ overViewList.overallConversionRate || "0%" }}
</div>
</div> </div>
</div> </div>
<div class="transaction-card" v-if="item.label=='订单'"> <div class="transaction-card" v-if="item.label == '订单'">
<div class="card-item"> <div class="card-item">
<div class="card-item-label">下单笔数</div> <div class="card-item-label">下单笔数</div>
<div class="card-item-value">{{overViewList.orderNum || 0}}</div> <div class="card-item-value">
{{ overViewList.orderNum || 0 }}
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-label">下单人数</div> <div class="card-item-label">下单人数</div>
<div class="card-item-value">{{overViewList.orderMemberNum || 0}}</div> <div class="card-item-value">
{{ overViewList.orderMemberNum || 0 }}
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-label">下单金额</div> <div class="card-item-label">下单金额</div>
<div class="card-item-value">{{overViewList.orderAmount| unitPrice('￥') }}</div> <div class="card-item-value">
{{ overViewList.orderAmount | unitPrice("￥") }}
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-label">付款笔数</div> <div class="card-item-label">付款笔数</div>
<div class="card-item-value">{{overViewList.paymentOrderNum || 0}}</div> <div class="card-item-value">
{{ overViewList.paymentOrderNum || 0 }}
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-label">付款人数</div> <div class="card-item-label">付款人数</div>
<div class="card-item-value">{{overViewList.paymentsNum || 0}}</div> <div class="card-item-value">
{{ overViewList.paymentsNum || 0 }}
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-label">付款金额</div> <div class="card-item-label">付款金额</div>
<div class="card-item-value">{{overViewList.paymentAmount | unitPrice('￥')}}</div> <div class="card-item-value">
{{ overViewList.paymentAmount | unitPrice("￥") }}
</div>
</div> </div>
</div> </div>
<div class="transaction-card" v-if="item.label=='退单'"> <div class="transaction-card" v-if="item.label == '退单'">
<div class="card-item"> <div class="card-item">
<div class="card-item-label">退单笔数</div> <div class="card-item-label">退单笔数</div>
<div class="card-item-value">{{overViewList.refundOrderNum || 0}}</div> <div class="card-item-value">
{{ overViewList.refundOrderNum || 0 }}
</div>
</div> </div>
<div class="card-item"> <div class="card-item">
<div class="card-item-label">退单金额</div> <div class="card-item-label">退单金额</div>
<div class="card-item-value">{{overViewList.refundOrderPrice || 0 | unitPrice('￥')}}</div> <div class="card-item-value">
{{ overViewList.refundOrderPrice || 0 | unitPrice("￥") }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -82,46 +103,40 @@
<div class="block"> <div class="block">
<div class="box"> <div class="box">
<span>访客数</span> <span>访客数</span>
<span>{{overViewList.uvNum || 0}}</span> <span>{{ overViewList.uvNum || 0 }}</span>
</div> </div>
</div> </div>
<!-- 中 --> <!-- 中 -->
<div class="block"> <div class="block">
<div class="box"> <div class="box">
<span>下单笔数</span> <span>下单笔数</span>
<span>{{overViewList.orderNum || 0}}</span> <span>{{ overViewList.orderNum || 0 }}</span>
</div> </div>
</div> </div>
<!-- 下 --> <!-- 下 -->
<div class="block"> <div class="block">
<div class="box"> <div class="box">
<span>付款笔数</span> <span>付款笔数</span>
<span>{{overViewList.paymentOrderNum || 0 }}</span> <span>{{ overViewList.paymentOrderNum || 0 }}</span>
</div> </div>
</div> </div>
<!-- 线 --> <!-- 线 -->
<div class="rightBorder"> <div class="rightBorder"></div>
<div class="leftTopBorder"></div>
</div> <div class="leftBottomBorder"></div>
<div class="leftTopBorder">
</div>
<div class="leftBottomBorder">
</div>
<!--数据 --> <!--数据 -->
<div class="leftTopTips"> <div class="leftTopTips">
<div>下单转化率 </div> <div>下单转化率</div>
<div>{{overViewList.orderConversionRate || '0%' }}</div> <div>{{ overViewList.orderConversionRate || "0%" }}</div>
</div> </div>
<div class="leftBottomTips"> <div class="leftBottomTips">
<div>付款转化率</div> <div>付款转化率</div>
<div>{{overViewList.paymentsConversionRate || '0%'}}</div> <div>{{ overViewList.paymentsConversionRate || "0%" }}</div>
</div> </div>
<div class="rightTips"> <div class="rightTips">
<div>整体转换率</div> <div>整体转换率</div>
<div>{{overViewList.overallConversionRate || '0%'}}</div> <div>{{ overViewList.overallConversionRate || "0%" }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -132,37 +147,52 @@
<Card class="card"> <Card class="card">
<div> <div>
<h4>交易趋势</h4> <h4>交易趋势</h4>
<div> <div></div>
</div>
</div> </div>
<div> <div>
<div id="orderChart"></div> <div id="orderChart"></div>
</div> </div>
</Card> </Card>
<Card class="card"> <Card class="card">
<div> <div>
<h4>订退单统计</h4> <h4>订退单统计</h4>
<div class="breadcrumb" style="margin-bottom:20px;"> <div class="breadcrumb" style="margin-bottom: 20px">
<RadioGroup v-model="orderOrRefund" type="button" size="small" button-style="solid"> <RadioGroup
v-model="orderOrRefund"
type="button"
size="small"
button-style="solid"
>
<Radio :label="1">订单</Radio> <Radio :label="1">订单</Radio>
<Radio :label="0">退单</Radio> <Radio :label="0">退单</Radio>
</RadioGroup> </RadioGroup>
</div> </div>
<div> <div>
<Table stripe :columns="columns" :data="data"></Table> <Table stripe :columns="columns" :data="data"></Table>
</div> </div>
<Page size="small" @on-change="(index)=>{refundParams.pageNumber = index}" @on-page-size-change="(size)=>{refundParams.pageSize= size,refundParams.pageNumber = 1}" class="mt_10" show-total show-sizer show-elevator :total="total" /> <Page
v-if="showRecords"
size="small"
@on-change="
(index) => {
refundParams.pageNumber = index;
}
"
@on-page-size-change="
(size) => {
(refundParams.pageSize = size), (refundParams.pageNumber = 1);
}
"
class="mt_10"
show-total
show-sizer
show-elevator
:total="total"
/>
</div> </div>
</Card> </Card>
</div> </div>
</template> </template>
<script> <script>
@ -177,7 +207,7 @@ export default {
data() { data() {
return { return {
orderOrRefund: 1, // 订单还是单 orderOrRefund: 1, // 订单还是退单
total: 0, // 总数 total: 0, // 总数
// 订单状态 // 订单状态
orderStatusList: { orderStatusList: {
@ -190,13 +220,15 @@ export default {
TAKE: "已完成", TAKE: "已完成",
}, },
serviceTypeList: { // 服务类型 serviceTypeList: {
// 服务类型
CANCEL: "取消", CANCEL: "取消",
RETURN_GOODS: "退货", RETURN_GOODS: "退货",
EXCHANGE_GOODS: "换货", EXCHANGE_GOODS: "换货",
RETURN_MONEY: "退款", RETURN_MONEY: "退款",
}, },
serviceStatusList: { // 服务状态 serviceStatusList: {
// 服务状态
APPLY: "申请售后", APPLY: "申请售后",
PASS: "通过售后", PASS: "通过售后",
REFUSE: "拒绝售后", REFUSE: "拒绝售后",
@ -215,7 +247,8 @@ export default {
columns: [], // 定退单title columns: [], // 定退单title
orderColumns: [ // 表头 orderColumns: [
// 表头
{ {
type: "expand", type: "expand",
width: 50, width: 50,
@ -265,8 +298,29 @@ export default {
); );
}, },
}, },
{
title: "操作",
key: "action",
render: (h, params) => {
return h('Button',{
props:{
size:'small'
},
on:{
click: () => {
const { sn } = params.row
this.$router.push({
query: {sn},
path: this.orderOrRefund == 1 ? 'order-detail' : 'after-order-detail' + '?sn='+sn
})
}
}
},'查看')
},
},
], ],
refundColumns: [ // 表头 refundColumns: [
// 表头
{ {
type: "expand", type: "expand",
width: 50, width: 50,
@ -348,6 +402,26 @@ export default {
); );
}, },
}, },
{
title: "操作",
key: "action",
render: (h, params) => {
return h('Button',{
props:{
size:'small'
},
on:{
click: () => {
const { sn } = params.row
this.$router.push({
query: {sn},
path: this.orderOrRefund == 1 ? 'order-detail' : 'after-order-detail' + '?sn='+sn
})
}
}
},'查看')
},
},
], ],
// 交易概况 // 交易概况
@ -415,8 +489,6 @@ export default {
storeId: "", storeId: "",
year: "", year: "",
}, },
refundIndex: 0,
// 退单订单 // 退单订单
refundParams: { refundParams: {
pageNumber: 1, pageNumber: 1,
@ -425,6 +497,7 @@ export default {
storeId: "", storeId: "",
year: "", year: "",
}, },
showRecords:false,
// //
// //
@ -432,16 +505,17 @@ export default {
}, },
watch: { watch: {
refundParams: { refundParams: {
handler() { handler(val) {
if (this.refundIndex == 1) { this.getOrderList();
this.getOrderRefundList();
} else {
this.getOrderList();
}
}, },
deep: true, deep: true,
immediate: true, immediate: true,
}, },
orderOrRefund() {
this.showRecords = false;
this.$set(this.refundParams, "pageNumber", 1);
this.getOrderList();
},
orderParams: { orderParams: {
handler() { handler() {
this.initOrderChartList(); this.initOrderChartList();
@ -454,15 +528,6 @@ export default {
}, },
deep: true, deep: true,
}, },
orderOrRefund:{ // 订单还是退单
handler (val) {
if (val == 1) {
this.getOrderList();
} else {
this.getOrderRefundList();
}
}
}
}, },
methods: { methods: {
// 订单图 // 订单图
@ -470,10 +535,10 @@ export default {
// 默认已经加载 legend-filter 交互 // 默认已经加载 legend-filter 交互
let data = this.chartList; let data = this.chartList;
data.forEach(item=>{ data.forEach((item) => {
item.createTime = item.createTime.split(" ")[0] item.createTime = item.createTime.split(" ")[0];
item.title="交易额" item.title = "交易额";
}) });
this.orderChart.data(data); this.orderChart.data(data);
this.orderChart.tooltip({ this.orderChart.tooltip({
@ -484,8 +549,8 @@ export default {
this.orderChart this.orderChart
.line() .line()
.position("createTime*price") .position("createTime*price")
.label("price") .label("price")
.color("title") .color("title")
.shape("smooth"); .shape("smooth");
this.orderChart this.orderChart
@ -515,7 +580,6 @@ export default {
const res = await API_Goods.getOrderOverView(this.overViewParams); const res = await API_Goods.getOrderOverView(this.overViewParams);
if (res.success) { if (res.success) {
this.overViewList = res.result; this.overViewList = res.result;
} }
}, },
// 实例化订单图表 // 实例化订单图表
@ -538,20 +602,19 @@ export default {
}, },
// 统计相关订单统计 // 统计相关订单统计
async getOrderList() { async getOrderList() {
const res = await API_Goods.statisticsOrderList(this.refundParams); let res;
if (res.success) { if (this.orderOrRefund == 1) {
this.data = res.result.records; // 订单
this.columns = this.orderColumns; res = await API_Goods.statisticsOrderList(this.refundParams);
this.total = res.result.total; } else {
// 退单
res = await API_Goods.statisticsOrderRefundList(this.refundParams);
} }
},
// 统计相关退单统计
async getOrderRefundList() {
const res = await API_Goods.statisticsOrderRefundList(this.refundParams);
if (res.success) { if (res.success) {
this.showRecords = true;
this.data = res.result.records; this.data = res.result.records;
this.columns = this.refundColumns; this.columns =
this.orderOrRefund == 1 ? this.orderColumns : this.refundColumns;
this.total = res.result.total; this.total = res.result.total;
} }
}, },
@ -585,9 +648,9 @@ export default {
background: $theme_color; background: $theme_color;
} }
} }
.breadcrumb{ .breadcrumb {
span{ span {
cursor: pointer; cursor: pointer;
} }
} }

73
manager/src/views/statistics/order/orderDetail.vue
View File

@ -1,82 +1,91 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="shop"> <div class="shop">
<h3>订单详情</h3> <h3>订单详情</h3>
<div class="shop-item"> <div class="shop-item">
<div class="label-item"> <div class="label-item">
<span>订单来源</span> <span>订单来源</span>
<span>{{res.clientType | clientTypeWay}}</span> <span>{{ res.clientType | clientTypeWay }}</span>
</div> </div>
<div class="label-item"> <div class="label-item">
<span>订单状态</span> <span>订单状态</span>
<span>{{orderStatusList[res.orderStatus]}}</span> <span>{{ orderStatusList[res.orderStatus] }}</span>
</div> </div>
<div class="label-item"> <div class="label-item">
<span>付款状态</span> <span>付款状态</span>
<span>{{res.payStatus == "UNPAID" <span>{{
? "未付款" res.payStatus == "UNPAID"
: res.payStatus == "PAID" ? "未付款"
? "已付款" : res.payStatus == "PAID"
: ""}}</span> ? "已付款"
: ""
}}</span>
</div> </div>
<div class="label-item"> <div class="label-item">
<span>支付时间</span> <span>支付时间</span>
<span>{{res.paymentTime || '暂无'}}</span> <span>{{ res.paymentTime || "暂无" }}</span>
</div> </div>
<div class="label-item"> <div class="label-item">
<span>支付方式</span> <span>支付方式</span>
<span>{{res.paymentMethod == "ONLINE" ? "在线支付" : "" <span
}}{{ res.paymentMethod == "ALIPAY" ? "支付宝" : res.paymentMethod == "BANK_TRANSFER" ? "银行卡" : "" || '暂无'}}</span> >{{ res.paymentMethod == "ONLINE" ? "在线支付" : ""
}}{{
res.paymentMethod == "ALIPAY"
? "支付宝"
: res.paymentMethod == "BANK_TRANSFER"
? "银行卡"
: "" || "暂无"
}}</span
>
</div> </div>
</div> </div>
<div class="shop-item"> <div class="shop-item">
<div class="label-item"> <div class="label-item">
<span>用户名</span> <span>用户名</span>
<span>{{res.memberName}}</span> <span>{{ res.memberName }}</span>
</div> </div>
<div class="label-item"> <div class="label-item">
<span>店铺名称</span> <span>店铺名称</span>
<span>{{res.storeName}}</span> <span>{{ res.storeName }}</span>
</div> </div>
<div class="label-item"> <div class="label-item">
<span>创建时间</span> <span>创建时间</span>
<span>{{res.createTime}}</span> <span>{{ res.createTime }}</span>
</div> </div>
</div> </div>
<h3>商品详情</h3> <h3>商品详情</h3>
<div class="shop-item"> <div class="shop-item">
<div
<div class="goods-item" v-for="(item,index) in res.orderItems" :key="index"> class="goods-item"
@click="handleClickGoods(item.goodsId)"
v-for="(item, index) in res.orderItems"
:key="index"
>
<div class="goods-img"> <div class="goods-img">
<img class="img" :src="item.image" alt=""> <img class="img" :src="item.image" alt="" />
</div> </div>
<div class="goods-title"> <div class="goods-title">
<div>{{item.name}}</div> <div>{{ item.name }}</div>
<div>{{'x'+item.num}}</div> <div>{{ "x" + item.num }}</div>
<div class="goods-price">{{res.flowPrice | unitPrice('￥')}}</div> <div class="goods-price">{{ res.flowPrice | unitPrice("￥") }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="count-price"> <div class="count-price">
<div class="label-item"> <div class="label-item">
<span>总价格</span> <span>总价格</span>
<span class="flowPrice">{{res.flowPrice | unitPrice('￥')}}</span> <span class="flowPrice">{{ res.flowPrice | unitPrice("￥") }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
orderStatusList: { // 订单状态 orderStatusList: {
// 订单状态
UNDELIVERED: "待发货", UNDELIVERED: "待发货",
UNPAID: "未付款", UNPAID: "未付款",
PAID: "已付款", PAID: "已付款",
@ -88,10 +97,17 @@ export default {
}; };
}, },
props: ["res"], props: ["res"],
methods: {
handleClickGoods(id) {
this.$router.push({
query: { id },
path: "/goods/goods-info/goodsDetail",
});
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.shop { .shop {
padding: 10px 0; padding: 10px 0;
background: #fff; background: #fff;
@ -113,6 +129,7 @@ h3 {
display: flex; display: flex;
width: 100%; width: 100%;
margin: 16px; margin: 16px;
cursor: pointer;
} }
.count-price { .count-price {
display: flex; display: flex;

11
manager/src/views/statistics/order/refundOrder.vue
View File

@ -47,7 +47,7 @@
<h3>商品详情</h3> <h3>商品详情</h3>
<div class="shop-item"> <div class="shop-item">
<div class="goods-item"> <div @click="handleClickGoods(res.goodsId)" class="goods-item">
<div class="goods-img"> <div class="goods-img">
<img class="img" :src="res.goodsImage" alt=""> <img class="img" :src="res.goodsImage" alt="">
</div> </div>
@ -106,6 +106,14 @@ export default {
}; };
}, },
props: ["res"], props: ["res"],
methods: {
handleClickGoods(id) {
this.$router.push({
query: { id },
path: "/goods/goods-info/goodsDetail",
});
},
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -129,6 +137,7 @@ h3 {
display: flex; display: flex;
width: 100%; width: 100%;
margin: 16px; margin: 16px;
cursor: pointer;
} }
.count-price { .count-price {
display: flex; display: flex;