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

wip

This commit is contained in:
pushuo 2022-07-18 21:16:42 +08:00
parent f28bbbdb92
commit 986d2ba157
6 changed files with 224 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public/build/beike/admin/css/design.css vendored
View File

@ -499,3 +499,49 @@ body.page-design .pb-images-selector .pb-images-list .el-input-group__prepend {
background-color: #f6f6f6;
padding: 10px 20px;
}
.link-dialog-box .module-editor-tab-product-template .tab-info {
margin-top: 10px;
padding: 10px;
background: #f2f2f2;
border-radius: 6px;
}
.link-dialog-box .module-editor-tab-product-template .manufacturer-list > div {
margin-bottom: 10px;
border: 1px solid #f4f4f4;
padding: 5px;
border-radius: 6px;
background: #f4f4f4;
padding-bottom: 8px;
position: relative;
}
.link-dialog-box .module-editor-tab-product-template .manufacturer-list > div:hover .remove-btn {
display: block;
}
.link-dialog-box .module-editor-tab-product-template .manufacturer-list > div .remove-btn {
position: absolute;
display: none;
top: 0;
right: 0;
background: red;
color: #fff;
z-index: 9;
padding: 0 2px;
cursor: pointer;
border-radius: 0 0 0 4px;
}
.link-dialog-box .module-editor-tab-product-template .manufacturer-list > div .remove-btn:hover {
background: #c70000;
}
.link-dialog-box .module-editor-tab-product-template .add-category {
display: flex;
justify-content: flex-end;
}
.link-dialog-box .module-editor-tab-product-template .manufacturers .module-edit-group {
margin-top: 5px;
}
.link-dialog-box .module-editor-tab-product-template .tab-edit-category > .el-tabs__header > .el-tabs__nav-wrap .el-tabs__item {
padding: 0 10px !important;
}
.link-dialog-box .module-editor-tab-product-template .autocomplete-group-wrapper .item-group-wrapper {
background: #fff;
}

66
resources/beike/admin/css/design/app.scss vendored
View File

@ -600,4 +600,70 @@ body.page-design {
.link-dialog-footer {
}
.module-editor-tab-product-template {
.tab-info {
margin-top: 10px;
padding: 10px;
background: #f2f2f2;
border-radius: 6px;
}
.manufacturer-list {
> div {
margin-bottom: 10px;
border: 1px solid #f4f4f4;
padding: 5px;
border-radius: 6px;
background: #f4f4f4;
padding-bottom: 8px;
position: relative;
&:hover {
.remove-btn {
display: block;
}
}
.remove-btn {
position: absolute;
display: none;
top: 0;
right: 0;
background: red;
color: #fff;
z-index: 9;
padding: 0 2px;
cursor: pointer;
border-radius: 0 0 0 4px;
&:hover {
background: #c70000;
}
}
}
}
.add-category {
// margin-top: 10px;
display: flex;
justify-content: flex-end;
}
.manufacturers {
.module-edit-group {
margin-top: 5px;
}
}
.tab-edit-category > .el-tabs__header > .el-tabs__nav-wrap {
.el-tabs__item {
padding: 0 10px !important;
}
}
.autocomplete-group-wrapper {
.item-group-wrapper {
background: #fff;
}
}
}
}

91
resources/beike/admin/views/pages/design/builder/component/text_i18n.blade.php Normal file
View File

@ -0,0 +1,91 @@
<template id="text-i18n-template">
<div class="text-i18n-template">
<el-tabs v-if="languages.length > 1" value="language-{{ current_language_code() }}" :stretch="languages.length > 5 ? true : false" type="card">
<el-tab-pane v-for="(item, index) in languages" :key="index" :label="item.name" :name="'language-' + item.code">
<span slot="label" style="padding: 0 4px; font-size: 12px">@{{ item.name }}</span>
<div class="i18n-inner">
<el-input :type="type" :rows="4" :placeholder="item.name" :key="index" :size="size" v-model="value[item.code]" @input="valueChanged(item.code)"></el-input>
</div>
</el-tab-pane>
</el-tabs>
<div class="i18n-inner" v-else>
<el-input :type="type" :rows="4" :placeholder="languages[0].name" :size="size" v-model="value[languages[0].code]" @input="valueChanged(languages[0].code)"></el-input>
</div>
</div>
</template>
<script type="text/javascript">
Vue.component('text-i18n', {
template: '#text-i18n-template',
props: {
value: {
default: null
},
size: {
default: 'small'
},
type: {
type: String,
default: 'text'
},
},
data: function () {
return {
languages: $languages,
internalValues: {}
}
},
mounted() {
// console.log(this.internalValues)
},
created: function () {
this.languages.forEach(e => {
Vue.set(this.internalValues, e.code, this.value[e.code] || '');
})
this.$emit('input', this.internalValues);
},
methods: {
valueChanged: function (code) {
this.internalValues[code] = this.value[code];
this.$emit('input', this.internalValues);
}
}
});
</script>
<style>
.text-i18n-template .el-tabs__nav {
display: flex;
border-color: #ebecf5;
}
.text-i18n-template .el-tabs__nav > div {
background: #ebecf5;
border-left: 1px solid #d7dbf7 !important;
padding: 0 !important;
flex: 1;
height: 30px;
line-height: 30px;
{% if languages|length < 5 %}
min-width: 50px;
{% endif %}
text-align: center;
}
.text-i18n-template .el-tabs__nav > div:first-of-type {
border-left: none !important;
}
.text-i18n-template .el-tabs__nav > div.is-active {
background: #fff !important;
}
.text-i18n-template .i18n-inner {
margin-top: 5px;
}
</style>

13
resources/beike/admin/views/pages/design/builder/index.blade.php
View File

@ -105,6 +105,7 @@
@include('admin::pages.design.builder.component.image_selector')
@include('admin::pages.design.builder.component.link_selector')
@include('admin::pages.design.builder.component.text_i18n')
<script>
let app = new Vue({
@ -160,16 +161,26 @@
addModuleButtonClicked(code) {
const sourceModule = this.source.modules.find(e => e.code == code)
const module_id = randomString(16)
const _data = {
code: code,
content: sourceModule.make,
module_id: randomString(16),
module_id: module_id,
name: sourceModule.name,
}
$http.post('design/builder/preview?design=1', _data, {hload: true}).then((res) => {
$(previewWindow.document).find('.modules-box').append(res);
this.form.modules.push(_data);
this.design.editingModuleIndex = this.form.modules.length - 1;
this.design.editType = 'module';
setTimeout(() => {
$(previewWindow.document).find("html, body").animate({
scrollTop: $(previewWindow.document).find('#module-' + module_id).offset().top - 30
}, 50);
}, 200)
})
},

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

@ -1,35 +1,12 @@
<template id="module-editor-product-tab-template">
<div class="module-editor-product-tab-template">
<div class="module-editor-title">设置</div>
<template id="module-editor-tab-product-template">
<div class="module-editor-tab-product-template">
<div class="module-editor-row">设置</div>
<div class="module-edit-group">
<div class="module-edit-title">模块标题</div>
<text-i18n v-model="module.title"></text-i18n>
</div>
<div class="module-editor-title">内容</div>
<div class="module-edit-group">
<div class="module-edit-title">选择图片</div>
<div class="pb-images-selector">
<div class="selector-head">
<div class="left">
<img :src="thumbnail(module.image.image[{{ current_language_code() }}], 40, 40)" class="img-responsive">
</div>
<div class="right"><i :class="'fa fa-angle-'+(module.image.show ? 'up' : 'down')"></i></div>
</div>
<div :class="'pb-images-list ' + (module.image.show ? 'active' : '')">
<div class="pb-images-top">
<div class="pb-image-selector-wrapper">
<pb-image-selector v-model="module.image.image"></pb-image-selector>
<div class="tag">建议尺寸: 440 x 1022</div>
</div>
</div>
<link-selector v-model="module.image.link"></link-selector>
</div>
</div>
</div>
<div class="module-editor-row">内容</div>
<div class="module-edit-group">
<div class="module-edit-title">配置商品</div>
<el-tabs v-model="editableTabsValue" class="tab-edit-category" type="card" editable @edit="handleTabsEdit">
@ -88,9 +65,9 @@
</template>
<script type="text/javascript">
Vue.component('module-editor-product-tab', {
Vue.component('module-editor-tab-product', {
delimiters: ['${', '}'],
template: '#module-editor-product-tab-template',
template: '#module-editor-tab-product-template',
props: ['module'],
data: function () {
return {
@ -123,7 +100,7 @@ Vue.component('module-editor-product-tab', {
methods: {
tabTitleLanguage(titles) {
return titles[{{ current_language_code() }}];
return titles['{{ current_language_code() }}'];
},
tabsValueProductData() {

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

@ -14,8 +14,8 @@
<div class="container">
@if ($content['tabs'])
<div class="nav justify-content-center mb-3">
@foreach ($content['tabs'] as $key => $title)
<a class="nav-link {{ $loop->first ? 'active' : '' }}" href="#tab-product-{{ $loop->index }}" data-bs-toggle="tab">{{ $key }}</a>
@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>
@endforeach
</div>
<div class="tab-content">