zhongshen_project/addon/cashier/source/os/pages/stat/index.vue

<template>
	<base-page>
		<view class="common-wrap">
			<view class="title">营业数据</view>
			<view class="choice-day">
				<view class="date-btn" :class="dateType == 'today' ? 'select' : ''" @click="switchDateType('today')" value="today">今日</view>
				<view class="date-btn" :class="dateType == 'yesterday' ? 'select' : ''" @click="switchDateType('yesterday')" value="yesterday">昨日</view>
				<view class="date-btn" :class="dateType == 'week' ? 'select' : ''" @click="switchDateType('week')" value="week">7日内</view>
				<view class="date-btn" :class="dateType == 'month' ? 'select' : ''" @click="switchDateType('month')" value="month">30日内</view>
				<view class="date-btn" :class="dateType == 'custom' ? 'select' : ''" @click="switchDateType('custom')" value="custom">自定义</view>
				<view class="report text-color">
					<text class="move iconfont iconicon-test"></text>
					<text></text>
				</view>
			</view>
			<view class="money" v-if="businessdata">
				<view class="estimate" :class="statType == 'expected_earnings_total_money' ? 'estimate-active' : ''">
					<view class="income">
						<text class="income-name">预计收入(元)</text>
						<!-- <uni-dropdown>
							<view class="action" slot="dropdown-link"><i class="iconfont iconbangzhu js-prompt-top"></i></view>
							<view slot="dropdown">
								<view class="dropdown-content-box">
									<view class="text">弹框展示内容</view>
									<view class="arrow"></view>
								</view>
							</view>
						</uni-dropdown> -->
					</view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.expected_earnings_total_money || 0.0 }}</text>
						<text class="detail" @click="switchStatType('expected_earnings_total_money')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'billing_money' ? 'estimate-active' : ''">
					<view class="income">
						<text class="income-name">开单金额数(元)</text>
						<!-- <uni-dropdown>
							<view class="action" slot="dropdown-link"><i class="iconfont iconbangzhu js-prompt-top"></i></view>
							<view slot="dropdown">
								<view class="dropdown-content-box">
									<view class="text">弹框展示内容</view>
									<view class="arrow"></view>
								</view>
							</view>
						</uni-dropdown> -->
					</view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.billing_money || 0.0 }}</text>
						<text class="detail" @click="switchStatType('billing_money')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'billing_count' ? 'estimate-active' : ''">
					<view class="income"><text class="income-name">开单数量</text></view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.billing_count || 0 }}</text>
						<text class="detail" @click="switchStatType('billing_count')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'buycard_money' ? 'estimate-active' : ''">
					<view class="income"><text class="income-name">办卡金额数(元)</text></view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.buycard_money || 0.0 }}</text>
						<text class="detail" @click="switchStatType('buycard_money')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'buycard_count' ? 'estimate-active' : ''">
					<view class="income"><text class="income-name">办卡数</text></view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.buycard_count || 0 }}</text>
						<text class="detail" @click="switchStatType('buycard_count')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'recharge_money' ? 'estimate-active' : ''">
					<view class="income"><text class="income-name">会员充值金额(元)</text></view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.recharge_money || 0.0 }}</text>
						<text class="detail" @click="switchStatType('recharge_money')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'recharge_count' ? 'estimate-active' : ''">
					<view class="income"><text class="income-name">会员充值数量</text></view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.recharge_count || 0 }}</text>
						<text class="detail" @click="switchStatType('recharge_count')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'refund_money' ? 'estimate-active' : ''">
					<view class="income"><text class="income-name">会员退款金额(元)</text></view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.refund_money || 0.0 }}</text>
						<text class="detail" @click="switchStatType('refund_money')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'refund_count' ? 'estimate-active' : ''">
					<view class="income"><text class="income-name">会员退款数量</text></view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.refund_count || 0 }}</text>
						<text class="detail" @click="switchStatType('refund_count')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'order_member_count' ? 'estimate-active' : ''">
					<view class="income"><text class="income-name">门店下单会员数</text></view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.order_member_count || 0 }}</text>
						<text class="detail" @click="switchStatType('order_member_count')">查看详情</text>
					</view>
				</view>
				<view class="estimate" :class="statType == 'balance_money' ? 'estimate-active' : ''">
					<view class="income"><text class="income-name">会员余额消费金额</text></view>
					<view class="num-money">
						<text class="last_income">{{ businessdata.balance_money || 0.0 }}</text>
						<text class="detail" @click="switchStatType('balance_money')">查看详情</text>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="customTime">
			<view class="pop-box">
				<view class="pop-header">
					<view class="pop-header-text">自定义时间选择</view>
					<view class="pop-header-close" @click="$refs.customTime.close()"><i class="iconguanbi1 iconfont"></i></view>
				</view>
				<view class="pop-content ">
					<uni-datetime-picker v-model="timeObj.custom" @change="changeTime" :end="endDate" :clearIcon="false" type="datetimerange" rangeSeparator="至" />
				</view>
				<view class="pop-bottom"><button class="primary-btn" @click="getStatData()">确定</button></view>
			</view>
		</uni-popup>
		<uni-popup ref="chartsPop">
			<view class="pop-box charts-pop">
				<view class="pop-header">
					<view class="pop-header-text">运营数据图表展示</view>
					<view class="pop-header-close" @click="$refs.chartsPop.close()"><i class="iconguanbi1 iconfont"></i></view>
				</view>
				<view class="pop-content">
					<qiun-data-charts type="line" :chartData="chartData" :eopts="{ seriesTemplate: { smooth: true } }" :ontouch="true" :opts="chartsOpts" />
				</view>
				<!-- <view class="pop-bottom"><button class="primary-btn" @click="getStatData()">确定</button></view> -->
			</view>
		</uni-popup>
	</base-page>
</template>

<script>
export default {
	data() {
		return {
			statType: 'expected_earnings_total_money',
			statTypeArr: {
				expected_earnings_total_money: '预计收入',
				billing_money: '开单金额数',
				billing_count: '开单数量',
				buycard_money: '办卡金额数',
				buycard_count: '办卡数',
				recharge_money: '会员充值金额',
				recharge_count: '会员充值数量',
				refund_money: '会员退款金额',
				refund_count: '会员退款数量',
				order_member_count: '门店下单会员数',
				balance_money: '会员余额消费金额'
			},
			dateType: 'today',
			timeObj: {
				today: [],
				yesterday: [],
				week: [],
				month: [],
				custom: []
			},
			chartData: {
				categories: [],
				series: []
			},
			businessdata: null,
			chartsOpts: { enableScroll: true, xAxis: { scrollShow: true, itemCount: 24, disableGrid: true } }
		};
	},
	onLoad() {
		this.setDate();
		this.getStatData();
	},
	onShow() {
		let date = new Date();
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		var d = date.getDate();
		this.endDate = y + '-' + m + '-' + d + ' 23:59:59';
	},
	methods: {
		// 重置图表数据
		resetChartData() {
			this.chartData.categories = [];
			this.chartData.series = [];
		},
		setDate() {
			let time = this.$util.timeTurnTimeStamp(this.$util.timeFormat(Date.now() / 1000, 'y-m-d'));
			this.timeObj.today = [time, time + 86399];
			this.timeObj.yesterday = [time - 86400, time - 1];
			this.timeObj.week = [time - 604800, time];
			this.timeObj.month = [time - 2592000, time];
		},
		switchDateType(type) {
			this.dateType = type;
			if (type == 'custom') {
				this.$refs.customTime.open();
				return false;
			}

			if (type == 'month') this.chartsOpts.xAxis.itemCount = 10;
			else this.chartsOpts.xAxis.itemCount = 24;
			this.getStatData();
		},
		switchStatType(type) {
			this.statType = type;
			this.$refs.chartsPop.open();
			this.resetChartData();
			this.getStatData();
			setTimeout(() => {
				this.getChartData();
			}, 500);
		},
		changeTime(e) {
			this.timeObj.custom = e;
			this.chartsOpts.xAxis.itemCount = 10;
		},
		getStatData() {
			if (this.dateType == 'custom') {
				this.$refs.customTime.close();

				this.timeObj.custom[0] = this.$util.timeTurnTimeStamp(this.timeObj.custom[0]) * 1000; // 解决自定义数据保存之后再次点击出现的数据错乱
				this.timeObj.custom[1] = this.$util.timeTurnTimeStamp(this.timeObj.custom[1]) * 1000; // 解决自定义数据保存之后再次点击出现的数据错乱
			}
			this.getBusinessData();
		},
		getChartData() {
			let url = '/cashier/storeapi/stat/dayStatData';
			let data = {};
			data.start_time = this.timeObj[this.dateType][0];

			if (this.dateType == 'today' || this.dateType == 'yesterday') url = '/cashier/storeapi/stat/hourStatData';
			else data.end_time = this.timeObj[this.dateType][1];

			this.$api.sendRequest({
				url: url,
				data: data,
				success: res => {
					if (res.code >= 0) {
						this.chartData.series = [];
						this.chartData.series.push({
							data: res.data[this.statType],
							name: this.statTypeArr[this.statType]
						});
						this.chartData.categories = res.data.time;
					}
				}
			});
		},
		getBusinessData() {
			let data = {};
			data.start_time = this.dateType == 'custom' ? parseInt(this.timeObj[this.dateType][0] / 1000) : parseInt(this.timeObj[this.dateType][0]);
			data.end_time = this.dateType == 'custom' ? parseInt(this.timeObj[this.dateType][1] / 1000) : parseInt(this.timeObj[this.dateType][1]);

			this.$api.sendRequest({
				url: '/cashier/storeapi/stat/statTotal',
				data: data,
				success: res => {
					if (res.code >= 0) {
						this.businessdata = res.data;
					}
				}
			});
		}
	}
};
</script>

<style>
.stat-input-inline .uni-date {
}
.pop-content >>> .uni-icons {
	line-height: 0.32rem;
}
</style>

<style lang="scss" scoped>
.common-wrap {
	padding: 0.2rem;
	height: 100vh;
	box-sizing: border-box;
}
.title {
	display: flex;
	margin-bottom: 0.21rem;
	font-size: 0.16rem;
	font-family: Source Han Sans CN;
	font-weight: bold;
	line-height: 0.2rem;
}

.choice-day {
	display: flex;
}

.choice-time {
	margin-top: 0.09rem;
	font-size: 0.12rem;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 0.36rem;
}

.report {
	display: flex;
	justify-content: flex-end;
	margin-right: 0.2rem;
	font-size: 0.14rem;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 0.36rem;
	cursor: pointer;
}

.move {
	margin-right: 0.06rem;
}

.money {
	display: flex;
	flex-wrap: wrap;
	margin-top: 0.35rem;
	.estimate {
		width: calc((100% - 0.85rem) / 5);
		margin: 0 0.08rem 0.2rem;
		padding: 0.2rem;
		background: #fff;
		border: 0.01rem solid #eee;
		border-radius: 0.02rem;
		cursor: pointer;
		position: relative;
		box-sizing: border-box;
		.income {
			display: flex;
			flex-direction: row;
			box-sizing: border-box;
			line-height: 0.2rem;
			.income-name {
				font-size: 0.16rem;
			}
		}
		.num-money {
			.last_income {
				display: block;
				margin: 0.15rem 0;
				font-size: 0.24rem;
				font-weight: 500;
				line-height: 0.2rem;
			}
			.detail {
				display: block;
				text-align: right;
				color: $primary-color;
				font-size: $uni-font-size-sm;
				position: relative;
				bottom: -0.05rem;
			}
		}
	}
	.estimate:last-child {
		margin-right: 0;
	}
}

.jantou {
	margin-top: 0.05rem;
	padding-left: 0.1rem;
	height: 0.11rem;
}

.yesterday {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.12rem;
}

.top-num {
	display: flex;
	margin-left: 0.05rem;
	font-size: 0.12rem;
	font-weight: 400;
}

.date-btn {
	height: 0.42rem;
	line-height: 0.42rem;
	font-size: 0.14rem;
	padding: 0 0.3rem;
	box-sizing: border-box;
	border: 0.01rem solid #d2d2d2;
	cursor: pointer;
	border-right: none;
	border-left: none;
	position: relative;
}

.date-btn:nth-child(6)::after {
	border-radius: 0 0.02rem 0.02rem 0;
}

.date-btn:first-child::after {
	border-radius: 0.02rem 0 0 0.02rem;
}

.date-btn:first-child {
	border-radius: 0.02rem 0 0 0.02rem;
}

.date-btn::after {
	content: '';
	position: absolute;
	top: -0.01rem;
	left: 0;
	bottom: -0.01rem;
	right: -0.01rem;
	border-right: 0.01rem solid #d2d2d2;
	border-left: 0.01rem solid #d2d2d2;
}

.select {
	color: #fff;
	background-color: $primary-color;
	border-color: $primary-color;
}

.select::after {
	z-index: 2;
	border-color: $primary-color;
}

.select:first-child {
	border-radius: 0.02rem 0 0 0.02rem;
}

.seleced:nth-child(6) {
	border-radius: 0 0.02rem 0.02rem 0;
}
.c-datepicker-picker {
	z-index: 99999999 !important;
}
.yesterday {
	display: none;
}

.dropdown-content-box {
	padding: 0.05rem 0;
	margin-top: 0.05rem;
	background-color: #fff;
	border: 0.01rem solid #ebeef5;
	border-radius: 0.04rem;
	box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
	position: relative;

	.arrow {
		position: absolute;
		top: -0.06rem;
		right: 0.06rem;
		width: 0;
		height: 0;
		border-left: 0.06rem solid transparent;
		border-right: 0.06rem solid transparent;
		border-bottom: 0.06rem solid #fff;
	}

	.text {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0 0.1rem;
		transition: all 0.3s;
		font-size: 0.12rem;
		width: 1.5rem;
		box-sizing: border-box;
		text-align: left;
		line-height: 1.5;
	}
}
.js-prompt-top {
	color: #c8c9cc;
	font-size: 0.14rem;
	z-index: 999;
	margin-left: 0.05rem;
	cursor: pointer;
}
// pop弹框
.pop-box {
	background: #ffffff;
	width: 6rem;
	height: 3.38rem;
	.pop-header {
		padding: 0 0.15rem 0 0.2rem;
		height: 0.5rem;
		line-height: 0.5rem;
		border-bottom: 0.01rem solid #f0f0f0;
		font-size: 0.14rem;
		color: #333;
		overflow: hidden;
		border-radius: 0.02rem 0.2rem 0 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		.pop-header-text {
		}
		.pop-header-close {
			cursor: pointer;
			i {
				font-size: 0.18rem;
			}
		}
	}
	.pop-content {
		height: calc(100% - 1.05rem);
		// overflow-y: scroll;
		padding: 0.2rem;
		box-sizing: border-box;
	}
	.pop-bottom {
		padding: 0.1rem;
		height: 0.65rem;
		border-top: 0.01rem solid #eee;
		button {
			width: 95%;
		}
	}
}
.charts-pop {
	width: 9.5rem;
	height: 5.4rem;
	background-color: #fff;
	.pop-content {
		width: 100%;
		height: calc(100% - 1rem);
	}
}
</style>