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.
38 Commits
1 Branch
0 Tags
28 MiB
 
 
 
 
 
Tree: ab9144f1ec
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ab9144f1ec'
${ noResults }
H5_QiCaiYao/page_salesman_reportForm/Collectionstatistics/Collectionstatistics.vue

651 lines
18 KiB
Raw Blame History

<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="page_salesman_reportForm">
<z-paging ref="paging" v-model="list" @query="queryList">
<template slot="top">
<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>
</template>
<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>
<div>
<!-- <u-tabs :list="navlist" lineWidth="30" lineColor="#fff" :activeStyle="{
color:'#20BBF3;',
fontWeight:'bold',
transform:'scale(1.05)'
}" :inactiveStyle="{
color:'#999999',
transform:'scale(1)'
}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click='click'>
</u-tabs> -->
<!-- <u-tabs :list="navlist" lineWidth=0 itemStyle="width: 20%;padding: 0 18rpx;" :activeStyle="{
fontSize: '24rpx',
fontWeight: '500',
color:'#20BBF3',
lineHeight: '34rpx',
}" :inactiveStyle="{
fontSize: '24rpx',
fontWeight: '400',
color: '#999999',
lineHeight: '34rpx',
}" @click='click'></u-tabs> -->
<view class="df jcsa saixuna">
<view class="f1 df aic jcsa" v-for="(item,index) in navlist" :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>
<div class="list">
<div class="df aic jcsb arr" v-for="(item,index) in todayStatHome" :key="index" @click="cellClick(item.sku_id)">
<div class="f1">
<div class="head">
<span>{{item.goods_name}}</span>
</div>
<div class="df">
<div class="f1 ar1">商品编号：{{item.goods_code}}</div>
<div class="f1 ar1">规格：选100条/袋</div>
</div>
<div class="df">
<div class="f1 ar1">订货数量：{{item.order_goods_num}}</div>
<div class="f1 ar1">销量:{{item.order_goods_money}}</div>
</div>
<div class="df">
<div class="f1 ar1">退货金额：{{item.order_refund_goods_money}}</div>
<div class="f1 ar1">订货金额:{{item.order_goods_money}}</div>
</div>
</div>
<div class="imgs">
<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> -->
<!-- <tabbar :tabIndex="1"></tabbar> -->
<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 {
chilData:'商品销售统计',
time: '',
value1: Number(new Date()),
show1: false,
value2: Number(new Date()),
show2: false,
show: false,
StatList:'',
box:true,
box1:false,
box2:false,
box3:false,
statisticsList: [{
label: '订单笔数',
value: 5829
},
{
label: '订单金额',
value: 726382.00
},
{
label: '退货单数',
value: 9527
},
{
label: '退货金额',
value: 726382.00
},
],
navlist: [{
name: '订单金额'
},
{
name: '订单笔数'
},
{
name: '退货数量'
},
{
name: '退货金额'
}
],
Datalist: [{}],
list:[1],
todayStatHome:[],
start_time:'' ,//开始时间
end_time:'',//结束时间
start_timeone:'' ,//开始时间
end_timeone:'',//结束时间
total_order_money: '',
total_order_num: '',
total_order_refund_money: '',
total_order_refund_num: '',
tiaozheng:0
};
},
methods: {
queryList(pageNo, pageSize) {
this.$refs.paging.complete(this.list);
},
btn(index) {
console.log(index);
},
confirm(value) {
this.StatList=value.value
this.show1 = false
this.show2=true
},
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/goodsStatList',
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/goodsStatList',
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.box=false
this.box2=false
this.box3=false
this.box1=!this.box1
if(this.box1){
this.$api.sendRequest({
url: '/api/salasmanstat/goodsStatList',
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/goodsStatList',
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/goodsStatList',
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/goodsStatList',
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/goodsStatList',
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/goodsStatList',
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
}
})
}
}
},
confirmtwo(value){//timeStampTurnTime
this.end_time = this.times(value.value)
this.start_time = this.times(this.StatList)
this.end_timeone = value.value/1000
this.start_timeone = this.StatList/1000
this.$api.sendRequest({
url: '/api/salasmanstat/goodsStatList',
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
},
cellClick(sku_id) {
setTimeout(()=>{
uni.$emit('sale',{
start_time:this.start_time,
end_time:this.end_time,
sku_id
})
},500)
uni.navigateTo({
url: '/page_salesman_reportForm/Commoditysales/Commoditysales'
})
}
},
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.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/goodsStatList',
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;
}
}
::v-deep{
// .u-tabs{
// height: 60rpx;
// display: flex;
// // align-items: c;
// }
.u-tabs__wrapper{
height: 60rpx;
}
}
.page_salesman_reportForm {
padding: 32rpx;
.list {
background-color: #fff;
border-radius: 16rpx;
// margin-top: 32rpx;
padding-bottom: 1rpx;
padding: 0 24rpx;
box-sizing: border-box;
.head span:nth-child(2){
color: red;
}
.list-head {
padding: 32rpx 48rpx 32rpx 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #999999;
}
.head{
span{
margin-top: 24rpx;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 34rpx;
}
}
.ar1{
// width: 176px;
// height: 34px;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 34rpx;
}
.imgs {
width: 28rpx;
height: 28rpx;
border: 1rpx dotted #ccc;
position: relative;
image {
position: absolute;
width: 28rpx;
height: 28rpx;
}
}
.list-item {
margin-bottom: 24rpx;
padding: 0 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #333;
.value {
color: #999999;
}
}
}
.box {
background-color: #fff;
border-radius: 16rpx;
padding: 16rpx 32rpx;
// margin-top: 80rpx;
}
.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>