applet/components/ShopData/BusinessData.vue

<template>
	<view class="business-data data-box">
		<view class="headline">经营数据</view>
		<!-- 选择今日则显示当天日期。  
		选择自定义，则显示请选择日期。 点击后选择日期时间段。 -->
		<view class="search-time">
			<view class="time-select" @click.stop="selectType">
				<text class="select-value one-row">{{TimeSelectAction[ActiveTimeAction].name}}</text>
				<text class="iconfont select-icon">&#xe671;</text>
			</view>
			<view class="time-picke" v-if="ActiveTimeAction === TimeSelectAction[1].value"
				@click.stop="handleCalendar()">
				<text class="iconfont picke-icon">&#xe651;</text>
				<text class="picke-text">{{ startTime }} ~ {{ endTime }}</text>
			</view>
		</view>
		<view class="num-statistics">
			<template v-for="item in valueLabel">
				<view class="num-item">
					<view class="num-item-num">
						<text class="num-item-tag" v-if="item.tag">{{item.tag}}</text>
						<text
							class="num-item-val one-row">{{ item.fn ? item.fn(StatisticsVo)  : (StatisticsVo[item.key] || 0)}}</text>
					</view>
					<view class="num-item-name one-row">{{item.label}} </view>
				</view>
			</template>
		</view>
	</view>
	<uni-calendar ref="CalendarRef" range :insert="false" @confirm="ConfirmCalendar" />
	<uv-action-sheet ref="actionSheetRef" :actions="TimeSelectAction" @select="select" />
</template>

<script lang="ts" setup>
	import { onMounted, ref, unref, watch } from "vue";
	import { getTimeVal } from "@/util/tools.ts";
	import { getStatisticsApi } from "@/api/ShopContent.ts";
	const $Props = defineProps({
		valueLabel: {
			type: Array,
			default: []
		},
		businessId: {
			type: Number,
			default: null
		}
	});
	const TimeSelectAction = [
		{
			name: '今日',
			value: 0
		},
		{
			name: '自定义',
			value: 1
		}
	];
	const ActiveTimeAction = ref(TimeSelectAction[0].value);
	const startTime = ref(getTimeVal({ format: 'YYYYMMDD' })); // 开始时间
	const endTime = ref(getTimeVal({ format: 'YYYYMMDD' }));	 // 结束时间
	const actionSheetRef = ref();
	const selectType = () => {
		actionSheetRef.value.open();
	};
	const select = (e) => {
		if (e.value === ActiveTimeAction.value) return
		ActiveTimeAction.value = e.value;
		if (e.value === TimeSelectAction[0].value) {
			startTime.value = getTimeVal({ format: 'YYYYMMDD' });
			endTime.value = getTimeVal({ format: 'YYYYMMDD' });
			getStatistics();
		};
	};



	const CalendarRef = ref();
	const handleCalendar = () => {
		CalendarRef.value?.open()
	};
	const ConfirmCalendar = (e) => {
		const { data } = e.range;
		if (data && data.length >= 2) {
			startTime.value = data[0] || getTimeVal({ format: 'YYYYMMDD' });
			endTime.value = data[data.length - 1] || getTimeVal({ format: 'YYYYMMDD' });
			getStatistics();
		}
	};



	const StatisticsVo = ref({})
	const getStatistics = async () => {
		try {
			const Parmas = {
				businessId: unref($Props.businessId),
				startTime: unref(startTime),
				endTime: unref(endTime),
				type: ActiveTimeAction.value == 0 ? "today" : "all"
			};
			const { data } = await getStatisticsApi(Parmas);
			StatisticsVo.value = data || {}
		} catch (error) {
			console.log('row error== ', error)
		}
	};

	watch(() => $Props.businessId, () => {
		getStatistics();
	});

	onMounted(() => {
		getStatistics();
	})
</script>

<style lang="scss" scoped>
	@import url("./index.scss");

	.business-data {
		.search-time {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;

			.time-select {
				width: 33%;
				flex-shrink: 0;
				height: 70rpx;
				background: #ffffff;
				border: 1rpx solid #d9d9d9;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;

				.select-value {
					flex: 1 0;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #666666;
				}

				.select-icon {
					flex-shrink: 0;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #666666;
					transform: rotate(90deg);
					padding-left: 5rpx;
				}
			}

			.time-picke {
				padding-left: 50rpx;
				flex: 1 0;
				display: flex;
				align-items: center;

				.picke-icon {
					color: #FFAD00;
					font-size: 40rpx;
					padding-right: 5rpx;
				}

				.picke-text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #1a1a1a;
				}
			}
		}

		.num-statistics {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.num-item {
				width: calc(100% / 3);
				flex-shrink: 0;
				margin-top: 30rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;

				&:before {
					content: '';
					position: absolute;
					right: 0;
					top: 50%;
					width: 1rpx;
					height: 60%;
					transform: translateY(-50%);
					background-color: #e6e6e6;
				}

				.num-item-num {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.num-item-tag {
						font-size: 26rpx;
						font-weight: normal;
						color: #eb5153;
					}

					.num-item-val {
						font-size: 38rpx;
						font-weight: normal;
						color: #eb5153;
					}
				}

				.num-item-name {
					width: 100%;
					padding-top: 12rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
					color: #1a1a1a;
					line-height: 40rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>