From f78d8f62141ae8d4053b20ec120deae65ee535b6 Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Mon, 18 Jul 2022 20:28:06 +0800
Subject: [PATCH] wip

---
 .../Admin/View/DesignBuilders/TabProduct.php  |  2 +-
 .../pages/design/module/tab_product.blade.php | 59 ++++++++++++-------
 themes/default/design/tab_product.blade.php   | 44 ++++++++++++--
 3 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/beike/Admin/View/DesignBuilders/TabProduct.php b/beike/Admin/View/DesignBuilders/TabProduct.php
index be74674e..91ff0123 100644
--- a/beike/Admin/View/DesignBuilders/TabProduct.php
+++ b/beike/Admin/View/DesignBuilders/TabProduct.php
@@ -33,7 +33,7 @@ class TabProduct extends Component
     public function render(): View
     {
         $data['register'] = [
-            'code' => 'product',
+            'code' => 'tab_product',
             'sort' => 0,
             'name' => '选项卡商品',
             'icon' => '&#xe634;',
diff --git a/resources/beike/admin/views/pages/design/module/tab_product.blade.php b/resources/beike/admin/views/pages/design/module/tab_product.blade.php
index 4388feb7..94cf4fdd 100644
--- a/resources/beike/admin/views/pages/design/module/tab_product.blade.php
+++ b/resources/beike/admin/views/pages/design/module/tab_product.blade.php
@@ -132,33 +132,34 @@ Vue.component('module-editor-product-tab', {
       if (!this.module.tabs[0].products.length) return;
       this.loading = true;
 
-      $.ajax({
-        url: 'index.php?route=extension/theme/default/page/module/product/productsByIds',
-        data: {product_ids: this.module.tabs[this.editableTabsValue].products},
-        type: 'post',
-        dataType: 'json',
-        success: function (json) {
-          if (json) {
-            that.loading = false;
-            that.productData = json;
-          }
-        }
-      });
+      http://beike.test/panel/products/names?product_ids=1,2,3
+
+      $http.get('panel/products/names', {product_ids: this.module.tabs[this.editableTabsValue].products}, {hload: true}).then((res) => {
+        console.log(res)
+      })
+
+      // $.ajax({
+      //   url: 'index.php?route=extension/theme/default/page/module/product/productsByIds',
+      //   data: {product_ids: this.module.tabs[this.editableTabsValue].products},
+      //   type: 'post',
+      //   dataType: 'json',
+      //   success: function (json) {
+      //     if (json) {
+      //       that.loading = false;
+      //       that.productData = json;
+      //     }
+      //   }
+      // });
     },
 
     querySearch(keyword, cb) {
       if (!keyword) {
         return;
       }
-      $.ajax({
-        url: 'index.php?route=extension/theme/default/page/module/product/autocomplete&filter_name=' + encodeURIComponent(keyword),
-        dataType: 'json',
-        success: function (json) {
-          if (json) {
-            cb(json);
-          }
-        }
-      });
+
+      $http.get('products/autocomplete', {name: keyword}, null).then((res) => {
+        cb(res);
+      })
     },
 
     handleSelect(item) {
@@ -195,4 +196,20 @@ Vue.component('module-editor-product-tab', {
     }
   }
 });
+
+setTimeout(() => {
+  const make = {
+    style: {
+      background_color: ''
+    },
+    floor: languagesFill(''),
+    tabs: [{title: languagesFill('标题'), products: []}],
+    title: languagesFill('模块标题'),
+  }
+
+  let register = @json($register);
+
+  register.make = make;
+  app.source.modules.push(register)
+}, 100)
 </script>
diff --git a/themes/default/design/tab_product.blade.php b/themes/default/design/tab_product.blade.php
index 1b668ee4..46bbd2ee 100644
--- a/themes/default/design/tab_product.blade.php
+++ b/themes/default/design/tab_product.blade.php
@@ -9,16 +9,50 @@
     </div>
   </div>
   @endif
+
   <div class="module-info">
-    <div class="module-title">推荐品牌模块</div>
+    <div class="module-title">推荐商品模块</div>
     <div class="container">
-      <div class="row">
-        @for ($i = 0; $i < 8; $i++)
-        <div class="col-6 col-md-4 col-lg-3">
-          <div class="brand-item"><img src="{{ asset('image/default/banner-1.png') }}" class="img-fluid"></div>
+      @if ($tabs)
+        <div class="nav justify-content-center mb-3">
+          @foreach ($tabs as $key => $category)
+          <a class="nav-link {{ $loop->first ? 'active' : '' }}" href="#tab-product-{{ $loop->index }}" data-bs-toggle="tab">{{ $key }}</a>
+          @endforeach
+        </div>
+        <div class="tab-content">
+          @foreach ($tabs as $products)
+          <div class="tab-pane fade show {{ $loop->first ? 'active' : '' }}" id="tab-product-{{ $loop->index }}">
+            <div class="row">
+              @foreach ($products as $product)
+              <div class="col-6 col-md-4 col-lg-3">
+                @include('shared.product')
+              </div>
+              @endforeach
+            </div>
+          </div>
+          @endforeach
+        </div>
+      @else
+      <div class="nav justify-content-center mb-3">
+        @for ($i = 0; $i < 2; $i++)
+        <a class="nav-link {{ $loop->first ? 'active' : '' }}" href="#tab-product-{{ $loop->index }}" data-bs-toggle="tab">标题</a>
+        @endfor
+      </div>
+      <div class="tab-content">
+        @for ($i = 0; $i < 2; $i++)
+        <div class="tab-pane fade show {{ $loop->first ? 'active' : '' }}" id="tab-product-{{ $loop->index }}">
+          <div class="row">
+            @for ($s = 0; $s < 8; $s++)
+            <div class="col-6 col-md-4 col-lg-3">
+              @include('shared.product')
+              商品
+            </div>
+            @endfor
+          </div>
         </div>
         @endfor
       </div>
+      @endif
     </div>
   </div>
 </section>