kuaiyidian-HD/pages/index/dataStatistics.vue

<template>
	<view>
		<view style="position: fixed;top: 0;z-index: 99;width:100%;">
			<uni-datetime-picker style="margin-bottom:10px;" v-model="range" type="daterange" @change="searchList" />
			<view class="IndexContent">
				<view class="contentPadding">
					<u-grid :col="3">
						<u-grid-item>
							<u-count-to :start-val="0" :end-val="shopInfo.totalAmount"></u-count-to>
							<text class="grid-text">销售总金额</text>
						</u-grid-item>
						<u-grid-item>
							<u-count-to :start-val="0" :end-val="shopInfo.totalAlreadyEarn + shopInfo.totalPayAmount"></u-count-to>
							<text class="grid-text">实收总额</text>
						</u-grid-item>
						<u-grid-item>
							<u-count-to :start-val="0" :end-val="type==0?shopInfo.totalProfit:0" :decimals="2"></u-count-to>
							<view class="grid-text">利润</view>
						</u-grid-item>
					</u-grid>
					<u-grid :col="5">
						<view class="u-zidingyi">
							<u-count-to :start-val="0" :end-val="shopInfo.totalCCount"></u-count-to>
							<view class="grid-text">下单客户</view>
						</view>
						<view class="u-zidingyi">
							<u-count-to :start-val="0" :end-val="shopInfo.purchasingCost"></u-count-to>
							<view class="grid-text">进货金额</view>
						</view>
						<view class="u-zidingyi">
							<u-count-to :start-val="0" :end-val="shopInfo.returnTotalAmount"></u-count-to>
							<view class="grid-text">退货金额</view>
						</view>
						<view class="u-zidingyi">
							<u-count-to :start-val="0" :end-val="shopInfo.returnTotalCount"></u-count-to>
							<view class="grid-text">退货笔数</view>
						</view>							
					</u-grid>
				</view>
			</view>
		</view>
		<view style="margin-top: 520rpx;">
			<view v-for="(item,index) in priceList" :key="index">
				<uni-card :title="item.day == null ?'暂无':item.day">
					<view class="uni-body"> 
						<view class="cardText"> 开单数：{{item.totalCount == null ?'暂无':item.totalCount}} </view>
						<view class="priceText">总金额：{{item.price == null ?'暂无':item.price}}</view>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range:[],
				shopInfo:{},
				priceList:[],
				type:''
			};
		},
		onShow(){
			this.getMonth();
			this.getSaleInfo();
			this.getList();
			this.type = uni.getStorageSync('type')
		},
		methods: {
			maskPrice(){
				this.tui.toast('订单实收:' + this.shopInfo.totalAlreadyEarn +'回款:'+ this.shopInfo.totalPayAmount)
			},
			getSaleInfo() {
				this.tui.request("/app/sale/getShopAll", "POST", {
					pageVo: {
						pageSize: 5,
						pageNumber: 1
					},
					startTime:this.range[0],
					endTime:this.range[1]
				}, false, false).then((res) => {
					if (res.code == 200) {
						this.shopInfo = res.result
					} else {
						this.tui.toast(res.message)
					}
			
				})
			},
			getList() {
				this.tui.request("/app/sale/getShopMonthData", "POST", {
					startDate:this.range[0],
					endDate:this.range[1]
				}, false, false).then((res) => {
					if (res.code == 200) {
						this.priceList = res.result
					} else {
						this.tui.toast(res.message)
					}
				})
			},
			//获取当月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.range = [beg,end]
			},
			searchList() {
				this.priceList = [];
				this.getList()
				this.getSaleInfo()
			},
		}
	}
</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;
			text-align: center;
		}
	}
	.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;
		text-align:center;
	}
	.uni-date{
		background: #fff;
	}
	.uni-tooltip-popup{
		width: 180rpx;
	}
	.u-icon{
		padding: 0 0 0 8px !important;
	}
	.u-zidingyi{
		width: 22% !important;
		height: 160rpx;
		background: linear-gradient(#84C1FF, #C4E1FF) !important;
		margin-left: 3%;
		border-radius: 30rpx;
		margin-top: 20rpx !important;
		color: #fff !important;
		text-align: center;
		padding-top: 20rpx;
	}
	.u-zidingyi:nth-child(2) {
		background: linear-gradient(#FFBB77, #C4E1FF) !important;
	}
	.u-zidingyi:nth-child(3) {
		background: linear-gradient(#84C1FF, #7AFEC6) !important;
	}
	.u-zidingyi:nth-child(4) {
		background: linear-gradient(#84C1FF, #C4E1FF) !important;
	}
</style>