<template>
|
<!--
|
作者：yj
|
时间：2024-4-19
|
描述：统计-订单商品统计
|
-->
|
<div class="statistics-member" v-loading="loading" style="min-height: 400px;">
|
<div class="member-rangking">
|
<div class="common-form">订单商品统计</div>
|
<!--搜索表单-->
|
<div class="common-seach-wrap">
|
<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
|
<el-form-item label="起始时间">
|
<div class="block">
|
<span class="demonstration"></span>
|
<el-date-picker
|
size="small"
|
v-model="searchForm.create_time"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
</div>
|
</el-form-item>
|
<el-form-item><el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button></el-form-item>
|
</el-form>
|
</div>
|
<div class="d-b-s">
|
<div class="flex-1">
|
<div class="f16">商品数量占比</div>
|
<div class="pt16">
|
<ul>
|
<li class="d-b-c p-10-0 border-b-d" v-for="(item, index) in dataModel.productRanking" :key="index">
|
<div class="d-s-c">
|
<span class="key-box">{{ index + 1 }}</span>
|
<img class="ml10 photo" v-img-url="item.image_path" :alt="item.nickName" />
|
<span class="ml4">{{ item.product_name }}</span>
|
</div>
|
<div class="red">
|
<span class="fb">{{item.total_sales_num}}个({{ item.rate }}%)</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="flex-1 p-0-30">
|
<div class="f16">商品金额占比</div>
|
<div class="pt16">
|
<ul>
|
<li class="d-b-c p-10-0 border-b-d" v-for="(item, index) in dataModel.productMoneyRanking" :key="index">
|
<div class="d-s-c">
|
<span class="key-box">{{ index + 1 }}</span>
|
<img class="ml10 photo" v-img-url="item.image_path" :alt="item.nickName" />
|
<span class="ml4">{{ item.product_name }}</span>
|
</div>
|
<div class="red">
|
<span class="fb">{{item.total_sales_money}}元({{ item.rate }}%)</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="flex-1 p-0-30">
|
<div class="f16">商品分类占比</div>
|
<div class="pt16">
|
<ul>
|
<li class="d-b-c p-10-0 border-b-d" v-for="(item, index) in dataModel.categoryRanking" :key="index">
|
<div class="d-s-c">
|
<span class="key-box">{{ index + 1 }}</span>
|
<span class="ml4">{{ item.name }}</span>
|
</div>
|
<div class="orange">
|
<span class="fb mr10">{{item.total_sales_num}}个</span>
|
<span class="fb mr10">{{item.total_sales_money}}元</span>
|
<span class="fb">({{ item.rate }}%)</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="flex-1">
|
<div class="f16">会员等级占比</div>
|
<div class="pt16">
|
<ul>
|
<li class="d-b-c p-10-0 border-b-d" v-for="(item, index) in dataModel.gradeRanking" :key="index">
|
<div class="d-s-c">
|
<span class="key-box">{{ index + 1 }}</span>
|
<span class="ml4">{{ item.name }}</span>
|
</div>
|
<div class="blue">
|
<span class="fb mr10">{{item.total_sales_num}}个</span>
|
<span class="fb mr10">{{item.total_sales_money}}元</span>
|
<span class="fb">({{ item.rate }}%)</span>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import StatisticsApi from '@/api/statistics.js';
|
export default {
|
components: {
|
},
|
data(){
|
return{
|
/*是否正在加载*/
|
loading:true,
|
/*数据对象*/
|
dataModel:{},
|
/*横向表单数据模型*/
|
searchForm: {
|
create_time: '',
|
},
|
}
|
},
|
created() {
|
this.getData();
|
},
|
methods:{
|
|
/*搜索查询*/
|
onSubmit() {
|
this.getData();
|
},
|
/*获取数据*/
|
getData() {
|
let self = this;
|
let Params = this.searchForm;
|
StatisticsApi.getProductTotal({Params}, true)
|
.then(res => {
|
self.dataModel = res.data;
|
self.loading = false;
|
})
|
.catch(error => {});
|
}
|
|
}
|
};
|
</script>
|
|
<style scoped="scoped">
|
.member-rangking .key-box {
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
border-radius: 10px;
|
text-align: center;
|
color: red;
|
font-weight: bold;
|
line-height: 20px;
|
}
|
.member-rangking .photo {
|
height: 20px;
|
height: 20px;
|
border-radius: 50%;
|
}
|
</style>
|
