diff --git a/beike/Admin/Http/Controllers/ProductController.php b/beike/Admin/Http/Controllers/ProductController.php index a34e287f..b855f5ef 100644 --- a/beike/Admin/Http/Controllers/ProductController.php +++ b/beike/Admin/Http/Controllers/ProductController.php @@ -6,6 +6,7 @@ use Beike\Admin\Http\Resources\ProductResource; use Beike\Admin\Repositories\CategoryRepo; use Beike\Models\Product; use Beike\Admin\Services\ProductService; +use Beike\Repositories\LanguageRepo; use Beike\Repositories\ProductRepo; use Illuminate\Http\Request; @@ -73,6 +74,7 @@ class ProductController extends Controller 'product' => $product, 'descriptions' => $descriptions ?? [], 'category_ids' => $categoryIds ?? [], + 'languages' => LanguageRepo::all(), 'source' => [ 'categories' => CategoryRepo::flatten(locale()), ], diff --git a/beike/Shop/Http/Controllers/ProductController.php b/beike/Shop/Http/Controllers/ProductController.php index d04a7d42..d4452bf5 100644 --- a/beike/Shop/Http/Controllers/ProductController.php +++ b/beike/Shop/Http/Controllers/ProductController.php @@ -16,7 +16,7 @@ class ProductController extends Controller $data = [ 'product' => (new ProductDetail($product))->jsonSerialize(), ]; -dd($data); + return view('product', $data); } } diff --git a/public/build/beike/admin/css/app.css b/public/build/beike/admin/css/app.css index 7799b29c..7bf5aef8 100644 --- a/public/build/beike/admin/css/app.css +++ b/public/build/beike/admin/css/app.css @@ -34,6 +34,17 @@ body { font-size: 12px; } +.file-manager-box .layui-layer-title { + background-color: #293042; + color: #fff; + border-color: #404e72; +} +.file-manager-box .layui-layer-ico { + background: url("/image/close.png") no-repeat; + background-size: cover; + background-position: center center; +} + .main-content { display: flex; transition: margin-left 0.25s ease-in-out, left 0.25s ease-in-out, margin-right 0.25s ease-in-out, right 0.25s ease-in-out; @@ -537,3 +548,129 @@ body.page-login .btn:not(.btn-link):hover { transform: scale(1.02); color: #fff; } + +body.page-product-form .variants-producr-img { + width: 50px; + height: 50px; + border-radius: 2px; + border: 1px solid #eee; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} +body.page-product-form .variant-value-img { + width: 30px; + height: 30px; + border-radius: 2px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} +body.page-product-form .selectable-variants div[id^=selectable-variant-] { + border: 1px solid #eee; + border-radius: 4px; + margin-bottom: 10px; +} +body.page-product-form .selectable-variants .title { + margin-bottom: 12px; + display: flex; + align-items: center; + padding: 4px 10px; + background: #f5f5f5; + justify-content: space-between; +} +body.page-product-form .selectable-variants .title:hover .btn-link { + display: block; +} +body.page-product-form .selectable-variants .title > div { + display: flex; + align-items: center; +} +body.page-product-form .selectable-variants .title b { + border-right: 1px solid #f4f4f4; + padding-right: 10px; +} +body.page-product-form .selectable-variants .title .btn-link { + padding: 3px 12px; + display: none; +} +body.page-product-form .selectable-variants .variants-wrap { + padding: 0 10px; + display: flex; + flex-wrap: wrap; +} +body.page-product-form .selectable-variants .variants-wrap > div { + border: 1px solid #eee; + margin-right: 10px; + display: flex; + position: relative; + margin-bottom: 10px; + padding: 4px 6px; + cursor: pointer; + border-radius: 2px; + align-items: center; +} +body.page-product-form .selectable-variants .variants-wrap > div:active { + background-color: #f5f5f5; +} +body.page-product-form .selectable-variants .variants-wrap > div .value-img { + line-height: 1; + margin-right: 3px; +} +body.page-product-form .selectable-variants .variants-wrap > div .value-img a { + width: 26px; + display: flex; + height: 26px; + margin-right: 5px; +} +body.page-product-form .selectable-variants .variants-wrap > div:hover { + border-color: #fd560f; +} +body.page-product-form .selectable-variants .variants-wrap > div:hover .btn-remove { + display: block; +} +body.page-product-form .selectable-variants .variants-wrap > div .btn-remove { + position: absolute; + top: -9px; + right: -7px; + cursor: pointer; + font-size: 17px; + display: none; + background: #fff; + line-height: 1; +} +body.page-product-form .selectable-variants .variants-wrap > div .btn-remove:hover { + color: #d80000; +} +body.page-product-form .selectable-variants .variants-wrap > div .tools { + background: #fd560f; + top: -24px; + right: -31px; + display: none; + overflow: hidden; +} +body.page-product-form .selectable-variants .variants-wrap > div .tools .btn-link { + min-width: 27px; + text-align: center; + float: left; + padding: 0; + border: none; + display: inline-block; + color: #fff; + height: 30px; +} +body.page-product-form .selectable-variants .variants-wrap > div .tools .btn-link:hover { + background: #be3a02; +} +body.page-product-form .selectable-variants .variants-wrap > div .tools .btn-link.rank { + cursor: move; +} +body.page-product-form .selectable-variants .variants-wrap > div .name { + text-align: center; + min-width: 40px; +} +body.page-product-form .selectable-variants .variants-wrap > div .name + .btn-link { + padding-left: 5px; +} diff --git a/public/build/beike/admin/css/bootstrap.css b/public/build/beike/admin/css/bootstrap.css index 79aefd9b..37da4b4d 100644 --- a/public/build/beike/admin/css/bootstrap.css +++ b/public/build/beike/admin/css/bootstrap.css @@ -12301,7 +12301,7 @@ textarea.form-control-lg { align-items: center; justify-content: space-between; padding: 1rem 1rem; - border-bottom: 1px solid #dee2e6; + border-bottom: 1px solid #f3f3f3; border-top-left-radius: calc(0.3rem - 1px); border-top-right-radius: calc(0.3rem - 1px); } @@ -12328,7 +12328,7 @@ textarea.form-control-lg { align-items: center; justify-content: flex-end; padding: 0.75rem; - border-top: 1px solid #dee2e6; + border-top: 1px solid #f3f3f3; border-bottom-right-radius: calc(0.3rem - 1px); border-bottom-left-radius: calc(0.3rem - 1px); } @@ -13586,7 +13586,7 @@ textarea.form-control-lg { } .border { - border: 1px solid #dee2e6 !important; + border: 1px solid #f3f3f3 !important; } .border-0 { @@ -13594,7 +13594,7 @@ textarea.form-control-lg { } .border-top { - border-top: 1px solid #dee2e6 !important; + border-top: 1px solid #f3f3f3 !important; } .border-top-0 { @@ -13602,7 +13602,7 @@ textarea.form-control-lg { } .border-end { - border-right: 1px solid #dee2e6 !important; + border-right: 1px solid #f3f3f3 !important; } .border-end-0 { @@ -13610,7 +13610,7 @@ textarea.form-control-lg { } .border-bottom { - border-bottom: 1px solid #dee2e6 !important; + border-bottom: 1px solid #f3f3f3 !important; } .border-bottom-0 { @@ -13618,7 +13618,7 @@ textarea.form-control-lg { } .border-start { - border-left: 1px solid #dee2e6 !important; + border-left: 1px solid #f3f3f3 !important; } .border-start-0 { diff --git a/public/build/beike/admin/js/app.js b/public/build/beike/admin/js/app.js index fadd5431..4b41e279 100644 --- a/public/build/beike/admin/js/app.js +++ b/public/build/beike/admin/js/app.js @@ -2065,6 +2065,29 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _js_http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../js/http */ "./resources/js/http.js"); window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"]; +var base = document.querySelector('base').href; +$(document).on('click', '.open-file-manager', function (event) { + var $this = $(this); + layer.open({ + type: 2, + title: '图片管理器', + shadeClose: false, + skin: 'file-manager-box', + scrollbar: false, + shade: 0.4, + area: ['1060px', '680px'], + content: "".concat(base, "/file_manager"), + success: function success(layerInstance, index) { + var iframeWindow = window[layerInstance.find("iframe")[0]["name"]]; + + iframeWindow.callback = function (images) { + $this.find('img').prop('src', images[0].url); + $this.next('input').val(images[0].path); + $this.next('input')[0].dispatchEvent(new Event('input')); + }; + } + }); +}); $(document).ready(function ($) { $.ajaxSetup({ headers: { diff --git a/public/catalog/placeholder.png b/public/catalog/placeholder.png index 302403b4..2234f3ce 100644 Binary files a/public/catalog/placeholder.png and b/public/catalog/placeholder.png differ diff --git a/resources/beike/admin/css/_global.scss b/resources/beike/admin/css/_global.scss index 4f3bdfa7..b1fbadc0 100644 --- a/resources/beike/admin/css/_global.scss +++ b/resources/beike/admin/css/_global.scss @@ -27,6 +27,20 @@ body { font-size: 12px; } +.file-manager-box { + .layui-layer-title { + background-color: #293042; + color: #fff; + border-color: #404e72; + } + + .layui-layer-ico { + background: url('/image/close.png') no-repeat; + background-size: cover; + background-position: center center; + } +} + .main-content { display: flex; // flex-direction: column; diff --git a/resources/beike/admin/css/_page-product.scss b/resources/beike/admin/css/_page-product.scss new file mode 100644 index 00000000..1980cb05 --- /dev/null +++ b/resources/beike/admin/css/_page-product.scss @@ -0,0 +1,167 @@ +@charset "UTF-8"; + +body.page-product-form { + .variants-producr-img { + width: 50px; + height: 50px; + border-radius: 2px; + border: 1px solid #eee; + cursor: pointer; + display: flex; + align-items: center; // flex-start | center + justify-content: center; // flex-end | center | space-between + } + + .variant-value-img { + width: 30px; + height: 30px; + border-radius: 2px; + cursor: pointer; + display: flex; + align-items: center; // flex-start | center + justify-content: center; // flex-end | center | space-between + } + + .selectable-variants { + div[id^="selectable-variant-"] { + border: 1px solid #eee; + // padding: 10px; + border-radius: 4px; + margin-bottom: 10px; + } + + .title { + margin-bottom: 12px; + display: flex; + align-items: center; + padding: 4px 10px; + background: #f5f5f5; + justify-content: space-between; + &:hover { + .btn-link { + display: block; + } + } + + > div { + display: flex; + align-items: center; + } + + b { + border-right: 1px solid #f4f4f4; + padding-right: 10px; + } + + .btn-link { + padding: 3px 12px; + display: none; + } + } + + .variants-wrap { + // overflow: hidden; + padding: 0 10px; + // display: flex; + display: flex; + flex-wrap: wrap; + + > div { + border: 1px solid #eee; + // padding: 3px 8px; + margin-right: 10px; + // float: left; + display: flex; + position: relative; + margin-bottom: 10px; + padding: 4px 6px; + cursor: pointer; + border-radius: 2px; + align-items: center; + &:active { + background-color: #f5f5f5; + } + + .value-img { + line-height: 1; + // padding: 2px; + margin-right: 3px; + + a { + width: 26px; + display: flex; + height: 26px; + margin-right: 5px; + } + } + + &:hover { + border-color: $primary; + + .tools { + // display: block; + } + .btn-remove { + display: block; + } + } + + .btn-remove { + position: absolute; + top: -9px; + right: -7px; + cursor: pointer; + font-size: 17px; + display: none; + background: #fff; + line-height: 1; + &:hover { + color: #d80000; + } + } + + .tools { + // position: absolute; + background: $primary; + top: -24px; + right: -31px; + display: none; + overflow: hidden; + // z-index: -1; + // opacity: 0; + + .btn-link { + min-width: 27px; + text-align: center; + float: left; + padding: 0; + border: none; + display: inline-block; + // display: none; + color: #fff; + height: 30px; + &:hover { + background: darken($primary, 15%); + } + + &.rank { + cursor: move; + } + } + } + + .name { + // border-right: 1px solid #eee; + text-align: center; + // padding: 0 5px 0 0; + min-width: 40px; + + & +.btn-link { + padding-left: 5px; + // margin-right: 10px; + } + } + } + } + } +} \ No newline at end of file diff --git a/resources/beike/admin/css/app.scss b/resources/beike/admin/css/app.scss index 34f8b747..7470fed1 100644 --- a/resources/beike/admin/css/app.scss +++ b/resources/beike/admin/css/app.scss @@ -21,3 +21,4 @@ $primary: #fd560f; @import 'form'; @import 'element-ui'; @import 'login'; +@import 'page-product'; diff --git a/resources/beike/admin/css/bootstrap/bootstrap.scss b/resources/beike/admin/css/bootstrap/bootstrap.scss index fb3f605c..2fb83e66 100644 --- a/resources/beike/admin/css/bootstrap/bootstrap.scss +++ b/resources/beike/admin/css/bootstrap/bootstrap.scss @@ -21,6 +21,7 @@ $form-floating-padding-y: .8rem; $form-floating-height: 50px; $btn-focus-width: 0; $table-border-color: #e9ecef; +$border-color: #f3f3f3; @import './bootstrap-icons'; @import 'node_modules/bootstrap-5.1.3/scss/bootstrap'; diff --git a/resources/beike/admin/js/app.js b/resources/beike/admin/js/app.js index 53374b4c..4396bf00 100644 --- a/resources/beike/admin/js/app.js +++ b/resources/beike/admin/js/app.js @@ -1,5 +1,30 @@ import http from "../../../js/http"; window.$http = http; +const base = document.querySelector('base').href; + +$(document).on('click', '.open-file-manager', function(event) { + const $this = $(this); + + layer.open({ + type: 2, + title: '图片管理器', + shadeClose: false, + skin: 'file-manager-box', + scrollbar: false, + shade: 0.4, + area: ['1060px', '680px'], + content: `${base}/file_manager`, + success: function(layerInstance, index) { + var iframeWindow = window[layerInstance.find("iframe")[0]["name"]]; + iframeWindow.callback = function(images) { + $this.find('img').prop('src', images[0].url); + $this.next('input').val(images[0].path) + $this.next('input')[0].dispatchEvent(new Event('input')); + } + } + }); +}); + $(document).ready(function ($) { $.ajaxSetup({ diff --git a/resources/beike/admin/views/layouts/master.blade.php b/resources/beike/admin/views/layouts/master.blade.php index c017ab3d..e364e03b 100644 --- a/resources/beike/admin/views/layouts/master.blade.php +++ b/resources/beike/admin/views/layouts/master.blade.php @@ -13,7 +13,7 @@ --}} {{-- --}} - + diff --git a/resources/beike/admin/views/pages/categories/form-vue.blade.php b/resources/beike/admin/views/pages/categories/form-vue.blade.php index 4dea984b..dc54c821 100644 --- a/resources/beike/admin/views/pages/categories/form-vue.blade.php +++ b/resources/beike/admin/views/pages/categories/form-vue.blade.php @@ -2,10 +2,6 @@ @section('title', '分类管理') -@push('header') - -@endpush - @section('content')
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 f2f6b499..a5e99fa9 100644 --- a/resources/beike/admin/views/pages/products/form/form.blade.php +++ b/resources/beike/admin/views/pages/products/form/form.blade.php @@ -1,13 +1,17 @@ @extends('admin::layouts.master') +@section('body-class', 'page-product-form') + @push('header') - + + @endpush @section('content')
+ {{--
基础信息
--}}
-

product

+
基础信息
@csrf @@ -37,118 +41,218 @@
-

skus

- 单规格 - 多规格 -
-
-
-
- +
商品库存
-
- -
- -
+
+
+ +
+
- - -
- -
- - - - - - - - - - - - - - - - - - - - - - - - -
- @{{ variant.name || 'No name' }} - imagemodelskupriceorgin pricecost pricequantity
- - - - - -
-
-
- - - - - - - - - - +
+
+ +
+
+
+
+
+
+ @{{ variant.name[current_language_code] }} + 编辑 + 移除 +
+
+ 添加规格图片 + Add value +
+
+ +
+ {{--
--}} + {{-- --}} + {{-- --}} + {{-- --}} + {{--
--}} + +
+
+ +
+
+ + +
+
+ @{{ value.name[current_language_code] }} +
+
+ +
+
请添加 Value
+
+
+ + Add variant +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ @{{ variant.name[current_language_code] || 'No name' }} + imagemodelskupriceorgin pricecost pricequantity
+
+
+ +
+
+ + + + + 		+ +
+
+
+ +
+
+ + + + + + + + + + +
+
+
+ + + + + + + + + + + 保存 + 取消 + + +
@endsection + @push('footer') @endpush @@ -11,8 +10,6 @@
- -
diff --git a/themes/default/product.blade.php b/themes/default/product.blade.php index 24e7b9af..5fb1a029 100644 --- a/themes/default/product.blade.php +++ b/themes/default/product.blade.php @@ -232,6 +232,7 @@ this.source.variables.forEach((variable, index) => { variable.values.forEach((value, value_index) => { const selectedVariantsIndex = this.selectedVariantsIndex.slice(0); + selectedVariantsIndex[index] = value_index; const selectedSku = skus.find(sku => sku.toString() == selectedVariantsIndex.toString()); if (selectedSku) {