assistant-storefront/app/javascript/shared/components/OrderDetail.vue

<script>
import { mapActions } from 'vuex';

export default {
  name: 'OrderDetail',
  props: {
    status: { type: String, default: 'completed' },
    statusText: { type: String, default: '已完成' },
    statusColor: { type: String, default: 'text-green-600' },
    orderId: { type: [String, Number], required: true },
    orderTime: { type: String, required: true },
    items: {
      type: Array,
      default: () => [],
    },
    actions: {
      type: Array,
      default: () => [],
    },
    showTotal: { type: Boolean, default: true },
    totalLabel: { type: String, default: '' },
    amountLabel: { type: String, default: '' },
  },
  computed: {
    totalQuantity() {
      return this.items.reduce((sum, item) => sum + item.quantity, 0);
    },
  },
  methods: {
    ...mapActions('conversation', ['sendMessage']),
    isTailwindColor(color) {
      // 判断是否是 Tailwind class（包含 text-、bg-、fg- 等）
      return color && (color.includes('text-') || color.includes('bg-') || color.includes('fg-'));
    },
    getInlineColor(color) {
      if (!color || this.isTailwindColor(color)) return {};
      return { color };
    },
    getSingleColor(color) {
      // 从 Tailwind class 或十六进制提取颜色值用于圆点背景
      if (!color) return '#10b981';

      if (this.isTailwindColor(color)) {
        // Tailwind color mapping
        const colorMap = {
          'text-green-600': '#10b981',
          'text-green-500': '#10b981',
          'text-blue-600': '#2563eb',
          'text-blue-500': '#3b82f6',
          'text-orange-600': '#f59e0b',
          'text-orange-500': '#f59e0b',
          'text-red-600': '#dc2626',
          'text-red-500': '#ef4444',
          'text-gray-600': '#4b5563',
          'text-gray-500': '#6b7280',
        };
        return colorMap[color] || '#10b981';
      }

      // 十六进制颜色直接返回
      return color;
    },
    onActionClick(action) {
      // 如果有 URL，在父窗口中打开
      if (action && action.url) {
        if (window.parent !== window) {
          // 在 iframe 中，直接设置父窗口 location
          window.parent.location.href = action.url;
        } else {
          // 不在 iframe 中，直接使用当前窗口
          window.location.href = action.url;
        }
        return;
      }

      // 否则发送消息
      if (action && action.reply) {
        this.sendMessage({
          content: action.reply,
        });
      }
    },
  },
};
</script>

<template>
  <div class="order-chat-card">
    <!-- 头部：状态、单号、下单时间 -->
    <div class="px-3 pt-4 pb-2 bg-gray-50 border-b">
      <div class="flex justify-between items-center">
        <span class="text-xs font-bold flex items-center" :class="isTailwindColor(statusColor) ? statusColor : ''" :style="getInlineColor(statusColor)">
          <span class="w-1.5 h-1.5 rounded-full mr-1.5" :style="{ backgroundColor: getSingleColor(statusColor) }"></span>
          {{ statusText }}
        </span>
        <span class="text-xs text-gray-400 font-mono">ID: {{ orderId }}</span>
      </div>
      <div class="text-xs text-gray-400 mt-0.5">
        📅 {{ orderTime }}
      </div>
    </div>

    <!-- 商品滚动区域 -->
    <div class="scroll-container p-2 space-y-2">
      <div v-for="(item, index) in items" :key="index" class="flex items-center space-x-2">
        <img
          :src="item.image"
          class="w-10 h-[50px] object-cover rounded border border-gray-100 flex-shrink-0 bg-gray-200 dark:bg-gray-700"
          alt="product"
        />
        <div class="flex-1 min-w-0">
          <div class="text-xs font-medium text-gray-800 truncate">
            {{ item.name }}
          </div>
          <div class="flex justify-between items-center">
            <span class="text-xs text-gray-400 font-mono">x{{ item.quantity }}</span>
            <span class="text-xs font-bold text-gray-700 font-mono">
              {{ item.price }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 价格总计 -->
    <div v-if="showTotal" class="px-3 py-2 bg-red-50/50 border-t border-red-100">
      <div class="flex justify-between items-baseline">
        <span v-if="totalLabel" class="text-xs text-gray-500 font-medium">
          {{ totalLabel }}
        </span>
        <span v-if="amountLabel" class="text-sm font-black text-red-600 font-mono">
          {{ amountLabel }}
        </span>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="flex border-t border-n-weak" style="border-style: solid;">
      <button
        v-for="(action, index) in actions"
        :key="index"
        @click="onActionClick(action)"
        class="flex-1 py-3 text-sm transition-colors"
        :class="{
          'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2 border-r border-n-weak': action.style === 'default' || !action.style,
          'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue': action.style === 'primary'
        }"
      >
        {{ action.text }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.order-chat-card {
  max-width: 380px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.scroll-container {
  max-height: 210px;
  overflow-y: auto;
}

/* 自定义滚动条 */
.scroll-container::-webkit-scrollbar {
  width: 4px;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: #e5e7eb;
  border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-track {
  background: transparent;
}
</style>