mnsx/user/page/revenueCenter.vue

<template>
	<view class="center">
		<view class="top">
			<image src="../../static/img/sybg.png" mode="" class="sybg"></image>
			<view class="top-card">
				<view class="card-tit">
					<view class="tit-point"></view>
					营业额总览
				</view>
				<view class="card-icon">
					<image src="../../static/icon/moneyget.png" mode=""></image>
				</view>
				<view class="now-tit">
					本月营业额
				</view>
				<view class="now-money">
					{{month_momey}}
				</view>
				<view class="card-btm flex">
					<view class="card-info flex">
						<image src="../../static/icon/dayget.png" mode=""></image>
						<view class="info-wrap">
							<view class="info-tit">
								今日营业额
							</view>
							<view class="info-val">
								￥{{today_momey}}
							</view>
						</view>
					</view>
					<view class="card-info flex">
						<image src="../../static/icon/daydd.png" mode=""></image>
						<view class="info-wrap">
							<view class="info-tit">
								今日订单
							</view>
							<view class="info-val dan">
								{{today_count }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mid-tit flex">
			<view class="mid-left flex">
				<image src="../../static/icon/time.png" mode=""></image>
				<view class="left-tit">
					本月订单数
				</view>
			</view>
			<view class="mid-right">
			     {{month_count}}单
			</view>
		</view>
		<view class="btm-tab">
			<view class="tab-tit flex">
				<view class="tab-top-left tab-content">
					每月营业额
				</view>
				<view class="tab-top-center tab-content">
					订单数
				</view>
				<view class="tab-top-right tab-content">
					金额
				</view>
			</view>
			<scroll-view scroll-y="true" class="list-wrapper" :style="{'height':height}">
				<!-- 空白页 -->
				<empty v-if=" loaded && monthList.length == 0"></empty>
				<view v-for="item in monthList" class="flex list" :key="item.time">
					<view class="tab-top-left tab-content ">
						{{item.time | time}}
					</view>
					<view class="tab-top-center tab-content">
						{{item.frontNumber}}单
					</view>
					<view class="tab-top-right tab-content money">
						￥{{item.frontPrice}}
					</view>
				</view>
				<uni-load-more :status="loadingType" v-if="loadingType == 'loading'"></uni-load-more>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		getOrderTime,
		getOrderData,
		getOrderMonth
	} from '@/api/wallet.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	export default {
		components: {
			empty,
			uniLoadMore
		},
		data() {
			let start = new Date(new Date().toLocaleDateString()).getTime()
			return {
				height: '',
				list: [],
				loadingType: 'more',
				page: 1,
				limit: 10,
				monthList: {},
				loaded: false,
				month_momey: '',//月营业额
				today_momey: '',//日营业额
				tiday_start: start/1000,//今日零点时间戳
				today_count: '',//今日订单数
			}
		},
		computed: {
			month_count() {
				if(this.monthList.length > 0) {
					return this.monthList[0].frontNumber
				}else {
					return 0
				}
				
			}
		},
		filters: {
			time(val) {
				let str = ''
				if (val) {
					val = val + ''
					let str1 = val.slice(0, 4)
					let str2 = val.slice(4, )
					return str = str1 + '年' + str2 + '月'
				}
				return str
			}
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.list-wrapper').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		onLoad() {
			 console.log(this.tiday_start,'start')
			this.getOrderMonth()
			this.getMonth()
			this.getTaday()
			this.getTadayCount()
		},
		methods: {
			// 获取每月数据
			getOrderMonth() {
				this.loadingType = 'loading'
				getOrderMonth().then(({
					data
				}) => {
					this.loadingType = 'noMore'
					let arr = []
					for (let val in data) {
						arr.push({
							time: +val.replace(/-/, ''),
							frontPrice: data[val].frontPrice,
							frontNumber: data[val].frontNumber
						})
					}
					this.monthList = arr.sort(function(a, b) {
						return b.time - a.time
					})
				})
			},
			// 获取本月营业额
			getMonth() {
				getOrderTime({
					type: 1
				}).then(({
					data
				}) => {
					console.log(data, '本月营业额')
					this.month_momey = data.time
				})
			},
			// 获取本日营业额
			getTaday() {
				getOrderTime({
					start: this.tiday_start,
					type: 1
				}).then(({data}) => {
					console.log(data, '本日营业额')
					this.today_momey = data.time
				})
			},
			//获取本日订单数
			getTadayCount() {
				getOrderTime({
					start: this.tiday_start,
					type: 0
				}).then(({data}) => {
					console.log(data, '本日单数')
					this.today_count= data.time
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		height: 585rpx;
		// background-color: #f6f7f8;
		position: relative;

		.sybg {
			position: absolute;
			width: 100%;
			height: 265rpx;
		}

		.top-card {
			width: 688rpx;
			height: 398rpx;
			padding: 32rpx;
			background: #FFFFFF;
			box-shadow: -2rpx 4rpx 18rpx 0px rgba(0, 110, 238, 0.2);
			border-radius: 24rpx;
			position: absolute;
			right: 0;
			left: 0;
			bottom: 40rpx;
			margin: 0 auto;

			.now-tit {
				text-align: right;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.now-money {
				padding-top: 10rpx;
				text-align: right;
				font-size: 72rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #901B21;

				&::before {
					content: '￥';
					font-size: 44rpx;
					position: relative;
					bottom: 5rpx;
				}
			}

			.card-icon {
				position: absolute;
				top: 100rpx;
				left: 48rpx;
				width: 224rpx;
				height: 122rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.card-tit {
				display: flex;
				align-items: center;

				.tit-point {
					display: inline-block;
					width: 12rpx;
					height: 32rpx;
					background: #901B21;
					border-radius: 3rpx;
					margin-right: 17rpx;
				}

				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.card-btm {
				position: absolute;
				bottom: 32rpx;
				width: 624rpx;
				height: 122rpx;
				background: linear-gradient(180deg, rgba(220, 184, 118, 0.12) 0%, rgba(220, 184, 118, 0) 100%);
				border-radius: 12rpx;

				.card-info {
					width: 50%;
					flex-shrink: 0;
					padding-left: 30rpx;
					justify-content: flex-start;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					.info-wrap {
						padding-left: 20rpx;

						.info-tit {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
						}

						.info-val {
							// padding-top: 15rpx;
							font-size: 36rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #DCB876;
							text-align: center;
						}

						.dan {
							&::after {
								content: '单';
								font-size: 32rpx;
								position: relative;
								bottom: 3rpx;
							}
						}
					}
				}
			}
		}
	}

	.mid-tit {
		background-color: #fff;
		height: 80rpx;
		padding: 0 30rpx 0 33rpx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;

		.mid-left {

			image {
				margin-right: 13rpx;
				width: 33rpx;
				height: 33rpx;
			}
		}
	}

	.btm-tab {
		background-color: #fff;

		// padding: 0 30rpx 0 35rpx;
		.tab-top-left {
			text-align: left;
			padding-left: 35rpx;
		}

		.tab-top-center {
			text-align: center;
		}

		.tab-top-right {
			text-align: right;
			padding-right: 30rpx;
		}

		.tab-tit {
			height: 72rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;

			.tab-content {
				width: 33%;
			}

		}
	}

	.list-wrapper {
		background-color: #fff;

		.list {
			height: 70rpx;

			view {
				width: 33.3%;
				flex-shrink: 0;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.money {
				color: #901B21;
			}
		}
	}
</style>