订单列表

This commit is contained in:
pushuo 2022-07-05 21:26:11 +08:00
parent b05b3b68b2
commit cff07400da
5 changed files with 154 additions and 67 deletions

View File

@ -715,3 +715,33 @@ body.page-order-success .order-wrap .card-body .order-bottom {
body.page-account-order-list {
background-color: #F7F8FA;
}
body.page-account-order-list .order-wrap .table .sep-row {
height: 20px;
}
body.page-account-order-list .order-wrap .table .sep-row td {
border: 0;
}
body.page-account-order-list .order-wrap .table .head-tr {
background: #f5f5f5;
}
body.page-account-order-list .order-wrap .table .head-tr td {
border-bottom-color: #f5f5f5;
}
body.page-account-order-list .order-wrap .table thead {
background: #f5f5f5;
}
body.page-account-order-list .order-wrap .table thead th {
font-weight: 500;
border: 0;
}
body.page-account-order-list .order-wrap .table tbody td {
border: 1px solid #e5e5e5;
}
body.page-account-order-list .order-wrap .table .product-info {
display: flex;
align-items: center;
}
body.page-account-order-list .order-wrap .table .product-info .img {
width: 60px;
margin-right: 10px;
}

View File

@ -2,4 +2,51 @@
body.page-account-order-list {
background-color: #F7F8FA;
.order-wrap {
.table {
.sep-row {
height: 20px;
// border: 0;
td {
border: 0;
}
}
.head-tr {
// border: 0;
background: #f5f5f5;
td {
// border: 0;
border-bottom-color: #f5f5f5;
}
}
thead {
background: #f5f5f5;
th {
font-weight: 500;
border: 0;
}
}
tbody {
td {
border: 1px solid #e5e5e5;
}
}
.product-info {
display: flex;
align-items: center; // flex-start | center
// justify-content: space-between; // flex-end | center | space-between
// flex-wrap: wrap;
.img {
width: 60px;
margin-right: 10px;
}
}
}
}
}

View File

@ -13,37 +13,8 @@
<div class="row">
<span>x-shop-sidebar start</span>
<x-shop-sidebar/>
<span>x-shop-sidebar end</span>
<x-shop-sidebar/>
<div class="col-12 col-md-3">
<div class="account-sides-info">
<div class="head">
<div class="portrait"><img src="{{ $avatar }}" class="img-fluid"></div>
<div class="account-name">{{ $name }}</div>
<div class="account-email">{{ $email }}</div>
</div>
<nav class="list-group account-links">
<a class="list-group-item d-flex justify-content-between align-items-center active" href="">
<span>个人中心</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}">
<span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('logout') }}">
<span>退出登录</span></a>
</nav>
</div>
</div>
<div class="col-12 col-md-9">
@if (\Session::has('success'))
<div class="alert alert-success">

View File

@ -10,45 +10,62 @@
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
{{-- @foreach ($orders as $order)
<div class="col-6 col-md-3">{{ $order->number }}</div>
@endforeach --}}
{{-- {{ dd($orders) }} --}}
<div class="row">
<div class="col-12 col-md-3">
<div class="account-sides-info">
<div class="head">
<div class="portrait"><img src="" class="img-fluid"></div>
<div class="account-name"></div>
<div class="account-email"></div>
</div>
<nav class="list-group account-links">
<a class="list-group-item d-flex justify-content-between align-items-center active" href="">
<span>个人中心</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}">
<span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('logout') }}">
<span>退出登录</span></a>
</nav>
</div>
</div>
<x-shop-sidebar/>
<div class="col-12 col-md-9">
<div class="card mb-4 account-card">
<div class="card mb-4 account-card order-wrap">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">我的订单</h6>
</div>
<div class="card-body">
{{-- table-bordered --}}
<table class="table ">
<thead>
<tr>
{{-- <th>订单号</th> --}}
<th>订单详情</th>
<th>金额</th>
<th>状态</th>
<th class="text-end">操作</th>
</tr>
</thead>
@foreach ($orders as $order)
<tbody>
<tr class="sep-row"><td colspan="4"></td></tr>
<tr class="head-tr">
<td colspan="4">
<span class="order-created me-4">{{ $order->created_at }}</span>
<span class="order-number">订单号:{{ $order->number }}</span>
</td>
</tr>
{{-- {{ dd($order->orderProducts) }} --}}
@foreach ($order->orderProducts as $product)
<tr class="{{ $loop->first ? 'first-tr' : '' }}">
<td>
<div class="product-info">
<div class="img"><img src="{{ $product->image }}" class="img-fluid"></div>
<div class="name">
<span>{{ $product->name }}</span>
</div>
<div class="quantity">{{ $product->quantity }}</div>
</div>
</td>
@if ($loop->first)
<td rowspan="{{ $loop->count }}">{{ $order->total }}</td>
<td rowspan="{{ $loop->count }}">{{ $order->status }}</td>
<td rowspan="{{ $loop->count }}" class="text-end">
<a href="{{ shop_route('account.order.show', ['number' => $order->number]) }}" class="btn btn-outline-secondary btn-sm">查看</a>
</td>
@endif
</tr>
@endforeach
</tbody>
@endforeach
</table>
</div>
</div>
</div>

View File

@ -1,5 +1,27 @@
<div>
account sidebar
{{ $customer->email }}
<!-- When there is no desire, all things are at peace. - Laozi -->
</div>
<div class="col-12 col-md-3">
<div class="account-sides-info">
<div class="head">
<div class="portrait"><img src="{{ $customer->avatar }}" class="img-fluid"></div>
<div class="account-name">{{ $customer->name }}</div>
<div class="account-email">{{ $customer->email }}</div>
</div>
<nav class="list-group account-links">
<a class="list-group-item d-flex justify-content-between align-items-center active" href="">
<span>个人中心</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}">
<span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="">
<span>我的收藏</span></a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('logout') }}">
<span>退出登录</span></a>
</nav>
</div>
</div>