liutong
/
H5_QiCaiYao
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
H5端齐采药项目,uniapp框架
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.
40 Commits
1 Branch
0 Tags
28 MiB
 
 
 
 
 
Tree: 81ef64fdbd
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '81ef64fdbd'
${ noResults }
H5_QiCaiYao/page_salesman_reportForm/Classificationstatistics/Classificationstatistics.vue

635 lines
18 KiB
Raw Blame History

<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="page_salesman_reportForm">
<u-navbar title="商品分类统计" :autoBack="true" leftIconSize="0" placeholder>
<u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon>
</u-navbar>
<z-paging ref="paging" v-model="list" @query="queryList">
<div class="box">
<div class="statistics">
<div class="time" @click="show1=true">{{$util.timeStampTurnTime(start_timeone,'yearmonthday')}} ~ {{$util.timeStampTurnTime(end_timeone,'yearmonthday')}}<u-icon name="arrow-down" color="#333333"
size="14"></u-icon>
<u-datetime-picker :show="show1" v-model="value1" mode="date" @cancel='show1=false'
@confirm='confirm'></u-datetime-picker>
<u-datetime-picker :show="show2" v-model="value2" mode="date" @cancel='show2=false'
@confirm='confirmtwo'></u-datetime-picker>
</div>
<view class="df">
<div class="statistics-item">
<div class="label">
<span></span>
订单金额
</div>
<div class="value">{{total_order_money}}</div>
</div>
<div class="statistics-item">
<div class="label">
<span></span>
订单数量
</div>
<div class="value">{{total_order_num}}</div>
</div>
</view>
<view class="df">
<div class="statistics-item">
<div class="label">
<span></span>
退货数量
</div>
<div class="value">{{total_order_refund_num}}</div>
</div>
<div class="statistics-item">
<div class="label">
<span></span>
退货金额
</div>
<div class="value">{{total_order_refund_money}}</div>
</div>
</view>
</div>
<div class="df jcsb" style="margin-top: 40rpx;">
<div>订货金额&ensp;(元)</div>
<div>订货数量</div>
</div>
<div class="chart">
<lineChart ref="lineChart" :Monthly="report"></lineChart>
</div>
</div>
<view class="df jcsa saixuna">
<view class="f1 df aic jcsa" v-for="(item,index) in arrangelist" :key="index">
<view class="df" @click='click(index)' :style="tiaozheng==index?'color:#20BBF3':''">
{{item.name}}
<!-- <image :src="$util.img('/upload/weapp/user/topone.png')" mode="" ></image> -->
<view class="" v-if="tiaozheng==index">
<view class="" v-if="box&&tiaozheng==0">
<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
</view>
<view class="" v-else-if="!box&&tiaozheng==0">
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
</view>
<view class="" v-else-if="box1&&tiaozheng==1">
<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
</view>
<view class="" v-else-if="!box1&&tiaozheng==1">
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
</view>
<view class="" v-else-if="box2&&tiaozheng==2">
<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
</view>
<view class="" v-else-if="!box2&&tiaozheng==2">
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
</view>
<view class="" v-else-if="box3&&tiaozheng==3">
<image :src="$util.img('/upload/weapp/user/toptwo.png')" mode="" ></image>
</view>
<view class="" v-else-if="!box3&&tiaozheng==3">
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
</view>
<!-- <view class="" v-if="!box">
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
</view>
<view class="" v-else-if="!box1">
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
</view>
<view class="" v-else-if="!box2">
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
</view>
<view class="" v-else-if="!box3">
<image :src="$util.img('/upload/weapp/user/bottomone.png')" mode="" ></image>
</view> -->
</view>
<view class="" v-if="tiaozheng!=index">
<image :src="$util.img('/upload/weapp/user/topone.png')" mode="" ></image>
</view>
</view>
</view>
</view>
<div class="type-head" v-for="(item,index) in todayStatHome" :key="index" @click="cellClick(item.category_id)">
<div class="type-type">{{item.cate_name}}</div>
<div class="df aic">
<div class="f1">
<div class="type-item">订货数量：{{item.order_goods_num}}</div>
<div class="type-item">退货数量：{{item.order_refund_goods_num}}</div>
</div>
<div class="f1">
<div class="type-items">订货金额：{{item.order_goods_money}}</div>
<div class="type-items">退货金额：{{item.order_refund_goods_money}}</div>
</div>
<div class="imges">
<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
</div>
</div>
</div>
</z-paging>
<tabbar :tabIndex="1"></tabbar>
<!-- <u-datetime-picker :show="show" @close="show=false" v-model="time" mode="year-month" confirmColor="#21BBF3"
closeOnClickOverlay></u-datetime-picker> -->
<selectPopup ref="selectPopup" :tochild="chilData"></selectPopup>
</view>
</template>
<script>
import tabbar from "@/components/pageSalesman/tabbar/tabbar.vue"
import lineChart from "../components/lineChart.vue"
import selectPopup from "../components/selectPopup.vue"
export default {
components: {
tabbar,
lineChart,
selectPopup
},
data() {
return {
report:{
report:4,
day_time:'',
end_time:''
},
box:true,
box1:false,
box2:false,
box3:false,
tiaozheng:0,
chilData:'商品分类统计',
time: '',
value1: Number(new Date()),
show1: false,
value2: Number(new Date()),
show2: false,
show: false,
list:[1],
arrangelist: [{
name: '订货数量'
},
{
name: '订货金额'
},
{
name: '退货数量'
},
{
name: '退货金额'
}
],
classificationlist: [{
classify: '根茎类',
orderquantity: 1000.00,
orderamount: 1000.00,
Returnquantity: 0.00,
Returnamount: 0.00
},
{
classify: '动物类',
orderquantity: 1000.00,
orderamount: 1000.00,
Returnquantity: 0.00,
Returnamount: 0.00
},
{
classify: '花叶类',
orderquantity: 1000.00,
orderamount: 1000.00,
Returnquantity: 0.00,
Returnamount: 0.00
},
],
statisticsList: [{
label: '订单笔数',
value: 5829
},
{
label: '订单金额',
value: 726382.00
},
{
label: '退货单数',
value: 9527
},
{
label: '退货金额',
value: 726382.00
},
],
start_time:'' ,//开始时间
end_time:'',//结束时间
start_timeone:'' ,//开始时间
end_timeone:'',//结束时间
total_order_money: '',
total_order_num: '',
total_order_refund_money: '',
total_order_refund_num: '',
todayStatHome:[]
};
},
methods: {
queryList(pageNo, pageSize) {
this.$refs.paging.complete(this.list);
},
click(value){
this.tiaozheng=value
if(value==0){
this.box=!this.box
this.box1=false
this.box2=false
this.box3=false
if(this.box){
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data:{
start_time: this.start_time,
end_time: this.end_time,
type:1,
type_sort:1
},
success:res=>{
console.log(res,'订单金额升序');
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
}
})
}else{
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data:{
start_time: this.start_time,
end_time:this.end_time,
type:1,
type_sort:2
},
success:res=>{
console.log(res,'订单金额降序');
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
}
})
}
}
if(value==1){
this.box1=!this.box1
this.box=false
this.box2=false
this.box3=false
if(this.box1){
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data:{
start_time: this.start_time,
end_time:this.end_time,
type:2,
type_sort:1
},
success:res=>{
console.log(res,'订单笔数升序');
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
}
})
}else{
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data:{
start_time: this.start_time,
end_time:this.end_time,
type:2,
type_sort:2
},
success:res=>{
console.log(res,'订单笔数降序');
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
}
})
}
}
if(value==2){
this.box2=!this.box2
this.box=false
this.box1=false
this.box3=false
if(this.box2){
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data:{
start_time: this.start_time,
end_time:this.end_time,
type:3,
type_sort:1
},
success:res=>{
console.log(res,'退货订单数升序');
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
}
})
}else{
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data:{
start_time: this.start_time,
end_time:this.end_time,
type:3,
type_sort:2
},
success:res=>{
console.log(res,'退货订单数降序');
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
}
})
}
}
if(value==3){
this.box3=!this.box3
this.box=false
this.box1=false
this.box2=false
if(this.box3){
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data:{
start_time: this.start_time,
end_time:this.end_time,
type:4,
type_sort:1
},
success:res=>{
console.log(res,'退货金额升序');
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
}
})
}else{
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data:{
start_time: this.start_time,
end_time:this.end_time,
type:4,
type_sort:2
},
success:res=>{
console.log(res,'退退货金额降序');
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
}
})
}
}
console.log(this.box,'1');
console.log(this.box1,'2');
console.log(this.box2,'3');
console.log(this.box3,'4');
console.log(value,'value');
},
cellClick(category_id) {
console.log(category_id,'category_id');
setTimeout(()=>{
uni.$emit('classification',{
category_id,
start_time:this.start_time,
end_time:this.end_time
})
},500)
uni.navigateTo({
url: '/page_salesman_reportForm/Salesstatistics_details/Salesstatistics_details'
})
},
confirm(value) {
this.StatList=value.value
this.show1 = false
this.show2=true
},
confirmtwo(value){//timeStampTurnTime
this.end_time = this.times(value.value)
this.start_time = this.times(this.StatList)
this.report.day_time=this.times(this.StatList)
this.report.end_time=this.times(value.value)
this.$refs.lineChart.roductdivision(this.times(this.StatList),this.times(value.value))
this.end_timeone = value.value/1000
this.start_timeone = this.StatList/1000
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data: {
start_time: this.start_time,
end_time:this.end_time,
page:'1',
page_size:'10'
},
success: res => {
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
console.log(res.data, '商品分类列表');
}
})
this.show2=false
},
times(num) {
let now = new Date(Number(num))
let n = now.getFullYear()
let y = now.getMonth() + 1
let r =now.getDate()>=10?now.getDate():0+''+now.getDate()
return n + '-' + y+'-'+r
},
},
created() {
// this.$router.go(0)//：刷新；
// let timestamp = Date.parse(new Date());
let myDate = new Date()
let myte=new Date().setDate(1)
let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
let myToday = myDate.getDate(); //获取当前日(1-31)
myMonth = myMonth > 9 ? myMonth : '0' + myMonth
myToday = myToday > 9 ? myToday : '0' + myToday
this.end_timeone = myDate/1000
this.start_timeone = myte/1000
this.report.day_time=this.times(myte)
this.report.end_time=this.times(myDate)
this.start_time=myYear +'-'+ myMonth +'-'+ '01'
// console.log(nowDate,'nowDatenowDatenowDate');
// this.start_time = this.times(timestamp)
this.end_time= myYear +'-'+ myMonth +'-'+ myToday
this.$api.sendRequest({
url: '/api/salasmanstat/goodsCateStatList',
data: {
start_time: this.start_time,
end_time:this.end_time,
page:'1',
page_size:'10'
},
success: res => {
this.todayStatHome = res.data.list
this.total_order_refund_num = res.data.total_order_refund_num
this.total_order_refund_money = res.data.total_order_refund_money
this.total_order_num = res.data.total_order_num
this.total_order_money = res.data.total_order_money
console.log(res.data, '商品分类列表');
}
})
},
}
</script>
<style lang="scss">
.saixuna{
height: 100rpx;
image{
width: 20rpx;
height: 20rpx;
margin-left: 10rpx;
}
}
.u-tabs {
width: 100%;
}
.type-head {
.type-type {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 34rpx;
margin-left: 36rpx;
margin-top: 50rpx;
}
.type-item {
padding-top: 8rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666;
line-height: 34rpx;
margin-left: 36rpx;
}
.type-items {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 34rpx;
padding-top: 4rpx;
}
.imges {
width: 28rpx;
height: 28rpx;
border: 1rpx dotted #ccc;
position: relative;
margin-right: 24rpx;
image {
position: absolute;
width: 100%;
height: 100%;
}
}
}
.page_salesman_reportForm {
padding: 32rpx;
.list {
margin-bottom: -26rpx;
margin-top: 42rpx;
width: 750rpx;
height: 108rpx;
background: #F6F4F6;
border-radius: 8rpx;
}
.box {
background-color: #fff;
border-radius: 16rpx;
padding: 16rpx 32rpx;
margin-top: 80rpx;
/* #ifdef APP */
margin-top: 178rpx !important;
/* #endif */
}
.statistics {
.time {
display: flex;
align-items: center;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #333333;
margin-bottom: 12rpx;
}
.statistics-item {
display: flex;
align-items: center;
flex: 1;
.label {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #585858;
display: flex;
align-items: center;
span {
display: inline-block;
width: 20rpx;
height: 20rpx;
background: #20BBF3;
border-radius: 50%;
margin-right: 12rpx;
}
}
.value {
margin-left: 24rpx;
font-size: 32rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #333333;
}
}
}
}
</style>