mechanicStore-app/pages/order/orderStatisics.uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view class="page-scroll">
	<!-- #endif -->
		<view class="page">
			<view class="summary-card">
				<text class="summary-title">数据总览</text>
				<text class="summary-subtitle">按当前统计口径展示技师经营数据</text>
			</view>
			<view class="summary-strip">
				<view class="summary-strip-item">
					<text class="summary-strip-value">{{ stats.registerDays.count }}</text>
					<text class="summary-strip-label">入驻天数</text>
				</view>
				<view class="summary-strip-item">
					<text class="summary-strip-value">{{ stats.additional.count }}</text>
					<text class="summary-strip-label">7日在线</text>
				</view>
			</view>

			<view v-for="item in statCards" :key="item.key" class="stat-card">
				<view class="stat-row">
					<text class="stat-label">{{ item.title }}</text>
					<text class="stat-rate">{{ item.rateText }}</text>
				</view>
				<view class="stat-row stat-row-gap">
					<view class="stat-column">
						<text class="stat-value">{{ item.countText }}</text>
						<text class="stat-caption">数量</text>
					</view>
					<view class="stat-column">
						<text class="stat-value">{{ item.amountText }}</text>
						<text class="stat-caption">金额</text>
					</view>
				</view>
			</view>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="uts">
	import { computed, reactive } from 'vue'
	import { getAllData } from '@/utils/api/workbenches.uts'

	type StatInfo = {
		count: number
		amount: number
		rate: number
	}

	type StatsState = {
		additional: StatInfo
		registerDays: StatInfo
		deal: StatInfo
		receiving: StatInfo
		refund: StatInfo
		renewal: StatInfo
		comment: StatInfo
	}

	type StatCard = {
		key: string
		title: string
		rateText: string
		countText: string
		amountText: string
	}

	const createStat = () : StatInfo => {
		return { count: 0, amount: 0, rate: 0 }
	}

	const stats = reactive<StatsState>({
		additional: createStat(),
		registerDays: createStat(),
		deal: createStat(),
		receiving: createStat(),
		refund: createStat(),
		renewal: createStat(),
		comment: createStat(),
	})

	const applyStat = (target : StatInfo, source : UTSJSONObject | null) : void => {
		if (source == null) {
			target.count = 0
			target.amount = 0
			target.rate = 0
			return
		}
		target.count = (source['count'] as number | null) ?? 0
		target.amount = (source['amount'] as number | null) ?? 0
		target.rate = (source['rate'] as number | null) ?? 0
	}

	const statCards = computed(() : StatCard[] => {
		return [
			{ key: 'receiving', title: '接单数据', rateText: `${stats.receiving.rate}%`, countText: `${stats.receiving.count}`, amountText: `${stats.receiving.amount}` },
			{ key: 'deal', title: '成交数据', rateText: `${stats.deal.rate}%`, countText: `${stats.deal.count}`, amountText: `${stats.deal.amount}` },
			{ key: 'renewal', title: '加钟数据', rateText: `${stats.renewal.rate}%`, countText: `${stats.renewal.count}`, amountText: `${stats.renewal.amount}` },
			{ key: 'refund', title: '退单数据', rateText: `${stats.refund.rate}%`, countText: `${stats.refund.count}`, amountText: `${stats.refund.amount}` },
			{ key: 'comment', title: '评价数据', rateText: `${stats.comment.rate}%`, countText: `${stats.comment.count}`, amountText: `${stats.comment.amount}` },
		]
	})

	const loadStats = async () : Promise<void> => {
		try {
			const response = await getAllData({} as UTSJSONObject) as UTSJSONObject
			const code = (response['code'] as number | null) ?? -1
			if (code != 0 && code != 200) {
				return
			}
			const data = response['data'] as UTSJSONObject | null
			applyStat(stats.additional, data?.['additional'] as UTSJSONObject | null)
			applyStat(stats.registerDays, data?.['registerDays'] as UTSJSONObject | null)
			applyStat(stats.deal, data?.['deal'] as UTSJSONObject | null)
			applyStat(stats.receiving, data?.['receiving'] as UTSJSONObject | null)
			applyStat(stats.refund, data?.['refund'] as UTSJSONObject | null)
			applyStat(stats.renewal, data?.['renewal'] as UTSJSONObject | null)
			applyStat(stats.comment, data?.['comment'] as UTSJSONObject | null)
		} catch (error) {
			uni.showToast({ title: '数据加载失败', icon: 'none' })
		}
	}

	onLoad(() => {
		loadStats()
	})
</script>

<style>
	.page-scroll {
		flex: 1;
	}
	.page {
		min-height: 1000rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #f7f2e7;
		flex-direction: column;
	}
	.summary-card {
		padding: 28rpx;
		border-radius: 24rpx;
		background-color: #ffe48a;
		flex-direction: column;
	}
	.summary-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #2e281f;
	}
	.summary-subtitle {
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #5f533c;
	}
	.summary-strip {
		margin-top: 18rpx;
		flex-direction: row;
		justify-content: space-between;
	}
	.summary-strip-item {
		width: 48%;
		padding: 24rpx;
		border-radius: 22rpx;
		background-color: #ffffff;
		flex-direction: column;
	}
	.summary-strip-value {
		font-size: 36rpx;
		font-weight: 700;
		color: #2e281f;
	}
	.summary-strip-label {
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #8b8376;
	}
	.stat-card {
		margin-top: 20rpx;
		padding: 28rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		flex-direction: column;
	}
	.stat-row {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.stat-row-gap {
		margin-top: 18rpx;
	}
	.stat-label {
		font-size: 30rpx;
		font-weight: 700;
		color: #2e281f;
	}
	.stat-rate {
		font-size: 26rpx;
		color: #d76b31;
	}
	.stat-column {
		width: 46%;
		padding: 20rpx;
		border-radius: 18rpx;
		background-color: #faf7f1;
		flex-direction: column;
	}
	.stat-value {
		font-size: 34rpx;
		font-weight: 700;
		color: #2e281f;
	}
	.stat-caption {
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #8b8376;
	}
</style>