VAVABUY/pages/shop/components/order_item.vue

<template>
  <view class="order-item" @click="handleClick">
    <!-- 订单头部 -->
    <view class="order-header">
      <view class="order-info">
        <text class="order-number">{{ t('订单号') }}：{{ item.orderNo }}</text>
        <text class="order-time">{{ formatTime(item.createTime) }}</text>
      </view>
      <view class="order-status" :class="getStatusClass(item.status)">
        {{ getStatusText(item.status) }}
      </view>
    </view>

    <!-- 商品信息 -->
    <view class="product-section">
      <view class="product-list">
        <view 
          v-for="(product, index) in item.goods" 
          :key="index"
          class="product-item"
        >
          <view class="product-image">
            <image :src="product.image" mode="aspectFill" />
          </view>
          <view class="product-info">
            <view class="product-name">{{ product.name }}</view>
            <view class="product-spec" v-if="product.spec">{{ product.spec }}</view>
            <view class="product-price">
              <text class="price">{{ formatCurrency(product.price) }}</text>
              <text class="quantity">x{{ product.quantity }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单金额 -->
    <view class="order-amount">
      <view class="amount-info">
        <text class="total-label">{{ t('商品数量') }}：{{ item.totalQuantity }}</text>
        <text class="total-amount">{{ t('实付') }}：{{ formatCurrency(item.totalAmount) }}</text>
      </view>
      <!-- 待付款运费 -->
      <view class="shipping-fee" v-if="item.status == 300 && item.money">
        <text class="fee-label">{{ t('运费') }}：</text>
        <text class="fee-amount">{{ formatCurrency(item.money) }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="order-actions" v-if="getActionButtons(item.status).length > 0">
      <view 
        v-for="action in getActionButtons(item.status)"
        :key="action.type"
        class="action-btn"
        :class="action.class"
        @click.stop="handleAction(action.type)"
      >
        {{ action.text }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { formatCurrency } from "@/utils";
import { t } from "@/locale";

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

const emit = defineEmits(["click", "action"]);

const handleClick = () => {
  emit("click", props.item);
};

const handleAction = (actionType) => {
  emit("action", props.item, actionType);
};

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待付款',
    100: '待发货',
    200: '已发货',
    300: '待发货',
    400: '已完成',
    500: '已取消',
    600: '已退款'
  };
  return statusMap[status] || '未知状态';
};

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    0: 'status-pending',
    100: 'status-shipping',
    200: 'status-shipped',
    300: 'status-shipping',
    400: 'status-completed',
    500: 'status-cancelled',
    600: 'status-refunded'
  };
  return classMap[status] || 'status-default';
};

// 获取操作按钮
const getActionButtons = (status) => {
  const buttonMap = {
    0: [], // 待付款 - 买家操作
    100: [
      { type: 'ship', text: '发货', class: 'btn-primary' }
    ],
    200: [], // 已发货 - 买家操作
    300: [
      { type: 'ship', text: '发货', class: 'btn-primary' }
    ],
    400: [], // 已完成
    500: [], // 已取消
    600: [] // 已退款
  };
  return buttonMap[status] || [];
};
</script>

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

.order-item {
  background: var(--light);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid var(--border);

    .order-info {
      display: flex;
      flex-direction: column;
      gap: 8rpx;

      .order-number {
        font-size: 28rpx;
        font-weight: bold;
        color: var(--black);
      }

      .order-time {
        font-size: 24rpx;
        color: var(--text-01);
      }
    }

    .order-status {
      font-size: 24rpx;
      font-weight: bold;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;

      &.status-pending {
        color: var(--primary);
        background: rgba(255, 107, 53, 0.1);
      }

      &.status-shipping {
        color: var(--primary);
        background: rgba(255, 107, 53, 0.1);
      }

      &.status-shipped {
        color: var(--success);
        background: rgba(76, 175, 80, 0.1);
      }

      &.status-completed {
        color: var(--success);
        background: rgba(76, 175, 80, 0.1);
      }

      &.status-cancelled {
        color: var(--text-01);
        background: rgba(158, 158, 158, 0.1);
      }

      &.status-refunded {
        color: var(--warning);
        background: rgba(255, 193, 7, 0.1);
      }
    }
  }

  .product-section {
    margin-bottom: 24rpx;

    .product-list {
      display: flex;
      flex-direction: column;
      gap: 20rpx;

      .product-item {
        display: flex;
        gap: 20rpx;

        .product-image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 12rpx;
          overflow: hidden;
          background: var(--bg);

          image {
            width: 100%;
            height: 100%;
          }
        }

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

          .product-name {
            font-size: 28rpx;
            color: var(--black);
            line-height: 1.4;
            margin-bottom: 8rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .product-spec {
            font-size: 24rpx;
            color: var(--text-01);
            margin-bottom: 8rpx;
          }

          .product-price {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
              font-size: 28rpx;
              font-weight: bold;
              color: var(--primary);
            }

            .quantity {
              font-size: 24rpx;
              color: var(--text-01);
            }
          }
        }
      }
    }
  }

  .order-amount {
    margin-bottom: 24rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid var(--border);

    .amount-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;

      .total-label {
        font-size: 24rpx;
        color: var(--text-01);
      }

      .total-amount {
        font-size: 32rpx;
        font-weight: bold;
        color: var(--black);
      }
    }

    .shipping-fee {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8rpx 0;
      background: rgba(255, 193, 7, 0.1);
      border-radius: 8rpx;
      padding: 12rpx 16rpx;

      .fee-label {
        font-size: 24rpx;
        color: var(--warning);
      }

      .fee-amount {
        font-size: 26rpx;
        font-weight: bold;
        color: var(--warning);
      }
    }
  }

  .order-actions {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid var(--border);

    .action-btn {
      padding: 16rpx 32rpx;
      border-radius: 40rpx;
      font-size: 24rpx;
      font-weight: bold;
      text-align: center;
      min-width: 120rpx;

      &.btn-primary {
        background: var(--primary);
        color: var(--light);
      }

      &.btn-secondary {
        background: var(--light);
        color: var(--black);
        border: 1rpx solid var(--border);
      }

      &.btn-danger {
        background: var(--danger);
        color: var(--light);
      }
    }
  }
}
</style>