wip
This commit is contained in:
pushuo
parent
0996412787
commit
4489f28506
|
|
@ -32,6 +32,13 @@ class Editor extends Component
|
|||
*/
|
||||
public function render(): View
|
||||
{
|
||||
return view('design.module.slideshow.editor.index');
|
||||
$data['register'] = [
|
||||
'code' => 'slideshow',
|
||||
'sort' => 0,
|
||||
'name' => '幻灯片模块',
|
||||
'icon' => '',
|
||||
];
|
||||
|
||||
return view('design.module.slideshow.editor.index', $data);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,44 @@ body.page-design .design-box .sidebar-edit-wrap {
|
|||
width: 300px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
body.page-design .design-box .sidebar-edit-wrap .modules-list {
|
||||
background: #e6e9ec;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 3px 30px;
|
||||
}
|
||||
body.page-design .design-box .sidebar-edit-wrap .module-list {
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
body.page-design .design-box .sidebar-edit-wrap .module-list .module-info {
|
||||
background: #fff;
|
||||
color: #556068;
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
body.page-design .design-box .sidebar-edit-wrap .module-list .module-info:hover {
|
||||
color: #0072ff;
|
||||
box-shadow: 0 6px 23px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
body.page-design .design-box .sidebar-edit-wrap .module-list .icon {
|
||||
padding: 7px 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: inline-block;
|
||||
}
|
||||
body.page-design .design-box .sidebar-edit-wrap .module-list .icon img {
|
||||
max-width: 100%;
|
||||
max-height: auto;
|
||||
}
|
||||
body.page-design .design-box .sidebar-edit-wrap .module-list .icon i {
|
||||
font-size: 26px;
|
||||
}
|
||||
body.page-design .design-box .sidebar-edit-wrap .module-list .name {
|
||||
font-size: 12px;
|
||||
height: 27px;
|
||||
overflow: hidden;
|
||||
}
|
||||
body.page-design .design-box .preview-iframe {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,51 @@ body.page-design {
|
|||
// flex: 1;
|
||||
width: 300px;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.modules-list {
|
||||
background: #e6e9ec;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 3px 30px;
|
||||
}
|
||||
|
||||
.module-list {
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.module-info {
|
||||
background: #fff;
|
||||
color: #556068;
|
||||
transition: all .25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: #0072ff;
|
||||
box-shadow: 0 6px 23px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 7px 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: inline-block;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: auto;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 12px;
|
||||
height: 27px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-iframe {
|
||||
|
|
|
|||
|
|
@ -20,15 +20,97 @@
|
|||
|
||||
<body class="page-design">
|
||||
<div class="design-box">
|
||||
<div class="sidebar-edit-wrap">
|
||||
@foreach($editors as $editor)
|
||||
<x-dynamic-component :component="$editor" class="mt-4" />
|
||||
@endforeach
|
||||
<div class="sidebar-edit-wrap" id="app" v-cloak>
|
||||
<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>
|
||||
|
||||
<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"><img src="https://via.placeholder.com/100x100.png/dddddd" class="img-fluid"></div>
|
||||
<div class="name">@{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="preview-iframe">
|
||||
<iframe src="{{ shop_route('home.index') }}" frameborder="0" id="preview-iframe" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@foreach($editors as $editor)
|
||||
<x-dynamic-component :component="$editor" />
|
||||
@endforeach
|
||||
|
||||
<script>
|
||||
let app = new Vue({
|
||||
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: {},
|
||||
// 组件方法
|
||||
methods: {
|
||||
moduleUpdated() {
|
||||
console.log('moduleUpdated')
|
||||
}
|
||||
},
|
||||
// 在实例初始化之后，组件属性计算之前，如data属性等
|
||||
beforeCreate () {
|
||||
},
|
||||
// 在实例创建完成后被立即同步调用
|
||||
created () {
|
||||
},
|
||||
// 在挂载开始之前被调用:相关的 render 函数首次被调用
|
||||
beforeMount () {
|
||||
},
|
||||
// 实例被挂载后调用
|
||||
mounted () {
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -1 +1,32 @@
|
|||
11111
|
||||
<template id="module-editor-slideshow-template">
|
||||
<div>
|
||||
<div><h6>slideshow-template</h6></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
setTimeout(() => {
|
||||
app.source.modules.push(@json($register))
|
||||
}, 0)
|
||||
|
||||
Vue.component('module-editor-slideshow', {
|
||||
template: '#module-editor-slideshow-template',
|
||||
|
||||
props: ['module'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
//
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
console.log(this.module)
|
||||
},
|
||||
|
||||
methods: {
|
||||
//
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,15 @@
|
|||
@section('content')
|
||||
|
||||
|
||||
@foreach($renders as $render)
|
||||
<x-dynamic-component :component="$render"/>
|
||||
@endforeach
|
||||
@foreach($renders as $render)
|
||||
<x-dynamic-component :component="$render"/>
|
||||
@endforeach
|
||||
|
||||
<section class="module-wrap mb-5"><img src="{{ asset('image/default/banner.png') }}" class="img-fluid"></section>
|
||||
{{-- <section class="module-wrap mb-5"><img src="{{ asset('image/default/banner.png') }}" class="img-fluid"></section> --}}
|
||||
{{-- @foreach ($categories as $category)
|
||||
<a href="{{ shop_route('categories.show', $category) }}">{{ $category->description->name }}</a>
|
||||
@endforeach --}}
|
||||
<section class="module-image-plus mb-5">
|
||||
{{-- <section class="module-image-plus mb-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6"><img src="{{ asset('image/default/image_plus_1.png') }}" class="img-fluid"></div>
|
||||
|
|
@ -65,5 +65,5 @@
|
|||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section> --}}
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Reference in New Issue