用户界面 - 订单列表页

app/Http/Controllers/OrdersController.php

@@ -9,6 +9,7 @@
 use App\Models\UserAddress;
 use App\Models\Order;
 use Carbon\Carbon;
+use Illuminate\Http\Request;
 
 class OrdersController extends Controller
 {
@@ -68,4 +69,16 @@ public function store(OrderRequest $request)
 
         return $order;
     }
+
+    public function index(Request $request)
+    {
+        $orders = Order::query()
+            // 使用 with 方法预加载，避免N + 1问题
+            ->with(['items.product', 'items.productSku'])
+            ->where('user_id', $request->user()->id)
+            ->orderBy('created_at', 'desc')
+            ->paginate();
+
+        return view('orders.index', ['orders' => $orders]);
+    }
 }

resources/sass/app.scss

@@ -292,3 +292,48 @@ body {
     }
   }
 }
+
+.orders-index-page {
+  .list-group-item {
+    font-size: 12px;
+    border: none;
+    padding: 0;
+    margin-bottom: 15px;
+    .panel {
+      margin: 0;
+      .card-body {
+        padding: 0;
+      }
+    }
+    .table {
+      margin: 0;
+      td[rowspan] {
+        border-left: 1px solid #ddd;
+      }
+    }
+    .product-info {
+      display: flex;
+      flex-direction: row;
+      .preview {
+        img {
+          max-width: 80px;
+          max-height: 80px;
+        }
+        border: 1px solid #eee;
+        margin-right: 5px;
+      }
+      .product-title, .sku-title {
+        display: block;
+      }
+      .product-title > a {
+        color: #3c3c3c;
+      }
+      .sku-title {
+        color: #9e9e9e;
+      }
+    }
+    .total-amount {
+      font-weight: bolder;
+    }
+  }
+}

resources/views/layouts/_header.blade.php

@@ -31,6 +31,7 @@
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
             <a href="{{ route('user_addresses.index') }}" class="dropdown-item">收货地址</a>
+            <a href="{{ route('orders.index') }}" class="dropdown-item">我的订单</a>
             <a href="{{ route('products.favorites') }}" class="dropdown-item">我的收藏</a>
             <a class="dropdown-item" id="logout" href="#"
                onclick="event.preventDefault();document.getElementById('logout-form').submit();">退出登录</a>

resources/views/orders/index.blade.php

@@ -0,0 +1,79 @@
+@extends('layouts.app')
+@section('title', '订单列表')
+
+@section('content')
+<div class="row">
+<div class="col-lg-10 offset-lg-1">
+<div class="card">
+  <div class="card-header">订单列表</div>
+  <div class="card-body">
+    <ul class="list-group">
+      @foreach($orders as $order)
+        <li class="list-group-item">
+          <div class="card">
+            <div class="card-header">
+              订单号：{{ $order->no }}
+              <span class="float-right">{{ $order->created_at->format('Y-m-d H:i:s') }}</span>
+            </div>
+            <div class="card-body">
+              <table class="table">
+                <thead>
+                <tr>
+                  <th>商品信息</th>
+                  <th class="text-center">单价</th>
+                  <th class="text-center">数量</th>
+                  <th class="text-center">订单总价</th>
+                  <th class="text-center">状态</th>
+                  <th class="text-center">操作</th>
+                </tr>
+                </thead>
+                @foreach($order->items as $index => $item)
+                  <tr>
+                    <td class="product-info">
+                      <div class="preview">
+                        <a target="_blank" href="{{ route('products.show', [$item->product_id]) }}">
+                          <img src="{{ $item->product->image_url }}">
+                        </a>
+                      </div>
+                      <div>
+                        <span class="product-title">
+                           <a target="_blank" href="{{ route('products.show', [$item->product_id]) }}">{{ $item->product->title }}</a>
+                        </span>
+                        <span class="sku-title">{{ $item->productSku->title }}</span>
+                      </div>
+                    </td>
+                    <td class="sku-price text-center">￥{{ $item->price }}</td>
+                    <td class="sku-amount text-center">{{ $item->amount }}</td>
+                    @if($index === 0)
+                      <td rowspan="{{ count($order->items) }}" class="text-center total-amount">￥{{ $order->total_amount }}</td>
+                      <td rowspan="{{ count($order->items) }}" class="text-center">
+                        @if($order->paid_at)
+                          @if($order->refund_status === \App\Models\Order::REFUND_STATUS_PENDING)
+                            已支付
+                          @else
+                            {{ \App\Models\Order::$refundStatusMap[$order->refund_status] }}
+                          @endif
+                        @elseif($order->closed)
+                          已关闭
+                        @else
+                          未支付<br>
+                          请于 {{ $order->created_at->addSeconds(config('app.order_ttl'))->format('H:i') }} 前完成支付<br>
+                          否则订单将自动关闭
+                        @endif
+                      </td>
+                      <td rowspan="{{ count($order->items) }}" class="text-center"><a class="btn btn-primary btn-sm" href="">查看订单</a></td>
+                    @endif
+                  </tr>
+                @endforeach
+              </table>
+            </div>
+          </div>
+        </li>
+      @endforeach
+    </ul>
+    <div class="float-right">{{ $orders->render() }}</div>
+  </div>
+</div>
+</div>
+</div>
+@endsection

routes/web.php

@@ -32,5 +32,6 @@
     Route::get('cart', 'CartController@index')->name('cart.index');
     Route::delete('cart/{sku}', 'CartController@remove')->name('cart.remove');
     Route::post('orders', 'OrdersController@store')->name('orders.store');
+    Route::get('orders', 'OrdersController@index')->name('orders.index');
 });
 Route::get('products/{product}', 'ProductsController@show')->name('products.show');