wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

!148 Fix the problem of switching preview when editing tab-product module 

* wip
* Fix the problem of switching preview when editing tab-product module
This commit is contained in:
pushuo 2023-07-10 09:45:42 +00:00 committed by Edward Yang
parent 2430791a25
commit 2e7d2b7cb2
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
resources/beike/admin/views/pages/design/module/tab_product.blade.php
View File

@ -9,7 +9,7 @@
<div class="module-editor-row">{{ __('admin/builder.modules_content') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.modules_set_product') }}</div>
<el-tabs v-model="editableTabsValue" class="tab-edit-category" type="card" editable @edit="handleTabsEdit">
<el-tabs v-model="form.editableTabsValue" class="tab-edit-category" type="card" editable @edit="handleTabsEdit">
<el-tab-pane
v-for="(item, index) in form.tabs"
:key="index"
@ -77,7 +77,6 @@ Vue.component('module-editor-tab-product', {
productData: [],
loading: null,
form: null,
editableTabsValue: '0',
}
},
@ -88,7 +87,7 @@ Vue.component('module-editor-tab-product', {
},
deep: true
},
editableTabsValue() {
'form.editableTabsValue'() {
this.productData = [];
this.tabsValueProductData();
}
@ -110,12 +109,12 @@ Vue.component('module-editor-tab-product', {
tabsValueProductData() {
var that = this;
if (!this.form.tabs[this.editableTabsValue].products.length) return;
if (!this.form.tabs[this.form.editableTabsValue].products.length) return;
this.loading = true;
$http.get('products/names?product_ids='+this.form.tabs[this.editableTabsValue].products.join(','), {hload: true}).then((res) => {
$http.get('products/names?product_ids='+this.form.tabs[this.form.editableTabsValue].products.join(','), {hload: true}).then((res) => {
this.loading = false;
this.form.tabs[this.editableTabsValue].products = res.data.map(e => e.id);
this.form.tabs[this.form.editableTabsValue].products = res.data.map(e => e.id);
that.productData = res.data;
})
},
@ -127,34 +126,34 @@ Vue.component('module-editor-tab-product', {
},
handleSelect(item) {
if (!this.form.tabs[this.editableTabsValue].products.find(v => v == item.id)) {
this.form.tabs[this.editableTabsValue].products.push(item.id * 1);
if (!this.form.tabs[this.form.editableTabsValue].products.find(v => v == item.id)) {
this.form.tabs[this.form.editableTabsValue].products.push(item.id * 1);
this.productData.push(item);
}
this.keyword = ""
},
itemChange(evt) {
this.form.tabs[this.editableTabsValue].products = this.productData.map(e => e.id * 1);
this.form.tabs[this.form.editableTabsValue].products = this.productData.map(e => e.id * 1);
},
removeProduct(index) {
this.productData.splice(index, 1)
this.form.tabs[this.editableTabsValue].products.splice(index, 1);
this.form.tabs[this.form.editableTabsValue].products.splice(index, 1);
},
handleTabsEdit(targetName, action) {
if (action === 'add') {
this.form.tabs.push({title: languagesFill('Tab ' + (this.form.tabs.length + 1)), products: []});
this.editableTabsValue = this.form.tabs.length - 1 + '';
this.form.editableTabsValue = this.form.tabs.length - 1 + '';
}
if (action === 'remove') {
let tabs = this.form.tabs;
tabs.splice(targetName, 1);
let activeName = this.editableTabsValue == 0 ? '0' : targetName * 1 - 1 + '';
let activeName = this.form.editableTabsValue == 0 ? '0' : targetName * 1 - 1 + '';
this.editableTabsValue = activeName;
this.form.editableTabsValue = activeName;
this.form.tabs = tabs.filter(tab => tab.name !== targetName);
}
}
@ -171,6 +170,7 @@ Vue.component('module-editor-tab-product', {
style: {
background_color: ''
},
editableTabsValue: '0',
floor: languagesFill(''),
tabs: [{title: languagesFill('Tab 1'), products: []}],
title: languagesFill('{{ __('admin/builder.text_module_title') }}'),

6
themes/default/design/tab_product.blade.php
View File

@ -7,12 +7,12 @@
@if ($content['tabs'] ?? false)
<div class="nav justify-content-center mb-3">
@foreach ($content['tabs'] as $key => $tabs)
<a class="nav-link {{ $loop->first ? 'active' : '' }}" href="#tab-product-{{ $loop->index }}" data-bs-toggle="tab">{{ $tabs['title'] }}</a>
<a class="nav-link {{ ($design ? $content['editableTabsValue'] == $key : $loop->first) ? 'active' : '' }}" href="#tab-product-{{ $loop->index }}" data-bs-toggle="tab">{{ $tabs['title'] }}</a>
@endforeach
</div>
<div class="tab-content">
@foreach ($content['tabs'] as $products)
<div class="tab-pane fade show {{ $loop->first ? 'active' : '' }}" id="tab-product-{{ $loop->index }}">
@foreach ($content['tabs'] as $key => $products)
<div class="tab-pane fade show {{ ($design ? $content['editableTabsValue'] == $key : $loop->first) ? 'active' : '' }}" id="tab-product-{{ $loop->index }}">
<div class="row">
@if ($products['products'])
@foreach ($products['products'] as $product)