From 80d68c811ab4998c85ef80cdabb06d55ad31cf6c Mon Sep 17 00:00:00 2001 From: pushuo <229102104@qq.com> Date: Thu, 11 Aug 2022 19:30:32 +0800 Subject: [PATCH] wip --- .../Http/Controllers/ProductController.php | 3 + public/build/beike/admin/css/app.css | 30 ++++ public/build/beike/admin/js/app.js | 129 ++++++++++++++++-- resources/beike/admin/css/_autocomplete.scss | 29 ++++ resources/beike/admin/css/app.scss | 1 + resources/beike/admin/js/app.js | 5 +- resources/beike/admin/js/common.js | 128 +++++++++++++++++ .../builder/component/link_selector.blade.php | 2 +- .../views/pages/products/form/form.blade.php | 46 ++++--- 9 files changed, 345 insertions(+), 28 deletions(-) create mode 100644 resources/beike/admin/css/_autocomplete.scss diff --git a/beike/Admin/Http/Controllers/ProductController.php b/beike/Admin/Http/Controllers/ProductController.php index e4122552..a8e5a23a 100644 --- a/beike/Admin/Http/Controllers/ProductController.php +++ b/beike/Admin/Http/Controllers/ProductController.php @@ -8,6 +8,7 @@ use Beike\Repositories\ProductRepo; use Beike\Repositories\CategoryRepo; use Beike\Repositories\LanguageRepo; use Beike\Admin\Services\ProductService; +use Beike\Admin\Repositories\TaxClassRepo; use Beike\Admin\Http\Resources\ProductResource; class ProductController extends Controller @@ -72,6 +73,7 @@ class ProductController extends Controller if ($product->id) { $descriptions = $product->descriptions->keyBy('locale'); $categoryIds = $product->categories->pluck('id')->toArray(); + $product->load('brand'); } $data = [ @@ -79,6 +81,7 @@ class ProductController extends Controller 'descriptions' => $descriptions ?? [], 'category_ids' => $categoryIds ?? [], 'languages' => LanguageRepo::all(), + 'tax_classes' => TaxClassRepo::getList(), 'source' => [ 'categories' => CategoryRepo::flatten(locale()), ], diff --git a/public/build/beike/admin/css/app.css b/public/build/beike/admin/css/app.css index 2469473f..6215bb7d 100644 --- a/public/build/beike/admin/css/app.css +++ b/public/build/beike/admin/css/app.css @@ -1017,3 +1017,33 @@ body.page-product-form .selectable-variants .variants-wrap > div .name { body.page-product-form .selectable-variants .variants-wrap > div .name + .btn-link { padding-left: 5px; } + +.autocomplete-suggestions { + border: 1px solid rgb(126, 116, 116); + background: #FFF; + overflow: auto; +} + +.autocomplete-suggestion { + padding: 2px 5px; + white-space: nowrap; + overflow: hidden; +} + +.autocomplete-selected { + background: #F0F0F0; +} + +.autocomplete-suggestions strong { + font-weight: normal; + color: #3399FF; +} + +.autocomplete-group { + padding: 2px 5px; +} + +.autocomplete-group strong { + display: block; + border-bottom: 1px solid #000; +} diff --git a/public/build/beike/admin/js/app.js b/public/build/beike/admin/js/app.js index 4e5fc6d8..ec9a70af 100644 --- a/public/build/beike/admin/js/app.js +++ b/public/build/beike/admin/js/app.js @@ -2070,6 +2070,7 @@ var _document$querySelect; window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"]; window.bk = _common__WEBPACK_IMPORTED_MODULE_1__["default"]; +_common__WEBPACK_IMPORTED_MODULE_1__["default"].autocomplete(); var base = document.querySelector('base').href; var asset = document.querySelector('meta[name="asset"]').content; var editor_language = ((_document$querySelect = document.querySelector('meta[name="editor_language"]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.content) || 'zh_cn'; @@ -2093,14 +2094,8 @@ $(document).ready(function ($) { headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, - beforeSend: function beforeSend() { - layer.load(2, { - shade: [0.3, '#fff'] - }); - }, - complete: function complete() { - layer.closeAll('loading'); - }, + // beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); }, + // complete: function() { layer.closeAll('loading'); }, error: function error(xhr, ajaxOptions, thrownError) { if (xhr.responseJSON.message) { layer.msg(xhr.responseJSON.message, function () {}); @@ -2207,6 +2202,124 @@ __webpack_require__.r(__webpack_exports__); fn.apply(_this, _arguments); }, delay); }; + }, + autocomplete: function autocomplete() { + $.fn.autocomplete = function (option) { + return this.each(function () { + this.timer = null; + this.items = new Array(); + $.extend(this, option); + $(this).attr('autocomplete', 'off'); // Focus + + $(this).on('focus', function () { + this.request(); + }); // Blur + + $(this).on('blur', function () { + setTimeout(function (object) { + object.hide(); + }, 200, this); + }); // Keydown + + $(this).on('keydown', function (event) { + switch (event.keyCode) { + case 27: + // escape + this.hide(); + break; + + default: + this.request(); + break; + } + }); // Click + + this.click = function (event) { + event.preventDefault(); + var value = $(event.target).parent().attr('data-value'); + + if (value && this.items[value]) { + this.select(this.items[value]); + } + }; // Show + + + this.show = function () { + var pos = $(this).position(); + $(this).siblings('ul.dropdown-menu').css({ + top: pos.top + $(this).outerHeight(), + left: pos.left + }); + $(this).siblings('ul.dropdown-menu').show(); + }; // Hide + + + this.hide = function () { + $(this).siblings('ul.dropdown-menu').hide(); + }; // Request + + + this.request = function () { + clearTimeout(this.timer); + this.timer = setTimeout(function (object) { + object.source($(object).val(), $.proxy(object.response, object)); + }, 200, this); + }; // Response + + + this.response = function (json) { + var hasFocus = $(this).is(':focus'); + if (!hasFocus) return; + var html = ''; + + if (json.length) { + for (var i = 0; i < json.length; i++) { + this.items[json[i]['value']] = json[i]; + } + + for (var i = 0; i < json.length; i++) { + if (!json[i]['category']) { + html += '
  • ' + json[i]['label'] + '
    • '; + } + } // Get all the ones with a categories + + + var category = new Array(); + + for (var i = 0; i < json.length; i++) { + if (json[i]['category']) { + if (!category[json[i]['category']]) { + category[json[i]['category']] = new Array(); + category[json[i]['category']]['name'] = json[i]['category']; + category[json[i]['category']]['item'] = new Array(); + } + + category[json[i]['category']]['item'].push(json[i]); + } + } + + for (var i in category) { + html += '
  • ' + category[i]['name'] + '
    • '; + + for (j = 0; j < category[i]['item'].length; j++) { + html += '
  •    ' + category[i]['item'][j]['label'] + '
    • '; + } + } + } + + if (html) { + this.show(); + } else { + this.hide(); + } + + $(this).siblings('ul.dropdown-menu').html(html); + }; + + $(this).after(''); + $(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this)); + }); + }; } }); diff --git a/resources/beike/admin/css/_autocomplete.scss b/resources/beike/admin/css/_autocomplete.scss new file mode 100644 index 00000000..ac510209 --- /dev/null +++ b/resources/beike/admin/css/_autocomplete.scss @@ -0,0 +1,29 @@ +.autocomplete-suggestions { + border: 1px solid rgb(126, 116, 116); + background: #FFF; + overflow: auto; +} + +.autocomplete-suggestion { + padding: 2px 5px; + white-space: nowrap; + overflow: hidden; +} + +.autocomplete-selected { + background: #F0F0F0; +} + +.autocomplete-suggestions strong { + font-weight: normal; + color: #3399FF; +} + +.autocomplete-group { + padding: 2px 5px; +} + +.autocomplete-group strong { + display: block; + border-bottom: 1px solid #000; +} diff --git a/resources/beike/admin/css/app.scss b/resources/beike/admin/css/app.scss index 7470fed1..4504dd43 100644 --- a/resources/beike/admin/css/app.scss +++ b/resources/beike/admin/css/app.scss @@ -22,3 +22,4 @@ $primary: #fd560f; @import 'element-ui'; @import 'login'; @import 'page-product'; +@import 'autocomplete' diff --git a/resources/beike/admin/js/app.js b/resources/beike/admin/js/app.js index c1c68744..4c0255c5 100644 --- a/resources/beike/admin/js/app.js +++ b/resources/beike/admin/js/app.js @@ -2,6 +2,7 @@ import http from "../../../js/http"; window.$http = http; import common from "./common"; window.bk = common; +common.autocomplete(); const base = document.querySelector('base').href; const asset = document.querySelector('meta[name="asset"]').content; @@ -25,8 +26,8 @@ if (typeof Vue != 'undefined') { $(document).ready(function ($) { $.ajaxSetup({ headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, - beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); }, - complete: function() { layer.closeAll('loading'); }, + // beforeSend: function() { layer.load(2, {shade: [0.3,'#fff'] }); }, + // complete: function() { layer.closeAll('loading'); }, error: function(xhr, ajaxOptions, thrownError) { if (xhr.responseJSON.message) { layer.msg(xhr.responseJSON.message,() => {}) diff --git a/resources/beike/admin/js/common.js b/resources/beike/admin/js/common.js index e064ba10..9cfea54b 100644 --- a/resources/beike/admin/js/common.js +++ b/resources/beike/admin/js/common.js @@ -37,4 +37,132 @@ export default { }, delay); } }, + + autocomplete() { + $.fn.autocomplete = function(option) { + return this.each(function() { + this.timer = null; + this.items = new Array(); + + $.extend(this, option); + + $(this).attr('autocomplete', 'off'); + + // Focus + $(this).on('focus', function() { + this.request(); + }); + + // Blur + $(this).on('blur', function() { + setTimeout(function(object) { + object.hide(); + }, 200, this); + }); + + // Keydown + $(this).on('keydown', function(event) { + switch(event.keyCode) { + case 27: // escape + this.hide(); + break; + default: + this.request(); + break; + } + }); + + // Click + this.click = function(event) { + event.preventDefault(); + + let value = $(event.target).parent().attr('data-value'); + + if (value && this.items[value]) { + this.select(this.items[value]); + } + } + + // Show + this.show = function() { + var pos = $(this).position(); + + $(this).siblings('ul.dropdown-menu').css({ + top: pos.top + $(this).outerHeight(), + left: pos.left + }); + + $(this).siblings('ul.dropdown-menu').show(); + } + + // Hide + this.hide = function() { + $(this).siblings('ul.dropdown-menu').hide(); + } + + // Request + this.request = function() { + clearTimeout(this.timer); + + this.timer = setTimeout(function(object) { + object.source($(object).val(), $.proxy(object.response, object)); + }, 200, this); + } + + // Response + this.response = function(json) { + let hasFocus = $(this).is(':focus'); + if (!hasFocus) return; + + var html = ''; + + if (json.length) { + for (var i = 0; i < json.length; i++) { + this.items[json[i]['value']] = json[i]; + } + + for (var i = 0; i < json.length; i++) { + if (!json[i]['category']) { + html += '
  • ' + json[i]['label'] + '
    • '; + } + } + + // Get all the ones with a categories + var category = new Array(); + + for (var i = 0; i < json.length; i++) { + if (json[i]['category']) { + if (!category[json[i]['category']]) { + category[json[i]['category']] = new Array(); + category[json[i]['category']]['name'] = json[i]['category']; + category[json[i]['category']]['item'] = new Array(); + } + + category[json[i]['category']]['item'].push(json[i]); + } + } + + for (var i in category) { + html += '
  • ' + category[i]['name'] + '
    • '; + + for (j = 0; j < category[i]['item'].length; j++) { + html += '
  •    ' + category[i]['item'][j]['label'] + '
    • '; + } + } + } + + if (html) { + this.show(); + } else { + this.hide(); + } + + $(this).siblings('ul.dropdown-menu').html(html); + } + + $(this).after(''); + $(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this)); + }); + } + }, } \ No newline at end of file diff --git a/resources/beike/admin/views/pages/design/builder/component/link_selector.blade.php b/resources/beike/admin/views/pages/design/builder/component/link_selector.blade.php index 5cd16d03..8170c3d4 100644 --- a/resources/beike/admin/views/pages/design/builder/component/link_selector.blade.php +++ b/resources/beike/admin/views/pages/design/builder/component/link_selector.blade.php @@ -138,7 +138,7 @@ {type: 'custom',label: '自定义'} ], static: [ - {name: '个人中心', value: '{{ shop_route('account.index') }}', route: 'account.index'}, + {name: '个人中心', value: 'account.index'}, ], link: null, keyword: '', diff --git a/resources/beike/admin/views/pages/products/form/form.blade.php b/resources/beike/admin/views/pages/products/form/form.blade.php index 4056d748..10b3874e 100644 --- a/resources/beike/admin/views/pages/products/form/form.blade.php +++ b/resources/beike/admin/views/pages/products/form/form.blade.php @@ -55,22 +55,28 @@
    开启多规格并且多规格配置了图片时，这里的图片将作为多规格的公用图片，展示在其后面
    {{-- --}} - - - + + + + + + + - @foreach ($source['categories'] as $_category) +
    + @foreach ($source['categories'] as $_category)
    id, $category_ids) ? 'checked' : '' }}> + id="category-{{ $_category->id }}" {{ in_array($_category->id, $category_ids) ? 'checked' : '' }}>
    - @endforeach + @endforeach +
    @@ -240,7 +246,7 @@ - + @endsection - @push('footer') @endpush