uni-fans-score/components/DeviceOrderItemCard.vue

<template>
	<view class="device-order-card" @click="onCardClick">
		<!-- 头部：标题和状态 -->
		<view class="card-header">
			<view class="header-left">
				<view class="tag-bar"></view>
				<text class="title">定制化订单</text>
			</view>
			<view class="status-badge">{{ statusText }}</view>
		</view>

		<!-- 产品信息区域 -->
		<view class="product-section">
			<image 
				:src="order.pictureUrl || order.productImage || '/static/default-product.png'" 
				mode="aspectFill" 
				class="product-image"
			></image>
			<view class="product-info">
				<view class="product-name">{{ order.productName || order.deviceName || '风电者2026新款' }}</view>
				<view style="display: flex;justify-content: space-between;"> 
					<view class="product-style">款式：{{ order.optionName || order.style || order.deviceStyle || '标准' }}</view>
					<view class="product-price">¥ {{ totalAmount }}</view>
				</view>
				
			</view>
		</view>
		
		<!-- 分割线 -->
		<view class="divider-wrapper">
			<uv-divider :hairline="false" lineColor="#f5f5f5"></uv-divider>
		</view>

		<!-- 底部时间和删除按钮 -->
		<view class="card-footer">
			<text class="order-time">{{ order.startTime || order.createTime }}</text>
			<view class="footer-actions">
				<!-- 待付款状态显示立即支付按钮 -->
				<view v-if="isWaitingPayment" class="pay-btn" @click.stop="onPay">
					<text>立即支付</text>
				</view>
				<view class="delete-btn" @click.stop="onDelete">
					<uv-icon name="trash" size="20" color="#999"></uv-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import { useI18n } from '@/utils/i18n.js'
	
	const { t } = useI18n()

	const props = defineProps({
		order: { 
			type: Object, 
			required: true 
		}
	});

	const emit = defineEmits(['click', 'delete', 'pay']);

	// 订单状态文本
	const statusText = computed(() => {
		const status = props.order.orderStatus || props.order.status;
		if (status === 0 || status === '0') {
			return '待付款';
		}
		if (status === 1 || status === '1') {
			return '待发货';
		}
		if (status === 2 || status === '2') {
			return '待收货';
		}
		if (status === 3 || status === '3') {
			return '已完成';
		}
		if (status === 4 || status === '4') {
			return '已取消';
		}
		if (status === 5 || status === '5') {
			return '退款中';
		}
		return '待付款';
	});

	// 判断是否为待付款状态
	const isWaitingPayment = computed(() => {
		const status = props.order.orderStatus || props.order.status;
		return status === 0 || status === '0';
	});

	// 总金额
	const totalAmount = computed(() => {
		return props.order.totalAmount || props.order.amount || props.order.payAmount || '99.0';
	});

	// 卡片点击事件
	const onCardClick = () => {
		emit('click', props.order);
	};

	// 删除订单
	const onDelete = () => {
		emit('delete', props.order);
	};

	// 立即支付
	const onPay = () => {
		emit('pay', props.order);
	};
</script>

<style lang="scss" scoped>
	.device-order-card {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

		// 头部区域
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 24rpx 0 24rpx;
			// border-bottom: 1rpx solid #f5f5f5;

			.header-left {
				display: flex;
				align-items: center;

				.tag-bar {
					width: 6rpx;
					height: 32rpx;
					background: #07c160;
					border-radius: 12rpx;
					margin-right: 12rpx;
				}

				.title {
					font-size: 30rpx;
					color: #3EAB64;
					font-weight: 600;
				}
			}

			.status-badge {
				padding: 8rpx 20rpx;
				background: rgba(7, 193, 96, 0.1);
				color: #07c160;
				font-size: 24rpx;
				border-radius: 24rpx;
				font-weight: 500;
			}
		}

		// 产品信息区域
		.product-section {
			display: flex;
			padding: 24rpx 24rpx 0 24rpx;

			.product-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 12rpx;
				background: #f5f5f5;
				flex-shrink: 0;
			}

			.product-info {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				
				justify-content: space-between;

				.product-name {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					line-height: 1.4;
					margin-bottom: 8rpx;
				}

				.product-style {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 8rpx;
				}

				.product-price {
					font-size: 36rpx;
					color: #07c160;
					font-weight: 600;
				}
			}
		}
		
		// 分割线区域
		.divider-wrapper {
			padding: 0 24rpx;
		}

		// 底部区域
		.card-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 24rpx 24rpx;
			background: #fff;

			.order-time {
				font-size: 24rpx;
				color: #999;
			}

			.footer-actions {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.pay-btn {
					padding: 12rpx 32rpx;
					background: linear-gradient(135deg, #07c160, #10d673);
					border-radius: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-size: 24rpx;
						color: #fff;
						font-weight: 500;
					}

					&:active {
						opacity: 0.8;
					}
				}

				.delete-btn {
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;

					&:active {
						opacity: 0.7;
					}
				}
			}
		}
	}
</style>