优化后台商品列表

beike/Admin/Http/Controllers/ProductController.php

@@ -17,13 +17,21 @@ class ProductController extends Controller
 
     public function index(Request $request)
     {
-        if ($request->expectsJson()) {
+        $product = ProductRepo::list($request->all());
-            $products = ProductRepo::list($request->all());
+        // if ($request->expectsJson()) {
-            return ProductResource::collection($products);
+            // return ProductResource::collection($products);
-        }
+        // }
+        // dd($product->getItems());
+        // dd(ProductResource::collection($productitem));
         $data = [
             'categories' => CategoryRepo::flatten(locale()),
+            'product' => $product,
         ];
+
+        if ($request->expectsJson()) {
+            return json_success('成功', $product);
+        }
+
         return view('admin::pages.products.index', $data);
     }
 

public/build/beike/admin/js/app.js

@@ -2352,6 +2352,16 @@ __webpack_require__.r(__webpack_exports__);
     }
 
     return str.substr(0, length);
+  },
+  getQueryString: function getQueryString(name, defaultValue) {
+    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+    var r = window.location.search.substr(1).match(reg);
+
+    if (r != null) {
+      return decodeURIComponent(r[2]);
+    }
+
+    return defaultValue || '';
   }
 });
 

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

@@ -2213,7 +2213,7 @@ $(function () {
     $('#offcanvas-search-top input').keydown(function (e) {
       if (e.keyCode == 13) {
         if ($(this).val() != '') {
-          location.href = 'products/search?name=' + $(this).val();
+          location.href = 'products/keyword?name=' + $(this).val();
         } // $('#offcanvas-search-top .btn-search').click();
 
       }

resources/beike/admin/js/common.js

@@ -1,5 +1,5 @@
 export default {
-   fileManagerIframe(callback) {
+  fileManagerIframe(callback) {
     const base = document.querySelector('base').href;
 
     layer.open({
@@ -38,4 +38,13 @@ export default {
     for (; str.length < length; str += Math.random().toString(36).substr(2));
     return str.substr(0, length);
   },
+
+  getQueryString(name, defaultValue) {
+    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+    const r = window.location.search.substr(1).match(reg);
+    if (r != null) {
+      return decodeURIComponent(r[2]);
+    }
+    return defaultValue || '';
+  }
 }

resources/beike/admin/views/pages/products/index.blade.php

@@ -63,8 +63,8 @@
           </div>
         </div>
 
-        <template v-if="items.length">
+        <template v-if="product.data.length">
-          <table class="table table-hover" v-loading="loading">
+          <table class="table table-hover">
             <thead>
               <tr>
                 <th></th>
@@ -92,32 +92,36 @@
                   </div>
                 </th>
                 <th>上架</th>
-                <th>操作</th>
+                <th class="text-end">操作</th>
               </tr>
             </thead>
-            <tr v-for="(item, index) in items" :key="item.id">
+            <tr v-for="(item, index) in product.data" :key="item.id">
               <td>
                 <input type="checkbox" :value="item.id" v-model="selected" />
               </td>
               <td>@{{ item.id }}</td>
-              <td><div class="wh-60"><img :src="item.images[0] || 'image/placeholder.png'" class="img-fluid"></div></td>
+              <td>
+                <div class="wh-60"><img :src="item.images[0] || 'image/placeholder.png'" class="img-fluid"></div>
+              </td>
               <td>@{{ item.name || '无名称' }}</td>
               <td>@{{ item.price_formatted }}</td>
               <td>@{{ item.created_at }}</td>
               <td>@{{ item.position }}</td>
               <td>@{{ item.active ? '上架' : '下架' }}</td>
-              <td>
+              <td width="140" class="text-end">
-                <a :href="item.url_edit" class="btn btn-outline-info btn-sm">编辑</a>
+                <a :href="item.url_edit" class="btn btn-outline-dark btn-sm">编辑</a>
                 <template>
-                  <a v-if="item.deleted_at == ''" href="javascript:void(0)" class="btn btn-outline-danger btn-sm" @click.prevent="deleteProduct(index)">删除</a>
+                  <a v-if="item.deleted_at == ''" href="javascript:void(0)" class="btn btn-outline-danger btn-sm"
-                  <a v-else href="javascript:void(0)" @click.prevent="restoreProduct(index)">恢复</a>
+                    @click.prevent="deleteProduct(index)">删除</a>
+                  <a v-else href="javascript:void(0)" class="btn btn-outline-secondary btn-sm"
+                    @click.prevent="restoreProduct(index)">恢复</a>
                 </template>
               </td>
             </tr>
           </table>
 
-          <el-pagination layout="prev, pager, next" background :page-size="perPage" :current-page.sync="page"
+          <el-pagination layout="prev, pager, next" background :page-size="product.per_page" :current-page.sync="page"
-            :total="totals"></el-pagination>
+          :total="product.total"></el-pagination>
         </template>
 
         <p v-else>无商品</p>
@@ -131,23 +135,19 @@
     new Vue({
       el: '#product-app',
       data: {
+        product: @json($product),
         filter: {
-          keyword: @json(request('keyword') ?? ''),
+          keyword: bk.getQueryString('keyword'),
-          category_id: @json(request('category_id') ?? ''),
+          category_id: bk.getQueryString('category_id'),
-          sku: @json(request('sku') ?? ''),
+          sku: bk.getQueryString('sku'),
-          active: @json(request('active') ?? ''),
+          active: bk.getQueryString('active'),
         },
-        items: [],
         selected: [],
-        page: @json((int) request('page') ?? 1),
+        page: bk.getQueryString('page', 1),
-        totals: 0,
+        perPage: bk.getQueryString('per_page', 20),
-        perPage: @json((int) (request('per_page') ?? 20)),
+        orderBy: bk.getQueryString('order_by', 'products.id:desc'),
-        loading: false,
-        orderBy: @json(request('order_by', 'products.id:desc')),
-      },
-      mounted: function() {
-        this.load();
       },
+
       computed: {
         url: function() {
           let filter = {};
@@ -174,60 +174,48 @@
       },
       watch: {
         page: function() {
-          this.load();
+          this.loadData();
         },
+
         orderBy: function() {
-          this.load();
+          this.loadData();
         }
       },
       methods: {
-        load: function() {
+        loadData: function() {
           const url = this.url;
-          window.history.pushState('', '', url);
+          // window.history.pushState('', '', url);
-          this.loading = true;
+          $http.get(url).then((res) => {
-          axios.get(url).then(response => {
+            this.product = res.data;
-            this.loading = false;
+          })
-            this.items = response.data.data;
-            this.totals = response.data.meta.total;
-          }).catch(error => {
-            // this.$message.error(error.response.data.message);
-          });
         },
 
         search: function() {
           this.page = 1;
-          this.load();
+          this.loadData();
         },
 
         deleteProduct: function(index) {
-          const product = this.items[index];
+          const product = this.product.data[index];
 
           this.$confirm('确认要删除选中的商品吗？', '删除商品', {
-            // confirmButtonText: '确定',
-            // cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
-            axios.delete('products/' + product.id).then(response => {
+            $http.delete('products/' + product.id).then((res) => {
               location.reload();
-            }).catch(error => {
+            })
-              // this.$message.error(error.response.data.message);
-            });
           });
         },
 
         restoreProduct: function(index) {
-          const product = this.items[index];
+          const product = this.product.data[index];
 
           this.$confirm('确认要恢复选中的商品吗？', '恢复商品', {
             type: 'warning'
           }).then(() => {
-            axios.put('products/restore', {
+            $http.put('products/restore', {id: product.id}).then((res) => {
-              id: product.id
-            }).then(response => {
               location.reload();
-            }).catch(error => {
+            })
-              // this.$message.error(error.response.data.message);
-            });
           });
         }
       }

resources/beike/shop/default/js/header.js

@@ -6,7 +6,7 @@ $(function() {
     $('#offcanvas-search-top input').keydown(function (e) {
       if (e.keyCode == 13) {
         if ($(this).val() != '') {
-          location.href = 'products/search?name=' + $(this).val();
+          location.href = 'products/keyword?name=' + $(this).val();
         }
         // $('#offcanvas-search-top .btn-search').click();
       }