购物车页面

public/build/beike/shop/default/css/app.css

@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+[v-cloak] {
+  display: none;
+}
+
 .module-title {
   font-size: 1.5rem;
   text-align: center;

public/build/beike/shop/default/js/app.js

@@ -26,6 +26,7 @@ $(document).ready(function ($) {
 
     if ($(this).hasClass('bi-chevron-up')) {
       input.val(input.val() * 1 + 1);
+      input.get(0).dispatchEvent(new Event('input'));
       return;
     }
 
@@ -34,6 +35,7 @@ $(document).ready(function ($) {
     }
 
     input.val(input.val() * 1 - 1);
+    input.get(0).dispatchEvent(new Event('input'));
   });
 });
 

resources/beike/shop/default/css/global.scss

@@ -1,5 +1,9 @@
 @charset "UTF-8";
 
+[v-cloak] {
+  display: none;
+}
+
 .module-title {
   font-size: 1.5rem;
   text-align: center;

resources/beike/shop/default/js/app.js

@@ -10,6 +10,7 @@ $(document).ready(function ($) {
 
     if ($(this).hasClass('bi-chevron-up')) {
       input.val(input.val() * 1 + 1)
+      input.get(0).dispatchEvent(new Event('input'));
       return;
     }
 
@@ -18,5 +19,6 @@ $(document).ready(function ($) {
     }
 
     input.val(input.val() * 1 - 1)
+    input.get(0).dispatchEvent(new Event('input'));
   });
 });

themes/default/cart.blade.php

@@ -2,8 +2,14 @@
 
 @section('body-class', 'page-cart')
 
+@push('header')
+  <script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
+  <script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script>
+  <link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}">
+@endpush
+
 @section('content')
-  <div class="container">
+  <div class="container" id="app-cart" v-cloak>
     <nav aria-label="breadcrumb">
       <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -22,40 +28,44 @@
             <thead>
               <tr>
                 <th width="130">
-                  <input class="form-check-input" type="checkbox" value="" id="check-all">
+                  <input class="form-check-input" type="checkbox" value="" id="check-all" v-model="allSelected">
                   <label class="form-check-label ms-1" for="check-all">
                     全选
                   </label>
                 </th>
-                <th>商品</th>
+                <th width="230">商品</th>
                 <th>数量</th>
                 <th>小计</th>
-                <th class="align-right">操作</th>
+                <th class="text-end">操作</th>
               </tr>
             </thead>
             <tbody>
-              @foreach ($carts as $cart)
+              <tr v-for="product, index in products" :key="index">
-                <tr>
                 <td>
                   <div class="d-flex align-items-center p-image">
-                      <input class="form-check-input" type="checkbox" value="">
+                    <input class="form-check-input" type="checkbox" v-model="product.selected">
-                      <img src="http://fpoimg.com/100x100?bg_color=f3f3f3" class="img-fluid">
+                    <img :src="product.image" class="img-fluid">
                   </div>
                 </td>
                 <td>
-                    <div class="name mb-1 fw-bold">Camera Canon EOS M50 Kit</div>
+                  <div class="name mb-1 fw-bold" v-text="product.name"></div>
-                    <div class="price">$1156.00</div>
+                  <div class="price">@{{ product.price }}</div>
                 </td>
                 <td>
-                    @include('shared.quantity', ['quantity'=>'2'])
+                  <div class="quantity-wrap">
+                    <input type="text" class="form-control" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model.number="product.quantity" name="quantity" minimum="1">
+                    <div class="right">
+                      <i class="bi bi-chevron-up"></i>
+                      <i class="bi bi-chevron-down"></i>
+                    </div>
+                  </div>
                 </td>
                 <td>$1156.00</td>
-                  <td>
+                <td class="text-end">
                   <button type="button" class="btn btn-link btn-sm">删除</button><br>
                   <button type="button" class="btn btn-link btn-sm">加入收藏</button>
                 </td>
               </tr>
-              @endforeach
             </tbody>
           </table>
         </div>
@@ -65,10 +75,11 @@
           <div class="card-header"><h5 class="mb-0">商品总计</h5></div>
           <div class="card-body">
             <ul class="list-group list-group-flush">
-              <li class="list-group-item"><span>总数</span><span>20</span></li>
+              <li class="list-group-item"><span>总数</span><span>@{{ total_quantity }}</span></li>
-              <li class="list-group-item border-bottom-0"><span>总价</span><span class="total-price">¥223.33</span></li>
+              <li class="list-group-item border-bottom-0"><span>总价</span><span class="total-price">@{{ amount_format }}</span></li>
               <li class="list-group-item d-grid gap-2 mt-3 border-bottom-0">
-                <a href="{{ shop_route('checkout.index', 'checkout') }}" class="btn btn-primary">去结账</a>
+                {{-- <a href="{{ shop_route('checkout.index', 'checkout') }}" class="btn btn-primary">去结账</a> --}}
+                <button type="button" class="btn btn-primary" @click="checkedBtnToCheckout">去结账</button>
               </li>
             </ul>
           </div>
@@ -76,4 +87,51 @@
       </div>
     </div>
   </div>
+
 @endsection
+
+@push('add-scripts')
+  <script>
+    var app = new Vue({
+      el: "#app-cart",
+      // delimiters: ['${', '}'],
+      components: {},
+      data: {
+        products: @json($carts),
+        total_quantity: @json($quantity),
+        amount: @json($amount),
+        amount_format: @json($amount_format),
+      },
+      // 计算属性
+      computed: {
+        allSelected: {
+          get() {
+            return !this.products.length ? false : this.products.every(s => s.selected)
+          },
+          set(val) {
+            return this.products.map(e => e.selected = val)
+          }
+        },
+      },
+      // 侦听器
+      watch: {},
+      // 组件方法
+      methods: {
+        checkedBtnToCheckout() {
+          if (!this.products.some(e => e.selected)) {
+            layer.msg('请选择至少一个商品', ()=>{})
+            return
+          }
+        }
+      },
+      // 实例被挂载后调用
+      mounted () {
+        if (this.products.length) {
+          this.products.forEach((e) => {
+            this.$set(e, 'selected', false)
+          })
+        }
+      },
+    })
+  </script>
+@endpush

themes/default/layout/master.blade.php

@@ -21,5 +21,7 @@
   @yield('content')
 
   @include('layout.footer')
+
+  @stack('add-scripts')
 </body>
 </html>