!142 Fix the problem of duplicate data when designing the home page

* wip
* wip
* Fix the problem of duplicate data when designing the home page
This commit is contained in:
pushuo 2023-06-21 06:09:04 +00:00 committed by Edward Yang
parent 5b262df391
commit 35543ed409
13 changed files with 95 additions and 85 deletions

View File

@ -1,5 +1,5 @@
<div class="alert alert-{{ $type }} alert-dismissible">
<i class="bi bi-check-circle-fill"></i>
{{ $msg }}
{!! $msg !!}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

View File

@ -93,7 +93,11 @@
methods: {
removeImage() {
this.src = '';
if (this.isLanguage) {
this.src[this.tabActiveId] = '';
} else {
this.src = '';
}
},
tabClick(e) {

View File

@ -199,7 +199,8 @@
watch: {},
// 组件方法
methods: {
moduleUpdated: bk.debounce(function() {
moduleUpdated: bk.debounce(function(val) {
this.form.modules[this.design.editingModuleIndex].content = val;
const data = this.form.modules[this.design.editingModuleIndex]
$http.post('design/builder/preview?design=1', data, {hload: true}).then((res) => {
@ -266,7 +267,7 @@
}
},
created () {
this.form = @json($design_settings)
this.form = @json($design_settings ?: ['modules' => []])
},
mounted () {
},

View File

@ -3,7 +3,7 @@
<div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.text_module_title') }}</div>
<text-i18n v-model="module.title"></text-i18n>
<text-i18n v-model="form.title"></text-i18n>
</div>
<div class="module-editor-row">{{ __('admin/builder.modules_content') }}</div>
@ -54,12 +54,13 @@ Vue.component('module-editor-brand', {
return {
loading: null,
brands: [],
form: null,
keyword: '',
}
},
watch: {
module: {
form: {
handler: function (val) {
this.$emit('on-changed', val);
},
@ -68,8 +69,10 @@ Vue.component('module-editor-brand', {
},
created: function () {
if (!this.module.brands.length) return;
const ids = this.module.brands.join(',');
this.form = JSON.parse(JSON.stringify(this.module));
if (!this.form.brands.length) return;
const ids = this.form.brands.join(',');
this.loading = true;
$http.get(`brands/names?ids=${ids}`, null, {hload:true}).then((res) => {
this.brands = res.data
@ -88,8 +91,8 @@ Vue.component('module-editor-brand', {
},
handleSelect(item) {
if (!this.module.brands.find(v => v == item.id)) {
this.module.brands.push(item.id * 1);
if (!this.form.brands.find(v => v == item.id)) {
this.form.brands.push(item.id * 1);
this.brands.push(item);
}
this.keyword = ""
@ -97,11 +100,11 @@ Vue.component('module-editor-brand', {
removeProduct(index) {
this.brands.splice(index, 1)
this.module.brands.splice(index, 1);
this.form.brands.splice(index, 1);
},
itemChange(evt) {
this.module.brands = this.brands.map(e => e.id * 1);
this.form.brands = this.brands.map(e => e.id * 1);
},
}
});

View File

@ -3,11 +3,11 @@
<div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.text_module_title') }}</div>
<text-i18n v-model="module.title"></text-i18n>
<text-i18n v-model="form.title"></text-i18n>
</div>
<div class="module-edit-group" style="margin-bottom: 200px;">
<div class="module-edit-title">{{ __('admin/builder.text_add_pictures') }}</div>
<div class="pb-images-selector" v-for="(item, index) in module.images" :key="index">
<div class="pb-images-selector" v-for="(item, index) in form.images" :key="index">
<div class="selector-head" @click="itemShow(index)">
<div class="left">
@ -46,12 +46,12 @@ Vue.component('module-editor-icons', {
data: function () {
return {
//
form: null
}
},
watch: {
module: {
form: {
handler: function (val) {
this.$emit('on-changed', val);
},
@ -60,17 +60,17 @@ Vue.component('module-editor-icons', {
},
created: function () {
//
this.form = JSON.parse(JSON.stringify(this.module));
},
methods: {
itemShow(index) {
this.module.images.find((e, key) => {if (index != key) return e.show = false});
this.module.images[index].show = !this.module.images[index].show;
this.form.images.find((e, key) => {if (index != key) return e.show = false});
this.form.images[index].show = !this.form.images[index].show;
},
addItems() {
this.module.images.push({
this.form.images.push({
image: '',
link: {
type: 'product',
@ -81,11 +81,11 @@ Vue.component('module-editor-icons', {
show: true
})
this.module.images.find((e, key) => {if (this.module.images.length - 1 != key) return e.show = false});
this.form.images.find((e, key) => {if (this.form.images.length - 1 != key) return e.show = false});
},
removeItem(index) {
this.module.images.splice(index, 1);
this.form.images.splice(index, 1);
}
}
});

View File

@ -3,17 +3,17 @@
<div class="module-editor-row">设置</div>
<div class="module-edit-group">
<div class="module-edit-title">是否全屏</div>
<el-switch v-model="module.full"></el-switch>
<el-switch v-model="form.full"></el-switch>
</div>
<div class="module-editor-row">内容</div>
<div class="module-edit-group">
<div class="module-edit-title">选择图片</div>
<div class="">
<div class="pb-images-top">
<pb-image-selector v-model="module.images[0].image"></pb-image-selector>
<pb-image-selector v-model="form.images[0].image"></pb-image-selector>
<div class="tag">建议尺寸: 1920 x 500</div>
</div>
<link-selector v-model="module.images[0].link"></link-selector>
<link-selector v-model="form.images[0].link"></link-selector>
</div>
</div>
</div>
@ -27,12 +27,12 @@ Vue.component('module-editor-image100', {
data: function () {
return {
//
form: null
}
},
watch: {
module: {
form: {
handler: function (val) {
this.$emit('on-changed', val);
},
@ -41,7 +41,7 @@ Vue.component('module-editor-image100', {
},
created: function () {
//
this.form = JSON.parse(JSON.stringify(this.module));
},
methods: {

View File

@ -3,7 +3,7 @@
<div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.text_add_pictures') }}</div>
<div class="pb-images-selector" v-for="(item, index) in module.images" :key="index">
<div class="pb-images-selector" v-for="(item, index) in form.images" :key="index">
<div class="selector-head" @click="itemShow(index)">
<div class="left">
@ -34,12 +34,12 @@ Vue.component('module-editor-image200', {
data: function () {
return {
//
form: null
}
},
watch: {
module: {
form: {
handler: function (val) {
this.$emit('on-changed', val);
},
@ -48,13 +48,13 @@ Vue.component('module-editor-image200', {
},
created: function () {
//
this.form = JSON.parse(JSON.stringify(this.module));
},
methods: {
itemShow(index) {
this.module.images.find((e, key) => {if (index != key) return e.show = false});
this.module.images[index].show = !this.module.images[index].show;
this.form.images.find((e, key) => {if (index != key) return e.show = false});
this.form.images[index].show = !this.form.images[index].show;
},
}
});

View File

@ -3,7 +3,7 @@
<div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.text_add_pictures') }}</div>
<div class="pb-images-selector" v-for="(item, index) in module.images" :key="index">
<div class="pb-images-selector" v-for="(item, index) in form.images" :key="index">
<div class="selector-head" @click="itemShow(index)">
<div class="left">
@ -34,12 +34,12 @@ Vue.component('module-editor-image300', {
data: function () {
return {
//
form: null
}
},
watch: {
module: {
form: {
handler: function (val) {
this.$emit('on-changed', val);
},
@ -48,13 +48,13 @@ Vue.component('module-editor-image300', {
},
created: function () {
//
this.form = JSON.parse(JSON.stringify(this.module));
},
methods: {
itemShow(index) {
this.module.images.find((e, key) => {if (index != key) return e.show = false});
this.module.images[index].show = !this.module.images[index].show;
this.form.images.find((e, key) => {if (index != key) return e.show = false});
this.form.images[index].show = !this.form.images[index].show;
},
}
});

View File

@ -3,7 +3,7 @@
<div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.text_add_pictures') }}</div>
<div class="pb-images-selector" v-for="(item, index) in module.images" :key="index">
<div class="pb-images-selector" v-for="(item, index) in form.images" :key="index">
<div class="selector-head" @click="itemShow(index)">
<div class="left">
@ -36,12 +36,12 @@ Vue.component('module-editor-image401', {
data: function () {
return {
//
form: null
}
},
watch: {
module: {
form: {
handler: function (val) {
this.$emit('on-changed', val);
},
@ -50,13 +50,13 @@ Vue.component('module-editor-image401', {
},
created: function () {
//
this.form = JSON.parse(JSON.stringify(this.module));
},
methods: {
itemShow(index) {
this.module.images.find((e, key) => {if (index != key) return e.show = false});
this.module.images[index].show = !this.module.images[index].show;
this.form.images.find((e, key) => {if (index != key) return e.show = false});
this.form.images[index].show = !this.form.images[index].show;
},
}
});

View File

@ -3,7 +3,7 @@
<div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.text_module_title') }}</div>
<text-i18n v-model="module.title"></text-i18n>
<text-i18n v-model="form.title"></text-i18n>
</div>
<div class="module-editor-row">{{ __('admin/builder.modules_content') }}</div>
@ -59,11 +59,12 @@ Vue.component('module-editor-product', {
keyword: '',
productData: [],
loading: null,
form: null
}
},
watch: {
module: {
form: {
handler: function (val) {
this.$emit('on-changed', val);
},
@ -72,6 +73,7 @@ Vue.component('module-editor-product', {
},
created: function () {
this.form = JSON.parse(JSON.stringify(this.module));
this.tabsValueProductData();
},
@ -86,10 +88,10 @@ Vue.component('module-editor-product', {
tabsValueProductData() {
var that = this;
if (!this.module.products.length) return;
if (!this.form.products.length) return;
this.loading = true;
$http.get('products/names?product_ids='+this.module.products.join(','), {hload: true}).then((res) => {
$http.get('products/names?product_ids='+this.form.products.join(','), {hload: true}).then((res) => {
this.loading = false;
that.productData = res.data;
})
@ -102,20 +104,20 @@ Vue.component('module-editor-product', {
},
handleSelect(item) {
if (!this.module.products.find(v => v == item.id)) {
this.module.products.push(item.id * 1);
if (!this.form.products.find(v => v == item.id)) {
this.form.products.push(item.id * 1);
this.productData.push(item);
}
this.keyword = ""
},
itemChange(evt) {
this.module.products = this.productData.map(e => e.id * 1);
this.form.products = this.productData.map(e => e.id * 1);
},
removeProduct(index) {
this.productData.splice(index, 1)
this.module.products.splice(index, 1);
this.form.products.splice(index, 1);
},
}
});

View File

@ -3,7 +3,7 @@
<div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.modules_content') }}</div>
<rich-text-i18n v-model="module.text"></rich-text-i18n>
<rich-text-i18n v-model="form.text"></rich-text-i18n>
</div>
</div>
</template>
@ -16,12 +16,12 @@ Vue.component('module-editor-rich-text', {
data: function () {
return {
//
form: null
}
},
watch: {
module: {
form: {
handler: function (val) {
this.$emit('on-changed', val);
},
@ -30,7 +30,7 @@ Vue.component('module-editor-rich-text', {
},
created: function () {
//
this.form = JSON.parse(JSON.stringify(this.module));
},
methods: {

View File

@ -3,7 +3,7 @@
<div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.modules_full_screen') }}</div>
<el-switch v-model="module.full"></el-switch>
<el-switch v-model="form.full"></el-switch>
</div>
<div class="module-editor-row">{{ __('admin/builder.modules_content') }}</div>
@ -11,10 +11,10 @@
<div class="module-edit-title">{{ __('admin/builder.modules_select_image') }}</div>
<draggable
ghost-class="dragabble-ghost"
:list="module.images"
:list="form.images"
:options="{animation: 330, handle: '.icon-rank'}"
>
<div class="pb-images-selector" v-for="(item, index) in module.images" :key="index">
<div class="pb-images-selector" v-for="(item, index) in form.images" :key="index">
<div class="selector-head" @click="itemShow(index)">
<div class="left">
<el-tooltip class="icon-rank" effect="dark" content="{{ __('admin/builder.text_drag_sort') }}" placement="left">
@ -57,15 +57,13 @@ Vue.component('module-editor-slideshow', {
data: function () {
return {
// full: true
form: null
}
},
watch: {
module: {
form: {
handler: function (val) {
// console.log(previewWindow)
// $(previewWindow.document).find('.product-description h1').css('font-size', newValue);
this.$emit('on-changed', val);
},
deep: true,
@ -73,22 +71,22 @@ Vue.component('module-editor-slideshow', {
},
created: function () {
// console.log(this.module)
this.form = JSON.parse(JSON.stringify(this.module));
},
methods: {
removeImage(index) {
this.module.images.splice(index, 1);
this.form.images.splice(index, 1);
},
itemShow(index) {
this.module.images.find((e, key) => {if (index != key) return e.show = false});
this.module.images[index].show = !this.module.images[index].show;
this.form.images.find((e, key) => {if (index != key) return e.show = false});
this.form.images[index].show = !this.form.images[index].show;
},
addImage() {
this.module.images.find(e => e.show = false);
this.module.images.push({image: languagesFill('catalog/demo/banner/banner-4-en.jpg'), show: true, link: {type: 'product', value:''}});
this.form.images.find(e => e.show = false);
this.form.images.push({image: languagesFill('catalog/demo/banner/banner-4-en.jpg'), show: true, link: {type: 'product', value:''}});
}
}
});

View File

@ -3,7 +3,7 @@
<div class="module-editor-row">{{ __('admin/builder.text_set_up') }}</div>
<div class="module-edit-group">
<div class="module-edit-title">{{ __('admin/builder.text_module_title') }}</div>
<text-i18n v-model="module.title"></text-i18n>
<text-i18n v-model="form.title"></text-i18n>
</div>
<div class="module-editor-row">{{ __('admin/builder.modules_content') }}</div>
@ -11,7 +11,7 @@
<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-tab-pane
v-for="(item, index) in module.tabs"
v-for="(item, index) in form.tabs"
:key="index"
:label="tabTitleLanguage(item.title)"
:name="index + ''"
@ -76,12 +76,13 @@ Vue.component('module-editor-tab-product', {
keyword: '',
productData: [],
loading: null,
form: null,
editableTabsValue: '0',
}
},
watch: {
module: {
form: {
handler: function (val) {
this.$emit('on-changed', val);
},
@ -94,6 +95,7 @@ Vue.component('module-editor-tab-product', {
},
created: function () {
this.form = JSON.parse(JSON.stringify(this.module));
this.tabsValueProductData();
},
@ -108,12 +110,12 @@ Vue.component('module-editor-tab-product', {
tabsValueProductData() {
var that = this;
if (!this.module.tabs[this.editableTabsValue].products.length) return;
if (!this.form.tabs[this.editableTabsValue].products.length) return;
this.loading = true;
$http.get('products/names?product_ids='+this.module.tabs[this.editableTabsValue].products.join(','), {hload: true}).then((res) => {
$http.get('products/names?product_ids='+this.form.tabs[this.editableTabsValue].products.join(','), {hload: true}).then((res) => {
this.loading = false;
this.module.tabs[this.editableTabsValue].products = res.data.map(e => e.id);
this.form.tabs[this.editableTabsValue].products = res.data.map(e => e.id);
that.productData = res.data;
})
},
@ -125,35 +127,35 @@ Vue.component('module-editor-tab-product', {
},
handleSelect(item) {
if (!this.module.tabs[this.editableTabsValue].products.find(v => v == item.id)) {
this.module.tabs[this.editableTabsValue].products.push(item.id * 1);
if (!this.form.tabs[this.editableTabsValue].products.find(v => v == item.id)) {
this.form.tabs[this.editableTabsValue].products.push(item.id * 1);
this.productData.push(item);
}
this.keyword = ""
},
itemChange(evt) {
this.module.tabs[this.editableTabsValue].products = this.productData.map(e => e.id * 1);
this.form.tabs[this.editableTabsValue].products = this.productData.map(e => e.id * 1);
},
removeProduct(index) {
this.productData.splice(index, 1)
this.module.tabs[this.editableTabsValue].products.splice(index, 1);
this.form.tabs[this.editableTabsValue].products.splice(index, 1);
},
handleTabsEdit(targetName, action) {
if (action === 'add') {
this.module.tabs.push({title: languagesFill('Tab ' + (this.module.tabs.length + 1)), products: []});
this.editableTabsValue = this.module.tabs.length - 1 + '';
this.form.tabs.push({title: languagesFill('Tab ' + (this.form.tabs.length + 1)), products: []});
this.editableTabsValue = this.form.tabs.length - 1 + '';
}
if (action === 'remove') {
let tabs = this.module.tabs;
let tabs = this.form.tabs;
tabs.splice(targetName, 1);
let activeName = this.editableTabsValue == 0 ? '0' : targetName * 1 - 1 + '';
this.editableTabsValue = activeName;
this.module.tabs = tabs.filter(tab => tab.name !== targetName);
this.form.tabs = tabs.filter(tab => tab.name !== targetName);
}
}
}