用户界面 - 商品详情页

paulfzy · Dec 22, 2018 · e6984bb · e6984bb
1 parent 7a0f870
commit e6984bb
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 2 deletions.
diff --git a/app/Http/Controllers/ProductsController.php b/app/Http/Controllers/ProductsController.php
@@ -49,4 +49,14 @@ public function index(Request $request)
             ],
         ]);
     }
+
+    public function show(Product $product, Request $request)
+    {
+        // 判断商品是否已经上架，如果没有上架则抛出异常。
+        if (!$product->on_sale) {
+            throw new \Exception('商品未上架');
+        }
+
+        return view('products.show', ['product' => $product]);
+    }
 }
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -124,3 +124,123 @@ body {
     border-bottom: 1px solid #eee;
   }
 }
+
+.products-show-page {
+   .cover {
+     width: 100%;
+     border: solid 1px #eee;
+     padding: 30px 0;
+   }
+   .title {
+     font-size: 24px;
+     font-weight: bold;
+     margin-bottom: 10px;
+   }
+   .price {
+     label {
+       width: 69px;
+       color: #999;
+       font-size: 12px;
+       padding-left: 10px;
+     }
+     em {
+       font-family: Arial;
+       font-size: 18px;
+       font-style: normal;
+       text-decoration: none;
+       vertical-align: middle;
+     }
+     span {
+       font-family: Arial;
+       font-size: 24px;
+       font-weight: bolder;
+       text-decoration: none;
+       vertical-align: middle;
+     }
+     line-height: 30px;
+     background-color: #e9e9e9;
+     color: red;
+     font-size: 20px;
+   }
+   .sales_and_reviews {
+     border-top: 1px dotted #c9c9c9;
+     border-bottom: 1px dotted #c9c9c9;
+     margin: 5px 0 10px;
+     display: flex;
+     flex-direction: row;
+     font-size: 12px;
+     &>div {
+       &.sold_count,&.review_count {
+         border-right: 1px dotted #c9c9c9;
+       }
+       width: 33%;
+       text-align: center;
+       padding: 5px;
+       .count {
+         color: #FF0036;
+         font-weight: 700;
+       }
+     }
+   }
+   .skus {
+     &>label {
+       color: #999;
+       font-size: 12px;
+       padding: 0 10px 0 10px;
+     }
+     .btn-group {
+       margin-left: -10px;
+       label {
+         border-radius: 0 !important;
+         margin: 1px 5px;
+         padding: 2px 5px;
+         font-size: 12px;
+       }
+       .btn {
+         border: 1px solid #ccc;
+       }
+       .btn.active, .btn:hover {
+         margin-top: 0px !important;
+         background: #fff !important;
+         border: 2px solid red !important;
+       }
+       .btn.focus {
+         outline: 0 !important;
+       }
+     }
+   }
+   .cart_amount {
+     label {
+       color: #999;
+       font-size: 12px;
+       padding: 0 10px 0 10px;
+     }
+     font-size: 12px;
+     color: #888;
+     margin: 10px 0 20px;
+     input {
+       width: 50px;
+       display: inline-block;
+       border-radius: 0 !important;
+     }
+     span {
+       color: #999;
+       font-size: 12px;
+       padding-left: 10px;
+     }
+   }
+   .buttons {
+     padding-left: 44px;
+   }
+
+   .product-detail  {
+     .nav.nav-tabs > li > a {
+       border-radius: 0 !important;
+     }
+     margin: 20px 0;
+     .tab-content {
+       border: 1px solid #eee;
+       padding: 20px;
+     }
+   }
+ }
diff --git a/resources/views/products/index.blade.php b/resources/views/products/index.blade.php
@@ -34,9 +34,15 @@
         <div class="col-3 product-item">
           <div class="product-content">
             <div class="top">
-              <div class="img"><img src="{{ $product->image_url }}" alt=""></div>
+              <div class="img">
+                <a href="{{ route('products.show', ['product' => $product->id]) }}">
+                  <img src="{{ $product->image_url }}" alt="">
+                </a>
+              </div>
               <div class="price"><b>￥</b>{{ $product->price }}</div>
-              <div class="title">{{ $product->title }}</div>
+              <div class="title">
+                <a href="{{ route('products.show', ['product' => $product->id]) }}">{{ $product->title }}</a>
+              </div>
             </div>
             <div class="bottom">
               <div class="sold_count">销量 <span>{{ $product->sold_count }}笔</span></div>

diff --git a/resources/views/products/show.blade.php b/resources/views/products/show.blade.php
@@ -0,0 +1,77 @@
+@extends('layouts.app')
+@section('title', $product->title)
+
+@section('content')
+<div class="row">
+<div class="col-lg-10 offset-lg-1">
+<div class="card">
+  <div class="card-body product-info">
+    <div class="row">
+      <div class="col-5">
+        <img class="cover" src="{{ $product->image_url }}" alt="">
+      </div>
+      <div class="col-7">
+        <div class="title">{{ $product->title }}</div>
+        <div class="price"><label>价格</label><em>￥</em><span>{{ $product->price }}</span></div>
+        <div class="sales_and_reviews">
+          <div class="sold_count">累计销量 <span class="count">{{ $product->sold_count }}</span></div>
+          <div class="review_count">累计评价 <span class="count">{{ $product->review_count }}</span></div>
+          <div class="rating" title="评分 {{ $product->rating }}">评分 <span class="count">{{ str_repeat('★', floor($product->rating)) }}{{ str_repeat('☆', 5 - floor($product->rating)) }}</span></div>
+        </div>
+        <div class="skus">
+          <label>选择</label>
+          <div class="btn-group btn-group-toggle" data-toggle="buttons">
+            @foreach($product->skus as $sku)
+              <label
+                  class="btn sku-btn"
+                  data-price="{{ $sku->price }}"
+                  data-stock="{{ $sku->stock }}"
+                  data-toggle="tooltip"
+                  title="{{ $sku->description }}"
+                  data-placement="bottom">
+                <input type="radio" name="skus" autocomplete="off" value="{{ $sku->id }}"> {{ $sku->title }}
+              </label>
+            @endforeach
+          </div>
+        </div>
+        <div class="cart_amount"><label>数量</label><input type="text" class="form-control form-control-sm" value="1"><span>件</span><span class="stock"></span></div>
+        <div class="buttons">
+          <button class="btn btn-success btn-favor">❤ 收藏</button>
+          <button class="btn btn-primary btn-add-to-cart">加入购物车</button>
+        </div>
+      </div>
+    </div>
+    <div class="product-detail">
+      <ul class="nav nav-tabs" role="tablist">
+        <li class="nav-item">
+          <a class="nav-link active" href="#product-detail-tab" aria-controls="product-detail-tab" role="tab" data-toggle="tab" aria-selected="true">商品详情</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#product-reviews-tab" aria-controls="product-reviews-tab" role="tab" data-toggle="tab" aria-selected="false">用户评价</a>
+        </li>
+      </ul>
+      <div class="tab-content">
+        <div role="tabpanel" class="tab-pane active" id="product-detail-tab">
+          {!! $product->description !!}
+        </div>
+        <div role="tabpanel" class="tab-pane" id="product-reviews-tab">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</div>
+@endsection
+
+@section('scriptsAfterJs')
+  <script>
+    $(document).ready(function () {
+      $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'});
+      $('.sku-btn').click(function () {
+        $('.product-info .price span').text($(this).data('price'));
+        $('.product-info .stock').text('库存：' + $(this).data('stock') + '件');
+      });
+    });
+  </script>
+@endsection
diff --git a/routes/web.php b/routes/web.php
@@ -13,6 +13,8 @@
 
 Route::redirect('/', '/products')->name('root');
 Route::get('products', 'ProductsController@index')->name('products.index');
+Route::get('products', 'ProductsController@index')->name('products.index');
+Route::get('products/{product}', 'ProductsController@show')->name('products.show');
 
 Auth::routes(['verify' => true]);