cashier_admin_app/pages/index/components/statistics.vue

<template>
	<view class="statistics">
		<view class="statisticsBox">
			<view class="time-wrapper">
				<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
					<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value==selected }">
						{{v.label}}
					</view>
					<view class="xian" v-if="v.value==selected "> </view>
				</view>
			</view>

			<ul class="payList">
				<li v-for="item in list" :key="item.id">
					<view style="text-align: center;">
						{{item.payType}}
					</view>
					<view style="text-align: center;">
						{{item.payAmount}}
					</view>
				</li>
			</ul>
		</view>
	</view>
	<datePickerview @confirm="datePickerConfirm" ref="datePicker" style="z-index: 999;"></datePickerview>
</template>

<script setup>
	import {
		summaryTrade,
	} from '@/http/yskApi/requestAll.js';
	import dayjs from 'dayjs' //时间格式库
	import {
		getCurrentInstance,
		ref
	} from 'vue';
	import datePickerview from './my-date-pickerview.vue'
	import {
		onShow
	} from '@dcloudio/uni-app';
	let selected = ref('today')
	let list = ref()
	const emit = defineEmits(['totalRevenue'])
	const timeList = [{
			label: '今天',
			value: 'today'
		},
		{
			label: '昨天',
			value: 'yesterday'
		},
		{
			label: '本周',
			value: 'circumference'
		}, {
			label: '本月',
			value: 'moon'
		},
		{
			label: '自定义',
			value: 'custom'
		}
	]
	const currentInstance = getCurrentInstance()
	onShow((options) => {
		let iToken =  uni.getStorageSync('iToken')
		console.log(iToken,'调试123')
		if(iToken){
			getlist()
		}else{
			uni.redirectTo({url: '/pages/login/index'})
		}
	});

	function getlist(start, end) {
		let startTime, endTime;
		if (selected.value == 'today') {
			startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
			endTime = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
		} else if (selected.value == 'yesterday') {
			startTime = formatTime() + ' 00:00:00'
			endTime = formatTime() + ' 23:59:59'
		} else if (selected.value == 'circumference') {
			var now = new Date();
			var nowTime = now.getTime();
			var day = now.getDay();
			var oneDayTime = 24 * 60 * 60 * 1000;
			//显示周一
			var MondayTime = nowTime - (day - 1) * oneDayTime;
			//显示周日
			var SundayTime = nowTime + (7 - day) * oneDayTime;
			startTime = dayjs(MondayTime).format('YYYY-MM-DD 00:00:00')
			endTime = dayjs(SundayTime).format('YYYY-MM-DD 23:59:59')
		} else if (selected.value == 'moon') {
			startTime = dayjs().startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
			endTime = dayjs().endOf('month').format('YYYY-MM-DD') + ' 23:59:59'
		} else if (selected.value == 'custom') {
			startTime = start
			endTime = end
		}
		summaryTrade({
			shopId: uni.getStorageSync('shopId'),
			startTime,
			endTime,
		}).then((res) => {
			list.value = res.sale.payCount.slice(0, 4)
			emit('totalRevenue', res.sale.incomeAmountAll)
		})
	}

	function datePickerConfirm(e) {
		getlist(e.start, e.end)
	}
	// 获取当前时间
	function getdate() {
		const dt = new Date();
		const y = dt.getFullYear();
		const m = (dt.getMonth() + 1 + "").padStart(2, "0");
		const d = (dt.getDate() + "").padStart(2, "0");
		const hh = (dt.getHours() + "").padStart(2, "0");
		const mm = (dt.getMinutes() + "").padStart(2, "0");
		const ss = (dt.getSeconds() + "").padStart(2, "0");
		return `${y}-${m}-${d}`;
	}
	// 获取昨天时间
	const formatTime = () => {
		let strDate = getdate()
		let dateFormat = new Date(strDate);
		dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
		dateFormat = new Date(dateFormat);
		let y = dateFormat.getFullYear()
		let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
		let d = dateFormat.getDate().toString().padStart(2, '0')
		return `${y}-${m}-${d}`
	}

	function changeTime(e) {
		selected.value = e
		if (e == 'custom') {
			currentInstance.ctx.$refs.datePicker.toggle()
		} else {
			getlist()
		}
	}
</script>
<style scoped lang="less">
	ul,
	li {
		list-style: none;
		padding: 0;
	}

	.statistics {
		padding: 0 28rpx;

		.statisticsBox {
			width: 694rpx;
			height: 260rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.time-wrapper {
				display: flex;
				justify-content: space-around;
				padding-bottom: 16rpx;
				padding-top: 16rpx;
				margin-top: 54rpx;

				.timelistbox {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;

					.time-item {
						font-size: 28rpx;
						text-align: center;
						padding-bottom: 10rpx;
					}

					.xian {
						width: 40rpx;
						height: 3rpx;
						background-color: #318AFE;
						// position: absolute;
						// left: 16rpx;
						// bottom: 0;
					}
				}

				.time-selected {
					color: #318afe;
					font-size: 32rpx !important;
				}
			}

			.payList {
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 32rpx;

				>li {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					width: 170rpx;

					>view {
						text-align: center;
					}
				}
			}
		}
	}
</style>