VAVABUY/pages/store/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">{{ useGlobal().$format(item.indate) }}</text>
      </view>
      <view class="order-status">
        {{ item.status_txt }}
      </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.pic_url" mode="aspectFill" />
          </view>
          <view class="product-info">
            <view class="product-name">{{ product.shopName }}</view>
            <view class="product-spec" v-if="product.sku_desc">{{
              product.sku_desc
            }}</view>
            <view class="product-price">
              <text class="price">{{ formatCurrency(product.price) }}</text>
              <text class="quantity">x{{ product.total }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单金额 -->
    <view class="order-amount">
      <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="item.status == 300">
      <view class="action-btn" @click.stop="handleAction()">
        <trans _t="付款" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { useGlobal, 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 = () => {
  emit("action", props.item);
};
</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;
      color: var(--success);
      background: rgba(76, 175, 80, 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;
            -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;

      .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: 12rpx 24rpx;
      border-radius: 40rpx;
      font-size: 24rpx;
      font-weight: bold;
      text-align: center;
      min-width: 120rpx;
      background: var(--primary);
      color: var(--light);
    }
  }
}
</style>