优化文件管理器出发条件、优化前台商品详情、优化pages

This commit is contained in:
pushuo 2022-08-09 11:56:33 +08:00
parent 2e4115dbe6
commit ec7dbb1da2
15 changed files with 104 additions and 142 deletions

View File

@ -147,43 +147,43 @@
min-height: 1000px; min-height: 1000px;
} }
.h-min-100 { .s-min-100 {
min-width: 100px; min-width: 100px;
} }
.h-min-200 { .s-min-200 {
min-width: 200px; min-width: 200px;
} }
.h-min-300 { .s-min-300 {
min-width: 300px; min-width: 300px;
} }
.h-min-400 { .s-min-400 {
min-width: 400px; min-width: 400px;
} }
.h-min-500 { .s-min-500 {
min-width: 500px; min-width: 500px;
} }
.h-min-600 { .s-min-600 {
min-width: 600px; min-width: 600px;
} }
.h-min-700 { .s-min-700 {
min-width: 700px; min-width: 700px;
} }
.h-min-800 { .s-min-800 {
min-width: 800px; min-width: 800px;
} }
.h-min-900 { .s-min-900 {
min-width: 900px; min-width: 900px;
} }
.h-min-1000 { .s-min-1000 {
min-width: 1000px; min-width: 1000px;
} }

View File

@ -168,43 +168,43 @@ body[class^=page-account-] {
min-height: 1000px; min-height: 1000px;
} }
.h-min-100 { .w-min-100 {
min-width: 100px; min-width: 100px;
} }
.h-min-200 { .w-min-200 {
min-width: 200px; min-width: 200px;
} }
.h-min-300 { .w-min-300 {
min-width: 300px; min-width: 300px;
} }
.h-min-400 { .w-min-400 {
min-width: 400px; min-width: 400px;
} }
.h-min-500 { .w-min-500 {
min-width: 500px; min-width: 500px;
} }
.h-min-600 { .w-min-600 {
min-width: 600px; min-width: 600px;
} }
.h-min-700 { .w-min-700 {
min-width: 700px; min-width: 700px;
} }
.h-min-800 { .w-min-800 {
min-width: 800px; min-width: 800px;
} }
.h-min-900 { .w-min-900 {
min-width: 900px; min-width: 900px;
} }
.h-min-1000 { .w-min-1000 {
min-width: 1000px; min-width: 1000px;
} }
@ -869,16 +869,13 @@ body.page-product .peoduct-info .rating-wrap .rating i {
color: #fd560f; color: #fd560f;
} }
body.page-product .peoduct-info .price-wrap { body.page-product .peoduct-info .price-wrap {
margin-bottom: 2rem; margin-bottom: 2.4rem;
} }
body.page-product .peoduct-info .price-wrap .new-price { body.page-product .peoduct-info .price-wrap .new-price {
margin-right: 0.6rem; margin-right: 0.6rem;
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1; line-height: 1;
} }
body.page-product .peoduct-info .attribute-wrap {
margin-bottom: 2rem;
}
body.page-product .peoduct-info .quantity-btns .quantity-input { body.page-product .peoduct-info .quantity-btns .quantity-input {
max-width: 5rem; max-width: 5rem;
text-align: center; text-align: center;

View File

@ -2176,6 +2176,28 @@ __webpack_require__.r(__webpack_exports__);
/***/ }), /***/ }),
/***/ "./resources/beike/shop/default/js/header.js":
/*!***************************************************!*\
!*** ./resources/beike/shop/default/js/header.js ***!
\***************************************************/
/***/ (() => {
// offcanvas-search-top
$(function () {
var myOffcanvas = document.getElementById('offcanvas-search-top');
myOffcanvas.addEventListener('shown.bs.offcanvas', function () {
$('#offcanvas-search-top input').focus();
$('#offcanvas-search-top input').keydown(function (e) {
if (e.keyCode == 13) {
console.log('enter');
$('#offcanvas-search-top .btn-search').click();
}
});
});
});
/***/ }),
/***/ "./resources/beike/shop/default/js/product.js": /***/ "./resources/beike/shop/default/js/product.js":
/*!****************************************************!*\ /*!****************************************************!*\
!*** ./resources/beike/shop/default/js/product.js ***! !*** ./resources/beike/shop/default/js/product.js ***!
@ -2631,11 +2653,14 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common */ "./resources/beike/shop/default/js/common.js"); /* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common */ "./resources/beike/shop/default/js/common.js");
/* harmony import */ var _product__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./product */ "./resources/beike/shop/default/js/product.js"); /* harmony import */ var _product__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./product */ "./resources/beike/shop/default/js/product.js");
/* harmony import */ var _product__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_product__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _product__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_product__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./header */ "./resources/beike/shop/default/js/header.js");
/* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_header__WEBPACK_IMPORTED_MODULE_3__);
window.bk = _common__WEBPACK_IMPORTED_MODULE_1__["default"]; window.bk = _common__WEBPACK_IMPORTED_MODULE_1__["default"];
window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"]; window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"];
bk.getCarts(); // 页面初始加载购物车数据 bk.getCarts(); // 页面初始加载购物车数据
bk.slidingFixed(); bk.slidingFixed();

View File

@ -40,7 +40,7 @@
// 生成 100 200 300 ... 1000 的最小宽度 // 生成 100 200 300 ... 1000 的最小宽度
@for $i from 1 through 10 { @for $i from 1 through 10 {
.h-min-#{$i}00 { .s-min-#{$i}00 {
min-width: #{$i}00px; min-width: #{$i}00px;
} }
} }

View File

@ -101,35 +101,17 @@
}, },
selectButtonClicked() { selectButtonClicked() {
let that = this;
this.loading = true; this.loading = true;
layer.open({ bk.fileManagerIframe(images => {
type: 2, this.loading = false;
title: '图片管理器',
shadeClose: false,
skin: 'file-manager-box',
scrollbar: false,
shade: 0.4,
area: ['1060px', '680px'],
content: '/{{ admin_name() }}/file_manager',
success: function(layerInstance, index) {
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
iframeWindow.callback = function(images) {
// if (images.length < 1) {
// return;
// }
that.loading = false;
if (that.isLanguage) { if (this.isLanguage) {
that.src[that.tabActiveId] = images[0].path; this.src[this.tabActiveId] = images[0].path;
} else { } else {
that.src = images[0].path; this.src = images[0].path;
}
// console.log(that.src);
}
} }
}); })
} }
} }
}); });

View File

@ -258,9 +258,9 @@
}, },
saveButtonClicked() { saveButtonClicked() {
$http.put('design/builder', this.form).then((res) => { // $http.put('design/builder', this.form).then((res) => {
layer.msg(res.message) // layer.msg(res.message)
}) // })
}, },
selectorShow(index) { selectorShow(index) {

View File

@ -62,7 +62,7 @@
<script> <script>
var $languages = @json($languages); var $languages = @json($languages);
var $language_id = '{{ locale() }}'; var $locale = '{{ locale() }}';
function languagesFill(text) { function languagesFill(text) {
var obj = {}; var obj = {};

View File

@ -24,17 +24,17 @@
@foreach ($admin_languages as $language) @foreach ($admin_languages as $language)
<div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab-{{ $language['code'] }}"> <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab-{{ $language['code'] }}">
<x-admin-form-input name="title[{{ $language['code'] }}]" title="信息标题" value="{{ old('title', '') }}" /> <x-admin-form-input name="[{{ $language['code'] }}]title" title="信息标题" value="{{ old('title', '') }}" />
<x-admin::form.row title="内容"> <x-admin::form.row title="内容">
<div class="w-max-1000"> <div class="w-max-1000">
<textarea name="content[{{ $language['code'] }}]" data-tinymce-height="600" class="form-control tinymce"> <textarea name="[{{ $language['code'] }}]content" data-tinymce-height="600" class="form-control tinymce">
{{ old('content', '') }} {{ old('content', '') }}
</textarea> </textarea>
</div> </div>
</x-admin::form.row> </x-admin::form.row>
<x-admin-form-input name="meta_title[{{ $language['code'] }}]" title="Meta Tag 标题" value="{{ old('meta_title', '') }}" /> <x-admin-form-input name="[{{ $language['code'] }}]meta_title" title="Meta Tag 标题" value="{{ old('meta_title', '') }}" />
<x-admin-form-input name="meta_description[{{ $language['code'] }}]" title="Meta Tag 描述" value="{{ old('meta_description', '') }}" /> <x-admin-form-input name="[{{ $language['code'] }}]meta_description" title="Meta Tag 描述" value="{{ old('meta_description', '') }}" />
<x-admin-form-input name="meta_keyword[{{ $language['code'] }}]" title="Meta Tag 关键字" value="{{ old('meta_keyword', '') }}" /> <x-admin-form-input name="[{{ $language['code'] }}]meta_keyword" title="Meta Tag 关键字" value="{{ old('meta_keyword', '') }}" />
<x-admin::form.row title=""> <x-admin::form.row title="">
<button type="submit" class="mt-3 btn btn-primary">提交</button> <button type="submit" class="mt-3 btn btn-primary">提交</button>
</x-admin::form.row> </x-admin::form.row>

View File

@ -344,31 +344,17 @@
}, },
methods: { methods: {
addProductImages(skuIndex) { addProductImages(skuIndex) {
const self = this; bk.fileManagerIframe(images => {
layer.open({ if (!isNaN(skuIndex)) {
type: 2, if (this.form.skus[skuIndex].images === null) {
title: '图片管理器', this.form.skus[skuIndex].images = images.map(e => e.path)
shadeClose: false, } else {
skin: 'file-manager-box', this.form.skus[skuIndex].images.push(...images.map(e => e.path))
scrollbar: false,
shade: 0.4,
area: ['1060px', '680px'],
content: `${document.querySelector('base').href}/file_manager`,
success: function(layerInstance, index) {
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
iframeWindow.callback = (images) => {
if (!isNaN(skuIndex)) {
if (self.form.skus[skuIndex].images === null) {
self.form.skus[skuIndex].images = images.map(e => e.path)
} else {
self.form.skus[skuIndex].images.push(...images.map(e => e.path))
}
return;
}
self.form.images.push(...images.map(e => e.path))
} }
return;
} }
}); this.form.images.push(...images.map(e => e.path))
})
}, },
dialogVariablesFormSubmit(form) { dialogVariablesFormSubmit(form) {

View File

@ -21,26 +21,12 @@ Vue.component('vue-image', {
methods: { methods: {
updateImages() { updateImages() {
const self = this; const self = this;
layer.open({ bk.fileManagerIframe(images => {
type: 2, if (images) {
title: '图片管理器', self.$emit('input', images[0].path);
shadeClose: false,
skin: 'file-manager-box',
scrollbar: false,
shade: 0.4,
area: ['1060px', '680px'],
content: `${document.querySelector('base').href}/file_manager`,
success: function(layerInstance, index) {
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
iframeWindow.callback = (images) => {
if (images) {
self.$emit('input', images[0].path);
}
}
} }
}); })
}, },
} }
}); });
</script> </script>

View File

@ -40,7 +40,7 @@ body[class^="page-account-"] {
// 生成 100 200 300 ... 1000 的最小宽度 // 生成 100 200 300 ... 1000 的最小宽度
@for $i from 1 through 10 { @for $i from 1 through 10 {
.h-min-#{$i}00 { .w-min-#{$i}00 {
min-width: #{$i}00px; min-width: #{$i}00px;
} }
} }

View File

@ -125,7 +125,7 @@ body.page-product {
} }
.price-wrap { .price-wrap {
margin-bottom: 2rem; margin-bottom: 2.4rem;
.new-price { .new-price {
margin-right: .6rem; margin-right: .6rem;
@ -134,14 +134,6 @@ body.page-product {
} }
} }
.attribute-wrap {
margin-bottom: 2rem;
.table {
}
}
.quantity-btns { .quantity-btns {
.quantity-input { .quantity-input {
max-width: 5rem; max-width: 5rem;

View File

@ -4,6 +4,7 @@ window.bk = common;
window.$http = http; window.$http = http;
import './product'; import './product';
import './header'
bk.getCarts(); // 页面初始加载购物车数据 bk.getCarts(); // 页面初始加载购物车数据
bk.slidingFixed(); bk.slidingFixed();

View File

@ -1,11 +1,13 @@
// offcanvas-search-top // offcanvas-search-top
var myOffcanvas = document.getElementById('offcanvas-search-top') $(function() {
myOffcanvas.addEventListener('shown.bs.offcanvas', function () { var myOffcanvas = document.getElementById('offcanvas-search-top')
$('#offcanvas-search-top input').focus(); myOffcanvas.addEventListener('shown.bs.offcanvas', function () {
$('#offcanvas-search-top input').keydown(function (e) { $('#offcanvas-search-top input').focus();
if (e.keyCode == 13) { $('#offcanvas-search-top input').keydown(function (e) {
console.log('enter'); if (e.keyCode == 13) {
$('#offcanvas-search-top .btn-search').click(); console.log('enter');
} $('#offcanvas-search-top .btn-search').click();
}
})
}) })
}) });

View File

@ -18,7 +18,7 @@
{{ Diglactic\Breadcrumbs\Breadcrumbs::render('product', $product) }} {{ Diglactic\Breadcrumbs\Breadcrumbs::render('product', $product) }}
<div class="row mb-5" id="product-top"> <div class="row mb-5" id="product-top">
<div class="col-12 col-md-6"> <div class="col-12 col-lg-6">
<div class="product-image d-flex align-items-start"> <div class="product-image d-flex align-items-start">
<div class="left" v-if="images.length"> <div class="left" v-if="images.length">
@ -44,9 +44,15 @@
</div> </div>
</div> </div>
<div class="ps-lg-5 col-xl-5 col-lg-6 order-lg-2"> <div class="col-12 col-lg-6">
<div class="peoduct-info"> <div class="peoduct-info">
<h1>{{ $product['name'] }}</h1> <h1 class="mb-4">{{ $product['name'] }}</h1>
<div class="stock-and-sku mb-4">
<span :class="product.quantity > 0 ? 'text-success' : 'text-secondary'">@{{ product.quantity > 0 ? 'In Stock' : 'Out Stock' }}</span>
<span class="ms-3 text-muted">SKU: @{{ product.sku }}</span>
<span class="ms-3 text-muted">MODEL: @{{ product.model }}</span>
</div>
@if (0)
<div class="rating-wrap d-flex"> <div class="rating-wrap d-flex">
<div class="rating"> <div class="rating">
@for ($i = 0; $i < 5; $i++) @for ($i = 0; $i < 5; $i++)
@ -55,14 +61,15 @@
</div> </div>
<span class="text-muted">132 reviews</span> <span class="text-muted">132 reviews</span>
</div> </div>
@endif
<div class="price-wrap d-flex align-items-end"> <div class="price-wrap d-flex align-items-end">
<div class="new-price">@{{ product.price_format }}</div> <div class="new-price">@{{ product.price_format }}</div>
<div class="old-price text-muted text-decoration-line-through">@{{ product.origin_price_format }}</div> <div class="old-price text-muted text-decoration-line-through">@{{ product.origin_price_format }}</div>
</div> </div>
<div class="variables-wrap" v-if="source.variables.length"> <div class="variables-wrap mb-4" v-if="source.variables.length">
<div class="variable-group mb-2" v-for="variable, variable_index in source.variables" :key="variable_index"> <div class="variable-group mb-2" v-for="variable, variable_index in source.variables" :key="variable_index">
<p class="mb-2"><strong>@{{ variable.name }}</strong></p> <p class="mb-2">@{{ variable.name }}</p>
<div class="variable-info"> <div class="variable-info">
<div <div
v-for="value, value_index in variable.values" v-for="value, value_index in variable.values"
@ -75,21 +82,6 @@
</div> </div>
</div> </div>
<div class="attribute-wrap">
<table class="table table-striped table-borderless">
<tbody>
<tr>
<td>型号</td>
<td>@{{ product.model }}</td>
</tr>
<tr>
<td>Sku</td>
<td>@{{ product.sku }}</td>
</tr>
</tbody>
</table>
</div>
<div class="quantity-btns d-flex"> <div class="quantity-btns d-flex">
<div class="quantity-wrap"> <div class="quantity-wrap">
<input type="text" class="form-control" :disabled="!product.quantity" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="quantity" name="quantity"> <input type="text" class="form-control" :disabled="!product.quantity" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="quantity" name="quantity">
@ -290,9 +282,8 @@
}); });
$(document).ready(function () { $(document).ready(function () {
$('#zoom').trigger('zoom.destroy'); $('#zoom').trigger('zoom.destroy');
$('#zoom').zoom({url: $('#swiper a').attr('data-zoom-image')}); $('#zoom').zoom({url: $('#swiper a').attr('data-zoom-image')});
}); });
</script> </script>
@endpush @endpush