hotelHomestayWx/pagesHouse/home/tj.vue

<template>
	<view class="page" :style="{'min-height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="数据统计"></c-nav-bar>
		<view class="tabs">
			<text :class="type==1?'on':''" @click="type=1">月账单</text>
			<text :class="type==2?'on':''" @click="type=2">年账单</text>
		</view>
		<view class="content">
			<view class="time" @click="show=true">
				<u-icon name="calendar" :label="dateStr" labelPos="right" labelColor="#666" color="#666" space="7px"
					size="25px"></u-icon>
				<u-icon name="arrow-down" color="#999" size="20px" style="margin-left: 20rpx;"></u-icon>
			</view>

			<view class="money">
				<view>
					<text>收入金额</text>
					<text class="in">+{{info.allOrderAmount||0}}</text>
					<text>{{info.allOrders||0}}笔</text>
				</view>
				<view>
					<text>退款金额</text>
					<text>{{info.allRefundOrderAmount||0}}</text>
					<text>{{info.allRefundOrders||0}}笔</text>
				</view>
			</view>
		</view>
		<view class="chart">
			<view class="tit">累计曲线图</view>
			<view class="total">
				<view class="t1">总收入<text>{{total}}</text></view>
				<view class="t2">总退款<text>{{total2}}</text></view>
			</view>
			<view class="line_charts_two">
				<qiun-data-charts type="line" :opts="gameOpts" :chartData="gameChartData" />
			</view>
		</view>
		<u-datetime-picker @confirm="confirmDate" @cancel="show=false" :show="show" v-model="value1"
			mode="year-month"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: '',
				total2: '',
				info: {
					allOrderAmount: 0,
					allOrders: 0,
					allRefundOrderAmount: 0,
					allRefundOrders: 0
				},
				show: false,
				value1: Number(new Date()),
				dateStr: new Date().Format('yyyy年-MM月'),
				date: new Date().Format('yyyy-MM'),
				dataList: [],
				type: 1,
				gameChartData: {},
				gameOpts: {
					color: ["#4B98FE", "#00D05E"],
					padding: [15, 15, 0, 15],
					dataLabel: false,
					dataPointShapeType: 'hollow',
					dataZoom: [{
							type: 'slider',
							start: 0,
							end: 50,
						},
						{
							type: 'inside',
							orient: 'vertical',
						},
					],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						height: '80%',
						containLabel: true,
					},

					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						gridColor: "rgba(230,230,230,0.6)",
						disabled: false,
						disableGrid: false,
						gridType: 'dash',
						dashLength: '4',
						data: [{
							axisLineColor: "#FFFFFF",
						}, ],
					},
					// legend: {
					// 	show: true,
					// 	position: "top",
					// 	float: "left",
					// },
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						},
					},
				},
			}
		},
		watch: {
			type(newval, oldval) {
				if (newval == 1) {
					this.date = new Date().Format('yyyy-MM');
					this.dateStr = this.date.split('-')[0] + '年' + '-' + this.date.split('-')[1] + '月';
				} else {
					this.date = new Date().Format('yyyy');
					this.dateStr = this.date + '年';
				}
			},
			date(newval, oldval) {
				if (newval != oldval) {
					this.getBottomData();
					this.gettopData()
				}
			}
		},
		onLoad() {
			this.gettopData();
			this.getBottomData();
		},
		methods: {
			confirmDate(e) {
				// 创建一个Date对象并传入时间戳
				const date = new Date(e.value);
				// 使用Date对象的方法获取年、月、日、小时、分钟和秒
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				// 格式化时间
				let formattedTime = "";
				if (this.type == 1) {
					formattedTime = `${year}-${month}`;
					this.dateStr = `${year}年-${month}月`
				} else {
					formattedTime = `${year}`;
					this.dateStr = `${year}年`
				}
				this.date = formattedTime;
				this.show = false;
			},
			gettopData() {
				this.$api.post('/merchant/merchantFisherman/home/getMerchantFishermanBill', {
					dateTime: this.date,
					dateType: this.type + '',
					fishermanId: uni.getStorageSync('merchantId')
				}).then(res => {
					if (res.data.code === 0) {
						this.info = res.data.data;
					} else {
						this.info = {
							allOrderAmount: 0,
							allOrders: 0,
							allRefundOrderAmount: 0,
							allRefundOrders: 0
						}
					}

				})
			},
			getBottomData() {
				this.$api.post('/merchant/merchantFisherman/home/getMerchantFishermanCurveAnalyse', {
					dateTime: this.date,
					dateType: this.type + '',
					fishermanId: uni.getStorageSync('merchantId')
				}).then(res => {
					let x = [],
						y = [],
						z = [];
					this.total = 0;
					this.total2 = 0;
					if (res.data.code === 0) {
						this.dataList = res.data.data;
						for (let i = 0; i < res.data.data.length; i++) {
							x.push(this.type == 1 ? res.data.data[i].dateKey : (res.data.data[i].dateKey + '月'));
							y.push(res.data.data[i].orderNums);
							z.push(res.data.data[i].refundOrderNums);
							this.total += res.data.data[i].orderNums;
							this.total2 += res.data.data[i].refundOrderNums
						}
					} else {
						this.dataList = []
					}
					setTimeout(() => {
						this.drawGameCharts(x, y, z);
					}, 500)
				})
			},
			drawGameCharts(x, y, z) {
				let res = {
					categories: x,
					series: [{
							name: "总收入",
							data: y,
							legendShape: "circle",
							color: "#367BFF",
						},
						{
							name: "总退款",
							data: z,
							legendShape: "circle",
							color: "#77DFDD",
						},
					],
				};
				this.gameChartData = JSON.parse(JSON.stringify(res));
			},
		}
	}
</script>

<style scoped lang="scss">
	.line_charts_two {
		width: 630rpx;
		height: 500rpx;
		// background-color: aqua;
	}

	.page {
		background: #F5F8FA;
		box-sizing: border-box;

		.total {
			margin: 36rpx;
			display: flex;
			align-items: center;

			&>view {
				position: relative;
				color: #777;
				margin-right: 80rpx;
				font-size: 26rpx;
				padding-left: 30rpx;

				&.t1 {
					&::after {
						position: absolute;
						left: 0;
						top: 43%;
						z-index: 1;
						display: inline-block;
						content: "";
						width: 20rpx;
						height: 10rpx;
						border-radius: 10rpx;
						background-color: #367BFF;
					}
				}

				&.t2 {
					&::after {
						position: absolute;
						left: 0;
						top: 43%;
						z-index: 1;
						display: inline-block;
						content: "";
						width: 20rpx;
						height: 10rpx;
						border-radius: 10rpx;
						background-color: #77DFDD;
					}
				}

				text {
					color: #111;
					font-size: 28rpx;
				}
			}
		}
	}

	.chart {
		width: calc(100% - 40rpx);
		border-radius: 16rpx;
		padding: 36rpx 22rpx;
		background-color: #fff;
		margin: 20rpx auto 0;

		.tit {
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.tabs {
		text-align: center;
		border-bottom: 1rpx solid #EFEFEF;
		background-color: #fff;
		display: flex;

		text {
			display: inline-block;
			padding: 28rpx;
			width: 50%;
			position: relative;

			&.on::after {
				display: block;
				content: '';
				position: absolute;
				width: 64rpx;
				height: 6rpx;
				background-color: #007A69;
				bottom: 8rpx;
				z-index: 1;
				left: 50%;
				border-radius: 4rpx;
				transform: translate(-50%, 0);
			}
		}
	}

	.content {
		padding: 48rpx 30rpx 56rpx;
		background-color: #fff;

		.time {
			display: flex;
			align-items: center;
			margin-bottom: 42rpx;
		}

		.money {
			display: flex;
			align-items: center;
			padding: 0 10rpx;

			&>view {
				width: 50%;

				text {
					display: block;
					font-weight: bold;

					&:first-child {
						color: #111;
						font-size: 28rpx;
						font-weight: inherit;
					}

					&:nth-child(2) {
						font-size: 40rpx;
						margin: 14rpx 0 16rpx;
						color: #111;
					}

					&:last-child {
						color: #999;
						font-size: 26rpx;
						font-weight: inherit;
					}
				}

				.in {
					color: #FEA400;
				}
			}
		}
	}
</style>