pet-front-order/pages_order/components/order/OrderInfo.vue

<template>
	<view class="order-info-card">
		<view class="card-title">
			<text>其他信息</text>
		</view>
		
		<view class="info-content">
			<view class="info-item">
				<text class="info-label">订单编号:</text>
				<text class="info-value">{{orderInfo.orderNumber}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">下单时间:</text>
				<text class="info-value">{{orderInfo.orderTime}}</text>
			</view>
			
			<view class="info-item" v-if="orderInfo.paymentTime">
				<text class="info-label">支付时间:</text>
				<text class="info-value">{{orderInfo.paymentTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderInfo: {
				type: Object,
				default: () => ({
					orderNumber: '',
					orderTime: '',
					paymentTime: ''
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-info-card {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		
		&::before {
			content: '';
			display: inline-block;
			width: 8rpx;
			height: 32rpx;
			background-color: #FFAA48;
			margin-right: 16rpx;
			border-radius: 4rpx;
		}
	}
	
	.info-content {
		.info-item {
			display: flex;
			margin-bottom: 16rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.info-label {
				font-size: 26rpx;
				color: #666;
				width: 140rpx;
			}
			
			.info-value {
				font-size: 26rpx;
				color: #333;
				flex: 1;
			}
		}
	}
</style>