From 4489f285066876c0db7dd0862460d190fed8cd14 Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Fri, 8 Jul 2022 18:02:49 +0800
Subject: [PATCH] wip

---
 .../View/DesignBuilders/SlideShow/Editor.php  |   9 +-
 .../beike/shop/default/css/design/app.css     |  38 ++++++++
 .../beike/shop/default/css/design/app.scss    |  45 +++++++++
 themes/default/design/builder/index.blade.php |  92 +++++++++++++++++-
 .../design/module/slideshow/editor/icon.png   | Bin 0 -> 2903 bytes
 .../module/slideshow/editor/index.blade.php   |  33 ++++++-
 themes/default/home.blade.php                 |  12 +--
 7 files changed, 216 insertions(+), 13 deletions(-)
 create mode 100644 themes/default/design/module/slideshow/editor/icon.png

diff --git a/beike/Shop/View/DesignBuilders/SlideShow/Editor.php b/beike/Shop/View/DesignBuilders/SlideShow/Editor.php
index 14a26bb3..e0acc9a6 100644
--- a/beike/Shop/View/DesignBuilders/SlideShow/Editor.php
+++ b/beike/Shop/View/DesignBuilders/SlideShow/Editor.php
@@ -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' => '&#xe61b;',
+        ];
+
+        return view('design.module.slideshow.editor.index', $data);
     }
 }
diff --git a/public/build/beike/shop/default/css/design/app.css b/public/build/beike/shop/default/css/design/app.css
index 3c4a5361..d1b40b1f 100644
--- a/public/build/beike/shop/default/css/design/app.css
+++ b/public/build/beike/shop/default/css/design/app.css
@@ -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;
 }
diff --git a/resources/beike/shop/default/css/design/app.scss b/resources/beike/shop/default/css/design/app.scss
index a20dcc0f..6804e957 100644
--- a/resources/beike/shop/default/css/design/app.scss
+++ b/resources/beike/shop/default/css/design/app.scss
@@ -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 {
diff --git a/themes/default/design/builder/index.blade.php b/themes/default/design/builder/index.blade.php
index be648ebe..1426dbe7 100644
--- a/themes/default/design/builder/index.blade.php
+++ b/themes/default/design/builder/index.blade.php
@@ -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>
diff --git a/themes/default/design/module/slideshow/editor/icon.png b/themes/default/design/module/slideshow/editor/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..35ca5ae48f2b70b87d682e10ea25da056b4b6a63
GIT binary patch
literal 2903
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
Y)TllB)Q-ppu<lovLHD2)ZQU*ZFH#H7<p2Nx

literal 0
HcmV?d00001

diff --git a/themes/default/design/module/slideshow/editor/index.blade.php b/themes/default/design/module/slideshow/editor/index.blade.php
index 56b6510f..943b4756 100644
--- a/themes/default/design/module/slideshow/editor/index.blade.php
+++ b/themes/default/design/module/slideshow/editor/index.blade.php
@@ -1 +1,32 @@
-11111
\ No newline at end of file
+<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>
diff --git a/themes/default/home.blade.php b/themes/default/home.blade.php
index 4a3ee1b6..445c434d 100644
--- a/themes/default/home.blade.php
+++ b/themes/default/home.blade.php
@@ -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