distribution-uni/package2/other/logisticsDataStatistics.vue

<template>
	<view>
		<uni-datetime-picker style="margin-bottom:10px;" clear-icon='false' v-model="range" type="daterange" @change="searchList" />
		<view class="IndexContent">
			<view class="contentPadding">
				<view style="display: flex;text-align: center;font-size: 30rpx;">
					<view class="title-four" style="background-image: linear-gradient(#84C1FF, #C4E1FF)">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalFreight!=null?orderStatistics.totalFreight:0}}</view>
						<view>客户运费</view>
					</view>
					<view class="title-four" style="background-image: linear-gradient(#84C1FF, #C4E1FF)">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalOrder!=null?orderStatistics.totalOrder:0}}</view>
						<view>总单数</view>
					</view>
					<view class="title-four" style="background-image: linear-gradient(#84C1FF, #C4E1FF)">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalWeight!=null?orderStatistics.totalWeight:0}}</view>
						<view>客户数</view>
					</view>
					<view class="title-four" style="background-image: linear-gradient(#84C1FF, #C4E1FF)">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalCount!=null?orderStatistics.totalCount:0}}</view>
						<view>总件数</view>
					</view>
				</view>
				
				
				<view style="display: flex;text-align: center;font-size: 30rpx;">
					<view class="title-four">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalTransportationFee}}</view>
						<view>运输费</view>
					</view>
					<view class="title-four">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalLoadingFee}}</view>
						<view>装车费</view>
					</view>
					<view class="title-four">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalTip == null?0:orderStatistics.totalTip}}</view>
						<view>小费</view>
					</view>
					<view class="title-four">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalWeight}}</view>
						<view>总重量</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 95%;margin: 0 auto;" v-for="index in dayNum">
			<view class="day-item" @tap="goDetail(yearNum + (startTime + index))">
				<view>{{yearNum + (startTime + index)}}</view>
			</view>
			<view class="day-item" v-if="(index+1) == dayNum" @tap="goDetail(yearNum + (startTime + (index+1)))">
				<view>{{yearNum + (startTime + (index + 1))}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range:[],
				orderStatistics:{},
				dayNum:0,
				companyId:'',
				startTime:0,
				yearNum:''
			};
		},
		onLoad(option) {
			let that = this;
			this.companyId = uni.getStorageSync('transCompany');
		},
		onShow(){
			this.getMonth();
			this.getAllNum()
		},
		methods: {
			goDetail(day){
				uni.navigateTo({
					url:'/package2/other/logisticsDataStatisticsDetail?day='+ day
				})
			},
			getAllNum(){
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsOrder/getLogisticsOrderStatistics',
					data:{
						companyId:this.companyId,
						startDate:this.range[0],
						endDate:this.range[1]
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if (res.data.code == 200){
							this.orderStatistics = res.data.result
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			searchList(res) {
				let res0 = res[0].split('-')
				let res1 = res[1].split('-')
				
				this.startTime = Number(res0[2])
				this.dayNum = Number(res1[2]) - Number(res0[2])
				
				this.yearNum = res1[0] + '-' + res1[1] + '-'
				this.range = res
				this.orderStatistics = [];
				this.getAllNum()
			},
			//获取当月1日到当前时间
			getMonth() {
				let date = new Date()
				let year = date.getFullYear().toString()   //'年'
				let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString()  //'月'
				let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString()  //'日'
				let end = year + '-' + month + '-' + da  //当天
				let beg = year + '-' + month + '-01'    //当月第一天
				this.dayNum = Number(da) - 1
				this.startTime = 1
				this.yearNum = year + '-' + month + '-'
				this.range = [beg,end]
			},
		}
	}
</script>

<style lang="scss">
	.contentPadding {
		padding: 28upx 20upx;
		background-color: #fff;
		color: #909399;
	
		.title {
			padding-left: 20rpx;
			font-size: 32rpx;
			color: #303133;
			margin-bottom: 26rpx;
			line-height: 66rpx;
	
			image {
				display: inline-block;
				width: 40rpx;
				vertical-align: middle;
			}
	
			.btn {
				text-align: right;
				width: 24%;
				float: right;
				font-size: 26rpx;
				color: $u-primary;
			}
		}
		.grid-text {
			font-size: 28rpx;
			margin-bottom: 26rpx;
		}
	}
	.u-grid-item {
		width: 30% !important;
		height: 160rpx;
		background: linear-gradient(#84C1FF, #C4E1FF) !important;
		margin-left: 3%;
		border-radius: 30rpx;
		margin-top: 20rpx !important;
		color: #fff !important;
	
	}
	.cardText {
		font-size: 12px;
	}
	
	.priceText {
		color: $u-primary;
		font-size: 14px;
	}
	.u-grid-item:nth-child(2) {
		background: linear-gradient(#FFBB77, #FFDCB9) !important;
	}
	
	.u-grid-item:nth-child(3) {
		background: linear-gradient(#1AFD9C, #7AFEC6) !important;
	}
	
	.u-grid-item:nth-child(4) {
		background: linear-gradient(#1AFD9C, #7AFEC6) !important;
	}
	.u-grid-item:nth-child(5) {
		background: linear-gradient(#FFBB77, #FFDCB9) !important;
	}
	.u-grid-item:nth-child(6) {
		background: linear-gradient(#84C1FF, #C4E1FF) !important;
	}
	.u-count-num {
		color: #FFF !important
	}
	.uni-date{
		background: #fff;
	}
	.day-item{
		width: 32%;
		height: 100rpx;
		float: left;
		margin-left: 1%;
		background: #fff;
		text-align: center;
		margin-top: 10px;
		border-radius: 10px;
		line-height: 100rpx;
	}
	.title-four{
		width: 23% !important;
		height: 160rpx;
		background-image: linear-gradient(#1AFD9C, #7AFEC6) !important;
		margin-left: 2%;
		border-radius: 30rpx;
		margin-top: 20rpx !important;
		color: #fff !important;
	}
</style>