bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>订单管理</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <nav class="bg-blue-600 text-white shadow-lg">
    <div class="container mx-auto px-4 py-4">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-3"><span class="text-2xl">📦</span><h1 class="text-xl font-bold">电商库存管理系统</h1></div>
        <div class="flex space-x-4">
          <a href="/" class="hover:bg-blue-500 px-3 py-2 rounded">首页</a>
          <a href="/shops" class="hover:bg-blue-500 px-3 py-2 rounded">店铺</a>
          <a href="/products" class="hover:bg-blue-500 px-3 py-2 rounded">商品</a>
          <a href="/inventory" class="hover:bg-blue-500 px-3 py-2 rounded">库存</a>
          <a href="/orders" class="bg-blue-500 px-3 py-2 rounded">订单</a>
        </div>
      </div>
    </div>
  </nav>
  <main class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-8">
      <div><h2 class="text-3xl font-bold text-gray-800">📋 订单管理</h2><p class="text-gray-600 mt-2">订单管理</p></div>
    </div>
    <div id="orderList" class="bg-white rounded-lg shadow overflow-hidden"></div>
  </main>
  <script>
    async function loadOrders() {
      const res = await fetch('/api/orders?limit=50');
      const data = await res.json();
      const container = document.getElementById('orderList');
      if (data.success && data.data.length > 0) {
        container.innerHTML = '<table class="min-w-full"><thead class="bg-gray-50"><tr><th class="px-6 py-3">订单号</th><th class="px-6 py-3">商品</th><th class="px-6 py-3">店铺</th><th class="px-6 py-3">数量</th><th class="px-6 py-3">金额</th><th class="px-6 py-3">状态</th></tr></thead><tbody>' + 
          data.data.map(o => `<tr class="border-t"><td class="px-6 py-4">${o.order_no}</td><td class="px-6 py-4">${o.product_name}</td><td class="px-6 py-4">${o.shop_name}</td><td class="px-6 py-4">${o.quantity}</td><td class="px-6 py-4">¥${o.price}</td><td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded ${o.status==='completed'?'bg-green-100 text-green-700':o.status==='shipped'?'bg-purple-100 text-purple-700':o.status==='paid'?'bg-blue-100 text-blue-700':'bg-yellow-100 text-yellow-700'}">${o.status}</span></td></tr>`).join('') + '</tbody></table>';
      } else {
        container.innerHTML = '<div class="p-8 text-center text-gray-500">暂无订单数据</div>';
      }
    }
    document.addEventListener('DOMContentLoaded', loadOrders);
  </script>
</body>
</html>