applet/components/ShopData/TodayOrder.vue

<template>
	<view class="data-box">
		<view class="headline">今日订单对比</view>
		<view class="today-order">
			<view class="today-order-item">
				<text class="today-order-label">在线买单</text>
				<view class="today-order-value">
					<text class="value-label">订单数：</text>
					<view class="value-content">
						<text>{{ Vo.todayOnlineOrderNum || 0 }}</text>
						<text :class="(Vo.onlineOrderOnDay || 0) * 1 >= 0 ? 'green-color' : 'red-color'">{{(Vo.onlineOrderOnDay || 0) * 1 > 0 ? '+' : ''}}{{ Vo.onlineOrderOnDay || 0 }}%</text>
					</view>
				</view>
				<view class="today-order-value">
					<text class="value-label">交易额：</text>
					<view class="value-content value-money">￥{{ Vo.todayOnlineOrderAmount || 0 }}</view>
				</view>
			</view>
			<view class="today-order-item">
				<text class="today-order-label">线上商城</text>
				<view class="today-order-value">
					<text class="value-label">订单数：</text>
					<view class="value-content">
						<text>{{ Vo.todayShopOrderNum || 0 }}</text>
						<text :class="(Vo.shopOrderOnDay || 0) * 1 >= 0 ? 'green-color' : 'red-color'">{{(Vo.shopOrderOnDay || 0) * 1 > 0 ? '+' : ''}}{{ Vo.shopOrderOnDay || 0 }}%</text>
					</view>
				</view>
				<view class="today-order-value">
					<text class="value-label">交易额：</text>
					<view class="value-content value-money">￥{{ Vo.todayShopOrderAmount || 0 }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref, unref, watch } from "vue";
	import { getTodayStatisticsApi } from "@/api/ShopContent.ts";

	const $Props = defineProps({
		businessId: {
			type: Number,
			default: null
		}
	});

	const Vo = ref({})
	const getStatistics = async () => {
		if (!$Props.businessId) {
			Vo.value = {}
			return {}
		}
		try {
			const Parmas = {
				businessId: $Props.businessId
			};
			const { data } = await getTodayStatisticsApi(Parmas);
			Vo.value = data || {}
		} catch (error) {
			Vo.value = {}
		}
	};
	
	watch(() => $Props.businessId, () => {
		getStatistics();
	});
 
	onMounted(() => {
		getStatistics();
	})
</script>

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

	.today-order {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.today-order-item {
			width: calc((100% - 28rpx) / 2);
			box-sizing: border-box;
			background: linear-gradient(180deg, #fbe8eb, #ffffff);
			border-radius: 20rpx;
			padding: 25rpx;

			.today-order-label {
				width: 100%;
				display: inline-block;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #1a1a1a;
			}

			.today-order-value {
				display: flex;
				align-items: center;
				padding-top: 15rpx;
				font-size: 23rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a;

				&+.today-order-value {
					padding-top: 20rpx;
				}

				.value-label {
					flex-shrink: 0;
				}

				.value-content {
					flex: 1 0;
					display: flex;
					justify-content: space-between;

					.green-color {
						color: #08BE5D;
					}

					.red-color {
						color: #FF0000;
					}
				}

				.value-money {
					font-size: 23rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #eb5153;
				}
			}
		}
	}
</style>