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

wip

This commit is contained in:
pushuo 2022-08-08 17:01:15 +08:00
parent a3d2ce92f7
commit 640f8d139a
3 changed files with 91 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
beike/Admin/Http/Controllers/DesignFooterController.php
View File

@ -20,7 +20,7 @@ class DesignFooterController extends Controller
{
$data = [
'languages' => LanguageRepo::all(),
'design_settings' => system_setting('base.design_setting'),
'design_settings' => system_setting('base.footer_setting'),
];
return view('admin::pages.design.builder.footer', $data);
}

4
resources/beike/admin/views/pages/design/builder/component/image_selector.blade.php
View File

@ -23,12 +23,12 @@
</el-tabs>
<div class="i18n-inner" v-else>
<img :src="type == 'image' ? thumbnail(value) : 'image/video.png'" :id="'thumb-' + code" @click="selectButtonClicked" style="max-width: 60px; cursor: pointer;border: 1px solid #eee;">
<img :src="type == 'image' ? thumbnail(value) : 'image/video.png'" @click="selectButtonClicked" style="max-width: 60px; cursor: pointer;border: 1px solid #eee;">
<div class="btns">
<el-button type="primary" size="mini" plain @click="selectButtonClicked">选择</el-button>
<el-button size="mini" plain style="margin-left: 4px;" @click="removeImage">删除</el-button>
</div>
<input type="hidden" value="" v-model="src" :id="'input-' + code">
<input type="hidden" value="" v-model="src">
</div>
</div>
</template>

202
resources/beike/admin/views/pages/design/builder/footer.blade.php
View File

@ -26,29 +26,51 @@
<div class="design-box">
<div class="sidebar-edit-wrap" id="app" v-cloak>
<div class="design-head">
<div v-if="design.editType != 'add'" @click="showAllModuleButtonClicked"><i class="el-icon-back"></i>返回</div>
<div @click="viewHome"><i class="el-icon-view"></i>查看页面</div>
<div @click="saveButtonClicked"><i class="el-icon-check"></i>保存</div>
</div>
<div class="module-edit" v-if="form.modules.length > 0 && design.editType == 'module'">
<component
:is="editingModuleComponent"
:key="design.editingModuleIndex"
:module="form.modules[design.editingModuleIndex].content"
@on-changed="moduleUpdated"
></component>
</div>
<div class="module-edit">
<el-collapse value="intro" @change="footerItemChange" accordion>
<el-collapse-item title="服务图标" name="service_icon">
<div class="module-edit-group">
<div class="module-edit-group">
<div class="module-edit-title">启用</div>
<el-switch v-model="form.services.enable"></el-switch>
</div>
<draggable
ghost-class="dragabble-ghost"
:list="form.services.items"
:options="{animation: 330, handle: '.icon-rank'}"
>
<div class="pb-images-selector" v-for="(item, index) in form.services.items" :key="index">
<div class="selector-head" @click="selectorShow(index)">
<div class="left">
<el-tooltip class="icon-rank" effect="dark" content="拖动排序" placement="left">
<i class="el-icon-rank"></i>
</el-tooltip>
<el-row v-if="design.editType == 'add'" class="modules-list">
<el-col :span="12" v-for="(item, index) in source.modules" :key="index">
<div @click="addModuleButtonClicked(item.code)" class="module-list">
<div class="module-info">
<div class="icon"><i :style="item.style" class="iconfont" v-html="item.icon"></i></div>
<div class="name">@{{ item.name }}</div>
<img :src="thumbnail(item.image, 40, 40)" class="img-responsive">
</div>
{{-- <div class="right"><i :class="'fa fa-angle-'+(item.show ? 'up' : 'down')"></i></div> --}}
<div class="right">
<i :class="'el-icon-arrow-'+(item.show ? 'up' : 'down')"></i>
</div>
</div>
<div :class="'pb-images-list ' + (item.show ? 'active' : '')">
<pb-image-selector v-model="item.image" :is-language="false"></pb-image-selector>
<div class="tag">建议尺寸 100 x 100</div>
<div class="module-edit-title">标题</div>
<text-i18n v-model="item.title"></text-i18n>
<div class="module-edit-title">副标题</div>
<text-i18n v-model="item.sub_title"></text-i18n>
</div>
</div>
</draggable>
</div>
</div>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</div>
</div>
<div class="preview-iframe">
<iframe src="{{ url('/') }}?design=1" frameborder="0" id="preview-iframe" width="100%" height="100%"></iframe>
@ -60,16 +82,20 @@
var $languages = @json($languages);
var $language_id = '{{ locale() }}';
function languagesFill(text) {
var obj = {};
$languages.map(e => {
obj[e.code] = text
})
// function languagesFill(text) {
// var obj = {};
// $languages.map(e => {
// obj[e.code] = text
// })
return obj;
}
// return obj;
// }
Vue.prototype.thumbnail = function thumbnail(image, width, height) {
if (!image) {
return 'image/placeholder.png';
}
return '{{ asset('') }}' + image;
};
@ -86,51 +112,7 @@
app.design.ready = true;
app.design.sidebar = true;
// 编辑模块
$(previewWindow.document).on('click', '.module-edit .edit', function(event) {
const module_id = $(this).parents('.module-item').prop('id').replace('module-', '');
const modules = app.form.modules;
const editingModuleIndex = modules.findIndex(e => e.module_id == module_id);
app.editModuleButtonClicked(editingModuleIndex);
});
// 删除模块
$(previewWindow.document).on('click', '.module-edit .delete', function(event) {
const module_id = $(this).parents('.module-item').prop('id').replace('module-', '');
const editingModuleIndex = app.form.modules.findIndex(e => e.module_id == module_id);
app.design.editType = 'add';
app.design.editingModuleIndex = 0;
$(this).parents('.module-item').remove();
app.form.modules.splice(editingModuleIndex, 1);
});
// 模块位置改变，点击.module-edit .up或者.down
$(previewWindow.document).on('click', '.module-edit .up, .module-edit .down', function(event) {
const module_id = $(this).parents('.module-item').prop('id').replace('module-', '');
const modules = app.form.modules;
const editingModuleIndex = modules.findIndex(e => e.module_id == module_id);
const up = $(this).hasClass('up');
app.design.editType = 'add';
app.design.editingModuleIndex = 0;
if (up) {
if (editingModuleIndex > 0) {
const module = modules[editingModuleIndex];
modules.splice(editingModuleIndex, 1);
modules.splice(editingModuleIndex - 1, 0, module);
// dom操作
$(this).parents('.module-item').insertBefore($(this).parents('.module-item').prev());
}
} else {
if (editingModuleIndex < modules.length - 1) {
const module = modules[editingModuleIndex];
modules.splice(editingModuleIndex, 1);
modules.splice(editingModuleIndex + 1, 0, module);
// dom操作
$(this).parents('.module-item').insertAfter($(this).parents('.module-item').next());
}
}
app.form.modules = modules;
});
});
</script>
@ -143,40 +125,19 @@
el: '#app',
data: {
form: {
modules: [
// {"content":{"style":{"background_color":""},"full":true,"floor":{"2":"","3":""},"images":[{"image":{"2":"catalog/demo/slideshow/2.jpg","3":"catalog/demo/slideshow/2.jpg"},"show":true,"link":{"type":"product","value":"","link":""}},{"image":{"2":"catalog/demo/slideshow/1.jpg","3":"catalog/demo/slideshow/1.jpg"},"show":false,"link":{"type":"product","value":"","link":""}}]},"code":"slideshow","name":"幻灯片","module_id":"b0448efb0989"}
]
},
design: {
type: 'pc',
editType: 'add',
sidebar: false,
editingModuleIndex: 0,
ready: false,
moduleLoadCount: 0, // 第一次选择已配置模块时，不需要请求数据，
},
source: {
modules: [],
config: []
},
},
// 计算属性
computed: {
// 编辑中的模块编辑组件
editingModuleComponent() {
return 'module-editor-' + this.editingModuleCode.replace('_', '-');
},
// 编辑中的模块 code
editingModuleCode() {
return this.form.modules[this.design.editingModuleIndex].code;
},
// editingConfigCodeFormat() {
// return 'config-' + this.config.editingConfigCode;
// },
},
// 侦听器
watch: {},
@ -190,31 +151,38 @@
})
},
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: 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)
})
footerItemChange(val) {
// $footer = $("#preview-iframe").contents().find('footer');
// $footer.find("div").removeClass('footer-active');
// if (!val) return;
// $footer.find(`.${val}`).addClass('footer-active');
},
// 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: 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)
// })
// },
// 编辑模块
editModuleButtonClicked(index) {
this.design.editingModuleIndex = index;
@ -227,6 +195,12 @@
})
},
selectorShow(index) {
this.form.services.items.find((e, key) => {if (index != key) return e.show = false});
this.form.services.items[index].show = !this.form.services.items[index].show;
this.$forceUpdate();
},
exitDesign() {
history.back();
},