shunfengche-sfd/my/jgOrder/DetailItem.vue

<template>
	<view class="detail-item">
		<view class="item-left">
			<view class="item-left-top">
				<text>{{ monthDay }}</text>
				<text>{{ weekday }}</text>
			</view>
			<view class="item-left-bottom">
				<text>{{ detailData.orderCount }} 单</text>
				<text> · </text>
				<text>{{ detailData.online }} 小时</text>
			</view>
		</view>
		<view class="item-right">
			<view class="item-right-top">￥{{ detailData.total }}</view>
			<view class="item-right-bottom" :style="{ color: detailData.sign === '-' ? '#F56C6C' : '#00C18A' }">{{ detailData.sign }}{{ detailData.ratio }}%</view>
		</view>
	</view>
</template>

<script>
	import { formatToMonthDay, getWeekday } from '@/utils/dateUtil.js'
	export default {
		name: 'DetailItem',
		props: {
			detailData: {
				type: Object,
				default: () => {
					return {
						date: '2025-05-23',
						orderCount: 87,
						online: 8.5,
						total: 428.50,
						sign: '-',
						ratio: 12.5
					}
				}
			},
		},
		data() {
			return {}
		},
		computed: {
			monthDay() {
				const date = new Date(this.detailData.date)
				return formatToMonthDay(date)
			},
			weekday() {
				const date = new Date(this.detailData.date)
				return getWeekday(date)
			}
		},
		methods: {},
	}
</script>

<style lang="scss">
	.detail-item {
		padding: 12rpx 0;
		border-bottom: 1px solid #E4E7ED;
		display: flex;
		justify-content: space-between;
		
		.item-left {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			
			.item-left-top {
				font-size: 28rpx;
				line-height: 42rpx;
				color: #333333;
				font-weight: 500;
			}
			
			.item-left-bottom {
				font-size: 24rpx;
				line-height: 32rpx;
				color: #999999;
			}
		}
		
		.item-right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			
			.item-right-top {
				font-weight: 700;
				color: #333333;
				font-size: 28rpx;
				line-height: 42rpx;
			}
			.item-right-bottom {
				font-weight: 500;
				font-size: 24rpx;
				line-height: 32rpx;
			}
		}
	}
</style>