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.
 
 
 
 
 

317 lines
7.8 KiB

<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">
<view class="time">
<!-- <div class="time" @click="show=true">2022年01月 <u-icon name="arrow-down" color="#333333" size="14">
</u-icon>
</div> -->
<view class="time" @click="show1=true">
<view class="df" style="margin-right: 10rpx;">{{day_time}}</view>
<u-icon name="arrow-down" color="#333333" size="14">
</u-icon>
</view>
<u-datetime-picker :show="show1" v-model="value1" mode="year-month" @cancel='show1=false'
@confirm='confirm'></u-datetime-picker>
</view>
<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">
<!-- <echarts></echarts> -->
<lineChart ref="lineChart" :Monthly="report"></lineChart>
</div>
</div>
<div class="list">
<div class="list-head">
<div class="f1" >日期</div>
<div class="f1" style="text-align: center;">
<div>订单金额</div>
<div>订单笔数</div>
</div>
<div class="f1" style="text-align: right;">
<div>退货金额</div>
<div>退货笔数</div>
</div>
</div>
<div class="list-item df" v-for="(item,index) in todayStatHome" :key="index" @click="cellClick(item.date)">
<div class="f1">{{item.date}}</div>
<div class="f1" style="text-align: center;">
<div>{{item.order_money}}</div>
<div class="value">{{item.order_num}}</div>
</div>
<div class="f1 df jcf">
<div>
<div>{{item.order_refund_money}}</div>
<div class="value">{{item.order_refund_num}}</div>
</div>
<u-icon name="arrow-right" color="#999" size="14" style="margin-left: 12rpx;"></u-icon>
</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"
// import echarts from "../components/ECharts.vue"
export default {
components: {
tabbar,
lineChart,
selectPopup,
// echarts
},
data() {
return {
chilData:'经营日报',
report:{
report:0,
day_time:''
},
time: '',
day_time: '',
value1: Number(new Date()),
show1: false,
show: false,
statisticsList: [{
label: '订单笔数',
value: ''
},
{
label: '订单金额',
value: ''
},
{
label: '退货单数',
value: ''
},
{
label: '退货金额',
value: ''
},
],
list: [1],
todayStatHome: [],
total_order_money: '',
total_order_num: '',
total_order_refund_money: '',
total_order_refund_num: ''
};
},
methods: {
queryList(pageNo, pageSize) {
this.$refs.paging.complete(this.list);
},
confirm(value) {
this.day_time = this.times(value.value)
this.report.day_time = this.times(value.value)
this.$refs.lineChart.dailyones(this.times(value.value))
this.$api.sendRequest({
url: '/api/salasmanstat/todayStatHome',
data: {
month_time: this.day_time
},
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.show1 = false
},
cellClick(date) {
console.log(this.day_time);
let adt=date.replace("日","")
// return
setTimeout(()=>{
uni.$emit('dailyone',{
day_time:this.day_time+'-'+adt
})
},500)
uni.navigateTo({
url: '../BusinessDailyDetails/BusinessDailyDetails'
})
},
//时间转换
times(num) {
let now = new Date(Number(num))
let n = now.getFullYear()
let y = now.getMonth() + 1>=10?now.getMonth()+1:0+''+(now.getMonth()+1);
// let r =now.getDate();
return n + '-' + y
}
},
created() {
// this.$router.go(0)//:刷新;
let timestamp = Date.parse(new Date());
this.day_time = this.times(timestamp)
this.report.day_time = this.times(timestamp)
this.$api.sendRequest({
url: '/api/salasmanstat/todayStatHome',
data: {
month_time: this.day_time
},
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, '经营日报列表');
}
})
},
}
</script>
<style lang="scss">
.page_salesman_reportForm {
padding: 32rpx;
.list {
background-color: #fff;
border-radius: 16rpx;
margin-top: 32rpx;
padding-bottom: 1rpx;
.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;
}
.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;
}
.statistics {
// margin-top: 80rpx;
.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>